You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.4 KiB
76 lines
2.4 KiB
;(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.arrow =
|
|
function(edge, source, target, context, settings) {
|
|
var color = edge.color,
|
|
prefix = settings('prefix') || '',
|
|
edgeColor = settings('edgeColor'),
|
|
defaultNodeColor = settings('defaultNodeColor'),
|
|
defaultEdgeColor = settings('defaultEdgeColor'),
|
|
size = edge[prefix + 'size'] || 1,
|
|
tSize = target[prefix + 'size'],
|
|
sX = source[prefix + 'x'],
|
|
sY = source[prefix + 'y'],
|
|
tX = target[prefix + 'x'],
|
|
tY = target[prefix + 'y'];
|
|
|
|
size = (edge.hover) ?
|
|
settings('edgeHoverSizeRatio') * size : size;
|
|
var aSize = size * 2.5,
|
|
d = Math.sqrt(Math.pow(tX - sX, 2) + Math.pow(tY - sY, 2)),
|
|
aX = sX + (tX - sX) * (d - aSize - tSize) / d,
|
|
aY = sY + (tY - sY) * (d - aSize - tSize) / d,
|
|
vX = (tX - sX) * aSize / d,
|
|
vY = (tY - sY) * 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);
|
|
context.lineTo(
|
|
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();
|
|
};
|
|
})();
|