vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 14:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added support for prediction when dragging a node

Browse Source
This commit is contained in:
Gonzalo Bellver 2012-02-02 11:30:12 -03:00
parent cb23c48740
commit d632a079b1
6 changed files with 153 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mindplot/src/main/javascript/Designer.js
View File

@ -323,7 +323,7 @@ mindplot.Designer = new Class({
// Create a new node ...
var layoutManager = this._eventBussDispatcher.getLayoutManager();
var result = layoutManager.predict(topic.getId(), null, mousePos);
var result = layoutManager.predict(topic.getId(), null, mousePos);
childModel.setOrder(result.order);
var position = result.position;

2
mindplot/src/main/javascript/DragTopic.js
View File

@ -41,7 +41,7 @@ mindplot.DragTopic = new Class({
if (this.isFreeLayoutOn() && this.isConnected()) {
var _layoutManager = this._layoutManager;
var par = this.getConnectedToTopic();
position = _layoutManager.predict(par.getId(), null, position, true).position;
position = _layoutManager.predict(par.getId(), this._draggedNode.getId(), position, true).position;
}
this._position.setValue(position.x, position.y);

59
mindplot/src/main/javascript/layout/BalancedSorter.js
View File

@ -38,9 +38,19 @@ mindplot.layout.BalancedSorter = new Class({
return {order:0, position:{x: xPos, y:position.y}};
}
// Regular node
var rootNode = graph.getRootNode(parent);
// If it is a dragged node...
if (node) {
var nodeDirection = this._getRelativeDirection(rootNode.getPosition(), node.getPosition());
var positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
var siblings = graph.getSiblings(node);
if (siblings.length == 0 && nodeDirection == positionDirection) {
return [node.getOrder(), node.getPosition()];
}
}
if (!position) {
var right = this._getChildrenForOrder(parent, graph, 0);
var left = this._getChildrenForOrder(parent, graph, 1);
@ -48,14 +58,17 @@ mindplot.layout.BalancedSorter = new Class({
// Filter nodes on one side..
var order = position ? (position.x > rootNode.getPosition().x ? 0 : 1) : ((right.length - left.length) > 0 ? 1 : 0);
var direction = order%2 == 0 ? 1 : -1;
var children = this._getChildrenForOrder(parent, graph, order);
// Exclude the dragged node (if set)
var children = this._getChildrenForOrder(parent, graph, order).filter(function(child) {
return child != node;
});
// No children?
if (children.length == 0) {
return [order, {x:parent.getPosition().x + direction * (parent.getSize().width + mindplot.layout.BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2), y:parent.getPosition().y}];
}
// Try to fit within ...
var result = null;
var last = children.getLast();
@ -166,24 +179,11 @@ mindplot.layout.BalancedSorter = new Class({
return result;
},
_getChildrenForSide: function(parent, graph, position) {
position = position || {x: parent.getPosition().x + 1, y:parent.getPosition().y + 1};
var rootPosition = graph.getRootNode(parent).getPosition();
return graph.getChildren(parent).filter(function(child) {
return position.x > rootPosition.x ? child.getPosition().x > rootPosition.x : child.getPosition().x < rootPosition.x;
});
},
_getChildrenForOrder: function(parent, graph, order) {
return this._getSortedChildren(graph, parent).filter(function(node) {
return node.getOrder() % 2 == order % 2;
});
},
verify:function(treeSet, node) {
// Check that all is consistent ...
var children = this._getChildrenForOrder(node, treeSet, node.getOrder());
// All odd ordered nodes should be "continuous" by themselves
// All even numbered nodes should be "continuous" by themselves
var factor = node.getOrder() % 2 == 0 ? 2 : 1;
@ -201,8 +201,31 @@ mindplot.layout.BalancedSorter = new Class({
return "Balanced Sorter";
},
_getVerticalPadding:function() {
_getOrderForPosition: function(rootNode, position) {
return position.x > rootNode.getPosition().x ? 0 : 1;
},
_getChildrenForSide: function(parent, graph, position) {
position = position || {x: parent.getPosition().x + 1, y:parent.getPosition().y + 1};
var rootPosition = graph.getRootNode(parent).getPosition();
return graph.getChildren(parent).filter(function(child) {
return position.x > rootPosition.x ? child.getPosition().x > rootPosition.x : child.getPosition().x < rootPosition.x;
});
},
_getChildrenForOrder: function (parent, graph, order) {
return this._getSortedChildren(graph, parent).filter(function(child) {
return child.getOrder() % 2 == order % 2;
});
},
_getVerticalPadding: function() {
return mindplot.layout.BalancedSorter.INTERNODE_VERTICAL_PADDING;
},
_getRelativeDirection: function(reference, position) {
var offset = position.x - reference.x;
return offset > 0 ? 1 : (offset < 0 ? -1 : 0);
}
});

6
mindplot/src/main/javascript/layout/LayoutManager.js
View File

@ -106,9 +106,13 @@ mindplot.layout.LayoutManager = new Class({
$assert($defined(parentId), "parentId can not be null");
var parent = this._treeSet.find(parentId);
var node = nodeId == null ? null : this._treeSet.find(nodeId);
var node = nodeId ? this._treeSet.find(nodeId) : null;
var sorter = parent.getSorter();
var result = sorter.predict(this._treeSet, parent, node, position, free);
$assert(result[0] != null, "Prediction order cannot be null");
$assert(result[1] != null, "Prediction position cannot be null");
$assert(result[1].x != null && result[1].y != null, "Prediction position is not valid");
return {order:result[0],position:result[1]};
},

6
mindplot/src/test/javascript/static/layout.html
View File

@ -116,8 +116,10 @@
<div id="testBalancedPredict4"></div>
<div id="testBalancedPredict5"></div>
<h3>testBalancedSingleNodePredict</h3>
<div id="testBalancedSingleNodePredict1"></div>
<h3>testBalancedNodeDragPredict</h3>
<div id="testBalancedNodeDragPredict1"></div>
<div id="testBalancedNodeDragPredict2"></div>
<div id="testBalancedNodeDragPredict3"></div>
</div>
<div id="symmetricTest" style="display: none;">

123
mindplot/src/test/javascript/static/test/BalancedTestSuite.js
View File

@ -23,7 +23,7 @@ mindplot.layout.BalancedTestSuite = new Class({
this.testBalanced();
this.testBalancedPredict();
this.testBalancedSingleNodePredict();
this.testBalancedNodeDragPredict();
},
testBalanced: function() {
@ -276,34 +276,113 @@ mindplot.layout.BalancedTestSuite = new Class({
console.log("OK!\n\n");
},
testBalancedSingleNodePredict: function() {
console.log("testBalancedSingleNodePredict:");
testBalancedNodeDragPredict: function() {
console.log("testBalancedNodeDragPredict:");
var position = {x:0, y:0};
var manager = new mindplot.layout.LayoutManager(0, mindplot.layout.TestSuite.ROOT_NODE_SIZE);
// Graph 1
manager.addNode(1, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(0,1,0);
manager.layout();
var graph = manager.plot("testBalancedSingleNodePredict1", {width:800, height:400});
var graph1 = manager.plot("testBalancedNodeDragPredict1", {width:800, height:400});
var prediction1 = manager.predict(0, null, {x:50, y:50});
this._plotPrediction(graph, prediction1);
var prediction2 = manager.predict(0, null, {x:50, y:-50});
this._plotPrediction(graph, prediction2);
var prediction3 = manager.predict(0, null, {x:-50, y:50});
this._plotPrediction(graph, prediction3);
var prediction4 = manager.predict(0, null, {x:-50, y:-50});
this._plotPrediction(graph, prediction4);
var prediction1a = manager.predict(0, 1, {x:50, y:50});
this._plotPrediction(graph1, prediction1a);
$assert(prediction1a.position.x == manager.find(1).getPosition().x &&
prediction1a.position.y == manager.find(1).getPosition().y,
"Prediction position should be the same as node 1");
$assert(prediction1a.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
// Only one postion should be predicted for this scenario
//TODO(gb): Fix this. It's not working
// $assert(prediction1.position.x == prediction2.position.x &&
// prediction2.position.x == prediction3.position.x &&
// prediction3.position.x == prediction4.position.x,
// "Only one position should be predicted for this scenario");
// $assert(prediction1.position.y == prediction2.position.y &&
// prediction2.position.y == prediction3.position.y &&
// prediction3.position.y == prediction4.position.y,
// "Only one position should be predicted for this scenario");
var prediction1b = manager.predict(0, 1, {x:50, y:-50});
this._plotPrediction(graph1, prediction1b);
$assert(prediction1b.position.x == manager.find(1).getPosition().x &&
prediction1b.position.y == manager.find(1).getPosition().y,
"Prediction position should be the same as node 1");
$assert(prediction1b.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
var prediction1c = manager.predict(0, 1, {x:-50, y:50});
this._plotPrediction(graph1, prediction1c);
$assert(prediction1c.position.x < manager.find(0).getPosition().x &&
prediction1c.position.y == manager.find(0).getPosition().y, "Prediction is incorrectly positioned");
$assert(prediction1c.order == 1, "Prediction order should be the same as node 1");
var prediction1d = manager.predict(0, 1, {x:-50, y:-50});
this._plotPrediction(graph1, prediction1d);
$assert(prediction1d.position.x < manager.find(0).getPosition().x &&
prediction1d.position.y == manager.find(0).getPosition().y, "Prediction is incorrectly positioned");
$assert(prediction1d.order == 1, "Prediction order should be the same as node 1");
// Graph 2
manager.disconnectNode(1);
manager.connectNode(0, 1, 1);
manager.layout();
var graph2 = manager.plot("testBalancedNodeDragPredict2", {width:800, height:400});
var prediction2a = manager.predict(0, 1, {x:50, y:50});
this._plotPrediction(graph2, prediction2a);
$assert(prediction2a.position.x > manager.find(0).getPosition().x &&
prediction2a.position.y == manager.find(0).getPosition().y, "Prediction is positioned incorrectly");
$assert(prediction2a.order == 0, "Prediction order should be 0");
var prediction2b = manager.predict(0, 1, {x:50, y:-50});
this._plotPrediction(graph2, prediction2b);
$assert(prediction2b.position.x > manager.find(0).getPosition().x &&
prediction2b.position.y == manager.find(0).getPosition().y, "Prediction is positioned incorrectly");
$assert(prediction2b.order == 0, "Prediction order should be 0");
var prediction2c = manager.predict(0, 1, {x:-50, y:50});
this._plotPrediction(graph2, prediction2c);
$assert(prediction2c.position.x == manager.find(1).getPosition().x &&
prediction2c.position.y == manager.find(1).getPosition().y,
"Prediction position should be the same as node 1");
$assert(prediction2c.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
var prediction2d = manager.predict(0, 1, {x:-50, y:-50});
this._plotPrediction(graph2, prediction2d);
$assert(prediction2d.position.x == manager.find(1).getPosition().x &&
prediction2d.position.y == manager.find(1).getPosition().y,
"Prediction position should be the same as node 1");
$assert(prediction2d.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
// Graph 3
manager.disconnectNode(1);
manager.connectNode(0, 1, 0);
manager.addNode(2, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(0,2,2);
manager.layout();
var graph3 = manager.plot("testBalancedNodeDragPredict3", {width:800, height:400});
var prediction3a = manager.predict(0, 1, {x:50, y:50});
this._plotPrediction(graph3, prediction3a);
$assert(prediction3a.position.x == manager.find(2).getPosition().x &&
prediction3a.position.y > manager.find(2).getPosition().y, "Prediction is incorrectly positioned");
$assert(prediction3a.order == 4, "Prediction order should be 4");
var prediction3b = manager.predict(0, 1, {x:50, y:-50});
this._plotPrediction(graph3, prediction3b);
$assert(prediction3b.position.x == manager.find(1).getPosition().x &&
prediction3b.position.y == manager.find(1).getPosition().y &&
prediction3b.order == manager.find(1).getOrder(), "Prediction should be the exact same as dragged node");
var prediction3c = manager.predict(0, 1, {x:-50, y:50});
this._plotPrediction(graph3, prediction3c);
$assert(prediction3c.position.x < manager.find(0).getPosition().x &&
prediction3c.position.y == manager.find(0).getPosition().y, "Prediction is incorrectly positioned");
$assert(prediction3c.order == 1, "Prediction order should be 1");
var prediction3d = manager.predict(0, 1, {x:-50, y:-50});
this._plotPrediction(graph3, prediction3d);
$assert(prediction3d.position.x < manager.find(0).getPosition().x &&
prediction3d.position.y == manager.find(0).getPosition().y, "Prediction is incorrectly positioned");
$assert(prediction3d.order == 1, "Prediction order should be 1");
var prediction3e = manager.predict(0, 1, {x:50, y:0});
this._plotPrediction(graph3, prediction3e);
$assert(prediction3e.position.x == manager.find(1).getPosition().x &&
prediction3e.position.y == manager.find(1).getPosition().y,
"Prediction position should be the same as node 1");
$assert(prediction3e.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
console.log("OK!\n\n");
}
});