Author: Christian Lopes
Date: 2010-07-22 14:55:11 -0700 (Thu, 22 Jul 2010)
New Revision: 20994
Added:
cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/EdgeRenderer.as
Modified:
cytoscapeweb/branches/gsoc2010/gbeb/src/GBEBView.as
cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/operator/router/Shape.as
cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/BundleRenderer.as
Log:
Modified: cytoscapeweb/branches/gsoc2010/gbeb/src/GBEBView.as
===================================================================
--- cytoscapeweb/branches/gsoc2010/gbeb/src/GBEBView.as 2010-07-22 21:20:55 UTC
(rev 20993)
+++ cytoscapeweb/branches/gsoc2010/gbeb/src/GBEBView.as 2010-07-22 21:55:11 UTC
(rev 20994)
@@ -2,20 +2,20 @@
{
import com.adobe.serialization.json.JSON;
+ import flare.data.DataSet;
+ import flare.data.converters.GraphMLConverter;
import flare.display.DirtySprite;
import flare.query.methods.neq;
import flare.util.Shapes;
import flare.vis.Visualization;
import flare.vis.controls.ClickControl;
- import flare.vis.controls.HoverControl;
import flare.vis.data.Data;
import flare.vis.data.EdgeSprite;
import flare.vis.data.NodeSprite;
import flare.vis.data.Tree;
import flare.vis.events.SelectionEvent;
- import flare.vis.operator.encoder.PropertyEncoder;
- import flare.vis.operator.layout.BundledEdgeRouter;
import flare.vis.operator.layout.CircleLayout;
+ import flare.vis.operator.layout.RadialTreeLayout;
import flash.display.Sprite;
import flash.display.StageAlign;
@@ -26,7 +26,7 @@
import flash.net.URLRequest;
import flash.text.TextFormat;
import flash.utils.Dictionary;
-
+
import gbeb.view.components.ProgressBar;
import gbeb.view.operator.router.GBEBRouter;
import gbeb.view.render.BundleRenderer;
@@ -35,7 +35,8 @@
[SWF(width="800",height="600", backgroundColor="#ffffff", frameRate="30")]
public class GBEBView extends Sprite
{
- private var _url:String =
"http://flare.prefuse.org/data/flare.json.txt";;
+ private var _url:String = "fixtures/sample1.xml";
+// private var _url:String =
"http://flare.prefuse.org/data/flare.json.txt";;
//private var _url:String
="/Users/Tomithy/Desktop/GSOC/Datasets/flare.json.txt";
//private var _url:String
="/Users/Tomithy/Desktop/GSOC/Datasets/flare_reduced.json.txt";
//private var _url:String
="/Users/Tomithy/Desktop/GSOC/Datasets/socialnet.xml";
@@ -65,18 +66,16 @@
_bar.loadURL(
ldr,
function():void {
- var obj:Array = JSON.decode(ldr.data as String) as Array;
+ var obj:String = ldr.data as String;
var data:Data = buildData(obj);
visualize(data);
_bar = null;
-
trace("GBEBView: Checking URL Loader!");
+ trace("GBEBView: Checking URL Loader!");
});
}
- private function visualize(data:Data):void {
-
-
- // prepare data with default settings
+ private function visualize(data:Data):void {
+ // prepare data with default settings
data.nodes.setProperties({
shape: Shapes.CIRCLE,
alpha: 0.2,
@@ -87,7 +86,7 @@
lineWidth: 2,
lineColor: 0xff0055cc,
mouseEnabled: false, // non-interactive edges
- visible: neq("source.parentNode","target.parentNode"),
+// visible: neq("source.parentNode","target.parentNode"),
renderer: BundleRenderer.instance
});
@@ -98,14 +97,14 @@
if (_bounds) resize(_bounds);
// place around circle by tree structure, radius mapped to
depth
- _vis.operators.add(new CircleLayout("depth", null, false));
- CircleLayout(_vis.operators.last).startRadiusFraction = 3/5;
+// _vis.operators.add(new RadialTreeLayout("depth", null,
true));
+// CircleLayout(_vis.operators.last).startRadiusFraction = 3/5;
-// _vis.operators.add(new RadialTreeLayout(80));
-// RadialTreeLayout(_vis.operators.last).autoScale = true;
+ _vis.operators.add(new RadialTreeLayout(80));
+ RadialTreeLayout(_vis.operators.last).autoScale = true;
// set the edge alpha values
// longer edge, lighter alpha: 1/(2*numCtrlPoints)
- _vis.operators.add(new PropertyEncoder({ alpha: edgeAlpha },
Data.EDGES));
+// _vis.operators.add(new PropertyEncoder({ alpha: edgeAlpha },
Data.EDGES));
// TODO: replace by GBEB Router:
//
##############################################################
@@ -130,7 +129,7 @@
_focus = evt.node;
highlight(evt);
showAllDeps(evt, linkType);
- _vis.controls.remove(hov);
+// _vis.controls.remove(hov);
linkType = (linkType==NodeSprite.OUT_LINKS ?
NodeSprite.IN_LINKS : NodeSprite.OUT_LINKS);
},
@@ -141,14 +140,14 @@
_vis.data.edges["visible"] =
neq("source.parentNode","target.parentNode");
_vis.data.nodes["alpha"] = 1;
- _vis.controls.add(hov);
+// _vis.controls.add(hov);
linkType = NodeSprite.OUT_LINKS;
}
));
// add mouse-over highlight
- var hov:HoverControl = new HoverControl(NodeSprite,
HoverControl.DONT_MOVE, highlight, unhighlight);
- _vis.controls.add(hov);
+// var hov:HoverControl = new HoverControl(NodeSprite,
HoverControl.DONT_MOVE, highlight, unhighlight);
+// _vis.controls.add(hov);
}
@@ -255,53 +254,69 @@
/**
* Creates the visualized data.
*/
- public static function buildData(tuples:Array):Data
+ public static function buildData(network:String):Data
{
- var data:Data = new Data();
- var tree:Tree = new Tree();
- var map:Object = {};
+ var data:Data;
+ var tree:Tree;
+ var xml:XML = new XML(network as String);
- tree.root = data.addNode({name:"flare", size:0});
- map.flare = tree.root;
-
- var t:Object, u:NodeSprite, v:NodeSprite;
- var path:Array, p:String, pp:String, i:uint;
-
- // build data set and tree edges
- tuples.sortOn("name");
- for each (t in tuples) {
- path = String(t.name).split(".");
- for (i=0, p=""; i<path.length-1; ++i) {
- pp = p;
- p += (i?".":"") + path[i];
- if (!map[p]) {
- u = data.addNode({name:p, size:0});
- tree.addChild(map[pp], u);
- map[p] = u;
+ if (xml != null && xml.name() != null) {
+ // convert from GraphML
+ var ds:DataSet = new GraphMLConverter().parse(xml);
+ data = Data.fromDataSet(ds);
+ tree = data.tree;
+ } else {
+ // build from tuples
+ var tuples:Array = JSON.decode(network) as Array;
+ data = new Data();
+ tree = new Tree();
+ tree.root = data.addNode({name:"flare", size:0});
+ var map:Object = {};
+ map.flare = tree.root;
+
+ var t:Object, u:NodeSprite, v:NodeSprite;
+ var path:Array, p:String, pp:String, i:uint;
+
+ // build data set and tree edges
+ tuples.sortOn("name");
+ for each (t in tuples) {
+ path = String(t.name).split(".");
+ for (i=0, p=""; i<path.length-1; ++i) {
+ pp = p;
+ p += (i?".":"") + path[i];
+ if (!map[p]) {
+ u = data.addNode({name:p, size:0});
+ tree.addChild(map[pp], u);
+ map[p] = u;
+ }
}
+ t["package"] = p;
+ u = data.addNode(t);
+ tree.addChild(map[p], u);
+ map[t.name] = u;
}
- t["package"] = p;
- u = data.addNode(t);
- tree.addChild(map[p], u);
- map[t.name] = u;
- }
-
- // create graph links
- for each (t in tuples) {
- u = map[t.name];
- for each (var name:String in t.imports) {
- v = map[name];
- if (v) data.addEdgeFor(u, v);
- else trace ("Missing node: "+name);
+
+ // create graph links
+ for each (t in tuples) {
+ u = map[t.name];
+
+ var count:int = 0;
+ for each (var name:String in t.imports) {
+ v = map[name];
+ if (v && count%4 === 0) data.addEdgeFor(u, v);
+ else trace ("Missing node: "+name);
+ count++;
+ }
}
+
+ // sort the list of children alphabetically by name
+ for each (u in tree.nodes) {
+ u.sortEdgesBy(NodeSprite.CHILD_LINKS, "target.data.name");
+ }
+
+ data.tree = tree;
}
- // sort the list of children alphabetically by name
- for each (u in tree.nodes) {
- u.sortEdgesBy(NodeSprite.CHILD_LINKS, "target.data.name");
- }
-
- data.tree = tree;
return data;
}
Modified:
cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/operator/router/Shape.as
===================================================================
--- cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/operator/router/Shape.as
2010-07-22 21:20:55 UTC (rev 20993)
+++ cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/operator/router/Shape.as
2010-07-22 21:55:11 UTC (rev 20994)
@@ -132,7 +132,7 @@
public function addControlPoint():void {
var intersectionPointsArray:Array = new Array();
var intersectionPoint:Point;
- var controlPoint:Point;
+ var cp:Point;
var a:Point, b:Point; //a,b stores the end points of
the meshEdge of each shape
var e:Point, f:Point; //e,f stores the end points of
the each dataEdge
@@ -154,7 +154,7 @@
}
if(intersectionPointsArray.length != 0) {
- controlPoint =
findControlPointFromIntersectionPoints(intersectionPointsArray)
+ cp =
findControlPointFromIntersectionPoints(intersectionPointsArray)
} else {
trace("Shape: addControlPoints: " +
(gridIndex[0] as Point).toString() + " has no controlPoint");
}
@@ -165,7 +165,8 @@
if (ctrl == null) {
edge.props.$controlPointsArray = ctrl = [];
}
- ctrl.push(controlPoint);
+
+ ctrl.push(cp);
}
}
Modified:
cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/BundleRenderer.as
===================================================================
--- cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/BundleRenderer.as
2010-07-22 21:20:55 UTC (rev 20993)
+++ cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/BundleRenderer.as
2010-07-22 21:55:11 UTC (rev 20994)
@@ -2,8 +2,8 @@
{
import flare.vis.data.DataSprite;
import flare.vis.data.EdgeSprite;
- import flare.vis.data.render.EdgeRenderer;
+ import flash.display.Sprite;
import flash.geom.Point;
public class BundleRenderer extends EdgeRenderer
Added: cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/EdgeRenderer.as
===================================================================
--- cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/EdgeRenderer.as
(rev 0)
+++ cytoscapeweb/branches/gsoc2010/gbeb/src/gbeb/view/render/EdgeRenderer.as
2010-07-22 21:55:11 UTC (rev 20994)
@@ -0,0 +1,200 @@
+package gbeb.view.render
+{
+ import flare.util.Geometry;
+ import flare.util.Shapes;
+ import flare.vis.data.DataSprite;
+ import flare.vis.data.EdgeSprite;
+ import flare.vis.data.NodeSprite;
+ import flare.vis.data.render.ArrowType;
+ import flare.vis.data.render.IRenderer;
+
+ import flash.display.Graphics;
+ import flash.geom.Point;
+ import flash.geom.Rectangle;
+
+ /**
+ * Renderer that draws edges as lines. The EdgeRenderer supports
straight
+ * lines, poly lines, and curves as Bezier or cardinal splines. The type
+ * of edge drawn is determined from an EdgeSprite's <code>shape</code>
+ * property and control points found in the <code>points</code>
property.
+ * The line rendering properties are set by the
<code>setLineStyle</code>
+ * method, which can be overridden by subclasses. By default, the line
+ * rendering settings are determined using default property values set
+ * on this class (for example, the <code>scaleMode<code> and
+ * <code>caps</code> properties).
+ */
+ public class EdgeRenderer implements IRenderer
+ {
+ private static const ROOT3:Number = Math.sqrt(3);
+
+ private static var _instance:EdgeRenderer = new EdgeRenderer();
+ /** Static EdgeRenderer instance. */
+ public static function get instance():EdgeRenderer { return
_instance; }
+
+ /** Pixel hinting flag for line rendering. */
+ public var pixelHinting:Boolean = false;
+ /** Scale mode for line rendering (normal by default). */
+ public var scaleMode:String = "normal";
+ /** The joint style for line rendering. */
+ public var joints:String = null;
+ /** The caps style for line rendering. */
+ public var caps:String = null;
+ /** The miter limit for line rendering. */
+ public var miterLimit:int = 3;
+
+ // temporary variables
+ private var _p:Point = new Point(), _q:Point = new Point();
+ private var _pts:Array = new Array(20);
+
+ /** @inheritDoc */
+ public function render(d:DataSprite):void
+ {
+ var e:EdgeSprite = d as EdgeSprite;
+ if (e == null) { return; } // TODO: throw exception?
+ var s:NodeSprite = e.source;
+ var t:NodeSprite = e.target;
+ var g:Graphics = e.graphics;
+
+ var ctrls:Array = e.points as Array;
+ var x1:Number = e.x1, y1:Number = e.y1;
+ var x2:Number = e.x2, y2:Number = e.y2;
+ var xL:Number = ctrls==null ? x1 :
ctrls[ctrls.length-2];
+ var yL:Number = ctrls==null ? y1 :
ctrls[ctrls.length-1];
+ var dx:Number, dy:Number, dd:Number;
+
+ // modify end points as needed to accomodate arrow
+ if (e.arrowType != ArrowType.NONE)
+ {
+ // determine arrow head size
+ var ah:Number = e.arrowHeight, aw:Number =
e.arrowWidth/2;
+ if (ah < 0 && aw < 0)
+ aw = 1.5 * e.lineWidth;
+ if (ah < 0) {
+ ah = ROOT3 * aw;
+ } else if (aw < 0) {
+ aw = ah / ROOT3;
+ }
+
+ // get arrow tip point as intersection of edge
with bounding box
+ if (t==null) {
+ _p.x = x2; _p.y = y2;
+ } else {
+ var r:Rectangle = t.getBounds(t.parent);
+ if
(Geometry.intersectLineRect(xL,yL,x2,y2, r, _p,_q) <= 0)
+ {
+ _p.x = x2; _p.y = y2;
+ }
+ }
+
+ // get unit vector along arrow line
+ dx = _p.x - xL; dy = _p.y - yL;
+ dd = Math.sqrt(dx*dx + dy*dy);
+ dx /= dd; dy /= dd;
+
+ // set final point positions
+ dd = e.lineWidth/2;
+ // if drawing as lines, offset arrow tip by
half the line width
+ if (e.arrowType == ArrowType.LINES) {
+ _p.x -= dd*dx;
+ _p.y -= dd*dy;
+ dd += e.lineWidth;
+ }
+ // offset the anchor point (the end point for
the edge connector)
+ // so that edge doesn't "overshoot" the arrow
head
+ dd = ah - dd;
+ x2 = _p.x - dd*dx;
+ y2 = _p.y - dd*dy;
+ }
+
+ // draw the edge
+ g.clear(); // clear it out
+ setLineStyle(e, g); // set the line style
+ if (e.shape == Shapes.BEZIER && ctrls != null &&
ctrls.length > 1) {
+ if (ctrls.length < 4)
+ {
+ g.moveTo(x1, y1);
+ g.curveTo(ctrls[0], ctrls[1], x2, y2);
+ }
+ else
+ {
+ Shapes.drawCubic(g, x1, y1, ctrls[0],
ctrls[1],
+
ctrls[2], ctrls[3], x2, y2);
+ }
+ }
+ else if (e.shape == Shapes.CARDINAL)
+ {
+ Shapes.consolidate(x1, y1, ctrls, x2, y2, _pts);
+ Shapes.drawCardinal(g, _pts, 2+ctrls.length/2);
+ }
+ else if (e.shape == Shapes.BSPLINE)
+ {
+ Shapes.consolidate(x1, y1, ctrls, x2, y2, _pts);
+ Shapes.drawBSpline(g, _pts, 2+ctrls.length/2);
+
+ // DEBUG: draw control points:
+ //
****************************************************************
+ for each (var p:Point in e.props.$controlPointsArray) {
+ g.lineStyle(0, 0, 0);
+ g.beginFill(0x009900);
+ g.drawCircle(p.x, p.y, 2);
+ g.endFill();
+ }
+ for (var i:uint=0; i < _pts.length; i+=2) {
+ if (i < _pts.length-2) {
+ var cx:Number = _pts[i];
+ var cy:Number = _pts[i+1];
+ g.lineStyle(0, 0, 0);
+ g.beginFill(0xdddd00, 0.5);
+ g.drawCircle(cx, cy, 5);
+ g.endFill();
+ }
+ }
+ //
****************************************************************
+ }
+ else
+ {
+ g.moveTo(x1, y1);
+ if (ctrls != null) {
+ for (var i:uint=0; i<ctrls.length; i+=2)
+ g.lineTo(ctrls[i], ctrls[i+1]);
+ }
+ g.lineTo(x2, y2);
+ }
+
+ // draw an arrow
+ if (e.arrowType != ArrowType.NONE) {
+ // get other arrow points
+ x1 = _p.x - ah*dx + aw*dy; y1 = _p.y - ah*dy -
aw*dx;
+ x2 = _p.x - ah*dx - aw*dy; y2 = _p.y - ah*dy +
aw*dx;
+
+ if (e.arrowType == ArrowType.TRIANGLE) {
+ g.lineStyle();
+ g.moveTo(_p.x, _p.y);
+ g.beginFill(e.lineColor, e.lineAlpha);
+ g.lineTo(x1, y1);
+ g.lineTo(x2, y2);
+ g.endFill();
+ } else if (e.arrowType == ArrowType.LINES) {
+ g.moveTo(x1, y1);
+ g.lineTo(_p.x, _p.y);
+ g.lineTo(x2, y2);
+ }
+ }
+ }
+
+ /**
+ * Sets the line style for edge rendering.
+ * @param e the EdgeSprite to render
+ * @param g the Graphics context to draw with
+ */
+ protected function setLineStyle(e:EdgeSprite, g:Graphics):void
+ {
+ var lineAlpha:Number = e.lineAlpha;
+ if (lineAlpha == 0) return;
+
+ g.lineStyle(e.lineWidth, e.lineColor, lineAlpha,
+ pixelHinting, scaleMode, caps, joints,
miterLimit);
+ }
+
+ } // end of class EdgeRenderer
+}
\ No newline at end of file
--
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.
