Author: marekz
Date: 2011-08-16 20:03:11 -0700 (Tue, 16 Aug 2011)
New Revision: 26582
Modified:
cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html
Log:
Fixed several issues and added visual mapper to demo
Modified: cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
===================================================================
--- cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
2011-08-17 00:24:34 UTC (rev 26581)
+++ cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
2011-08-17 03:03:11 UTC (rev 26582)
@@ -74,7 +74,7 @@
};
this._onClick = function () {
- alert("Clicked on node " + this._id);
+ message("Clicked on node " + this._id);
};
this._onDragStart = function() {};
@@ -261,7 +261,7 @@
};
this._onClick = function() {
- alert("You clicked on the visualisation");
+ message("You clicked on the visualisation");
};
this._enableMouseEvents(this._svgElem);
@@ -310,16 +310,12 @@
"opacity": 1,
"style": "SOLID",
"targetArrowShape": "DELTA",
- "targetArrowSize": 1,
"targetArrowColor": "black",
"sourceArrowShape": "T",
- "sourceArrowSize": 1,
"sourceArrowColor": "black"
}
};
- //this._bg = this._canvas.rect(0, 0, this._width,
this._height).attr({"fill": this._style.global.backgroundColor, "stroke":
"none", "cursor": "move"});
- //this._bg.drag(Util.delegate(this, "_dragMove"), Util.delegate(this,
"_dragStart"));
this.deselect = function () {
@@ -620,7 +616,7 @@
*/
var Paths = {
// Node shapes
- ellipse: "M 0,-10, a 10,10 0 1 1 -0.01,0 z", // This is the path
equivalent of a <circle> element
+ ellipse: "M 0,-10 a 10,10 0 1 1 -0.01,0 z", // This is the path
equivalent of a <circle> element
diamond: "M -10,0 0,-10 10,0 0,10 z",
rectangle: "M -10,-10 -10,10 10,10 10,-10 z",
// Arrow shapes
@@ -722,12 +718,16 @@
this.getAppliedStyle = function(property) {
if (property in this._style) {
- return this._style[property];
+ var prop = this._style[property];
} else if (property in this._visualization._style[this._group])
{
- return
this._visualization._style[this._group][property];
+ var prop =
this._visualization._style[this._group][property];
} else {
throw "No such property: " + property;
}
+ if (typeof prop == "function") {
+ prop = prop(this);
+ }
+ return prop;
};
this.getAppliedStyles = function() {
@@ -836,7 +836,7 @@
this._edgeSpacing = 40;
this._onClick = function () {
- alert("Clicked on node " + this._id);
+ message("Clicked on node " + this._id);
};
this._onDragStart = function() {
@@ -850,6 +850,8 @@
};
this._onDragMove = function(dx, dy) {
+ dx /= this._visualization._zoom;
+ dy /= this._visualization._zoom;
this.setPosition(this._dragStartX + dx, this._dragStartY + dy);
this._visualization._particleSystem.start();
};
@@ -1210,7 +1212,7 @@
// because opacity apparenly behaves differently on
stroke and on fill
"opacity": attr["stroke-opacity"],
"d": targetArrowPath,
- "transform": [ "rotate(", points[7] * 180 / Math.PI,
points[4], points[5],")", "translate(", points[4], points[5], ")", "scale(",
this.getRenderedStyle("targetArrowSize"), ")",].join(" ")
+ "transform": [ "rotate(", points[7] * 180 / Math.PI,
points[4], points[5],")", "translate(", points[4], points[5], ")", "scale(",
this.getRenderedStyle("width")/2, ")",].join(" ")
};
SvgTool.setElementAttributes(this._targetArrowElem,
targetArrowAttr);
@@ -1220,15 +1222,15 @@
"stroke": "none",
"opacity": attr["stroke-opacity"],
"d": sourceArrowPath,
- "transform": [ "rotate(", points[6] * 180 / Math.PI,
points[0], points[1],")", "translate(", points[0], points[1], ")", "scale(",
this.getRenderedStyle("sourceArrowSize"), ")",].join(" ")
- };
+ "transform": [ "rotate(", points[6] * 180 / Math.PI,
points[0], points[1],")", "translate(", points[0], points[1], ")", "scale(",
this.getRenderedStyle("width")/2, ")",].join(" ")
+ }
SvgTool.setElementAttributes(this._sourceArrowElem,
sourceArrowAttr);
};
this._onClick = function() {
- alert("Clicked edge '" + this._id + "' between '" +
this._source._id + "' and '" + this._target._id + "'");
+ message("Clicked edge '" + this._id + "' between '" +
this._source._id + "' and '" + this._target._id + "'");
}
this.getModel = function() {
@@ -1364,3 +1366,4 @@
};
}
+function message() {}
Modified: cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html
===================================================================
--- cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html 2011-08-17
00:24:34 UTC (rev 26581)
+++ cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html 2011-08-17
03:03:11 UTC (rev 26582)
@@ -8,7 +8,16 @@
color: #404040;
width: 640px;
margin: 30px auto;
+
}
+
+ #message-box {
+ height: 25px;
+ }
+
+ svg {
+ border: 2px solid gray;
+ }
</style>
<script type="text/javascript"
src="cytoscapeweb-svg.js"></script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
@@ -446,7 +455,7 @@
var pg = {nodes:[], edges:[]};
for (var x = 0; x < 100; x++) {
- pg.nodes.push({"id": "n"+x, "x":
Math.floor(Math.random()*400)-86, "y": Math.floor(Math.random()*400)-50,
"style": {"size": 6+ Math.floor(Math.random()*18)}});
+ pg.nodes.push({"id": "n"+x, "x":
Math.floor(Math.random()*400)-86, "y": Math.floor(Math.random()*400)-50,
"style": {"color": distanceMapper, "size": 6+ Math.floor(Math.random()*18)}});
}
for (var y = 0; y < 300; y++) {
@@ -477,6 +486,31 @@
vis.draw();
}
+ function message(s) {
+
+ var box =
document.getElementById("message-box");
+ if (box) {
+ box.textContent = s;
+ }
+ }
+
+ function lengthMapper (i) {
+ var dx = i._source._x - i._target._x;
+ var sy = i._source._y - i._target._y;
+ dist = Math.floor(Math.sqrt(dx*dx + dy*dy));
+ if (dist < 0) dist = 0;
+ if (dist > 255) dist = 255;
+ return "rgb(128, 128, " + dist + ")";
+ }
+ function distanceMapper(i) {
+ var dist = Math.sqrt(i._x * i._x + i._y * i._y);
+ dist /= 6;
+ Math.floor(dist);
+ if (dist < 0) dist = 0;
+ if (dist > 255) dist = 255;
+ return "rgb(128, 128, " + dist + ")";
+ }
+
@@ -487,12 +521,13 @@
<h1>Cytoscape Web — SVG</h1>
<p>By Marek Zaluski for GSoC 2011</p>
<button onclick="vis.changeZoom(10);">+</button><button
onclick="vis.changeZoom(-10)">-</button>
+ <div id="message-box"></div>
<div id="container-div"></div>
Load graph:
<select
onchange="load(this.options[selectedIndex].value)">
- <option selected value="simpleGraph">Simple
graph</option>
<option value="petersenGraph">Petersen
graph</option>
+ <option value="simpleGraph">Simple
graph</option>
<option value="ringGraph">Style demo</option>
<option value="pg">Large graph</option>
</select>
--
You received this message because you are subscribed to the Google Groups
"cytoscape-cvs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/cytoscape-cvs?hl=en.
