Added support for prediction when dragging a node

mindplot/src/main/javascript/DragTopic.js

@@ -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);
 

mindplot/src/main/javascript/layout/BalancedSorter.js

@@ -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);
     }
 
 });

mindplot/src/main/javascript/layout/LayoutManager.js

@@ -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]};
     },
 

mindplot/src/test/javascript/static/layout.html

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

mindplot/src/test/javascript/static/test/BalancedTestSuite.js

@@ -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() {
+    testBalancedNodeDragPredict: function() {
-        console.log("testBalancedSingleNodePredict:");
+        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});
+        var prediction1a = manager.predict(0, 1, {x:50, y:50});
-        this._plotPrediction(graph, prediction1);
+        this._plotPrediction(graph1, prediction1a);
-        var prediction2 = manager.predict(0, null, {x:50, y:-50});
+        $assert(prediction1a.position.x == manager.find(1).getPosition().x &&
-        this._plotPrediction(graph, prediction2);
+            prediction1a.position.y == manager.find(1).getPosition().y,
-        var prediction3 = manager.predict(0, null, {x:-50, y:50});
+            "Prediction position should be the same as node 1");
-        this._plotPrediction(graph, prediction3);
+        $assert(prediction1a.order == manager.find(1).getOrder(), "Prediction order should be the same as node 1");
-        var prediction4 = manager.predict(0, null, {x:-50, y:-50});
-        this._plotPrediction(graph, prediction4);
 
-        // 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");
     }
 });