vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-08-20 12:30:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Basic plotting using Raphael

Browse Source
This commit is contained in:
Gonzalo Bellver 2011-12-30 15:28:03 -03:00
parent d9d89a24de
commit 9ed6df2158
7 changed files with 88 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
mindplot/src/main/javascript/nlayout/LayoutManager.js
View File

@ -69,6 +69,15 @@ mindplot.nlayout.LayoutManager = new Class({
console.log(this._treeSet.dump());
},
plot: function(position) {
var size = {w:200,h:200};
var padding = 20,
squaresize = 20;
var canvas = Raphael(position.x + padding, position.y + padding, 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) {
// File repositioning ...
this._layout.layout();

2
mindplot/src/main/javascript/nlayout/Node.js
View File

@ -110,7 +110,7 @@ mindplot.nlayout.Node = new Class({
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 + "}";
}
});

22
mindplot/src/main/javascript/nlayout/RootedTreeSet.js
View File

@ -118,6 +118,28 @@ mindplot.nlayout.RootedTreeSet = new Class({
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 = canvas.width / 2;
var cy = canvas.height / 2;
var rect = canvas.rect(cx + node.getPosition().x, cy + node.getPosition().y, node.getSize().width, node.getSize().height);
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) {
var oldPos = node.getPosition();

13
mindplot/src/main/javascript/nlayout/TestSuite.js
View File

@ -1,7 +1,7 @@
mindplot.nlayout.TestSuite = new Class({
Extends: mindplot.nlayout.ChildrenSorterStrategy,
initialize:function() {
// Asset.javascript("raphael-min.js", {id: "raphael"});
this.testAligned();
this.testEvents();
this.testEventsComplex();
@ -20,6 +20,8 @@ mindplot.nlayout.TestSuite = new Class({
manager.layout();
manager.dump();
manager.plot({x:0,y:0});
},
testEvents: function() {
@ -47,11 +49,13 @@ mindplot.nlayout.TestSuite = new Class({
});
manager.layout(true);
manager.dump();
manager.plot({x:0,y:220});
// Ok, if a new node is added, this an event should be fired ...
console.log("---- Layout without changes should not affect the tree ---");
events.empty();
manager.layout(true);
manager.plot({x:220,y:220});
$assert(events.length == 0, "Unnecessary tree updated.");
},
@ -81,6 +85,7 @@ mindplot.nlayout.TestSuite = new Class({
// Reposition ...
manager.layout(true);
manager.dump();
manager.plot({x:0,y:440});
// Add a new node and connect. Only children nodes should be affected.
console.log("---- Connect a new node ---");
@ -89,6 +94,7 @@ mindplot.nlayout.TestSuite = new Class({
manager.connectNode(1, 4, 2);
manager.layout(true);
manager.dump();
manager.plot({x:220,y:440});
// @todo: This seems no to be ok...
$assert(events.length == 4, "Only 3 nodes should be repositioned.");
@ -120,6 +126,7 @@ mindplot.nlayout.TestSuite = new Class({
manager.layout(true);
manager.dump();
manager.plot({x:0,y:660});
// Now, disconnect one node ...
console.log("--- Disconnect a single node ---");
@ -127,6 +134,7 @@ mindplot.nlayout.TestSuite = new Class({
manager.disconnectNode(2);
manager.layout(true);
manager.dump();
manager.plot({x:220,y:660});
$assert(events.some(
function(event) {
@ -138,6 +146,7 @@ mindplot.nlayout.TestSuite = new Class({
manager.disconnectNode(3);
manager.layout(true);
manager.dump();
manager.plot({x:440,y:660});
$assert(events.some(
function(event) {
@ -170,12 +179,14 @@ mindplot.nlayout.TestSuite = new Class({
});
manager.layout(true);
manager.dump();
manager.plot({x:0,y:880});
// Test removal of a connected node ...
console.log("--- Remove node 3 ---");
manager.removeNode(3);
manager.layout(true);
manager.dump();
manager.plot({x:220,y:880});
}

8
mindplot/src/main/javascript/nlayout/raphael-min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

30
mindplot/src/main/javascript/nlayout/raphael-plugins.js Normal file
View 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;
};

10
mindplot/src/test/javascript/static/layout.html
View File

@ -2,8 +2,7 @@
<html>
<head>
<script type='text/javascript'
src='../../../main/javascript/libraries/mootools/mootools-core-1.3.2-full-compress.js'></script>
<script type='text/javascript' 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>
@ -18,13 +17,16 @@
<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/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'>
var test = new mindplot.nlayout.TestSuite();
window.addEvent('domready', function() {
var test = new mindplot.nlayout.TestSuite();
})
</script>
</head>