Skip to content

Commit b9b0797

Browse files
maxkfranzmaxkfranz
authored
Merge pull request cytoscape#2892 from zakjan/edge-style
Add edge-style property
2 parents 75d5ce7 + 75ba2da commit b9b0797

File tree

7 files changed

+88
-16
lines changed

7 files changed

+88
-16
lines changed

‎debug/init.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,15 @@ var cy, defaultSty, options;
3030
'segment-distances': [ 20, -80 ],
3131
'segment-weights': [ 0.25, 0.5 ],
3232
})
33+
.selector('#ef')
34+
.style({
35+
'curve-style': 'straight-triangle',
36+
'source-arrow-shape': 'none',
37+
'target-arrow-shape': 'none',
38+
'mid-target-arrow-shape': 'none',
39+
'mid-source-arrow-shape': 'none',
40+
'width': 6,
41+
})
3342
.selector('[source = "c"][target = "e"]')
3443
.style({
3544
'curve-style': 'haystack',
@@ -86,7 +95,8 @@ var cy, defaultSty, options;
8695
{ data: { id: 'de3', weight: 7, source: 'd', target: 'e' } },
8796
{ data: { id: 'de4', weight: 7, source: 'd', target: 'e' } },
8897
{ data: { id: 'de5', weight: 7, source: 'd', target: 'e' } },
89-
{ data: { id: 'bf', weight: 3, source: 'b', target: 'f' } }
98+
{ data: { id: 'bf', weight: 3, source: 'b', target: 'f' } },
99+
{ data: { id: 'ef', weight: 3, source: 'e', target: 'f' } }
90100
]
91101
}
92102
};

‎documentation/demos/edge-types/cy-style.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,10 @@
6060
"taxi-turn": 20,
6161
"taxi-turn-min-distance": 5
6262
}
63+
}, {
64+
"selector": "edge.straight-triangle",
65+
"style": {
66+
"curve-style": "straight-triangle",
67+
"width": 10
68+
}
6369
}]

‎documentation/demos/edge-types/data.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,4 +159,19 @@
159159
"target": "n16"
160160
},
161161
"classes": "loop"
162+
}, {
163+
"data": {
164+
"id": "n17",
165+
"type": "straight-triangle"
166+
}
167+
}, {
168+
"data": {
169+
"id": "n18"
170+
}
171+
}, {
172+
"data": {
173+
"source": "n17",
174+
"target": "n18"
175+
},
176+
"classes": "straight-triangle"
162177
}]

