;(function() { 'use strict'; sigma.utils.pkg('sigma.svg.edges'); /** * The curve edge renderer. It renders the node as a bezier curve. */ sigma.svg.edges.curve = { /** * SVG Element creation. * * @param {object} edge The edge object. * @param {object} source The source node object. * @param {object} target The target node object. * @param {configurable} settings The settings function. */ create: function(edge, source, target, settings) { var color = edge.color, prefix = settings('prefix') || '', edgeColor = settings('edgeColor'), defaultNodeColor = settings('defaultNodeColor'), defaultEdgeColor = settings('defaultEdgeColor'); if (!color) switch (edgeColor) { case 'source': color = source.color || defaultNodeColor; break; case 'target': color = target.color || defaultNodeColor; break; default: color = defaultEdgeColor; break; } var path = document.createElementNS(settings('xmlns'), 'path'); // Attributes path.setAttributeNS(null, 'data-edge-id', edge.id); path.setAttributeNS(null, 'class', settings('classPrefix') + '-edge'); path.setAttributeNS(null, 'stroke', color); return path; }, /** * SVG Element update. * * @param {object} edge The edge object. * @param {DOMElement} line The line DOM Element. * @param {object} source The source node object. * @param {object} target The target node object. * @param {configurable} settings The settings function. */ update: function(edge, path, source, target, settings) { var prefix = settings('prefix') || ''; path.setAttributeNS(null, 'stroke-width', edge[prefix + 'size'] || 1); // Control point var cx = (source[prefix + 'x'] + target[prefix + 'x']) / 2 + (target[prefix + 'y'] - source[prefix + 'y']) / 4, cy = (source[prefix + 'y'] + target[prefix + 'y']) / 2 + (source[prefix + 'x'] - target[prefix + 'x']) / 4; // Path var p = 'M' + source[prefix + 'x'] + ',' + source[prefix + 'y'] + ' ' + 'Q' + cx + ',' + cy + ' ' + target[prefix + 'x'] + ',' + target[prefix + 'y']; // Updating attributes path.setAttributeNS(null, 'd', p); path.setAttributeNS(null, 'fill', 'none'); // Showing path.style.display = ''; return this; } }; })();