Baseline alignment

This commit is contained in:
Gonzalo Bellver 2012-03-15 14:47:57 -03:00
parent 99d7a1faaf
commit cc0e6c3e45
7 changed files with 120 additions and 26 deletions

View File

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

View File

@ -174,12 +174,6 @@ mindplot.layout.Node = new Class({
return this._sorter; 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() { 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() + "]"; return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}, size: {" + this.getSize().width + "," + this.getSize().height + "}, shrink:" + this.areChildrenShrunken() + "]";
} }

View File

@ -144,28 +144,34 @@ mindplot.layout.OriginalLayout = new Class({
var nodeHeight = node.getSize().height; var nodeHeight = node.getSize().height;
var childHeight = child.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; return offset;
}, },
_branchIsTaller: function(node, heightById) {
return heightById[node.getId()] > (node.getSize().height + node.getSorter()._getVerticalPadding()*2);
},
_fixOverlapping: function(node, heightById) { _fixOverlapping: function(node, heightById) {
var children = this._treeSet.getChildren(node); var children = this._treeSet.getChildren(node);

View File

@ -147,6 +147,30 @@ mindplot.layout.RootedTreeSet = new Class({
return siblings; 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) { getParent:function(node) {
$assert(node, 'node cannot be null'); $assert(node, 'node cannot be null');
return node._parent; return node._parent;

View File

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

View File

@ -64,8 +64,8 @@ mindplot.layout.SymmetricTestSuite = new Class({
manager.plot("testSymmetry",{width:1600, height:400}); manager.plot("testSymmetry",{width:1600, height:400});
// All nodes should be positioned symmetrically with respect to their common ancestors // 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 == $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"); -(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 == $assert(manager.find(8).getPosition().y - manager.find(1).getPosition().y ==

View File

@ -21,7 +21,9 @@ mindplot.layout.TestSuite = new Class({
initialize:function() { initialize:function() {
$("basicTest").setStyle("display","block"); $("basicTest").setStyle("display","block");
this.testAligned(); // this.testAligned();
this.testBaselineAligned1();
this.testBaselineAligned2();
this.testEvents(); this.testEvents();
this.testEventsComplex(); this.testEventsComplex();
this.testDisconnect(); this.testDisconnect();
@ -60,6 +62,71 @@ mindplot.layout.TestSuite = new Class({
console.log("OK!\n\n"); 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() { testEvents: function() {
console.log("testEvents:"); console.log("testEvents:");
var position = {x:0,y:0}; var position = {x:0,y:0};