Visual representation of nodes. Symetric sorter updated

mindplot/src/main/javascript/nlayout/ChildrenSorterStrategy.js

@@ -25,6 +25,10 @@ mindplot.nlayout.ChildrenSorterStrategy = new Class({
 
     verify:function(treeSet, node) {
         throw "Method must be implemented";
+    },
+
+    toString:function() {
+        throw "Method must be implemented: print name";
     }
 
 });

mindplot/src/main/javascript/nlayout/GridSorter.js

@@ -1,5 +1,9 @@
 mindplot.nlayout.GridSorter = new Class({
-    Extends: mindplot.nlayout.SymetricSorder
+    Extends: mindplot.nlayout.SymetricSorder,
+
+    toString:function() {
+        return "Grid Sorter";
+    }
 
 });
 

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

@@ -69,11 +69,11 @@ mindplot.nlayout.LayoutManager = new Class({
         console.log(this._treeSet.dump());
     },
 
-    plot: function(position) {
+    plot: function(containerId, size) {
-        var size = {w:200,h:200};
+        $assert(containerId, "containerId cannot be null");
-        var padding = 20,
+        size = size || {w:200,h:200};
-            squaresize = 20;
+        var squaresize = 10;
-        var canvas = Raphael(position.x + padding, position.y + padding, size.w, size.h);
+        var canvas = Raphael(containerId, size.w, size.h);
         canvas.drawGrid(0, 0, size.w, size.h, size.w/squaresize, size.h/squaresize);
         this._treeSet.plot(canvas);
     },

mindplot/src/main/javascript/nlayout/OriginalLayout.js

@@ -48,12 +48,15 @@ mindplot.nlayout.OriginalLayout = new Class({
     layout: function() {
         var roots = this._treeSet.getTreeRoots();
         roots.forEach(function(node) {
+            console.log('node = ' + node.getId());     //TODO(gb): Remove trace!!!
 
             // Calculate all node heights ...
             var sorter = node.getSorter();
+            console.log('sorter = ' + sorter);     //TODO(gb): Remove trace!!!
 
             // @Todo: This must not be implemented in this way.Each sorter could have different notion of heights ...
             var heightById = sorter.computeChildrenIdByHeights(this._treeSet, node);
+            console.log('heightById = ' + heightById[0]);     //TODO(gb): Remove trace!!!
 
             this._layoutChildren(node, heightById);
         }, this);

mindplot/src/main/javascript/nlayout/RootedTreeSet.js

@@ -128,9 +128,12 @@ mindplot.nlayout.RootedTreeSet = new Class({
 
     _plot: function(canvas, node, root) {
         var children = this.getChildren(node);
-        var cx = canvas.width / 2;
+        var cx = node.getPosition().x + canvas.width/2 - node.getSize().width/2;
-        var cy = canvas.height / 2;
+        var cy = node.getPosition().y + canvas.height/2 - node.getSize().height/2;
-        var rect = canvas.rect(cx + node.getPosition().x, cy + node.getPosition().y, node.getSize().width, node.getSize().height);
+        var rect = canvas.rect(cx, cy, node.getSize().width, node.getSize().height);
+        var order = node.getOrder() == null ? "r" : node.getOrder();
+        var text = canvas.text(node.getPosition().x + canvas.width/2, node.getPosition().y + canvas.height/2, node.getId() + "[" + order + "]");
+        text.attr('fill', '#FFF');
         var fillColor = this._rootNodes.contains(node) ? "#000" : "#c00";
         rect.attr('fill', fillColor);
 

mindplot/src/main/javascript/nlayout/SymetricSorter.js

@@ -119,6 +119,7 @@ mindplot.nlayout.SymetricSorder = new Class({
             return {id:child.getId(),height:this._computeChildrenHeight(treeSet, child)};
         }.bind(this));
 
+
         // Compute the center of the branch ...
         var totalHeight = 0;
         heights.forEach(function(elem) {
@@ -131,8 +132,8 @@ mindplot.nlayout.SymetricSorder = new Class({
         for (var i = 0; i < heights.length; i++) {
             ysum = ysum - heights[i].height;
 
-            var yOffset = ysum + mindplot.nlayout.SymetricSorder.INTERNODE_VERTICAL_PADDING;
+            var yOffset = ysum +  heights[i].height/2;
-            var xOffset = mindplot.nlayout.SymetricSorder.INTERNODE_HORIZONTAL_PADDING;
+            var xOffset = node.getSize().width + mindplot.nlayout.SymetricSorder.INTERNODE_HORIZONTAL_PADDING;
 
             $assert(!isNaN(xOffset), "xOffset can not be null");
             $assert(!isNaN(yOffset), "yOffset can not be null");
@@ -141,6 +142,10 @@ mindplot.nlayout.SymetricSorder = new Class({
 
         }
         return result;
+    },
+
+    toString:function() {
+        return "Symmetric Sorter";
     }
 });
 

mindplot/src/main/javascript/nlayout/TestSuite.js

@@ -1,8 +1,8 @@
 mindplot.nlayout.TestSuite = new Class({
     Extends: mindplot.nlayout.ChildrenSorterStrategy,
     initialize:function() {
-//        Asset.javascript("raphael-min.js", {id: "raphael"});
         this.testAligned();
+        this.testSymmetry();
         this.testEvents();
         this.testEventsComplex();
         this.testDisconnect();
@@ -11,7 +11,7 @@ mindplot.nlayout.TestSuite = new Class({
 
     testAligned: function() {
 
-        var size = {width:30,height:30};
+        var size = {width:25,height:25};
         var position = {x:0,y:0};
         var manager = new mindplot.nlayout.LayoutManager(0, size);
 
@@ -21,11 +21,43 @@ mindplot.nlayout.TestSuite = new Class({
         manager.layout();
         manager.dump();
 
-        manager.plot({x:0,y:0});
+        manager.plot("testAligned");
+    },
+
+    testSymmetry: function() {
+        var size = {width:25,height:25};
+        var position = {x:0,y:0};
+        var manager = new mindplot.nlayout.LayoutManager(0, size);
+
+        manager.addNode(1, size, position);
+        manager.addNode(2, size, position);
+        manager.addNode(3, size, position);
+        manager.addNode(4, size, position);
+        manager.addNode(5, size, position);
+        manager.addNode(6, size, position);
+        manager.addNode(7, size, position);
+        manager.addNode(8, size, position);
+        manager.addNode(9, size, position);
+        manager.addNode(10, size, position);
+        manager.connectNode(0, 1, 0);
+        manager.connectNode(0, 2, 1);
+        manager.connectNode(0, 3, 2);
+        manager.connectNode(0, 4, 3);
+        manager.connectNode(0, 5, 4);
+        manager.connectNode(5, 6, 0);
+        manager.connectNode(5, 7, 1);
+        manager.connectNode(7, 8, 0);
+        manager.connectNode(8, 9, 0);
+        manager.connectNode(1, 10, 0);
+
+        manager.layout();
+        manager.dump();
+
+        manager.plot("testSymmetry",{w:400, h:300});
     },
 
     testEvents: function() {
-        var size = {width:10,height:10};
+        var size = {width:25,height:25};
         var position = {x:0,y:0};
         var manager = new mindplot.nlayout.LayoutManager(0, size);
 
@@ -49,19 +81,19 @@ mindplot.nlayout.TestSuite = new Class({
         });
         manager.layout(true);
         manager.dump();
-        manager.plot({x:0,y:220});
+        manager.plot("testEvents1");
 
         // Ok, if a new node is added, this an event should be fired  ...
         console.log("---- Layout without changes should not affect the tree  ---");
         events.empty();
         manager.layout(true);
-        manager.plot({x:220,y:220});
+        manager.plot("testEvents2");
 
         $assert(events.length == 0, "Unnecessary tree updated.");
     },
 
     testEventsComplex: function() {
-        var size = {width:10,height:10};
+        var size = {width:25,height:25};
         var position = {x:0,y:0};
         var manager = new mindplot.nlayout.LayoutManager(0, size);
 
@@ -85,7 +117,7 @@ mindplot.nlayout.TestSuite = new Class({
         // Reposition ...
         manager.layout(true);
         manager.dump();
-        manager.plot({x:0,y:440});
+        manager.plot("testEventsComplex1");
 
         // Add a new node and connect. Only children nodes should be affected.
         console.log("---- Connect a new node  ---");
@@ -94,14 +126,14 @@ mindplot.nlayout.TestSuite = new Class({
         manager.connectNode(1, 4, 2);
         manager.layout(true);
         manager.dump();
-        manager.plot({x:220,y:440});
+        manager.plot("testEventsComplex2");
 
         // @todo: This seems no to be ok...
         $assert(events.length == 4, "Only 3 nodes should be repositioned.");
     },
 
     testDisconnect: function() {
-        var size = {width:10,height:10};
+        var size = {width:25,height:25};
         var position = {x:0,y:0};
         var manager = new mindplot.nlayout.LayoutManager(0, size);
 
@@ -126,7 +158,7 @@ mindplot.nlayout.TestSuite = new Class({
 
         manager.layout(true);
         manager.dump();
-        manager.plot({x:0,y:660});
+        manager.plot("testDisconnect1", {w:300, h:200});
 
         // Now, disconnect one node ...
         console.log("--- Disconnect a single node ---");
@@ -134,7 +166,7 @@ mindplot.nlayout.TestSuite = new Class({
         manager.disconnectNode(2);
         manager.layout(true);
         manager.dump();
-        manager.plot({x:220,y:660});
+        manager.plot("testDisconnect2", {w:300, h:200});
 
         $assert(events.some(
             function(event) {
@@ -146,7 +178,7 @@ mindplot.nlayout.TestSuite = new Class({
         manager.disconnectNode(3);
         manager.layout(true);
         manager.dump();
-        manager.plot({x:440,y:660});
+        manager.plot("testDisconnect3", {w:300, h:200});
 
         $assert(events.some(
             function(event) {
@@ -155,7 +187,7 @@ mindplot.nlayout.TestSuite = new Class({
     },
 
     testRemoveNode: function() {
-        var size = {width:10,height:10};
+        var size = {width:25,height:25};
         var position = {x:0,y:0};
         var manager = new mindplot.nlayout.LayoutManager(0, size);
 
@@ -179,14 +211,14 @@ mindplot.nlayout.TestSuite = new Class({
         });
         manager.layout(true);
         manager.dump();
-        manager.plot({x:0,y:880});
+        manager.plot("testRemoveNode1", {w:300, h:200});
 
         // Test removal of a connected node ...
         console.log("--- Remove node 3  ---");
         manager.removeNode(3);
         manager.layout(true);
         manager.dump();
-        manager.plot({x:220,y:880});
+        manager.plot("testRemoveNode2");
     }
 
 

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

@@ -29,9 +29,42 @@
         })
     </script>
 
+    <style type="text/css">
+        div.col {
+            float: left;
+            margin-right: 20px;
+        }
+        div.col.last {
+            float: none;
+        }
+    </style>
+
 </head>
 <body>
 
+<h2>testAligned:</h2>
+<div id="testAligned"></div>
+
+<h2>testSymmetry:</h2>
+<div id="testSymmetry"></div>
+
+<h2>testEvents:</h2>
+<div id="testEvents1" class="col"></div>
+<div id="testEvents2" class="col last"></div>
+
+<h2>testEventsComplex:</h2>
+<div id="testEventsComplex1" class="col"></div>
+<div id="testEventsComplex2" class="col last"></div>
+
+<h2>testDisconnect:</h2>
+<div id="testDisconnect1" class="col"></div>
+<div id="testDisconnect2" class="col"></div>
+<div id="testDisconnect3" class="col last"></div>
+
+<h2>testRemoveNode:</h2>
+<div id="testRemoveNode1" class="col"></div>
+<div id="testRemoveNode2" class="col last"></div>
+
 
 </body>
 </html>