react-sigma-conglei
Version:
Lightweight but powerful library for drawing network graphs built on top of dunnock/react-sigma
1,530 lines (1,305 loc) • 51.9 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 = 80);
/******/ })
/************************************************************************/
/******/ ({
/***/ 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.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));
/***/ }),
/***/ 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.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));
/***/ }),
/***/ 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.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));
/***/ }),
/***/ 24:
/***/ (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));
/***/ }),
/***/ 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 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));
/***/ }),
/***/ 26:
/***/ (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));
/***/ }),
/***/ 27:
/***/ (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));
/***/ }),
/***/ 28:
/***/ (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));
/***/ }),
/***/ 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.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));
/***/ }),
/***/ 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 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));
/***/ }),
/***/ 33:
/***/ (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));
/***/ }),
/***/ 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.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));
/***/ }),
/***/ 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.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));
/***/ }),
/***/ 51:
/***/ (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));
/***/ }),
/***/ 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 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));
/***/ }),
/***/ 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.
*
* @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)
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();
};
})();
}.call(window));
/***/ }),
/***/ 55:
/***/ (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));
/***/ }),
/***/ 80:
/***/ (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__(54);
/* 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__(53);
/* 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__(55);
/* 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__(50);
/* 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__(49);
/* 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__(51);
/* 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__(21);
/* 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__(22);
/* 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__(23);
/* 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__(24);
/* 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__(25);
/* 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_customEdgeShapes_sigma_canvas_edges_dotted_js__ = __webpack_require__(26);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_dotted_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_11_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_dotted_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_parallel_js__ = __webpack_require__(27);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_canvas_edges_parallel_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_12_sigma_react_plugins_sigma_renderers_customEdgeShapes_sigma_