Visual representation of nodes. Symetric sorter updated

This commit is contained in:
Gonzalo Bellver 2011-12-30 17:48:11 -03:00
parent 9ed6df2158
commit 14cb5b586e
8 changed files with 111 additions and 27 deletions

View File

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

View File

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

View File

@ -69,11 +69,11 @@ mindplot.nlayout.LayoutManager = new Class({
console.log(this._treeSet.dump()); 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); canvas.drawGrid(0, 0, size.w, size.h, size.w/squaresize, size.h/squaresize);
this._treeSet.plot(canvas); this._treeSet.plot(canvas);
}, },

View File

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

View File

@ -128,9 +128,12 @@ mindplot.nlayout.RootedTreeSet = new Class({
_plot: function(canvas, node, root) { _plot: function(canvas, node, root) {
var children = this.getChildren(node); 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"; var fillColor = this._rootNodes.contains(node) ? "#000" : "#c00";
rect.attr('fill', fillColor); rect.attr('fill', fillColor);

View File

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

View File

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

View File

@ -29,9 +29,42 @@
}) })
</script> </script>
<style type="text/css">
div.col {
float: left;
margin-right: 20px;
}
div.col.last {
float: none;
}
</style>
</head> </head>
<body> <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> </body>
</html> </html>