Permalink
Browse files

Converted to parallelEdges plugin. Added support for parallel edge la…

…bels.
  • Loading branch information...
1 parent f220ff1 commit fdbf70dd4d64ad1168a429f7feb263a7ff0c0d40 @3ch01c 3ch01c committed Apr 9, 2015
View
@@ -82,6 +82,7 @@ module.exports = function(grunt) {
'renderers.customEdgeShapes',
'renderers.customShapes',
'renderers.edgeLabels',
+ 'renderers.parallelEdges',
'renderers.snapshot',
'statistics.HITS'
];
@@ -46,10 +46,11 @@
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
-<script src="../plugins/sigma.renderers.edgeLabels/settings.js"></script>
-<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.def.js"></script>
-<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curve.js"></script>
-<script src="../plugins/sigma.renderers.edgeLabels/sigma.canvas.edges.labels.curvedArrow.js"></script>
+<script src="../plugins/sigma.renderers.parallelEdges/utils.js"></script>
+<script src="../plugins/sigma.renderers.parallelEdges/sigma.canvas.edges.curve.js"></script>
+<script src="../plugins/sigma.renderers.parallelEdges/sigma.canvas.edges.curvedArrow.js"></script>
+<script src="../plugins/sigma.renderers.parallelEdges/sigma.canvas.edgehovers.curve.js"></script>
+<script src="../plugins/sigma.renderers.parallelEdges/sigma.canvas.edgehovers.curvedArrow.js"></script>
<div id="container">
<style>
#graph-container {
@@ -105,9 +106,6 @@
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
- },
- settings: {
- edgeLabelSize: 'proportional'
}
});
</script>
@@ -0,0 +1,31 @@
+sigma.renderers.edgeLabels
+==================
+
+Plugin developed by [Jack Miner](https://github.com/3ch01c).
+
+Contact: 3ch01c@gmail.com
+
+---
+## General
+This plugin allows visualizing multiple parallel edges.
+
+See the following [example](../../examples/parallel-edges.html) for full usage.
+
+To use it, include all .js files under this folder.
+
+## Edges
+
+This plugin extends Sigma.js edges:
+
+ * **count**
+ * Represents the index of the edge in the set of parallel edges. Inversely proportional to the amplitude of the vertex of the edge curve.
+ * type: *number*
+ * default value: `0`
+
+## Renderers
+
+This plugin modifies
+
+## Utils
+
+This plugin modifies functions `sigma.utils.getQuadraticControlPoint` and `sigma.utils.getSelfLoopControlPoints` with an optional amplitude modifier parameters.
@@ -0,0 +1,65 @@
+;(function() {
+ 'use strict';
+
+ sigma.utils.pkg('sigma.canvas.edgehovers');
+
+ /**
+ * This hover renderer will display the edge with a different color or size.
+ *
+ * @param {object} edge The edge object.
+ * @param {object} source node The edge source node.
+ * @param {object} target node The edge target node.
+ * @param {CanvasRenderingContext2D} context The canvas context.
+ * @param {configurable} settings The settings function.
+ */
+ sigma.canvas.edgehovers.curve =
+ function(edge, source, target, context, settings) {
+ var color = edge.color,
+ prefix = settings('prefix') || '',
+ size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+ count = edge.count || 0,
+ edgeColor = settings('edgeColor'),
+ defaultNodeColor = settings('defaultNodeColor'),
+ defaultEdgeColor = settings('defaultEdgeColor'),
+ cp = {},
+ sSize = source[prefix + 'size'],
+ sX = source[prefix + 'x'],
+ sY = source[prefix + 'y'],
+ tX = target[prefix + 'x'],
+ tY = target[prefix + 'y'];
+
+ cp = (source.id === target.id) ?
+ sigma.utils.getSelfLoopControlPoints(sX, sY, sSize, count) :
+ sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+ if (!color)
+ switch (edgeColor) {
+ case 'source':
+ color = source.color || defaultNodeColor;
+ break;
+ case 'target':
+ color = target.color || defaultNodeColor;
+ break;
+ default:
+ color = defaultEdgeColor;
+ break;
+ }
+
+ if (settings('edgeHoverColor') === 'edge') {
+ color = edge.hover_color || color;
+ } else {
+ color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+ }
+
+ context.strokeStyle = color;
+ context.lineWidth = size;
+ context.beginPath();
+ context.moveTo(sX, sY);
+ if (source.id === target.id) {
+ context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+ } else {
+ context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+ }
+ context.stroke();
+ };
+})();
@@ -0,0 +1,97 @@
+;(function() {
+ 'use strict';
+
+ sigma.utils.pkg('sigma.canvas.edgehovers');
+
+ /**
+ * This hover renderer will display the edge with a different color or size.
+ *
+ * @param {object} edge The edge object.
+ * @param {object} source node The edge source node.
+ * @param {object} target node The edge target node.
+ * @param {CanvasRenderingContext2D} context The canvas context.
+ * @param {configurable} settings The settings function.
+ */
+ sigma.canvas.edgehovers.curvedArrow =
+ function(edge, source, target, context, settings) {
+ var color = edge.color,
+ prefix = settings('prefix') || '',
+ edgeColor = settings('edgeColor'),
+ defaultNodeColor = settings('defaultNodeColor'),
+ defaultEdgeColor = settings('defaultEdgeColor'),
+ cp = {},
+ size = settings('edgeHoverSizeRatio') * (edge[prefix + 'size'] || 1),
+ count = edge.count || 0,
+ tSize = target[prefix + 'size'],
+ sX = source[prefix + 'x'],
+ sY = source[prefix + 'y'],
+ tX = target[prefix + 'x'],
+ tY = target[prefix + 'y'],
+ d,
+ aSize,
+ aX,
+ aY,
+ vX,
+ vY;
+
+ cp = (source.id === target.id) ?
+ sigma.utils.getSelfLoopControlPoints(sX, sY, tSize, count) :
+ sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+ if (source.id === target.id) {
+ d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+ aSize = size * 2.5;
+ aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+ aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+ vX = (tX - cp.x1) * aSize / d;
+ vY = (tY - cp.y1) * aSize / d;
+ }
+ else {
+ d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+ aSize = size * 2.5;
+ aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+ aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+ vX = (tX - cp.x) * aSize / d;
+ vY = (tY - cp.y) * aSize / d;
+ }
+
+ if (!color)
+ switch (edgeColor) {
+ case 'source':
+ color = source.color || defaultNodeColor;
+ break;
+ case 'target':
+ color = target.color || defaultNodeColor;
+ break;
+ default:
+ color = defaultEdgeColor;
+ break;
+ }
+
+ if (settings('edgeHoverColor') === 'edge') {
+ color = edge.hover_color || color;
+ } else {
+ color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
+ }
+
+ context.strokeStyle = color;
+ context.lineWidth = size;
+ context.beginPath();
+ context.moveTo(sX, sY);
+ if (source.id === target.id) {
+ context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+ } else {
+ context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+ }
+ context.stroke();
+
+ context.fillStyle = color;
+ context.beginPath();
+ context.moveTo(aX + vX, aY + vY);
+ context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+ context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+ context.lineTo(aX + vX, aY + vY);
+ context.closePath();
+ context.fill();
+ };
+})();
@@ -0,0 +1,58 @@
+;(function() {
+ 'use strict';
+
+ sigma.utils.pkg('sigma.canvas.edges');
+
+ /**
+ * This edge renderer will display edges as curves.
+ *
+ * @param {object} edge The edge object.
+ * @param {object} source node The edge source node.
+ * @param {object} target node The edge target node.
+ * @param {CanvasRenderingContext2D} context The canvas context.
+ * @param {configurable} settings The settings function.
+ */
+ sigma.canvas.edges.curve = function(edge, source, target, context, settings) {
+ var color = edge.color,
+ prefix = settings('prefix') || '',
+ size = edge[prefix + 'size'] || 1,
+ count = edge.count || 0,
+ edgeColor = settings('edgeColor'),
+ defaultNodeColor = settings('defaultNodeColor'),
+ defaultEdgeColor = settings('defaultEdgeColor'),
+ cp = {},
+ sSize = source[prefix + 'size'],
+ sX = source[prefix + 'x'],
+ sY = source[prefix + 'y'],
+ tX = target[prefix + 'x'],
+ tY = target[prefix + 'y'];
+
+ cp = (source.id === target.id) ?
+ sigma.utils.getSelfLoopControlPoints(sX, sY, sSize, count) :
+ sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+ if (!color)
+ switch (edgeColor) {
+ case 'source':
+ color = source.color || defaultNodeColor;
+ break;
+ case 'target':
+ color = target.color || defaultNodeColor;
+ break;
+ default:
+ color = defaultEdgeColor;
+ break;
+ }
+
+ context.strokeStyle = color;
+ context.lineWidth = size;
+ context.beginPath();
+ context.moveTo(sX, sY);
+ if (source.id === target.id) {
+ context.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, tX, tY);
+ } else {
+ context.quadraticCurveTo(cp.x, cp.y, tX, tY);
+ }
+ context.stroke();
+ };
+})();
@@ -0,0 +1,89 @@
+;(function() {
+ 'use strict';
+
+ sigma.utils.pkg('sigma.canvas.edges');
+
+ /**
+ * This edge renderer will display edges as curves with arrow heading.
+ *
+ * @param {object} edge The edge object.
+ * @param {object} source node The edge source node.
+ * @param {object} target node The edge target node.
+ * @param {CanvasRenderingContext2D} context The canvas context.
+ * @param {configurable} settings The settings function.
+ */
+ sigma.canvas.edges.curvedArrow =
+ function(edge, source, target, context, settings) {
+ var color = edge.color,
+ prefix = settings('prefix') || '',
+ edgeColor = settings('edgeColor'),
+ defaultNodeColor = settings('defaultNodeColor'),
+ defaultEdgeColor = settings('defaultEdgeColor'),
+ cp = {},
+ size = edge[prefix + 'size'] || 1,
+ count = edge.count || 0,
+ tSize = target[prefix + 'size'],
+ sX = source[prefix + 'x'],
+ sY = source[prefix + 'y'],
+ tX = target[prefix + 'x'],
+ tY = target[prefix + 'y'],
+ aSize = Math.max(size * 2.5, settings('minArrowSize')),
+ d,
+ aX,
+ aY,
+ vX,
+ vY;
+
+ cp = (source.id === target.id) ?
+ sigma.utils.getSelfLoopControlPoints(sX, sY, tSize, count) :
+ sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY, count);
+
+ if (source.id === target.id) {
+ d = Math.sqrt(Math.pow(tX - cp.x1, 2) + Math.pow(tY - cp.y1, 2));
+ aX = cp.x1 + (tX - cp.x1) * (d - aSize - tSize) / d;
+ aY = cp.y1 + (tY - cp.y1) * (d - aSize - tSize) / d;
+ vX = (tX - cp.x1) * aSize / d;
+ vY = (tY - cp.y1) * aSize / d;
+ }
+ else {
+ d = Math.sqrt(Math.pow(tX - cp.x, 2) + Math.pow(tY - cp.y, 2));
+ aX = cp.x + (tX - cp.x) * (d - aSize - tSize) / d;
+ aY = cp.y + (tY - cp.y) * (d - aSize - tSize) / d;
+ vX = (tX - cp.x) * aSize / d;
+ vY = (tY - cp.y) * aSize / d;
+ }
+
+ if (!color)
+ switch (edgeColor) {
+ case 'source':
+ color = source.color || defaultNodeColor;
+ break;
+ case 'target':
+ color = target.color || defaultNodeColor;
+ break;
+ default:
+ color = defaultEdgeColor;
+ break;
+ }
+
+ context.strokeStyle = color;
+ context.lineWidth = size;
+ context.beginPath();
+ context.moveTo(sX, sY);
+ if (source.id === target.id) {
+ context.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, aX, aY);
+ } else {
+ context.quadraticCurveTo(cp.x, cp.y, aX, aY);
+ }
+ context.stroke();
+
+ context.fillStyle = color;
+ context.beginPath();
+ context.moveTo(aX + vX, aY + vY);
+ context.lineTo(aX + vY * 0.6, aY - vX * 0.6);
+ context.lineTo(aX - vY * 0.6, aY + vX * 0.6);
+ context.lineTo(aX + vX, aY + vY);
+ context.closePath();
+ context.fill();
+ };
+})();
Oops, something went wrong.

0 comments on commit fdbf70d

Please sign in to comment.