mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-22 14:17:57 +01:00
Added support for prediction when dragging a node
This commit is contained in:
Gonzalo Bellver
parent
cb23c48740
commit
d632a079b1
@ -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);
|
||||
|
||||
|
||||
@ -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";
|
||||
},
|
||||
|
||||
_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);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -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]};
|
||||
},
|
||||
|
||||
|
||||
@ -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;">
|
||||
|
||||
@ -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");
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user