sigmajs-react
Version:
Lightweight but powerful library for drawing network graphs built on top of SigmaJS
1,365 lines (1,158 loc) • 52.7 kB
JavaScript
var Sigma =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 89);
/******/ })
/************************************************************************/
/******/ ({
/***/ 20:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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.dashed = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
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;
}
if (settings('edgeHoverColor') === 'edge') {
color = edge.hover_color || color;
} else {
color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
}
size *= settings('edgeHoverSizeRatio');
context.save();
context.setLineDash([8, 3]);
context.strokeStyle = color;
context.lineWidth = size;
context.beginPath();
context.moveTo(source[prefix + 'x'], source[prefix + 'y']);
context.lineTo(target[prefix + 'x'], target[prefix + 'y']);
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 21:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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.dotted = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
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;
}
if (settings('edgeHoverColor') === 'edge') {
color = edge.hover_color || color;
} else {
color = edge.hover_color || settings('defaultEdgeHoverColor') || color;
}
size *= settings('edgeHoverSizeRatio');
context.save();
context.setLineDash([2]);
context.strokeStyle = color;
context.lineWidth = size;
context.beginPath();
context.moveTo(source[prefix + 'x'], source[prefix + 'y']);
context.lineTo(target[prefix + 'x'], target[prefix + 'y']);
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 22:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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.parallel = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
edgeColor = settings('edgeColor'),
defaultNodeColor = settings('defaultNodeColor'),
defaultEdgeColor = settings('defaultEdgeColor'),
sX = source[prefix + 'x'],
sY = source[prefix + 'y'],
tX = target[prefix + 'x'],
tY = target[prefix + 'y'],
c,
d,
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 of the source node circle:
c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
// Intersection points of the target node circle:
d = sigma.utils.getCircleIntersection(tX, tY, size, sX, sY, dist);
context.save();
context.strokeStyle = color;
context.lineWidth = size;
context.beginPath();
context.moveTo(c.xi, c.yi);
context.lineTo(d.xi_prime, d.yi_prime);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(c.xi_prime, c.yi_prime);
context.lineTo(d.xi, d.yi);
context.closePath();
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 23:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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();
};
})();
}).call(window);
/***/ }),
/***/ 24:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.canvas.edges');
/**
* This method renders the edge as a dashed line.
*
* @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.dashed = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
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;
}
context.save();
if (edge.active) {
context.strokeStyle = settings('edgeActiveColor') === 'edge' ? color || defaultEdgeColor : settings('defaultEdgeActiveColor');
} else {
context.strokeStyle = color;
}
context.setLineDash([8, 3]);
context.lineWidth = size;
context.beginPath();
context.moveTo(source[prefix + 'x'], source[prefix + 'y']);
context.lineTo(target[prefix + 'x'], target[prefix + 'y']);
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 25:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.canvas.edges');
/**
* This method renders the edge as a dotted line.
*
* @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.dotted = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
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;
}
context.save();
if (edge.active) {
context.strokeStyle = settings('edgeActiveColor') === 'edge' ? color || defaultEdgeColor : settings('defaultEdgeActiveColor');
} else {
context.strokeStyle = color;
}
context.setLineDash([2]);
context.lineWidth = size;
context.beginPath();
context.moveTo(source[prefix + 'x'], source[prefix + 'y']);
context.lineTo(target[prefix + 'x'], target[prefix + 'y']);
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 26:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.canvas.edges');
/**
* This method renders the edge as two parallel lines.
*
* @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.parallel = function (edge, source, target, context, settings) {
var color = edge.active ? edge.active_color || settings('defaultEdgeActiveColor') : edge.color,
prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1,
edgeColor = settings('edgeColor'),
defaultNodeColor = settings('defaultNodeColor'),
defaultEdgeColor = settings('defaultEdgeColor'),
sX = source[prefix + 'x'],
sY = source[prefix + 'y'],
tX = target[prefix + 'x'],
tY = target[prefix + 'y'],
c,
d,
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;
}
// Intersection points of the source node circle:
c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
// Intersection points of the target node circle:
d = sigma.utils.getCircleIntersection(tX, tY, size, sX, sY, dist);
context.save();
if (edge.active) {
context.strokeStyle = settings('edgeActiveColor') === 'edge' ? color || defaultEdgeColor : settings('defaultEdgeActiveColor');
} else {
context.strokeStyle = color;
}
context.lineWidth = size;
context.beginPath();
context.moveTo(c.xi, c.yi);
context.lineTo(d.xi_prime, d.yi_prime);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(c.xi_prime, c.yi_prime);
context.lineTo(d.xi, d.yi);
context.closePath();
context.stroke();
context.restore();
};
})();
}).call(window);
/***/ }),
/***/ 27:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.canvas.edges');
/**
* This method renders the edge as a tapered line.
* Danny Holten, Petra Isenberg, Jean-Daniel Fekete, and J. Van Wijk (2010)
* Performance Evaluation of Tapered, Curved, and Animated Directed-Edge
* Representations in Node-Link Graphs. Research Report, Sep 2010.
*
* @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.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;
}
// Intersection points:
var c = sigma.utils.getCircleIntersection(sX, sY, size, tX, tY, dist);
context.save();
if (edge.active) {
context.fillStyle = settings('edgeActiveColor') === 'edge' ? color || defaultEdgeColor : settings('defaultEdgeActiveColor');
} else {
context.fillStyle = color;
}
// Turn transparency on:
context.globalAlpha = 0.65;
// Draw the triangle:
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();
};
})();
}).call(window);
/***/ }),
/***/ 30:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function (undefined) {
'use strict';
if (typeof sigma === 'undefined') throw 'sigma is not declared';
// Initialize packages:
sigma.utils.pkg('sigma.canvas.edges.labels');
/**
* This label renderer will just display the label on the curve of the edge.
* The label is rendered at half distance of the edge extremities, and is
* always oriented from left to right on the top side of the curve.
*
* @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.labels.curve = function (edge, source, target, context, settings) {
if (typeof edge.label !== 'string') return;
var prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1;
if (size < settings('edgeLabelThreshold')) return;
var fontSize,
sSize = source[prefix + 'size'],
sX = source[prefix + 'x'],
sY = source[prefix + 'y'],
tX = target[prefix + 'x'],
tY = target[prefix + 'y'],
dX = tX - sX,
dY = tY - sY,
sign = sX < tX ? 1 : -1,
cp = {},
c,
angle,
t = 0.5; //length of the curve
if (source.id === target.id) {
cp = sigma.utils.getSelfLoopControlPoints(sX, sY, sSize);
c = sigma.utils.getPointOnBezierCurve(t, sX, sY, tX, tY, cp.x1, cp.y1, cp.x2, cp.y2);
angle = Math.atan2(1, 1); // 45°
} else {
cp = sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
c = sigma.utils.getPointOnQuadraticCurve(t, sX, sY, tX, tY, cp.x, cp.y);
angle = Math.atan2(dY * sign, dX * sign);
}
// The font size is sublineraly proportional to the edge size, in order to
// avoid very large labels on screen.
// This is achieved by f(x) = x * x^(-1/ a), where 'x' is the size and 'a'
// is the edgeLabelSizePowRatio. Notice that f(1) = 1.
// The final form is:
// f'(x) = b * x * x^(-1 / a), thus f'(1) = b. Application:
// fontSize = defaultEdgeLabelSize if edgeLabelSizePowRatio = 1
fontSize = settings('edgeLabelSize') === 'fixed' ? settings('defaultEdgeLabelSize') : settings('defaultEdgeLabelSize') * size * Math.pow(size, -1 / settings('edgeLabelSizePowRatio'));
context.save();
if (edge.active) {
context.font = [settings('activeFontStyle'), fontSize + 'px', settings('activeFont') || settings('font')].join(' ');
context.fillStyle = settings('edgeActiveColor') === 'edge' ? edge.active_color || settings('defaultEdgeActiveColor') : settings('defaultEdgeLabelActiveColor');
} else {
context.font = [settings('fontStyle'), fontSize + 'px', settings('font')].join(' ');
context.fillStyle = settings('edgeLabelColor') === 'edge' ? edge.color || settings('defaultEdgeColor') : settings('defaultEdgeLabelColor');
}
context.textAlign = 'center';
context.textBaseline = 'alphabetic';
context.translate(c.x, c.y);
context.rotate(angle);
context.fillText(edge.label, 0, -size / 2 - 3);
context.restore();
};
}).call(this);
}).call(window);
/***/ }),
/***/ 31:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function (undefined) {
'use strict';
if (typeof sigma === 'undefined') throw 'sigma is not declared';
// Initialize packages:
sigma.utils.pkg('sigma.canvas.edges.labels');
/**
* This label renderer will just display the label on the curve of the edge.
* The label is rendered at half distance of the edge extremities, and is
* always oriented from left to right on the top side of the curve.
*
* @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.labels.curvedArrow = function (edge, source, target, context, settings) {
sigma.canvas.edges.labels.curve(edge, source, target, context, settings);
};
}).call(this);
}).call(window);
/***/ }),
/***/ 32:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function (undefined) {
'use strict';
if (typeof sigma === 'undefined') throw 'sigma is not declared';
// Initialize packages:
sigma.utils.pkg('sigma.canvas.edges.labels');
/**
* This label renderer will just display the label on the line of the edge.
* The label is rendered at half distance of the edge extremities, and is
* always oriented from left to right on the top side of the line.
*
* @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.labels.def = function (edge, source, target, context, settings) {
if (typeof edge.label !== 'string' || source == target) return;
var prefix = settings('prefix') || '',
size = edge[prefix + 'size'] || 1;
if (size < settings('edgeLabelThreshold')) return;
if (0 === settings('edgeLabelSizePowRatio')) throw '"edgeLabelSizePowRatio" must not be 0.';
var fontSize,
x = (source[prefix + 'x'] + target[prefix + 'x']) / 2,
y = (source[prefix + 'y'] + target[prefix + 'y']) / 2,
dX = target[prefix + 'x'] - source[prefix + 'x'],
dY = target[prefix + 'y'] - source[prefix + 'y'],
sign = source[prefix + 'x'] < target[prefix + 'x'] ? 1 : -1,
angle = Math.atan2(dY * sign, dX * sign);
// The font size is sublineraly proportional to the edge size, in order to
// avoid very large labels on screen.
// This is achieved by f(x) = x * x^(-1/ a), where 'x' is the size and 'a'
// is the edgeLabelSizePowRatio. Notice that f(1) = 1.
// The final form is:
// f'(x) = b * x * x^(-1 / a), thus f'(1) = b. Application:
// fontSize = defaultEdgeLabelSize if edgeLabelSizePowRatio = 1
fontSize = settings('edgeLabelSize') === 'fixed' ? settings('defaultEdgeLabelSize') : settings('defaultEdgeLabelSize') * size * Math.pow(size, -1 / settings('edgeLabelSizePowRatio'));
context.save();
if (edge.active) {
context.font = [settings('activeFontStyle'), fontSize + 'px', settings('activeFont') || settings('font')].join(' ');
context.fillStyle = settings('edgeActiveColor') === 'edge' ? edge.active_color || settings('defaultEdgeActiveColor') : settings('defaultEdgeLabelActiveColor');
} else {
context.font = [settings('fontStyle'), fontSize + 'px', settings('font')].join(' ');
context.fillStyle = settings('edgeLabelColor') === 'edge' ? edge.color || settings('defaultEdgeColor') : settings('defaultEdgeLabelColor');
}
context.textAlign = 'center';
context.textBaseline = 'alphabetic';
context.translate(x, y);
context.rotate(angle);
context.fillText(edge.label, 0, -size / 2 - 3);
context.restore();
};
}).call(this);
}).call(window);
/***/ }),
/***/ 48:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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();
};
})();
}).call(window);
/***/ }),
/***/ 49:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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),
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) : sigma.utils.getQuadraticControlPoint(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;
}
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();
};
})();
}).call(window);
/***/ }),
/***/ 50:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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),
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) : sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
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();
};
})();
}).call(window);
/***/ }),
/***/ 52:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.canvas.edges');
/**
* This edge renderer will display edges as arrows going from the source node
*
* @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.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'],
aSize = Math.max(size * 2.5, settings('minArrowSize')),
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;
}
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();
};
})();
}).call(window);
/***/ }),
/***/ 53:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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,
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) : sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
if (!color) {
// if (settings('theme') === 'light') {
switch (edgeColor) {
case 'source':
color = source.color || defaultNodeColor;
break;
case 'target':
color = target.color || defaultNodeColor;
break;
default:
color = defaultEdgeColor;
break;
}
// } else {
// color = 'rgba(74,78,83,.5)';
// }
}
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();
};
})();
}).call(window);
/***/ }),
/***/ 54:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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,
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) : sigma.utils.getQuadraticControlPoint(sX, sY, tX, tY);
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();
};
})();
}).call(window);
/***/ }),
/***/ 89:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_sigma_react_src_renderers_canvas_sigma_canvas_edges_curve_js__ = __webpack_require__(53);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_sigma_react_src_renderers_canvas_sigma_canvas_edges_curve_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_sigma_react_src_renderers_canvas_sigma_canvas_edges_curve_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_canvas_sigma_canvas_edges_arrow_js__ = __webpack_require__(52);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_canvas_sigma_canvas_edges_arrow_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_canvas_sigma_canvas_edges_arrow_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_canvas_sigma_canvas_edges_curvedArrow_js__ = __webpack_require__(54);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_canvas_sigma_canvas_edges_curvedArrow_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_canvas_sigma_canvas_edges_curvedArrow_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curve_js__ = __webpack_require__(49);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curve_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curve_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_arrow_js__ = __webpack_require__(48);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_arrow_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_arrow_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curvedArrow_js__ = __webpack_require__(50);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curvedArrow_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_canvas_sigma_canvas_edgehovers_curvedArrow_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dashed_js__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dashed_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dashed_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dotted_js__ = __webpack_require__(21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dotted_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_dotted_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_parallel_js__ = __webpack_require__(22);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_parallel_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_parallel_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_tapered_js__ = __webpack_require__(23);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_tapered_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_9_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edgehovers_tapered_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_dashed_js__ = __webpack_require__(24);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_dashed_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_10_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_dashed_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11_sigma_react_plugins_sigma_renderers_customEd