mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-22 22:27:55 +01:00
Merge branch 'master' of ssh://wisemapping.com/var/git-repos/wise-source
Conflicts: mindplot/src/main/javascript/nlayout/TestSuite.js
This commit is contained in:
commit
44a46c8489
@ -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";
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -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";
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -69,6 +69,15 @@ mindplot.nlayout.LayoutManager = new Class({
|
|||||||
console.log(this._treeSet.dump());
|
console.log(this._treeSet.dump());
|
||||||
},
|
},
|
||||||
|
|
||||||
|
plot: function(containerId, size) {
|
||||||
|
$assert(containerId, "containerId cannot be null");
|
||||||
|
size = size || {w:200,h:200};
|
||||||
|
var squaresize = 10;
|
||||||
|
var canvas = Raphael(containerId, size.w, size.h);
|
||||||
|
canvas.drawGrid(0, 0, size.w, size.h, size.w/squaresize, size.h/squaresize);
|
||||||
|
this._treeSet.plot(canvas);
|
||||||
|
},
|
||||||
|
|
||||||
layout: function(fireEvents) {
|
layout: function(fireEvents) {
|
||||||
// File repositioning ...
|
// File repositioning ...
|
||||||
this._layout.layout();
|
this._layout.layout();
|
||||||
|
@ -110,7 +110,7 @@ mindplot.nlayout.Node = new Class({
|
|||||||
|
|
||||||
|
|
||||||
toString: function() {
|
toString: function() {
|
||||||
return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}]";
|
return "[id:" + this.getId() + ", order:" + this.getOrder() + ", position: {" + this.getPosition().x + "," + this.getPosition().y + "}, size: {" + this.getSize().width + "," + this.getSize().height + "}";
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -47,12 +47,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);
|
||||||
|
@ -118,6 +118,31 @@ mindplot.nlayout.RootedTreeSet = new Class({
|
|||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
plot: function(canvas) {
|
||||||
|
var branches = this._rootNodes;
|
||||||
|
for (var i=0; i<branches.length; i++) {
|
||||||
|
var branch = branches[i];
|
||||||
|
this._plot(canvas, branch);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_plot: function(canvas, node, root) {
|
||||||
|
var children = this.getChildren(node);
|
||||||
|
var cx = node.getPosition().x + canvas.width/2 - node.getSize().width/2;
|
||||||
|
var cy = node.getPosition().y + canvas.height/2 - node.getSize().height/2;
|
||||||
|
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";
|
||||||
|
rect.attr('fill', fillColor);
|
||||||
|
|
||||||
|
for (var i=0; i<children.length; i++) {
|
||||||
|
var child = children[i];
|
||||||
|
this._plot(canvas, child);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
updateBranchPosition : function(node, position) {
|
updateBranchPosition : function(node, position) {
|
||||||
|
|
||||||
var oldPos = node.getPosition();
|
var oldPos = node.getPosition();
|
||||||
|
@ -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)};
|
||||||
}, this);
|
}, 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";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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() {
|
||||||
|
|
||||||
this.testAligned();
|
this.testAligned();
|
||||||
|
this.testSymmetry();
|
||||||
this.testEvents();
|
this.testEvents();
|
||||||
this.testEventsComplex();
|
this.testEventsComplex();
|
||||||
this.testDisconnect();
|
this.testDisconnect();
|
||||||
@ -11,22 +11,53 @@ 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 manager = new mindplot.nlayout.LayoutManager(0, size);
|
||||||
|
|
||||||
|
manager.addNode(1, size, position);
|
||||||
|
manager.connectNode(0, 1, 0);
|
||||||
|
|
||||||
|
manager.layout();
|
||||||
|
manager.dump();
|
||||||
|
|
||||||
|
manager.plot("testAligned");
|
||||||
|
},
|
||||||
|
|
||||||
|
testSymmetry: function() {
|
||||||
|
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);
|
||||||
|
|
||||||
manager.addNode(1, size, position);
|
manager.addNode(1, size, position);
|
||||||
manager.addNode(2, 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, 1, 0);
|
||||||
manager.connectNode(0, 2, 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.layout();
|
||||||
manager.dump();
|
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);
|
||||||
|
|
||||||
@ -50,17 +81,19 @@ mindplot.nlayout.TestSuite = new Class({
|
|||||||
});
|
});
|
||||||
manager.layout(true);
|
manager.layout(true);
|
||||||
manager.dump();
|
manager.dump();
|
||||||
|
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("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);
|
||||||
|
|
||||||
@ -84,6 +117,7 @@ mindplot.nlayout.TestSuite = new Class({
|
|||||||
// Reposition ...
|
// Reposition ...
|
||||||
manager.layout(true);
|
manager.layout(true);
|
||||||
manager.dump();
|
manager.dump();
|
||||||
|
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 ---");
|
||||||
@ -92,13 +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("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);
|
||||||
|
|
||||||
@ -123,6 +158,7 @@ mindplot.nlayout.TestSuite = new Class({
|
|||||||
|
|
||||||
manager.layout(true);
|
manager.layout(true);
|
||||||
manager.dump();
|
manager.dump();
|
||||||
|
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 ---");
|
||||||
@ -130,6 +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("testDisconnect2", {w:300, h:200});
|
||||||
|
|
||||||
$assert(events.some(
|
$assert(events.some(
|
||||||
function(event) {
|
function(event) {
|
||||||
@ -141,6 +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("testDisconnect3", {w:300, h:200});
|
||||||
|
|
||||||
$assert(events.some(
|
$assert(events.some(
|
||||||
function(event) {
|
function(event) {
|
||||||
@ -149,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);
|
||||||
|
|
||||||
@ -173,12 +211,14 @@ mindplot.nlayout.TestSuite = new Class({
|
|||||||
});
|
});
|
||||||
manager.layout(true);
|
manager.layout(true);
|
||||||
manager.dump();
|
manager.dump();
|
||||||
|
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("testRemoveNode2");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
8
mindplot/src/main/javascript/nlayout/raphael-min.js
vendored
Normal file
8
mindplot/src/main/javascript/nlayout/raphael-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
30
mindplot/src/main/javascript/nlayout/raphael-plugins.js
Normal file
30
mindplot/src/main/javascript/nlayout/raphael-plugins.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
|
||||||
|
color = color || "#999";
|
||||||
|
var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
|
||||||
|
rowHeight = h / hv,
|
||||||
|
columnWidth = w / wv;
|
||||||
|
for (var i = 0; i < hv + 1; i++) {
|
||||||
|
var offset = y + i * rowHeight;
|
||||||
|
path = this.path(["M", x, offset, "L", x + w, y + i * rowHeight]);
|
||||||
|
if (offset == 0 || offset == h) {
|
||||||
|
path.attr({stroke: "#000"});
|
||||||
|
} else if (offset == h/2) {
|
||||||
|
path.attr({stroke: "#c00"})
|
||||||
|
} else {
|
||||||
|
path.attr({stroke: "#999"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < wv + 1; i++) {
|
||||||
|
var offset = x + i * columnWidth;
|
||||||
|
path = this.path(["M", offset, y, "L", x + i * columnWidth, y + h]);
|
||||||
|
if (offset == 0 || offset == w) {
|
||||||
|
path.attr({stroke: "#000"});
|
||||||
|
} else if (offset == w/2) {
|
||||||
|
path.attr({stroke: "#c00"})
|
||||||
|
} else {
|
||||||
|
path.attr({stroke: "#999"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// return this.path(path.join(",")).attr({stroke: color});
|
||||||
|
return this.path;
|
||||||
|
};
|
@ -2,8 +2,7 @@
|
|||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script type='text/javascript'
|
<script type='text/javascript' src='../../../main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
|
||||||
src='../../../main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
|
|
||||||
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
|
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
|
||||||
|
|
||||||
|
|
||||||
@ -18,18 +17,54 @@
|
|||||||
<script type='text/javascript' src='../../../main/javascript/nlayout/OriginalLayout.js'></script>
|
<script type='text/javascript' src='../../../main/javascript/nlayout/OriginalLayout.js'></script>
|
||||||
<script type='text/javascript' src='../../../main/javascript/nlayout/ChangeEvent.js'></script>
|
<script type='text/javascript' src='../../../main/javascript/nlayout/ChangeEvent.js'></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../../main/javascript/nlayout/raphael-min.js"></script>
|
||||||
|
<script type="text/javascript" src="../../../main/javascript/nlayout/raphael-plugins.js"></script>
|
||||||
|
|
||||||
<script type='text/javascript' src='../../../main/javascript/nlayout/TestSuite.js'></script>
|
<script type='text/javascript' src='../../../main/javascript/nlayout/TestSuite.js'></script>
|
||||||
|
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
|
window.addEvent('domready', function() {
|
||||||
var test = new mindplot.nlayout.TestSuite();
|
var test = new mindplot.nlayout.TestSuite();
|
||||||
|
})
|
||||||
</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>
|
Loading…
Reference in New Issue
Block a user