‎documentation/md/style.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ The following is an example of valid background image styling using JSON. The ex
336336
These properties affect the styling of an edge's line:
337337
338338
* **`width`** : The width of an edge's line.
339-
* **`curve-style`** : The curving method used to separate two or more edges between two nodes ([demo](demos/edge-types)); may be [`haystack`](#style/haystack-edges) (default, very fast, bundled straight edges for which loops and compounds are unsupported), [`straight`](#style/straight-edges) (straight edges with all arrows supported), [`bezier`](#style/bezier-edges) (bundled curved edges), [`unbundled-bezier`](#style/unbundled-bezier-edges) (curved edges for use with manual control points), [`segments`](#style/segments-edges) (a series of straight lines), [`taxi`](#style/taxi-edges) (right-angled lines, hierarchically bundled). Note that `haystack` edges work best with `ellipse`, `rectangle`, or similar nodes. Smaller node shapes, like `triangle`, will not be as aesthetically pleasing. Also note that edge endpoint arrows are unsupported for `haystack` edges.
339+
* **`curve-style`** : The curving method used to separate two or more edges between two nodes ([demo](demos/edge-types)); may be [`haystack`](#style/haystack-edges) (default, very fast, bundled straight edges for which loops and compounds are unsupported), [`straight`](#style/straight-edges) (straight edges with all arrows supported), [`straight-triangle`](#style/straight-triangle-edges) (straight triangle edges), [`bezier`](#style/bezier-edges) (bundled curved edges), [`unbundled-bezier`](#style/unbundled-bezier-edges) (curved edges for use with manual control points), [`segments`](#style/segments-edges) (a series of straight lines), [`taxi`](#style/taxi-edges) (right-angled lines, hierarchically bundled). Note that `haystack` edges work best with `ellipse`, `rectangle`, or similar nodes. Smaller node shapes, like `triangle`, will not be as aesthetically pleasing. Also note that edge endpoint arrows are unsupported for `haystack` edges.
340340
* **`line-color`** : The colour of the edge's line.
341341
* **`line-style`** : The style of the edge's line; may be `solid`, `dotted`, or `dashed`.
342342
* **`line-cap`** : The cap style of the edge's line; may be `butt` (default), `round`, or `square`. The cap may or may not be visible, depending on the shape of the node and the relative size of the node and edge. Caps other than `butt` extend beyond the specified endpoint of the edge.
@@ -420,6 +420,15 @@ For straight line edges (`curve-style: straight`, [demo](demos/edge-types)):
420420
A straight edge (`curve-style: straight`) is drawn as a single straight line from the outside of the source node shape to the outside of the target node shape. Endpoint and midpoint arrows are supported on straight edges. Straight edges are not generally suitable for multigraphs.
421421
422422
423+
## Straight triangle edges
424+
425+
For straight triangle edges (`curve-style: straight-triangle`, [demo](demos/edge-types)):
426+
427+
A straight triangle edge (`curve-style: straight-triangle`) is drawn as a single straight isosceles triangle in the direction from the source to the target, with a triangle base at the source and a triangle apex (a point) at the target.
428+
429+
Property `width` defines width of the triangle base. Properties `line-style`, `line-cap`, `line-dash-pattern`, `line-dash-offset` are not supported.
430+
431+
423432
## Taxi edges
424433
425434
For hierarchical, bundled edges (`curve-style: taxi`, [demo](demos/edge-types)):

‎src/extensions/renderer/base/coord-ele-math/edge-control-points.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -650,7 +650,7 @@ BRp.findEdgeControlPoints = function( edges ){
650650
continue;
651651
}
652652

653-
let edgeIsUnbundled = curveStyle === 'unbundled-bezier' || curveStyle === 'segments' || curveStyle === 'straight' || curveStyle === 'taxi';
653+
let edgeIsUnbundled = curveStyle === 'unbundled-bezier' || curveStyle === 'segments' || curveStyle === 'straight' || curveStyle === 'straight-triangle' || curveStyle === 'taxi';
654654
let edgeIsBezier = curveStyle === 'unbundled-bezier' || curveStyle === 'bezier';
655655
let src = _p.source;
656656
let tgt = _p.target;

‎src/extensions/renderer/canvas/drawing-edges.js

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ CRp.drawEdge = function( context, edge, shiftToOriginWithBb, drawLabel = true, s
2525
let opacity = shouldDrawOpacity ? edge.pstyle('opacity').value : 1;
2626
let lineOpacity = shouldDrawOpacity ? edge.pstyle('line-opacity').value : 1;
2727

28+
let curveStyle = edge.pstyle('curve-style').value;
2829
let lineStyle = edge.pstyle('line-style').value;
2930
let edgeWidth = edge.pstyle('width').pfValue;
3031
let lineCap = edge.pstyle('line-cap').value;
@@ -34,18 +35,27 @@ CRp.drawEdge = function( context, edge, shiftToOriginWithBb, drawLabel = true, s
3435
let effectiveArrowOpacity = opacity * lineOpacity;
3536

3637
let drawLine = ( strokeOpacity = effectiveLineOpacity) => {
37-
context.lineWidth = edgeWidth;
38-
context.lineCap = lineCap;
39-
40-
r.eleStrokeStyle( context, edge, strokeOpacity );
41-
r.drawEdgePath(
42-
edge,
43-
context,
44-
rs.allpts,
45-
lineStyle
46-
);
47-
48-
context.lineCap = 'butt'; // reset for other drawing functions
38+
if (curveStyle === 'straight-triangle') {
39+
r.eleStrokeStyle( context, edge, strokeOpacity );
40+
r.drawEdgeTrianglePath(
41+
edge,
42+
context,
43+
rs.allpts
44+
);
45+
} else {
46+
context.lineWidth = edgeWidth;
47+
context.lineCap = lineCap;
48+
49+
r.eleStrokeStyle( context, edge, strokeOpacity );
50+
r.drawEdgePath(
51+
edge,
52+
context,
53+
rs.allpts,
54+
lineStyle
55+
);
56+
57+
context.lineCap = 'butt'; // reset for other drawing functions
58+
}
4959
};
5060

5161
let drawOverlay = () => {
@@ -202,6 +212,28 @@ CRp.drawEdgePath = function( edge, context, pts, type ){
202212

203213
};
204214

215+
216+
CRp.drawEdgeTrianglePath = function( edge, context, pts ){
217+
// use line stroke style for triangle fill style
218+
context.fillStyle = context.strokeStyle;
219+
220+
let edgeWidth = edge.pstyle('width').pfValue;
221+
222+
for( let i = 0; i + 1 < pts.length; i += 2 ){
223+
const vector = [ pts[ i + 2 ] - pts[ i ], pts[ i + 3 ] - pts[ i + 1 ] ];
224+
const length = Math.sqrt( vector[0] * vector[0] + vector[1] * vector[1] );
225+
const normal = [ vector[1] / length, -vector[0] / length ];
226+
const triangleHead = [ normal[0] * edgeWidth / 2, normal[1] * edgeWidth / 2 ];
227+
228+
context.beginPath();
229+
context.moveTo( pts[ i ] - triangleHead[0], pts[ i + 1 ] - triangleHead[1] );
230+
context.lineTo( pts[ i ] + triangleHead[0], pts[ i + 1 ] + triangleHead[1] );
231+
context.lineTo( pts[ i + 2 ], pts[ i + 3 ] );
232+
context.closePath();
233+
context.fill();
234+
}
235+
};
236+
205237
CRp.drawArrowheads = function( context, edge, opacity ){
206238
let rs = edge._private.rscratch;
207239
let isHaystack = rs.edgeType === 'haystack';

‎src/style/properties.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const styfn = {};
5757
lineStyle: { enums: [ 'solid', 'dotted', 'dashed' ] },
5858
lineCap: { enums: [ 'butt', 'round', 'square' ] },
5959
borderStyle: { enums: [ 'solid', 'dotted', 'dashed', 'double' ] },
60-
curveStyle: { enums: [ 'bezier', 'unbundled-bezier', 'haystack', 'segments', 'straight', 'taxi' ] },
60+
curveStyle: { enums: [ 'bezier', 'unbundled-bezier', 'haystack', 'segments', 'straight', 'straight-triangle', 'taxi' ] },
6161
fontFamily: { regex: '^([\\w- \\"]+(?:\\s*,\\s*[\\w- \\"]+)*)$' },
6262
fontStyle: { enums: [ 'italic', 'normal', 'oblique' ] },
6363
fontWeight: { enums: [ 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '800', '900', 100, 200, 300, 400, 500, 600, 700, 800, 900 ] },

0 commit comments

Comments
 (0)