Baseline alignment

mindplot/src/main/javascript/Designer.js

@@ -320,7 +320,6 @@ mindplot.Designer = new Class({
         },
 
         createChildForSelectedNode : function() {
-            console.log("createChildForSelectedNode");        //TODO(gb): Remove trace!!!
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0) {
                 // If there are more than one node selected,

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

@@ -174,12 +174,6 @@ mindplot.layout.Node = new Class({
         return this._sorter;
     },
 
-    getVertex: function() {
-        var a = {x: this.getPosition().x - this.getSize().width / 2, y:this.getPosition().y - this.getSize().height / 2};
-        var b = {x: this.getPosition().x + this.getSize().width / 2, y:this.getPosition().y + this.getSize().height / 2};
-        return {a:a, b:b};
-    },
-
     toString: function() {
         return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}, size: {" + this.getSize().width + "," + this.getSize().height + "}, shrink:" + this.areChildrenShrunken() + "]";
     }

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

@@ -144,28 +144,34 @@ mindplot.layout.OriginalLayout = new Class({
         var nodeHeight = node.getSize().height;
         var childHeight = child.getSize().height;
 
-        var children = this._treeSet.getChildren(child);
+        if (this._treeSet.isStartOfSubBranch(child) && this._branchIsTaller(child, heightById)) {
-
+            if (this._treeSet.hasSinglePathToSingleLeaf(child)) {
-        if (children.length == 1 && children[0].getSize().height > childHeight) {           // A
+                offset = heightById[child.getId()]/2 - (childHeight + child.getSorter()._getVerticalPadding()*2)/2;
-            offset = children[0].getSize().height/2 - childHeight/2;
+            } else {
-        } else if (children.length == 1 && childHeight > children[0].getSize().height) {    // B
+                offset = this._treeSet.isLeaf(child) ? 0 : -(childHeight - nodeHeight)/2;
-            offset = 0;
+            }
-        } else if (children.length == 1 && nodeHeight > childHeight) {
+        } else if (nodeHeight > childHeight) {
-            offset = nodeHeight/2 - childHeight/2;
+            if (this._treeSet.getSiblings(child).length > 0) {
+                offset = 0;
+            } else {
+                offset = nodeHeight/2 - childHeight/2;
+            }
         }
-        else if (children.length == 0 && childHeight <= nodeHeight) {
+        else if (childHeight > nodeHeight) {
-            offset = nodeHeight/2 - childHeight/2;
+            if (this._treeSet.getSiblings(child).length > 0) {
-        }
+                offset = 0;
-        else if (childHeight > nodeHeight && children.length > 0) {
+            } else {
-            offset = nodeHeight/2 - childHeight/2;
+                offset = -(childHeight / 2 - nodeHeight / 2);
-        }
+            }
-        else {
-            offset = 0;
         }
 
         return offset;
     },
 
+    _branchIsTaller: function(node, heightById) {
+        return heightById[node.getId()] > (node.getSize().height + node.getSorter()._getVerticalPadding()*2);
+    },
+
     _fixOverlapping: function(node, heightById) {
         var children = this._treeSet.getChildren(node);
 

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

@@ -147,6 +147,30 @@ mindplot.layout.RootedTreeSet = new Class({
         return siblings;
     },
 
+    hasSinglePathToSingleLeaf: function(node) {
+        $assert(node, 'node cannot be null');
+        return this._hasSinglePathToSingleLeaf(node);
+    },
+
+    _hasSinglePathToSingleLeaf: function(node) {
+       var children = this.getChildren(node);
+
+        if (children.length == 1) {
+            return this._hasSinglePathToSingleLeaf(children[0]);
+        }
+
+        return children.length == 0;
+    },
+
+    isStartOfSubBranch: function(node) {
+        return this.getSiblings(node).length > 0 && this.getChildren(node).length == 1;
+    },
+
+    isLeaf: function(node) {
+        $assert(node, 'node cannot be null');
+        return this.getChildren(node).length == 0;
+    },
+
     getParent:function(node) {
         $assert(node, 'node cannot be null');
         return node._parent;

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

@@ -55,6 +55,10 @@
     <h3>testAligned:</h3>
     <div id="testAligned"></div>
 
+    <h3>testBaselineAligned:</h3>
+    <div id="testBaselineAligned1"></div>
+    <div id="testBaselineAligned2"></div>
+
     <h3>testEvents:</h3>
     <div id="testEvents1" class="col"></div>
     <div id="testEvents2" class="col last"></div>

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

@@ -64,8 +64,8 @@ mindplot.layout.SymmetricTestSuite = new Class({
         manager.plot("testSymmetry",{width:1600, height:400});
 
         // All nodes should be positioned symmetrically with respect to their common ancestors
-        $assert(manager.find(14).getPosition().y == -manager.find(13).getPosition().y, "Symmetry is not respected");
+        $assert(manager.find(14).getPosition().y == manager.find(13).getPosition().y, "Symmetry is not respected");
-        $assert(manager.find(5).getPosition().y == -manager.find(11).getPosition().y, "Symmetry is not respected");
+        $assert(manager.find(5).getPosition().y == manager.find(10).getPosition().y, "Symmetry is not respected");
         $assert(manager.find(11).getPosition().y - manager.find(6).getPosition().y ==
             -(manager.find(12).getPosition().y - manager.find(6).getPosition().y), "Symmetry is not respected");
         $assert(manager.find(8).getPosition().y - manager.find(1).getPosition().y ==

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

@@ -21,7 +21,9 @@ mindplot.layout.TestSuite = new Class({
     initialize:function() {
         $("basicTest").setStyle("display","block");
 
-        this.testAligned();
+//        this.testAligned();
+        this.testBaselineAligned1();
+        this.testBaselineAligned2();
         this.testEvents();
         this.testEventsComplex();
         this.testDisconnect();
@@ -60,6 +62,71 @@ mindplot.layout.TestSuite = new Class({
         console.log("OK!\n\n");
     },
 
+    testBaselineAligned1: function() {
+        console.log("testBaselineAligned1:");
+        var position = {x:0,y:0};
+        var manager = new mindplot.layout.LayoutManager(0, mindplot.layout.TestSuite.ROOT_NODE_SIZE);
+
+        manager.addNode(1, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(0, 1, 0);
+        manager.addNode(3, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(1, 3, 0);
+        manager.addNode(5, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(3, 5, 0);
+        manager.addNode(6, {width:140, height:130}, position).connectNode(3, 6, 1);
+        manager.addNode(7, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(6, 7, 0);
+        manager.addNode(8, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 8, 0);
+        manager.addNode(9, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 9, 1);
+        manager.addNode(10, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 10, 2);
+        manager.addNode(11, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 11, 3);
+        manager.addNode(12, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 12, 4);
+        manager.addNode(13, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 13, 5);
+        manager.addNode(14, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 14, 6);
+        manager.addNode(15, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 15, 7);
+        manager.addNode(16, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 16, 8);
+        manager.addNode(17, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(7, 17, 9);
+        manager.addNode(29, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(6, 29, 1);
+        manager.addNode(30, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(6, 30, 2);
+        manager.addNode(31, {width:100, height:50}, position).connectNode(6, 31, 3);
+
+        manager.addNode(4, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(1, 4, 1);
+        manager.addNode(18, {width:80, height:70}, position).connectNode(4, 18, 0);
+        manager.addNode(19, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(18, 19, 0);
+        manager.addNode(20, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(19, 20, 0);
+        manager.addNode(21, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(20, 21, 0);
+
+        manager.addNode(2, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(0, 2, 1);
+        manager.addNode(22, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(2, 22, 0);
+        manager.addNode(24, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(22, 24, 0);
+
+        manager.addNode(23, {width:80, height:50}, position).connectNode(2, 23, 1);
+        manager.addNode(25, {width:80, height:40}, position).connectNode(23, 25, 0);
+        manager.addNode(26, {width:80, height:80}, position).connectNode(25, 26, 0);
+        manager.addNode(27, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(26, 27, 0);
+        manager.addNode(28, {width:80, height:80}, position).connectNode(27, 28, 0);
+
+//        manager.layout();
+//        manager.plot("testBaselineAligned1", {width:1600,height:800});
+
+        console.log("OK!\n\n");
+    },
+
+    testBaselineAligned2: function() {
+        console.log("testBaselineAligned2:");
+        var position = {x:0,y:0};
+        var manager = new mindplot.layout.LayoutManager(0, mindplot.layout.TestSuite.ROOT_NODE_SIZE);
+
+        manager.addNode(1, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(0, 1, 0);
+        manager.addNode(2, {width: 130, height:200}, position).connectNode(1, 2, 0);
+        manager.addNode(3, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(2, 3, 0);
+        manager.addNode(4, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(2, 4, 1);
+        manager.addNode(5, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(2, 5, 2);
+        manager.addNode(6, mindplot.layout.TestSuite.NODE_SIZE, position).connectNode(2, 6, 3);
+
+
+        manager.layout();
+        manager.plot("testBaselineAligned2", {width:1600,height:800});
+
+        console.log("OK!\n\n");
+    },
+
     testEvents: function() {
         console.log("testEvents:");
         var position = {x:0,y:0};