mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-08-20 12:30:44 +02:00
Grid sorter first approach
This commit is contained in:
parent
14cb5b586e
commit
93e035bbbb
@ -1,12 +1,48 @@
|
||||
mindplot.nlayout.GridSorter = new Class({
|
||||
Extends: mindplot.nlayout.SymetricSorder,
|
||||
|
||||
computeOffsets: function(treeSet, node) {
|
||||
$assert(treeSet, "treeSet can no be null.");
|
||||
$assert(node, "node can no be null.");
|
||||
$assert("order can no be null.");
|
||||
|
||||
var children = this._getSortedChildren(treeSet, node);
|
||||
|
||||
// Compute heights ...
|
||||
var heights = children.map(function(child) {
|
||||
return {id:child.getId(),height:this._computeChildrenHeight(treeSet, child)};
|
||||
}.bind(this));
|
||||
|
||||
// Calculate the offsets ...
|
||||
var result = {};
|
||||
for (var i = 0; i < heights.length; i++) {
|
||||
var even = i%2 == 0 ? 1 : -1;
|
||||
|
||||
var zeroHeight = i == 0 ? 0 : heights[0].height/2 * even;
|
||||
var middleHeight = 0;
|
||||
for (var j=i-2; j>0; j=j-2) {
|
||||
middleHeight += heights[j].height * even;
|
||||
}
|
||||
var finalHeight = i == 0 ? 0 : heights[i].height/2 * even;
|
||||
|
||||
var yOffset = zeroHeight + middleHeight +finalHeight;
|
||||
var xOffset = node.getSize().width + mindplot.nlayout.GridSorter.GRID_HORIZONTAR_SIZE;
|
||||
|
||||
$assert(!isNaN(xOffset), "xOffset can not be null");
|
||||
$assert(!isNaN(yOffset), "yOffset can not be null");
|
||||
|
||||
result[heights[i].id] = {x:xOffset,y:yOffset};
|
||||
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
toString:function() {
|
||||
return "Grid Sorter";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
mindplot.nlayout.GridSorter.GRID_HORIZONTAR_SIZE = 50;
|
||||
mindplot.nlayout.GridSorter.GRID_HORIZONTAR_SIZE = 20;
|
||||
mindplot.nlayout.GridSorter.INTER_NODE_VERTICAL_DISTANCE = 50;
|
||||
|
||||
|
@ -22,6 +22,10 @@ mindplot.nlayout.LayoutManager = new Class({
|
||||
// @Todo: finish...
|
||||
},
|
||||
|
||||
find: function(id) {
|
||||
return this._treeSet.find(id);
|
||||
},
|
||||
|
||||
connectNode: function(parentId, childId, order) {
|
||||
$assert($defined(parentId), "parentId can not be null");
|
||||
$assert($defined(childId), "childId can not be null");
|
||||
|
@ -48,15 +48,12 @@ mindplot.nlayout.OriginalLayout = new Class({
|
||||
layout: function() {
|
||||
var roots = this._treeSet.getTreeRoots();
|
||||
roots.forEach(function(node) {
|
||||
console.log('node = ' + node.getId()); //TODO(gb): Remove trace!!!
|
||||
|
||||
// Calculate all node heights ...
|
||||
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 ...
|
||||
var heightById = sorter.computeChildrenIdByHeights(this._treeSet, node);
|
||||
console.log('heightById = ' + heightById[0]); //TODO(gb): Remove trace!!!
|
||||
|
||||
this._layoutChildren(node, heightById);
|
||||
}, this);
|
||||
@ -98,7 +95,8 @@ mindplot.nlayout.OriginalLayout = new Class({
|
||||
});
|
||||
|
||||
mindplot.nlayout.OriginalLayout.SYMETRIC_SORTER = new mindplot.nlayout.SymetricSorder();
|
||||
mindplot.nlayout.OriginalLayout.GRID_SORTER = new mindplot.nlayout.SymetricSorder();
|
||||
mindplot.nlayout.OriginalLayout.GRID_SORTER = new mindplot.nlayout.GridSorter();
|
||||
//mindplot.nlayout.OriginalLayout.GRID_SORTER = new mindplot.nlayout.SymetricSorder();
|
||||
|
||||
|
||||
|
||||
|
@ -132,7 +132,7 @@ mindplot.nlayout.SymetricSorder = new Class({
|
||||
for (var i = 0; i < heights.length; i++) {
|
||||
ysum = ysum - heights[i].height;
|
||||
|
||||
var yOffset = ysum + heights[i].height/2;
|
||||
var yOffset = ysum + heights[i].height/2;
|
||||
var xOffset = node.getSize().width + mindplot.nlayout.SymetricSorder.INTERNODE_HORIZONTAL_PADDING;
|
||||
|
||||
$assert(!isNaN(xOffset), "xOffset can not be null");
|
||||
|
@ -3,6 +3,7 @@ mindplot.nlayout.TestSuite = new Class({
|
||||
initialize:function() {
|
||||
this.testAligned();
|
||||
this.testSymmetry();
|
||||
this.testGrid();
|
||||
this.testEvents();
|
||||
this.testEventsComplex();
|
||||
this.testDisconnect();
|
||||
@ -16,12 +17,22 @@ mindplot.nlayout.TestSuite = new Class({
|
||||
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.connectNode(0, 1, 0);
|
||||
manager.connectNode(1, 2, 0);
|
||||
manager.connectNode(2, 3, 0);
|
||||
manager.connectNode(3, 4, 0);
|
||||
|
||||
manager.layout();
|
||||
manager.dump();
|
||||
manager.plot("testAligned", {w:300,h:200});
|
||||
|
||||
manager.plot("testAligned");
|
||||
$assert(manager.find(0).getPosition().y == manager.find(1).getPosition().y, "Nodes are not aligned");
|
||||
$assert(manager.find(0).getPosition().y == manager.find(2).getPosition().y, "Nodes are not aligned");
|
||||
$assert(manager.find(0).getPosition().y == manager.find(3).getPosition().y, "Nodes are not aligned");
|
||||
$assert(manager.find(0).getPosition().y == manager.find(4).getPosition().y, "Nodes are not aligned");
|
||||
},
|
||||
|
||||
testSymmetry: function() {
|
||||
@ -39,21 +50,65 @@ mindplot.nlayout.TestSuite = new Class({
|
||||
manager.addNode(8, size, position);
|
||||
manager.addNode(9, size, position);
|
||||
manager.addNode(10, size, position);
|
||||
manager.addNode(11, size, position);
|
||||
manager.addNode(12, 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(1, 6, 0);
|
||||
manager.connectNode(1, 7, 1);
|
||||
manager.connectNode(7, 8, 0);
|
||||
manager.connectNode(8, 9, 0);
|
||||
manager.connectNode(1, 10, 0);
|
||||
manager.connectNode(5, 10, 0);
|
||||
manager.connectNode(6, 11, 0);
|
||||
manager.connectNode(6, 12, 1);
|
||||
|
||||
manager.layout();
|
||||
// manager.dump();
|
||||
manager.plot("testSymmetry",{w:400, h:300});
|
||||
|
||||
//TODO(gb): make asserts
|
||||
},
|
||||
|
||||
testGrid: 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.connectNode(0, 1, 0);
|
||||
manager.layout();
|
||||
manager.plot("testGrid1");
|
||||
|
||||
manager.addNode(2, size, position);
|
||||
manager.connectNode(0, 2, 1);
|
||||
manager.layout();
|
||||
manager.plot("testGrid2");
|
||||
|
||||
manager.addNode(3, size, position);
|
||||
manager.connectNode(0, 3, 2);
|
||||
manager.layout();
|
||||
manager.plot("testGrid3");
|
||||
|
||||
manager.addNode(4, size, position);
|
||||
manager.connectNode(0, 4, 3);
|
||||
manager.layout();
|
||||
manager.plot("testGrid4");
|
||||
|
||||
manager.addNode(5, size, position);
|
||||
manager.addNode(6, size, position);
|
||||
manager.addNode(7, size, position);
|
||||
manager.connectNode(2, 5, 0);
|
||||
manager.connectNode(2, 6, 1);
|
||||
manager.connectNode(6, 7, 0);
|
||||
manager.layout();
|
||||
manager.plot("testGrid5", {w:300, h:300});
|
||||
|
||||
manager.dump();
|
||||
|
||||
manager.plot("testSymmetry",{w:400, h:300});
|
||||
//TODO(gb): make asserts
|
||||
},
|
||||
|
||||
testEvents: function() {
|
||||
|
@ -48,6 +48,15 @@
|
||||
<h2>testSymmetry:</h2>
|
||||
<div id="testSymmetry"></div>
|
||||
|
||||
<h2>testGrid:</h2>
|
||||
<div>
|
||||
<div id="testGrid1" class="col"></div>
|
||||
<div id="testGrid2" class="col"></div>
|
||||
<div id="testGrid3" class="col"></div>
|
||||
<div id="testGrid4" class="col"></div>
|
||||
<div id="testGrid5" class="col last"></div>
|
||||
</div>
|
||||
|
||||
<h2>testEvents:</h2>
|
||||
<div id="testEvents1" class="col"></div>
|
||||
<div id="testEvents2" class="col last"></div>
|
||||
|
Loading…
Reference in New Issue
Block a user