diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 5661d349..c1987d81 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/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, diff --git a/mindplot/src/main/javascript/layout/Node.js b/mindplot/src/main/javascript/layout/Node.js index 40600562..a3f64900 100644 --- a/mindplot/src/main/javascript/layout/Node.js +++ b/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() + "]"; } diff --git a/mindplot/src/main/javascript/layout/OriginalLayout.js b/mindplot/src/main/javascript/layout/OriginalLayout.js index 6c39ca74..717eb5ad 100644 --- a/mindplot/src/main/javascript/layout/OriginalLayout.js +++ b/mindplot/src/main/javascript/layout/OriginalLayout.js @@ -121,7 +121,7 @@ mindplot.layout.OriginalLayout = new Class({ var parentX = parentPosition.x; var parentY = parentPosition.y; - var newPos = {x:parentX + offset.x, y:parentY + offset.y}; + var newPos = {x:parentX + offset.x, y:parentY + offset.y + this._calculateAlignOffset(node, child, heightById)}; this._treeSet.updateBranchPosition(child, newPos); }.bind(this)); @@ -134,6 +134,44 @@ mindplot.layout.OriginalLayout = new Class({ }, this); }, + _calculateAlignOffset: function(node, child, heightById) { + if (child.isFree()) { + return 0; + } + + var offset = 0; + + var nodeHeight = node.getSize().height; + var childHeight = child.getSize().height; + + if (this._treeSet.isStartOfSubBranch(child) && this._branchIsTaller(child, heightById)) { + if (this._treeSet.hasSinglePathToSingleLeaf(child)) { + offset = heightById[child.getId()]/2 - (childHeight + child.getSorter()._getVerticalPadding()*2)/2; + } else { + offset = this._treeSet.isLeaf(child) ? 0 : -(childHeight - nodeHeight)/2; + } + } else if (nodeHeight > childHeight) { + if (this._treeSet.getSiblings(child).length > 0) { + offset = 0; + } else { + offset = nodeHeight/2 - childHeight/2; + } + } + else if (childHeight > nodeHeight) { + if (this._treeSet.getSiblings(child).length > 0) { + offset = 0; + } else { + offset = -(childHeight / 2 - nodeHeight / 2); + } + } + + 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); diff --git a/mindplot/src/main/javascript/layout/RootedTreeSet.js b/mindplot/src/main/javascript/layout/RootedTreeSet.js index 5c9dec63..74a2cf99 100644 --- a/mindplot/src/main/javascript/layout/RootedTreeSet.js +++ b/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; diff --git a/mindplot/src/test/javascript/static/layout.html b/mindplot/src/test/javascript/static/layout.html index 49c8d415..b0ca0c56 100644 --- a/mindplot/src/test/javascript/static/layout.html +++ b/mindplot/src/test/javascript/static/layout.html @@ -55,6 +55,10 @@

testAligned:

+

testBaselineAligned:

+
+
+

testEvents:

diff --git a/mindplot/src/test/javascript/static/test/SymmetricTestSuite.js b/mindplot/src/test/javascript/static/test/SymmetricTestSuite.js index 74662138..ed650918 100644 --- a/mindplot/src/test/javascript/static/test/SymmetricTestSuite.js +++ b/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(5).getPosition().y == -manager.find(11).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(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 == diff --git a/mindplot/src/test/javascript/static/test/TestSuite.js b/mindplot/src/test/javascript/static/test/TestSuite.js index afaa7e0d..2a693aa8 100644 --- a/mindplot/src/test/javascript/static/test/TestSuite.js +++ b/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};