Author: Christian Lopes
Date: 2010-11-17 15:10:03 -0800 (Wed, 17 Nov 2010)
New Revision: 22883
Added:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/LineStyles.as
Modified:
cytoscapeweb/trunk/cytoscapeweb/html-template/js/cytoscapeweb.js
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/data/VisualStyleVO.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Edges.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Utils.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/VisualProperties.as
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/EdgeRenderer.as
Log:
Added "DOT", "LONG_DASH", and "EQUAL_DASH" line styles to edges.
Modified: cytoscapeweb/trunk/cytoscapeweb/html-template/js/cytoscapeweb.js
===================================================================
--- cytoscapeweb/trunk/cytoscapeweb/html-template/js/cytoscapeweb.js
2010-11-17 22:38:03 UTC (rev 22882)
+++ cytoscapeweb/trunk/cytoscapeweb/html-template/js/cytoscapeweb.js
2010-11-17 23:10:03 UTC (rev 22883)
@@ -2500,6 +2500,12 @@
* <ul class="options"><li><code>color</code> {String}: Color of edges.
The default value is "#999999".</li>
* <li><code>width</code> {Number}: Line width of edges. The default
value is 1 pixel.</li>
* <li><code>opacity</code> {Number}: The edge opacity (0 to 1). The
default value is 0.8.</li>
+ * <li><code>style</code> {String}: The edge line style.
+ * One of: <code>"SOLID"</code>,
<code>"DOT"</code>, <code>"LONG_DASH"</code>, <code>"EQUAL_DASH"</code>.
+ * The default value is
<code>"SOLID"</code>.</li>
+ * <li><code>mergeStyle</code> {String}: The line style for merged
edges.
+ * One of: <code>"SOLID"</code>,
<code>"DOT"</code>, <code>"LONG_DASH"</code>, <code>"EQUAL_DASH"</code>.
+ * The default value is
<code>"SOLID"</code>.</li>
* <li><code>mergeColor</code> {String}: Line color for merged edges.
The default value is "#666666".</li>
* <li><code>mergeWidth</code> {Number}: Line width for merged edges.
The default value is 1 pixel.</li>
* <li><code>mergeOpacity</code> {Number}: Opacity of merged edges (0
to 1). The default value is 0.8.</li>
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/data/VisualStyleVO.as
===================================================================
---
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/data/VisualStyleVO.as
2010-11-17 22:38:03 UTC (rev 22882)
+++
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/model/data/VisualStyleVO.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -29,6 +29,7 @@
*/
package org.cytoscapeweb.model.data {
import org.cytoscapeweb.util.ArrowShapes;
+ import org.cytoscapeweb.util.LineStyles;
import org.cytoscapeweb.util.NodeShapes;
import org.cytoscapeweb.util.Utils;
@@ -94,6 +95,8 @@
mergeWidth: 1,
opacity: 0.8,
mergeOpacity: 0.8,
+ style: LineStyles.SOLID,
+ mergeStyle: LineStyles.SOLID,
sourceArrowShape: "none",
targetArrowShape: {
defaultValue: "none",
Modified: cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Edges.as
===================================================================
--- cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Edges.as
2010-11-17 22:38:03 UTC (rev 22882)
+++ cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Edges.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -84,6 +84,7 @@
lineWidth: lineWidth,
shape: shape,
lineColor: lineColor,
+ "props.lineStyle": lineStyle,
alpha: alpha,
visible: visible,
arrowHeight: 10, // default value, when edge width = 1
@@ -92,9 +93,9 @@
"props.targetArrowShape": targetArrowShape,
"props.sourceArrowColor": sourceArrowColor,
"props.targetArrowColor": targetArrowColor,
- renderer: renderer,
"props.curvature": curvature,
filters: filters,
+ renderer: renderer,
buttonMode: true,
mouseChildren: false
};
@@ -135,6 +136,13 @@
return style.getValue(propName, e.data);
}
+ public static function lineStyle(e:EdgeSprite):String {
+ var propName:String = VisualProperties.EDGE_STYLE;
+ if (e.props.$merged) propName = VisualProperties.EDGE_STYLE_MERGE;
+
+ return style.getValue(propName, e.data);
+ }
+
public static function alpha(e:EdgeSprite):Number {
var propName:String = VisualProperties.EDGE_ALPHA;
Added: cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/LineStyles.as
===================================================================
--- cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/LineStyles.as
(rev 0)
+++ cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/LineStyles.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -0,0 +1,104 @@
+/*
+ This file is part of Cytoscape Web.
+ Copyright (c) 2009, The Cytoscape Consortium (www.cytoscape.org)
+
+ The Cytoscape Consortium is:
+ - Agilent Technologies
+ - Institut Pasteur
+ - Institute for Systems Biology
+ - Memorial Sloan-Kettering Cancer Center
+ - National Center for Integrative Biomedical Informatics
+ - Unilever
+ - University of California San Diego
+ - University of California San Francisco
+ - University of Toronto
+
+ This library is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This library is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this library; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+package org.cytoscapeweb.util {
+ import flare.vis.data.EdgeSprite;
+
+ import flash.display.CapsStyle;
+
+ import mx.utils.StringUtil;
+
+
+ public class LineStyles {
+
+ // ========[ CONSTANTS
]====================================================================
+
+ public static const SOLID:String = "SOLID";
+ public static const DOT:String = "DOT";
+ public static const LONG_DASH:String = "LONG_DASH";
+ public static const EQUAL_DASH:String = "EQUAL_DASH";
+
+ // ========[ CONSTRUCTOR
]==================================================================
+
+ /**
+ * This constructor will throw an error, as this is an abstract class.
+ */
+ public function LineStyles() {
+ throw new Error("This is an abstract class.");
+ }
+
+ // ========[ PUBLIC METHODS
]===============================================================
+
+ public static function getOnLength(e:EdgeSprite,
lineStyle:String):Number {
+ var w:Number = e.lineWidth;
+
+ switch (lineStyle) {
+ case DOT: return 0.5;
+ case LONG_DASH: return 4*w;
+ case EQUAL_DASH:
+ default: return 2*w;
+ }
+ }
+
+ public static function getOffLength(e:EdgeSprite,
lineStyle:String):Number {
+ var w:Number = e.lineWidth;
+ return 2*w;
+ }
+
+ public static function getCaps(lineStyle:String):String {
+ switch (lineStyle) {
+ case LONG_DASH:
+ case EQUAL_DASH: return CapsStyle.NONE;
+ case DOT:
+ default: return CapsStyle.ROUND;
+ }
+ }
+
+ public static function isValid(shape:String):Boolean {
+ if (shape != null) shape = StringUtil.trim(shape.toUpperCase());
+
+ return shape == SOLID ||
+ shape == DOT ||
+ shape == LONG_DASH ||
+ shape == EQUAL_DASH;
+ }
+
+ public static function parse(shape:String):String {
+ if (shape != null) shape = StringUtil.trim(shape.toUpperCase());
+
+ switch (shape) {
+ case "DOT": return DOT;
+ case "DASH_DOT":
+ case "LONG_DASH": return LONG_DASH;
+ case "EQUAL_DASH": return EQUAL_DASH;
+ default: return SOLID;
+ }
+ }
+ }
+}
\ No newline at end of file
Modified: cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Utils.as
===================================================================
--- cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Utils.as
2010-11-17 22:38:03 UTC (rev 22882)
+++ cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/Utils.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -257,7 +257,36 @@
public static function bezierPos(a:Number, b:Number, c:Number,
t:Number):Number {
return a*(1-t)*(1-t) + 2*c*(1-t)*t + b*t*t;
}
+
+ /**
+ * Simple linear interpolation between two points (see
http://www.cubic.org/docs/bezier.htm).
+ */
+ public static function lerp(a:Point, b:Point, t:Number):Point {
+ var p:Point = new Point();
+ p.x = a.x + (b.x-a.x)*t;
+ p.y = a.y + (b.y-a.y)*t;
+ return p;
+ }
+ /**
+ * Evaluate a point on a cubic bezier-curve. t goes from 0 to 1.0.
+ * DeCasteljau Algorithm (see http://www.cubic.org/docs/bezier.htm).
+ *
+ * @param a The start point of the curve.
+ * @param b The first control point of the bezier.
+ * @param c The second control point of the bezier.
+ * @param d The end point.
+ */
+ public static function cubicBezierPoint(a:Point, b:Point, c:Point,
d:Point, t:Number):Point {
+ var ab:Point = lerp(a,b,t);
+ var bc:Point = lerp(b, c, t);
+ var cd:Point = lerp(c, d, t);
+ var abbc:Point = lerp(ab, bc, t);
+ var bccd:Point = lerp(bc, cd, t);
+ var p:Point = lerp(abbc, bccd, t);
+ return p;
+ }
+
public static function dataType(value:*):int {
var type:int = DataUtil.OBJECT;
if (value is Boolean) type = DataUtil.BOOLEAN;
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/VisualProperties.as
===================================================================
---
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/VisualProperties.as
2010-11-17 22:38:03 UTC (rev 22882)
+++
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/util/VisualProperties.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -104,10 +104,12 @@
public static const EDGE_COLOR:String = "edges.color";
public static const EDGE_WIDTH:String = "edges.width";
public static const EDGE_ALPHA:String = "edges.opacity";
+ public static const EDGE_STYLE:String = "edges.style";
public static const EDGE_COLOR_MERGE:String = "edges.mergeColor";
public static const EDGE_WIDTH_MERGE:String = "edges.mergeWidth";
public static const EDGE_ALPHA_MERGE:String = "edges.mergeOpacity";
+ public static const EDGE_STYLE_MERGE:String = "edges.mergeStyle";
public static const EDGE_SOURCE_ARROW_SHAPE:String =
"edges.sourceArrowShape";
public static const EDGE_SOURCE_ARROW_COLOR:String =
"edges.sourceArrowColor";
Modified:
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/EdgeRenderer.as
===================================================================
---
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/EdgeRenderer.as
2010-11-17 22:38:03 UTC (rev 22882)
+++
cytoscapeweb/trunk/cytoscapeweb/src/org/cytoscapeweb/view/render/EdgeRenderer.as
2010-11-17 23:10:03 UTC (rev 22883)
@@ -28,6 +28,8 @@
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
package org.cytoscapeweb.view.render {
+ import com.senocular.drawing.DashedLine;
+
import flare.util.Geometry;
import flare.util.Shapes;
import flare.vis.data.DataSprite;
@@ -40,6 +42,7 @@
import flash.geom.Rectangle;
import org.cytoscapeweb.util.ArrowShapes;
+ import org.cytoscapeweb.util.LineStyles;
import org.cytoscapeweb.util.NodeShapes;
import org.cytoscapeweb.util.Utils;
@@ -174,27 +177,69 @@
// Draw the line of the edge:
// ---------------------------
+ var lineStyle:String = e.props.lineStyle;
+ var solid:Boolean = lineStyle === LineStyles.SOLID;
+ var dashedLine:DashedLine;
+
g.clear();
- g.lineStyle(w, color, 1, pixelHinting, scaleMode, caps, joints,
miterLimit);
- g.moveTo(sShaft.x, sShaft.y);
+ if (solid) {
+ g.lineStyle(w, color, 1, pixelHinting, scaleMode, caps,
joints, miterLimit);
+ g.moveTo(sShaft.x, sShaft.y);
+ } else {
+ var onLength:Number = LineStyles.getOnLength(e, lineStyle);
+ var offLength:Number = LineStyles.getOffLength(e, lineStyle);
+
+ dashedLine = new DashedLine(e, onLength, offLength);
+ dashedLine.lineStyle(w, color, 1);
+ dashedLine.moveTo(sShaft.x, sShaft.y);
+
+ var newCaps:String = LineStyles.getCaps(lineStyle);
+ g.lineStyle(w, color, 1, pixelHinting, scaleMode, newCaps,
joints, miterLimit);
+ }
if (loop) {
- Shapes.drawCubic(g, sShaft.x, sShaft.y, op2.x, op2.y, op1.x,
op1.y, eShaft.x, eShaft.y, false);
+ if (solid) {
+ Shapes.drawCubic(g, sShaft.x, sShaft.y, op2.x, op2.y,
op1.x, op1.y, eShaft.x, eShaft.y, false);
+ } else {
+ // We cannot draw a cubic bezier here, so let's just split
it in 2 quadratic curves...
+ // First, find the middle point of the original cubic
curve:
+ var m:Point = Utils.cubicBezierPoint(sShaft, op2, op1,
eShaft, 0.5);
+ var cp1:Point = Utils.cubicBezierPoint(sShaft, op2, op1,
eShaft, 0.25);
+ var cp2:Point = Utils.cubicBezierPoint(sShaft, op2, op1,
eShaft, 0.75);
+
+ // Find the middle point of a segment that goes from the
edge's start point the edge's middle point:
+ var ms:Point = Point.interpolate(m, sShaft, 0.5);
+ // Find the middle point of a segment that goes from the
edge's end point the edge's middle point:
+ var me:Point = Point.interpolate(m, eShaft, 0.5);
+
+ // Move the original contol point--just an aproximation:
+ cp1 = Utils.lerp(ms, cp1, 1.9);
+ cp2 = Utils.lerp(me, cp2, 1.9);
+
+ // Draw 2 quadratic bezier curves:
+ dashedLine.curveTo(cp1.x, cp1.y, m.x, m.y);
+ dashedLine.curveTo(cp2.x, cp2.y, eShaft.x, eShaft.y);
+ }
} else {
if (e.shape != Shapes.LINE) {
- if (nd > 5*w) {
- // Nodes are not too close...
- g.curveTo(op1.x, op1.y, eShaft.x, eShaft.y);
+ if (solid) {
+ if (nd > 5*w) {
+ // Nodes are not too close...
+ g.curveTo(op1.x, op1.y, eShaft.x, eShaft.y);
+ } else {
+ // Flash has a knowm problem with cubic beziers,
which can create artifacts.
+ // Let's try to avoid it by using a quadratic
bezier, instead:
+ var c1:Point = new Point(), c2:Point = new Point();
+ Utils.quadraticToCubic(sShaft, op1, eShaft, c1,
c2);
+ Shapes.drawCubic(g, sShaft.x, sShaft.y, c1.x,
c1.y, c2.x, c2.y, eShaft.x, eShaft.y, false);
+ }
} else {
- // Flash has a knowm problem with cubic beziers, which
can create artifacts.
- // Let's try to avoid it by using a quadratic bezier,
instead:
- var c1:Point = new Point(), c2:Point = new Point();
- Utils.quadraticToCubic(sShaft, op1, eShaft, c1, c2);
- Shapes.drawCubic(g, sShaft.x, sShaft.y, c1.x, c1.y,
c2.x, c2.y, eShaft.x, eShaft.y, false);
+ dashedLine.curveTo(op1.x, op1.y, eShaft.x, eShaft.y);
}
} else {
- g.lineTo(eShaft.x, eShaft.y);
+ if (solid) g.lineTo(eShaft.x, eShaft.y);
+ else dashedLine.lineTo(eShaft.x, eShaft.y);
}
}
--
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.
