sigmajs-react
Version:
Lightweight but powerful library for drawing network graphs built on top of SigmaJS
972 lines (784 loc) • 34.1 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 = 92);
/******/ })
/************************************************************************/
/******/ ({
/***/ 62:
/***/ (function(module, exports) {
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function (undefined) {
'use strict';
if (typeof sigma === 'undefined') throw 'sigma is not declared';
if (typeof conrad === 'undefined') throw 'conrad is not declared';
// Initialize packages:
sigma.utils.pkg('sigma.renderers');
/**
* This function is the constructor of the svg sigma's renderer.
*
* @param {sigma.classes.graph} graph The graph to render.
* @param {sigma.classes.camera} camera The camera.
* @param {configurable} settings The sigma instance settings
* function.
* @param {object} object The options object.
* @return {sigma.renderers.svg} The renderer instance.
*/
sigma.renderers.svg = function (graph, camera, settings, options) {
if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) !== 'object') throw 'sigma.renderers.svg: Wrong arguments.';
if (!(options.container instanceof HTMLElement)) throw 'Container not found.';
var i,
l,
a,
fn,
self = this;
sigma.classes.dispatcher.extend(this);
// Initialize main attributes:
this.graph = graph;
this.camera = camera;
this.domElements = {
graph: null,
groups: {},
nodes: {},
edges: {},
labels: {},
hovers: {}
};
this.measurementCanvas = null;
this.options = options;
this.container = this.options.container;
this.settings = _typeof(options.settings) === 'object' && options.settings ? settings.embedObjects(options.settings) : settings;
// Is the renderer meant to be freestyle?
this.settings('freeStyle', !!this.options.freeStyle);
// SVG xmlns
this.settings('xmlns', 'http://www.w3.org/2000/svg');
// Indexes:
this.nodesOnScreen = [];
this.edgesOnScreen = [];
// Find the prefix:
this.options.prefix = 'renderer' + sigma.utils.id() + ':';
// Initialize the DOM elements
this.initDOM('svg');
// Initialize captors:
this.captors = [];
a = this.options.captors || [sigma.captors.mouse, sigma.captors.touch];
for (i = 0, l = a.length; i < l; i++) {
fn = typeof a[i] === 'function' ? a[i] : sigma.captors[a[i]];
this.captors.push(new fn(this.domElements.graph, this.camera, this.settings));
}
// Bind resize:
window.addEventListener('resize', function () {
self.resize();
});
// Deal with sigma events:
// TODO: keep an option to override the DOM events?
sigma.misc.bindDOMEvents.call(this, this.domElements.graph);
this.bindHovers(this.options.prefix);
// Resize
this.resize(false);
};
/**
* This method renders the graph on the svg scene.
*
* @param {?object} options Eventually an object of options.
* @return {sigma.renderers.svg} Returns the instance itself.
*/
sigma.renderers.svg.prototype.render = function (options) {
options = options || {};
var a,
i,
k,
e,
l,
o,
source,
target,
start,
edges,
renderers,
subrenderers,
index = {},
graph = this.graph,
nodes = this.graph.nodes,
prefix = this.options.prefix || '',
drawEdges = this.settings(options, 'drawEdges'),
drawNodes = this.settings(options, 'drawNodes'),
drawLabels = this.settings(options, 'drawLabels'),
embedSettings = this.settings.embedObjects(options, {
prefix: this.options.prefix,
forceLabels: this.options.forceLabels
});
// Check the 'hideEdgesOnMove' setting:
if (this.settings(options, 'hideEdgesOnMove')) if (this.camera.isAnimated || this.camera.isMoving) drawEdges = false;
// Apply the camera's view:
this.camera.applyView(undefined, this.options.prefix, {
width: this.width,
height: this.height
});
// Hiding everything
// TODO: find a more sensible way to perform this operation
this.hideDOMElements(this.domElements.nodes);
this.hideDOMElements(this.domElements.edges);
this.hideDOMElements(this.domElements.labels);
// Find which nodes are on screen
this.edgesOnScreen = [];
this.nodesOnScreen = this.camera.quadtree.area(this.camera.getRectangle(this.width, this.height));
// Node index
for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++) {
index[a[i].id] = a[i];
} // Find which edges are on screen
for (a = graph.edges(), i = 0, l = a.length; i < l; i++) {
o = a[i];
if ((index[o.source] || index[o.target]) && !o.hidden && !nodes(o.source).hidden && !nodes(o.target).hidden) this.edgesOnScreen.push(o);
}
// Display nodes
//---------------
renderers = sigma.svg.nodes;
subrenderers = sigma.svg.labels;
//-- First we create the nodes which are not already created
if (drawNodes) for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++) {
if (!a[i].hidden && !this.domElements.nodes[a[i].id]) {
// Node
e = (renderers[a[i].type] || renderers.def).create(a[i], embedSettings);
this.domElements.nodes[a[i].id] = e;
this.domElements.groups.nodes.appendChild(e);
// Label
e = (subrenderers[a[i].type] || subrenderers.def).create(a[i], embedSettings);
this.domElements.labels[a[i].id] = e;
this.domElements.groups.labels.appendChild(e);
}
}
//-- Second we update the nodes
if (drawNodes) for (a = this.nodesOnScreen, i = 0, l = a.length; i < l; i++) {
if (a[i].hidden) continue;
// Node
(renderers[a[i].type] || renderers.def).update(a[i], this.domElements.nodes[a[i].id], embedSettings);
// Label
(subrenderers[a[i].type] || subrenderers.def).update(a[i], this.domElements.labels[a[i].id], embedSettings);
}
// Display edges
//---------------
renderers = sigma.svg.edges;
//-- First we create the edges which are not already created
if (drawEdges) for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++) {
if (!this.domElements.edges[a[i].id]) {
source = nodes(a[i].source);
target = nodes(a[i].target);
e = (renderers[a[i].type] || renderers.def).create(a[i], source, target, embedSettings);
this.domElements.edges[a[i].id] = e;
this.domElements.groups.edges.appendChild(e);
}
}
//-- Second we update the edges
if (drawEdges) for (a = this.edgesOnScreen, i = 0, l = a.length; i < l; i++) {
source = nodes(a[i].source);
target = nodes(a[i].target);
(renderers[a[i].type] || renderers.def).update(a[i], this.domElements.edges[a[i].id], source, target, embedSettings);
}
this.dispatchEvent('render');
return this;
};
/**
* This method creates a DOM element of the specified type, switches its
* position to "absolute", references it to the domElements attribute, and
* finally appends it to the container.
*
* @param {string} tag The label tag.
* @param {string} id The id of the element (to store it in "domElements").
*/
sigma.renderers.svg.prototype.initDOM = function (tag) {
var dom = document.createElementNS(this.settings('xmlns'), tag),
c = this.settings('classPrefix'),
g,
l,
i;
dom.style.position = 'absolute';
dom.setAttribute('class', c + '-svg');
// Setting SVG namespace
dom.setAttribute('xmlns', this.settings('xmlns'));
dom.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
dom.setAttribute('version', '1.1');
// Creating the measurement canvas
var canvas = document.createElement('canvas');
canvas.setAttribute('class', c + '-measurement-canvas');
// Appending elements
this.domElements.graph = this.container.appendChild(dom);
// Creating groups
var groups = ['edges', 'nodes', 'labels', 'hovers'];
for (i = 0, l = groups.length; i < l; i++) {
g = document.createElementNS(this.settings('xmlns'), 'g');
g.setAttributeNS(null, 'id', c + '-group-' + groups[i]);
g.setAttributeNS(null, 'class', c + '-group');
this.domElements.groups[groups[i]] = this.domElements.graph.appendChild(g);
}
// Appending measurement canvas
this.container.appendChild(canvas);
this.measurementCanvas = canvas.getContext('2d');
};
/**
* This method hides a batch of SVG DOM elements.
*
* @param {array} elements An array of elements to hide.
* @param {object} renderer The renderer to use.
* @return {sigma.renderers.svg} Returns the instance itself.
*/
sigma.renderers.svg.prototype.hideDOMElements = function (elements) {
var o, i;
for (i in elements) {
o = elements[i];
sigma.svg.utils.hide(o);
}
return this;
};
/**
* This method binds the hover events to the renderer.
*
* @param {string} prefix The renderer prefix.
*/
// TODO: add option about whether to display hovers or not
sigma.renderers.svg.prototype.bindHovers = function (prefix) {
var renderers = sigma.svg.hovers,
self = this,
hoveredNode;
function overNode(e) {
var node = e.data.node,
embedSettings = self.settings.embedObjects({
prefix: prefix
});
if (!embedSettings('enableHovering')) return;
var hover = (renderers[node.type] || renderers.def).create(node, self.domElements.nodes[node.id], self.measurementCanvas, embedSettings);
self.domElements.hovers[node.id] = hover;
// Inserting the hover in the dom
self.domElements.groups.hovers.appendChild(hover);
hoveredNode = node;
}
function outNode(e) {
var node = e.data.node,
embedSettings = self.settings.embedObjects({
prefix: prefix
});
if (!embedSettings('enableHovering')) return;
// Deleting element
self.domElements.groups.hovers.removeChild(self.domElements.hovers[node.id]);
hoveredNode = null;
delete self.domElements.hovers[node.id];
// Reinstate
self.domElements.groups.nodes.appendChild(self.domElements.nodes[node.id]);
}
// OPTIMIZE: perform a real update rather than a deletion
function update() {
if (!hoveredNode) return;
var embedSettings = self.settings.embedObjects({
prefix: prefix
});
// Deleting element before update
self.domElements.groups.hovers.removeChild(self.domElements.hovers[hoveredNode.id]);
delete self.domElements.hovers[hoveredNode.id];
var hover = (renderers[hoveredNode.type] || renderers.def).create(hoveredNode, self.domElements.nodes[hoveredNode.id], self.measurementCanvas, embedSettings);
self.domElements.hovers[hoveredNode.id] = hover;
// Inserting the hover in the dom
self.domElements.groups.hovers.appendChild(hover);
}
// Binding events
this.bind('overNode', overNode);
this.bind('outNode', outNode);
// Update on render
this.bind('render', update);
};
/**
* This method resizes each DOM elements in the container and stores the new
* dimensions. Then, it renders the graph.
*
* @param {?number} width The new width of the container.
* @param {?number} height The new height of the container.
* @return {sigma.renderers.svg} Returns the instance itself.
*/
sigma.renderers.svg.prototype.resize = function (w, h) {
var oldWidth = this.width,
oldHeight = this.height,
pixelRatio = 1;
if (w !== undefined && h !== undefined) {
this.width = w;
this.height = h;
} else {
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
w = this.width;
h = this.height;
}
if (oldWidth !== this.width || oldHeight !== this.height) {
this.domElements.graph.style.width = w + 'px';
this.domElements.graph.style.height = h + 'px';
if (this.domElements.graph.tagName.toLowerCase() === 'svg') {
this.domElements.graph.setAttribute('width', w * pixelRatio);
this.domElements.graph.setAttribute('height', h * pixelRatio);
}
}
return this;
};
/**
* The labels, nodes and edges renderers are stored in the three following
* objects. When an element is drawn, its type will be checked and if a
* renderer with the same name exists, it will be used. If not found, the
* default renderer will be used instead.
*
* They are stored in different files, in the "./svg" folder.
*/
sigma.utils.pkg('sigma.svg.nodes');
sigma.utils.pkg('sigma.svg.edges');
sigma.utils.pkg('sigma.svg.labels');
}).call(this);
}).call(window);
/***/ }),
/***/ 64:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(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 create(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 update(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;
}
};
})();
}).call(window);
/***/ }),
/***/ 65:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.svg.edges');
/**
* The default edge renderer. It renders the node as a simple line.
*/
sigma.svg.edges.def = {
/**
* 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 create(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 line = document.createElementNS(settings('xmlns'), 'line');
// Attributes
line.setAttributeNS(null, 'data-edge-id', edge.id);
line.setAttributeNS(null, 'class', settings('classPrefix') + '-edge');
line.setAttributeNS(null, 'stroke', color);
return line;
},
/**
* 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 update(edge, line, source, target, settings) {
var prefix = settings('prefix') || '';
line.setAttributeNS(null, 'stroke-width', edge[prefix + 'size'] || 1);
line.setAttributeNS(null, 'x1', source[prefix + 'x']);
line.setAttributeNS(null, 'y1', source[prefix + 'y']);
line.setAttributeNS(null, 'x2', target[prefix + 'x']);
line.setAttributeNS(null, 'y2', target[prefix + 'y']);
// Showing
line.style.display = '';
return this;
}
};
})();
}).call(window);
/***/ }),
/***/ 66:
/***/ (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.svg.hovers');
/**
* The default hover renderer.
*/
sigma.svg.hovers.def = {
/**
* SVG Element creation.
*
* @param {object} node The node object.
* @param {CanvasElement} measurementCanvas A fake canvas handled by
* the svg to perform some measurements and
* passed by the renderer.
* @param {DOMElement} nodeCircle The node DOM Element.
* @param {configurable} settings The settings function.
*/
create: function create(node, nodeCircle, measurementCanvas, settings) {
// Defining visual properties
var x,
y,
w,
h,
e,
d,
fontStyle = settings('hoverFontStyle') || settings('fontStyle'),
prefix = settings('prefix') || '',
size = node[prefix + 'size'],
fontSize = settings('labelSize') === 'fixed' ? settings('defaultLabelSize') : settings('labelSizeRatio') * size,
fontColor = settings('labelHoverColor') === 'node' ? node.color || settings('defaultNodeColor') : settings('defaultLabelHoverColor');
// Creating elements
var group = document.createElementNS(settings('xmlns'), 'g'),
rectangle = document.createElementNS(settings('xmlns'), 'rect'),
circle = document.createElementNS(settings('xmlns'), 'circle'),
text = document.createElementNS(settings('xmlns'), 'text');
// Defining properties
group.setAttributeNS(null, 'class', settings('classPrefix') + '-hover');
group.setAttributeNS(null, 'data-node-id', node.id);
if (typeof node.label === 'string') {
// Text
text.innerHTML = node.label;
text.textContent = node.label;
text.setAttributeNS(null, 'class', settings('classPrefix') + '-hover-label');
text.setAttributeNS(null, 'font-size', fontSize);
text.setAttributeNS(null, 'font-family', settings('font'));
text.setAttributeNS(null, 'fill', fontColor);
text.setAttributeNS(null, 'x', Math.round(node[prefix + 'x'] + size + 3));
text.setAttributeNS(null, 'y', Math.round(node[prefix + 'y'] + fontSize / 3));
// Measures
// OPTIMIZE: Find a better way than a measurement canvas
x = Math.round(node[prefix + 'x'] - fontSize / 2 - 2);
y = Math.round(node[prefix + 'y'] - fontSize / 2 - 2);
w = Math.round(measurementCanvas.measureText(node.label).width + fontSize / 2 + size + 9);
h = Math.round(fontSize + 4);
e = Math.round(fontSize / 2 + 2);
// Circle
circle.setAttributeNS(null, 'class', settings('classPrefix') + '-hover-area');
circle.setAttributeNS(null, 'fill', '#fff');
circle.setAttributeNS(null, 'cx', node[prefix + 'x']);
circle.setAttributeNS(null, 'cy', node[prefix + 'y']);
circle.setAttributeNS(null, 'r', e);
// Rectangle
rectangle.setAttributeNS(null, 'class', settings('classPrefix') + '-hover-area');
rectangle.setAttributeNS(null, 'fill', '#fff');
rectangle.setAttributeNS(null, 'x', node[prefix + 'x'] + e / 4);
rectangle.setAttributeNS(null, 'y', node[prefix + 'y'] - e);
rectangle.setAttributeNS(null, 'width', w);
rectangle.setAttributeNS(null, 'height', h);
}
// Appending childs
group.appendChild(circle);
group.appendChild(rectangle);
group.appendChild(text);
group.appendChild(nodeCircle);
return group;
}
};
}).call(this);
}).call(window);
/***/ }),
/***/ 67:
/***/ (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.svg.labels');
/**
* The default label renderer. It renders the label as a simple text.
*/
sigma.svg.labels.def = {
/**
* SVG Element creation.
*
* @param {object} node The node object.
* @param {configurable} settings The settings function.
*/
create: function create(node, settings) {
var prefix = settings('prefix') || '',
size = node[prefix + 'size'],
text = document.createElementNS(settings('xmlns'), 'text');
var fontSize = settings('labelSize') === 'fixed' ? settings('defaultLabelSize') : settings('labelSizeRatio') * size;
var fontColor = settings('labelColor') === 'node' ? node.color || settings('defaultNodeColor') : settings('defaultLabelColor');
text.setAttributeNS(null, 'data-label-target', node.id);
text.setAttributeNS(null, 'class', settings('classPrefix') + '-label');
text.setAttributeNS(null, 'font-size', fontSize);
text.setAttributeNS(null, 'font-family', settings('font'));
text.setAttributeNS(null, 'fill', fontColor);
text.innerHTML = node.label;
text.textContent = node.label;
return text;
},
/**
* SVG Element update.
*
* @param {object} node The node object.
* @param {DOMElement} text The label DOM element.
* @param {configurable} settings The settings function.
*/
update: function update(node, text, settings) {
var prefix = settings('prefix') || '',
size = node[prefix + 'size'];
var fontSize = settings('labelSize') === 'fixed' ? settings('defaultLabelSize') : settings('labelSizeRatio') * size;
// Case when we don't want to display the label
if (!settings('forceLabels') && size < settings('labelThreshold')) return;
if (typeof node.label !== 'string') return;
// Updating
text.setAttributeNS(null, 'x', Math.round(node[prefix + 'x'] + size + 3));
text.setAttributeNS(null, 'y', Math.round(node[prefix + 'y'] + fontSize / 3));
// Showing
text.style.display = '';
return this;
}
};
}).call(this);
}).call(window);
/***/ }),
/***/ 68:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.svg.nodes');
/**
* The default node renderer. It renders the node as a simple disc.
*/
sigma.svg.nodes.def = {
/**
* SVG Element creation.
*
* @param {object} node The node object.
* @param {configurable} settings The settings function.
*/
create: function create(node, settings) {
var prefix = settings('prefix') || '',
circle = document.createElementNS(settings('xmlns'), 'circle');
// Defining the node's circle
circle.setAttributeNS(null, 'data-node-id', node.id);
circle.setAttributeNS(null, 'class', settings('classPrefix') + '-node');
circle.setAttributeNS(null, 'fill', node.color || settings('defaultNodeColor'));
// Returning the DOM Element
return circle;
},
/**
* SVG Element update.
*
* @param {object} node The node object.
* @param {DOMElement} circle The node DOM element.
* @param {configurable} settings The settings function.
*/
update: function update(node, circle, settings) {
var prefix = settings('prefix') || '';
// Applying changes
// TODO: optimize - check if necessary
circle.setAttributeNS(null, 'cx', node[prefix + 'x']);
circle.setAttributeNS(null, 'cy', node[prefix + 'y']);
circle.setAttributeNS(null, 'r', node[prefix + 'size']);
// Updating only if not freestyle
if (!settings('freeStyle')) circle.setAttributeNS(null, 'fill', node.color || settings('defaultNodeColor'));
// Showing
circle.style.display = '';
return this;
}
};
})();
}).call(window);
/***/ }),
/***/ 69:
/***/ (function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
(function () {
;(function () {
'use strict';
sigma.utils.pkg('sigma.svg.utils');
/**
* Some useful functions used by sigma's SVG renderer.
*/
sigma.svg.utils = {
/**
* SVG Element show.
*
* @param {DOMElement} element The DOM element to show.
*/
show: function show(element) {
element.style.display = '';
return this;
},
/**
* SVG Element hide.
*
* @param {DOMElement} element The DOM element to hide.
*/
hide: function hide(element) {
element.style.display = 'none';
return this;
}
};
})();
}).call(window);
/***/ }),
/***/ 92:
/***/ (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_sigma_renderers_svg_js__ = __webpack_require__(62);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_sigma_react_src_renderers_sigma_renderers_svg_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_sigma_react_src_renderers_sigma_renderers_svg_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_svg_sigma_svg_utils_js__ = __webpack_require__(69);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_svg_sigma_svg_utils_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_sigma_react_src_renderers_svg_sigma_svg_utils_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_svg_sigma_svg_nodes_def_js__ = __webpack_require__(68);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_svg_sigma_svg_nodes_def_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_sigma_react_src_renderers_svg_sigma_svg_nodes_def_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_svg_sigma_svg_edges_def_js__ = __webpack_require__(65);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_svg_sigma_svg_edges_def_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_sigma_react_src_renderers_svg_sigma_svg_edges_def_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_svg_sigma_svg_edges_curve_js__ = __webpack_require__(64);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_svg_sigma_svg_edges_curve_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_sigma_react_src_renderers_svg_sigma_svg_edges_curve_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_svg_sigma_svg_labels_def_js__ = __webpack_require__(67);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_svg_sigma_svg_labels_def_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_sigma_react_src_renderers_svg_sigma_svg_labels_def_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_sigma_react_src_renderers_svg_sigma_svg_hovers_def_js__ = __webpack_require__(66);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_sigma_react_src_renderers_svg_sigma_svg_hovers_def_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_sigma_react_src_renderers_svg_sigma_svg_hovers_def_js__);
/***/ })
/******/ });