Basic plotting using Raphael

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

@@ -69,6 +69,15 @@ mindplot.nlayout.LayoutManager = new Class({
         console.log(this._treeSet.dump());
     },
 
+    plot: function(position) {
+        var size = {w:200,h:200};
+        var padding = 20,
+            squaresize = 20;
+        var canvas = Raphael(position.x + padding, position.y + padding, size.w, size.h);
+        canvas.drawGrid(0, 0, size.w, size.h, size.w/squaresize, size.h/squaresize);
+        this._treeSet.plot(canvas);
+    },
+
     layout: function(fireEvents) {
         // File repositioning ...
         this._layout.layout();

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

@@ -110,7 +110,7 @@ mindplot.nlayout.Node = new Class({
 
 
     toString: function() {
-        return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}]";
+        return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}, size: {" + this.getSize().width + "," + this.getSize().height + "}";
     }
 
 });

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

@@ -118,6 +118,28 @@ mindplot.nlayout.RootedTreeSet = new Class({
         return result;
     },
 
+    plot: function(canvas) {
+        var branches = this._rootNodes;
+        for (var i=0; i<branches.length; i++) {
+            var branch = branches[i];
+            this._plot(canvas, branch);
+        }
+    },
+
+    _plot: function(canvas, node, root) {
+        var children = this.getChildren(node);
+        var cx = canvas.width / 2;
+        var cy = canvas.height / 2;
+        var rect = canvas.rect(cx + node.getPosition().x, cy + node.getPosition().y, node.getSize().width, node.getSize().height);
+        var fillColor = this._rootNodes.contains(node) ? "#000" : "#c00";
+        rect.attr('fill', fillColor);
+
+        for (var i=0; i<children.length; i++) {
+            var child = children[i];
+            this._plot(canvas, child);
+        }
+    },
+
     updateBranchPosition : function(node, position) {
 
         var oldPos = node.getPosition();

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

@@ -1,7 +1,7 @@
 mindplot.nlayout.TestSuite = new Class({
     Extends: mindplot.nlayout.ChildrenSorterStrategy,
     initialize:function() {
-
+//        Asset.javascript("raphael-min.js", {id: "raphael"});
         this.testAligned();
         this.testEvents();
         this.testEventsComplex();
@@ -20,6 +20,8 @@ mindplot.nlayout.TestSuite = new Class({
 
         manager.layout();
         manager.dump();
+
+        manager.plot({x:0,y:0});
     },
 
     testEvents: function() {
@@ -47,11 +49,13 @@ mindplot.nlayout.TestSuite = new Class({
         });
         manager.layout(true);
         manager.dump();
+        manager.plot({x:0,y:220});
 
         // 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});
 
         $assert(events.length == 0, "Unnecessary tree updated.");
     },
@@ -81,6 +85,7 @@ mindplot.nlayout.TestSuite = new Class({
         // Reposition ...
         manager.layout(true);
         manager.dump();
+        manager.plot({x:0,y:440});
 
         // Add a new node and connect. Only children nodes should be affected.
         console.log("---- Connect a new node  ---");
@@ -89,6 +94,7 @@ mindplot.nlayout.TestSuite = new Class({
         manager.connectNode(1, 4, 2);
         manager.layout(true);
         manager.dump();
+        manager.plot({x:220,y:440});
 
         // @todo: This seems no to be ok...
         $assert(events.length == 4, "Only 3 nodes should be repositioned.");
@@ -120,6 +126,7 @@ mindplot.nlayout.TestSuite = new Class({
 
         manager.layout(true);
         manager.dump();
+        manager.plot({x:0,y:660});
 
         // Now, disconnect one node ...
         console.log("--- Disconnect a single node ---");
@@ -127,6 +134,7 @@ mindplot.nlayout.TestSuite = new Class({
         manager.disconnectNode(2);
         manager.layout(true);
         manager.dump();
+        manager.plot({x:220,y:660});
 
         $assert(events.some(
             function(event) {
@@ -138,6 +146,7 @@ mindplot.nlayout.TestSuite = new Class({
         manager.disconnectNode(3);
         manager.layout(true);
         manager.dump();
+        manager.plot({x:440,y:660});
 
         $assert(events.some(
             function(event) {
@@ -170,12 +179,14 @@ mindplot.nlayout.TestSuite = new Class({
         });
         manager.layout(true);
         manager.dump();
+        manager.plot({x:0,y:880});
 
         // 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});
     }
 
 

mindplot/src/main/javascript/nlayout/raphael-plugins.js

@@ -0,0 +1,30 @@
+Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
+    color = color || "#999";
+    var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
+        rowHeight = h / hv,
+        columnWidth = w / wv;
+    for (var i = 0; i < hv + 1; i++) {
+        var offset = y + i * rowHeight;
+        path = this.path(["M", x, offset, "L", x + w, y + i * rowHeight]);
+        if (offset == 0 || offset == h) {
+            path.attr({stroke: "#000"});
+        } else if (offset == h/2) {
+            path.attr({stroke: "#c00"})
+        } else {
+            path.attr({stroke: "#999"})
+        }
+    }
+    for (var i = 0; i < wv + 1; i++) {
+        var offset = x + i * columnWidth;
+        path = this.path(["M", offset, y, "L", x + i * columnWidth, y + h]);
+        if (offset == 0 || offset == w) {
+            path.attr({stroke: "#000"});
+        } else if (offset == w/2) {
+            path.attr({stroke: "#c00"})
+        } else {
+            path.attr({stroke: "#999"})
+        }
+    }
+//    return this.path(path.join(",")).attr({stroke: color});
+    return this.path;
+};

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

@@ -2,8 +2,7 @@
 
 <html>
 <head>
-    <script type='text/javascript'
-            src='../../../main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
+    <script type='text/javascript' src='../../../main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
     <script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
 
 
@@ -18,13 +17,16 @@
     <script type='text/javascript' src='../../../main/javascript/nlayout/OriginalLayout.js'></script>
     <script type='text/javascript' src='../../../main/javascript/nlayout/ChangeEvent.js'></script>
 
+    <script type="text/javascript" src="../../../main/javascript/nlayout/raphael-min.js"></script>
+    <script type="text/javascript" src="../../../main/javascript/nlayout/raphael-plugins.js"></script>
 
     <script type='text/javascript' src='../../../main/javascript/nlayout/TestSuite.js'></script>
 
 
     <script type='text/javascript'>
+        window.addEvent('domready', function() {
             var test = new mindplot.nlayout.TestSuite();
-
+        })
     </script>
 
 </head>