;(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.tapered = function(edge, source, target, context, settings) { // The goal is to draw a triangle where the target node is a point of // the triangle, and the two other points are the intersection of the // source circle and the circle (target, distance(source, target)). var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color, prefix = settings('prefix') || '', size = edge[prefix + 'size'] || 1, edgeColor = settings('edgeColor'), prefix = settings('prefix') || '', defaultNodeColor = settings('defaultNodeColor'), defaultEdgeColor = settings('defaultEdgeColor'), sX = source[prefix + 'x'], sY = source[prefix + 'y'], tX = target[prefix + 'x'], tY = target[prefix + 'y'], dist = sigma.utils.getDistance(sX, sY, tX, tY); 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; } size *= settings('edgeHoverSizeRatio'); // Intersection points: var c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist); context.save(); // Turn transparency on: context.globalAlpha = 0.65; // Draw the triangle: context.fillStyle = color; context.beginPath(); context.moveTo(tX, tY); context.lineTo(c.xi, c.yi); context.lineTo(c.xi_prime, c.yi_prime); context.closePath(); context.fill(); context.restore(); }; })();