react-sigma-conglei
Version:
Lightweight but powerful library for drawing network graphs built on top of dunnock/react-sigma
1,096 lines (900 loc) • 33.6 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 = 83);
/******/ })
/************************************************************************/
/******/ ({
/***/ 63:
/***/ (function(module, exports) {
/*** 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 !== '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));
/***/ }),
/***/ 65:
/***/ (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(edge, source, target, settings) {
var color = edge.color,
prefix = settings('prefix') || '',
edgeColor = settings('edgeColor'),
defaultNodeColor = settings('defaultNodeColor'),
defaultEdgeColor = settings('defaultEdgeColor');
if (!color)
switch (edgeColor) {
case 'source':
color = source.color || defaultNodeColor;
break;
case 'target':
color = target.color || defaultNodeColor;
break;
default:
color = defaultEdgeColor;
break;
}
var path = document.createElementNS(settings('xmlns'), 'path');
// Attributes
path.setAttributeNS(null, 'data-edge-id', edge.id);
path.setAttributeNS(null, 'class', settings('classPrefix') + '-edge');
path.setAttributeNS(null, 'stroke', color);
return path;
},
/**
* SVG Element update.
*
* @param {object} edge The edge object.
* @param {DOMElement} line The line DOM Element.
* @param {object} source The source node object.
* @param {object} target The target node object.
* @param {configurable} settings The settings function.
*/
update: function(edge, path, source, target, settings) {
var prefix = settings('prefix') || '';
path.setAttributeNS(null, 'stroke-width', edge[prefix + 'size'] || 1);
// Control point
var cx = (source[prefix + 'x'] + target[prefix + 'x']) / 2 +
(target[prefix + 'y'] - source[prefix + 'y']) / 4,
cy = (source[prefix + 'y'] + target[prefix + 'y']) / 2 +
(source[prefix + 'x'] - target[prefix + 'x']) / 4;
// Path
var p = 'M' + source[prefix + 'x'] + ',' + source[prefix + 'y'] + ' ' +
'Q' + cx + ',' + cy + ' ' +
target[prefix + 'x'] + ',' + target[prefix + 'y'];
// Updating attributes
path.setAttributeNS(null, 'd', p);
path.setAttributeNS(null, 'fill', 'none');
// Showing
path.style.display = '';
return this;
}
};
})();
}.call(window));
/***/ }),
/***/ 66:
/***/ (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(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(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));
/***/ }),
/***/ 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.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(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));
/***/ }),
/***/ 68:
/***/ (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(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(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));
/***/ }),
/***/ 69:
/***/ (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(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(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));
/***/ }),
/***/ 70:
/***/ (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(element) {
element.style.display = '';
return this;
},
/**
* SVG Element hide.
*
* @param {DOMElement} element The DOM element to hide.
*/
hide: function(element) {
element.style.display = 'none';
return this;
}
};
})();
}.call(window));
/***/ }),
/***/ 83:
/***/ (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__(63);
/* 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__(70);
/* 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__(69);
/* 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__(66);
/* 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__(65);
/* 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__(68);
/* 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__(67);
/* 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__);
/***/ })
/******/ });