diff --git a/HISTORY.md b/HISTORY.md
index 2bb9a236..8f88d58d 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -8,6 +8,7 @@ http://visjs.org
- Changed timings for zoomExtent animation.
- Fixed possible cause of freezing graph when animating.
+- Added locked to focusOnNode and releaseNode().
## 2014-10-11, version 3.4.1
diff --git a/dist/vis.js b/dist/vis.js
index 4c664448..2310deca 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -132,13 +132,13 @@ return /******/ (function(modules) { // webpackBootstrap
// Network
exports.Network = __webpack_require__(45);
exports.network = {
- Edge: __webpack_require__(51),
+ Edge: __webpack_require__(46),
Groups: __webpack_require__(48),
Images: __webpack_require__(49),
- Node: __webpack_require__(50),
- Popup: __webpack_require__(52),
- dotparser: __webpack_require__(46),
- gephiParser: __webpack_require__(47)
+ Node: __webpack_require__(47),
+ Popup: __webpack_require__(50),
+ dotparser: __webpack_require__(51),
+ gephiParser: __webpack_require__(52)
};
// Deprecated since v3.0.0
@@ -20933,19 +20933,19 @@ return /******/ (function(modules) { // webpackBootstrap
var hammerUtil = __webpack_require__(21);
var DataSet = __webpack_require__(7);
var DataView = __webpack_require__(8);
- var dotparser = __webpack_require__(46);
- var gephiParser = __webpack_require__(47);
+ var dotparser = __webpack_require__(51);
+ var gephiParser = __webpack_require__(52);
var Groups = __webpack_require__(48);
var Images = __webpack_require__(49);
- var Node = __webpack_require__(50);
- var Edge = __webpack_require__(51);
- var Popup = __webpack_require__(52);
+ var Node = __webpack_require__(47);
+ var Edge = __webpack_require__(46);
+ var Popup = __webpack_require__(50);
var MixinLoader = __webpack_require__(53);
var Activator = __webpack_require__(37);
- var locales = __webpack_require__(54);
+ var locales = __webpack_require__(64);
// Load custom shapes into CanvasRenderingContext2D
- __webpack_require__(55);
+ __webpack_require__(65);
/**
* @constructor Network
@@ -21156,6 +21156,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.targetScale = 0;
this.sourceTranslation = 0;
this.targetTranslation = 0;
+ this.lockedOnNodeId = null;
+ this.lockedOnNodeOffset = null;
// Node variables
var network = this;
@@ -21824,6 +21826,8 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}
+ this.releaseNode();
+
var pointer = this._getPointer(event.gesture.center);
var me = this;
@@ -23201,6 +23205,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
var nodePosition = {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
options.position = nodePosition;
+ options.lockedOnNode = nodeId;
this.moveTo(options)
}
@@ -23252,6 +23257,13 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}
+ // release if something focussed on the node
+ this.releaseNode();
+ if (options.locked == true) {
+ this.lockedOnNodeId = options.lockedOnNode;
+ this.lockedOnNodeOffset = options.offset;
+ }
+
// forcefully complete the old animation if it was still running
if (this.easingTime != 0) {
this._transitionRedraw(1); // by setting easingtime to 1, we finish the animation.
@@ -23276,9 +23288,15 @@ return /******/ (function(modules) { // webpackBootstrap
// if the time is set to 0, don't do an animation
if (options.animation.duration == 0) {
- this._setScale(this.targetScale);
- this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
- this._redraw();
+ if (this.lockedOnNodeId != null) {
+ this._classicRedraw = this._redraw;
+ this._redraw = this._lockedRedraw;
+ }
+ else {
+ this._setScale(this.targetScale);
+ this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
+ this._redraw();
+ }
}
else {
this.animationSpeed = 1 / (this.renderRefreshRate * options.animation.duration * 0.001) || 1 / this.renderRefreshRate;
@@ -23292,6 +23310,31 @@ return /******/ (function(modules) { // webpackBootstrap
};
+ Network.prototype._lockedRedraw = function () {
+ var nodePosition = {x: this.nodes[this.lockedOnNodeId].x, y: this.nodes[this.lockedOnNodeId].y};
+ var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
+ var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
+ x: viewCenter.x - nodePosition.x,
+ y: viewCenter.y - nodePosition.y
+ };
+ var sourceTranslation = this._getTranslation();
+ var targetTranslation = {
+ x: sourceTranslation.x + distanceFromCenter.x * this.scale + this.lockedOnNodeOffset.x,
+ y: sourceTranslation.y + distanceFromCenter.y * this.scale + this.lockedOnNodeOffset.y
+ };
+
+ this._setTranslation(targetTranslation.x,targetTranslation.y);
+ this._classicRedraw();
+ }
+
+ Network.prototype.releaseNode = function () {
+ if (this.lockedOnNodeId != null) {
+ this._redraw = this._classicRedraw;
+ this.lockedOnNodeId = null;
+ this.lockedOnNodeOffset = null;
+ }
+ }
+
/**
*
* @param easingTime
@@ -23311,10 +23354,16 @@ return /******/ (function(modules) { // webpackBootstrap
this._classicRedraw();
this.moving = true;
+
// cleanup
if (this.easingTime >= 1.0) {
this.easingTime = 0;
- this._redraw = this._classicRedraw;
+ if (this.lockedOnNodeId != null) {
+ this._redraw = this._lockedRedraw;
+ }
+ else {
+ this._redraw = this._classicRedraw;
+ }
this.emit("animationFinished");
}
};
@@ -23358,1052 +23407,1184 @@ return /******/ (function(modules) { // webpackBootstrap
/* 46 */
/***/ function(module, exports, __webpack_require__) {
+ var util = __webpack_require__(1);
+ var Node = __webpack_require__(47);
+
/**
- * Parse a text source containing data in DOT language into a JSON object.
- * The object contains two lists: one with nodes and one with edges.
- *
- * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+ * @class Edge
*
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graph An object containing two parameters:
- * {Object[]} nodes
- * {Object[]} edges
+ * A edge connects two nodes
+ * @param {Object} properties Object with properties. Must contain
+ * At least properties from and to.
+ * Available properties: from (number),
+ * to (number), label (string, color (string),
+ * width (number), style (string),
+ * length (number), title (string)
+ * @param {Network} network A Network object, used to find and edge to
+ * nodes.
+ * @param {Object} constants An object with default values for
+ * example for the color
*/
- function parseDOT (data) {
- dot = data;
- return parseGraph();
- }
+ function Edge (properties, network, networkConstants) {
+ if (!network) {
+ throw "No network provided";
+ }
+ var fields = ['edges','physics'];
+ var constants = util.selectiveBridgeObject(fields,networkConstants);
+ this.options = constants.edges;
+ this.physics = constants.physics;
+ this.options['smoothCurves'] = networkConstants['smoothCurves'];
- // token types enumeration
- var TOKENTYPE = {
- NULL : 0,
- DELIMITER : 1,
- IDENTIFIER: 2,
- UNKNOWN : 3
- };
- // map with all delimiters
- var DELIMITERS = {
- '{': true,
- '}': true,
- '[': true,
- ']': true,
- ';': true,
- '=': true,
- ',': true,
+ this.network = network;
- '->': true,
- '--': true
- };
+ // initialize variables
+ this.id = undefined;
+ this.fromId = undefined;
+ this.toId = undefined;
+ this.title = undefined;
+ this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
+ this.value = undefined;
+ this.selected = false;
+ this.hover = false;
- var dot = ''; // current dot file
- var index = 0; // current index in dot file
- var c = ''; // current token character in expr
- var token = ''; // current token
- var tokenType = TOKENTYPE.NULL; // type of the token
+ this.from = null; // a node
+ this.to = null; // a node
+ this.via = null; // a temp node
- /**
- * Get the first character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function first() {
- index = 0;
- c = dot.charAt(0);
- }
+ // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+ // by storing the original information we can revert to the original connection when the cluser is opened.
+ this.originalFromId = [];
+ this.originalToId = [];
- /**
- * Get the next character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function next() {
- index++;
- c = dot.charAt(index);
- }
+ this.connected = false;
- /**
- * Preview the next character from the dot file.
- * @return {String} cNext
- */
- function nextPreview() {
- return dot.charAt(index + 1);
- }
+ this.widthFixed = false;
+ this.lengthFixed = false;
- /**
- * Test whether given character is alphabetic or numeric
- * @param {String} c
- * @return {Boolean} isAlphaNumeric
- */
- var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
- function isAlphaNumeric(c) {
- return regexAlphaNumeric.test(c);
+ this.setProperties(properties);
+
+ this.controlNodesEnabled = false;
+ this.controlNodes = {from:null, to:null, positions:{}};
+ this.connectedNode = null;
}
/**
- * Merge all properties of object b into object b
- * @param {Object} a
- * @param {Object} b
- * @return {Object} a
+ * Set or overwrite properties for the edge
+ * @param {Object} properties an object with properties
+ * @param {Object} constants and object with default, global properties
*/
- function merge (a, b) {
- if (!a) {
- a = {};
+ Edge.prototype.setProperties = function(properties) {
+ if (!properties) {
+ return;
}
- if (b) {
- for (var name in b) {
- if (b.hasOwnProperty(name)) {
- a[name] = b[name];
- }
+ var fields = ['style','fontSize','fontFace','fontColor','fontFill','width',
+ 'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
+ ];
+ util.selectiveDeepExtend(fields, this.options, properties);
+
+ if (properties.from !== undefined) {this.fromId = properties.from;}
+ if (properties.to !== undefined) {this.toId = properties.to;}
+
+ if (properties.id !== undefined) {this.id = properties.id;}
+ if (properties.label !== undefined) {this.label = properties.label;}
+
+ if (properties.title !== undefined) {this.title = properties.title;}
+ if (properties.value !== undefined) {this.value = properties.value;}
+ if (properties.length !== undefined) {this.physics.springLength = properties.length;}
+
+ if (properties.color !== undefined) {
+ this.options.inheritColor = false;
+ if (util.isString(properties.color)) {
+ this.options.color.color = properties.color;
+ this.options.color.highlight = properties.color;
+ }
+ else {
+ if (properties.color.color !== undefined) {this.options.color.color = properties.color.color;}
+ if (properties.color.highlight !== undefined) {this.options.color.highlight = properties.color.highlight;}
+ if (properties.color.hover !== undefined) {this.options.color.hover = properties.color.hover;}
}
}
- return a;
- }
+
+ // A node is connected when it has a from and to node.
+ this.connect();
+
+ this.widthFixed = this.widthFixed || (properties.width !== undefined);
+ this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
+
+ this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
+
+ // set draw method based on style
+ switch (this.options.style) {
+ case 'line': this.draw = this._drawLine; break;
+ case 'arrow': this.draw = this._drawArrow; break;
+ case 'arrow-center': this.draw = this._drawArrowCenter; break;
+ case 'dash-line': this.draw = this._drawDashLine; break;
+ default: this.draw = this._drawLine; break;
+ }
+ };
/**
- * Set a value in an object, where the provided parameter name can be a
- * path with nested parameters. For example:
- *
- * var obj = {a: 2};
- * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
- *
- * @param {Object} obj
- * @param {String} path A parameter name or dot-separated parameter path,
- * like "color.highlight.border".
- * @param {*} value
+ * Connect an edge to its nodes
*/
- function setValue(obj, path, value) {
- var keys = path.split('.');
- var o = obj;
- while (keys.length) {
- var key = keys.shift();
- if (keys.length) {
- // this isn't the end point
- if (!o[key]) {
- o[key] = {};
- }
- o = o[key];
+ Edge.prototype.connect = function () {
+ this.disconnect();
+
+ this.from = this.network.nodes[this.fromId] || null;
+ this.to = this.network.nodes[this.toId] || null;
+ this.connected = (this.from && this.to);
+
+ if (this.connected) {
+ this.from.attachEdge(this);
+ this.to.attachEdge(this);
+ }
+ else {
+ if (this.from) {
+ this.from.detachEdge(this);
}
- else {
- // this is the end point
- o[key] = value;
+ if (this.to) {
+ this.to.detachEdge(this);
}
}
- }
+ };
/**
- * Add a node to a graph object. If there is already a node with
- * the same id, their attributes will be merged.
- * @param {Object} graph
- * @param {Object} node
+ * Disconnect an edge from its nodes
*/
- function addNode(graph, node) {
- var i, len;
- var current = null;
-
- // find root graph (in case of subgraph)
- var graphs = [graph]; // list with all graphs from current graph to root graph
- var root = graph;
- while (root.parent) {
- graphs.push(root.parent);
- root = root.parent;
+ Edge.prototype.disconnect = function () {
+ if (this.from) {
+ this.from.detachEdge(this);
+ this.from = null;
}
-
- // find existing node (at root level) by its id
- if (root.nodes) {
- for (i = 0, len = root.nodes.length; i < len; i++) {
- if (node.id === root.nodes[i].id) {
- current = root.nodes[i];
- break;
- }
- }
+ if (this.to) {
+ this.to.detachEdge(this);
+ this.to = null;
}
- if (!current) {
- // this is a new node
- current = {
- id: node.id
- };
- if (graph.node) {
- // clone default attributes
- current.attr = merge(current.attr, graph.node);
- }
- }
+ this.connected = false;
+ };
- // add node to this (sub)graph and all its parent graphs
- for (i = graphs.length - 1; i >= 0; i--) {
- var g = graphs[i];
+ /**
+ * get the title of this edge.
+ * @return {string} title The title of the edge, or undefined when no title
+ * has been set.
+ */
+ Edge.prototype.getTitle = function() {
+ return typeof this.title === "function" ? this.title() : this.title;
+ };
- if (!g.nodes) {
- g.nodes = [];
- }
- if (g.nodes.indexOf(current) == -1) {
- g.nodes.push(current);
- }
- }
- // merge attributes
- if (node.attr) {
- current.attr = merge(current.attr, node.attr);
- }
- }
+ /**
+ * Retrieve the value of the edge. Can be undefined
+ * @return {Number} value
+ */
+ Edge.prototype.getValue = function() {
+ return this.value;
+ };
/**
- * Add an edge to a graph object
- * @param {Object} graph
- * @param {Object} edge
+ * Adjust the value range of the edge. The edge will adjust it's width
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
*/
- function addEdge(graph, edge) {
- if (!graph.edges) {
- graph.edges = [];
- }
- graph.edges.push(edge);
- if (graph.edge) {
- var attr = merge({}, graph.edge); // clone default attributes
- edge.attr = merge(attr, edge.attr); // merge attributes
+ Edge.prototype.setValueRange = function(min, max) {
+ if (!this.widthFixed && this.value !== undefined) {
+ var scale = (this.options.widthMax - this.options.widthMin) / (max - min);
+ this.options.width= (this.value - min) * scale + this.options.widthMin;
+ this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
}
- }
+ };
/**
- * Create an edge to a graph object
- * @param {Object} graph
- * @param {String | Number | Object} from
- * @param {String | Number | Object} to
- * @param {String} type
- * @param {Object | null} attr
- * @return {Object} edge
+ * Redraw a edge
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
*/
- function createEdge(graph, from, to, type, attr) {
- var edge = {
- from: from,
- to: to,
- type: type
- };
+ Edge.prototype.draw = function(ctx) {
+ throw "Method draw not initialized in edge";
+ };
- if (graph.edge) {
- edge.attr = merge({}, graph.edge); // clone default attributes
+ /**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top
+ * @return {boolean} True if location is located on the edge
+ */
+ Edge.prototype.isOverlappingWith = function(obj) {
+ if (this.connected) {
+ var distMax = 10;
+ var xFrom = this.from.x;
+ var yFrom = this.from.y;
+ var xTo = this.to.x;
+ var yTo = this.to.y;
+ var xObj = obj.left;
+ var yObj = obj.top;
+
+ var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+ return (dist < distMax);
}
- edge.attr = merge(edge.attr || {}, attr); // merge attributes
+ else {
+ return false
+ }
+ };
- return edge;
+ Edge.prototype._getColor = function() {
+ var colorObj = this.options.color;
+ if (this.options.inheritColor == "to") {
+ colorObj = {
+ highlight: this.to.options.color.highlight.border,
+ hover: this.to.options.color.hover.border,
+ color: this.to.options.color.border
+ };
+ }
+ else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
+ colorObj = {
+ highlight: this.from.options.color.highlight.border,
+ hover: this.from.options.color.hover.border,
+ color: this.from.options.color.border
+ };
+ }
+
+ if (this.selected == true) {return colorObj.highlight;}
+ else if (this.hover == true) {return colorObj.hover;}
+ else {return colorObj.color;}
}
+
/**
- * Get next token in the current dot file.
- * The token and token type are available as token and tokenType
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function getToken() {
- tokenType = TOKENTYPE.NULL;
- token = '';
-
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
- }
+ Edge.prototype._drawLine = function(ctx) {
+ // set style
+ ctx.strokeStyle = this._getColor();
+ ctx.lineWidth = this._getLineWidth();
- do {
- var isComment = false;
+ if (this.from != this.to) {
+ // draw line
+ var via = this._line(ctx);
- // skip comment
- if (c == '#') {
- // find the previous non-space character
- var i = index - 1;
- while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
- i--;
+ // draw label
+ var point;
+ if (this.label) {
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
}
- if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
- // the # is at the start of a line, this is indeed a line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
+ else {
+ point = this._pointOnLine(0.5);
}
+ this._label(ctx, this.label, point.x, point.y);
}
- if (c == '/' && nextPreview() == '/') {
- // skip line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
+ }
+ else {
+ var x, y;
+ var radius = this.physics.springLength / 4;
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
}
- if (c == '/' && nextPreview() == '*') {
- // skip block comment
- while (c != '') {
- if (c == '*' && nextPreview() == '/') {
- // end of block comment found. skip these last two characters
- next();
- next();
- break;
- }
- else {
- next();
- }
- }
- isComment = true;
+ if (node.width > node.height) {
+ x = node.x + node.width / 2;
+ y = node.y - radius;
}
-
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
+ else {
+ x = node.x + radius;
+ y = node.y - node.height / 2;
}
+ this._circle(ctx, x, y, radius);
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
}
- while (isComment);
+ };
- // check for end of dot file
- if (c == '') {
- // token is still empty
- tokenType = TOKENTYPE.DELIMITER;
- return;
+ /**
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
+ */
+ Edge.prototype._getLineWidth = function() {
+ if (this.selected == true) {
+ return Math.max(Math.min(this.widthSelected, this.options.widthMax), 0.3*this.networkScaleInv);
}
-
- // check for delimiters consisting of 2 characters
- var c2 = c + nextPreview();
- if (DELIMITERS[c2]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c2;
- next();
- next();
- return;
- }
-
- // check for delimiters consisting of 1 character
- if (DELIMITERS[c]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c;
- next();
- return;
+ else {
+ if (this.hover == true) {
+ return Math.max(Math.min(this.options.hoverWidth, this.options.widthMax), 0.3*this.networkScaleInv);
+ }
+ else {
+ return Math.max(this.options.width, 0.3*this.networkScaleInv);
+ }
}
+ };
- // check for an identifier (number or string)
- // TODO: more precise parsing of numbers/strings (and the port separator ':')
- if (isAlphaNumeric(c) || c == '-') {
- token += c;
- next();
+ Edge.prototype._getViaCoordinates = function () {
+ var xVia = null;
+ var yVia = null;
+ var factor = this.options.smoothCurves.roundness;
+ var type = this.options.smoothCurves.type;
- while (isAlphaNumeric(c)) {
- token += c;
- next();
+ var dx = Math.abs(this.from.x - this.to.x);
+ var dy = Math.abs(this.from.y - this.to.y);
+ if (type == 'discrete' || type == 'diagonalCross') {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ }
+ }
+ if (type == "discrete") {
+ xVia = dx < factor * dy ? this.from.x : xVia;
+ }
}
- if (token == 'false') {
- token = false; // convert to boolean
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ }
+ }
+ if (type == "discrete") {
+ yVia = dy < factor * dx ? this.from.y : yVia;
+ }
}
- else if (token == 'true') {
- token = true; // convert to boolean
+ }
+ else if (type == "straightCross") {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) { // up - down
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1-factor) * dy;
+ }
+ else {
+ yVia = this.to.y + (1-factor) * dy;
+ }
}
- else if (!isNaN(Number(token))) {
- token = Number(token); // convert to number
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) { // left - right
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1-factor) * dx;
+ }
+ else {
+ xVia = this.to.x + (1-factor) * dx;
+ }
+ yVia = this.from.y;
}
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
}
-
- // check for a string enclosed by double quotes
- if (c == '"') {
- next();
- while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
- token += c;
- if (c == '"') { // skip the escape character
- next();
+ else if (type == 'horizontal') {
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1-factor) * dx;
+ }
+ else {
+ xVia = this.to.x + (1-factor) * dx;
+ }
+ yVia = this.from.y;
+ }
+ else if (type == 'vertical') {
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1-factor) * dy;
+ }
+ else {
+ yVia = this.to.y + (1-factor) * dy;
+ }
+ }
+ else { // continuous
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(1)
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(2)
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x > xVia ? this.to.x :xVia;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(3)
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(4, this.from.x, this.to.x)
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x > xVia ? this.to.x : xVia;
+ }
}
- next();
}
- if (c != '"') {
- throw newSyntaxError('End of string " expected');
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(5)
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(6)
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(7)
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(8)
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ }
}
- next();
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
}
- // something unknown is found, wrong characters, a syntax error
- tokenType = TOKENTYPE.UNKNOWN;
- while (c != '') {
- token += c;
- next();
- }
- throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+
+ return {x:xVia, y:yVia};
}
/**
- * Parse a graph.
- * @returns {Object} graph
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseGraph() {
- var graph = {};
-
- first();
- getToken();
-
- // optional strict keyword
- if (token == 'strict') {
- graph.strict = true;
- getToken();
+ Edge.prototype._line = function (ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ if (this.options.smoothCurves.enabled == true) {
+ if (this.options.smoothCurves.dynamic == false) {
+ var via = this._getViaCoordinates();
+ if (via.x == null) {
+ ctx.lineTo(this.to.x, this.to.y);
+ ctx.stroke();
+ return null;
+ }
+ else {
+ // this.via.x = via.x;
+ // this.via.y = via.y;
+ ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+ ctx.stroke();
+ return via;
+ }
+ }
+ else {
+ ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+ ctx.stroke();
+ return this.via;
+ }
}
-
- // graph or digraph keyword
- if (token == 'graph' || token == 'digraph') {
- graph.type = token;
- getToken();
- }
-
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- graph.id = token;
- getToken();
- }
-
- // open angle bracket
- if (token != '{') {
- throw newSyntaxError('Angle bracket { expected');
- }
- getToken();
-
- // statements
- parseStatements(graph);
-
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
- }
- getToken();
-
- // end of file
- if (token !== '') {
- throw newSyntaxError('End of file expected');
+ else {
+ ctx.lineTo(this.to.x, this.to.y);
+ ctx.stroke();
+ return null;
}
- getToken();
-
- // remove temporary default properties
- delete graph.node;
- delete graph.edge;
- delete graph.graph;
-
- return graph;
- }
+ };
/**
- * Parse a list with statements.
- * @param {Object} graph
+ * Draw a line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @private
*/
- function parseStatements (graph) {
- while (token !== '' && token != '}') {
- parseStatement(graph);
- if (token == ';') {
- getToken();
- }
- }
- }
+ Edge.prototype._circle = function (ctx, x, y, radius) {
+ // draw a circle
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
+ };
/**
- * Parse a single statement. Can be a an attribute statement, node
- * statement, a series of node statements and edge statements, or a
- * parameter.
- * @param {Object} graph
+ * Draw label with white background and with the middle at (x, y)
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {Number} x
+ * @param {Number} y
+ * @private
*/
- function parseStatement(graph) {
- // parse subgraph
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- // edge statements
- parseEdge(graph, subgraph);
+ Edge.prototype._label = function (ctx, text, x, y) {
+ if (text) {
+ // TODO: cache the calculated size
+ ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+ this.options.fontSize + "px " + this.options.fontFace;
+ ctx.fillStyle = this.options.fontFill;
- return;
- }
+ var lines = String(text).split('\n');
+ var lineCount = lines.length;
+ var fontSize = (Number(this.options.fontSize) + 4);
+ var yLine = y + (1 - lineCount) / 2 * fontSize;
- // parse an attribute statement
- var attr = parseAttributeStatement(graph);
- if (attr) {
- return;
- }
+ if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
+ var width = ctx.measureText(lines[0]).width;
+ for (var i = 1; i < lineCount; i++) {
+ var lineWidth = ctx.measureText(lines[i]).width;
+ width = lineWidth > width ? lineWidth : width;
+ }
+ var height = this.options.fontSize * lineCount;
+ var left = x - width / 2;
+ var top = y - height / 2;
+ ctx.fillRect(left, top, width, height);
+ }
- // parse node
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
- }
- var id = token; // id can be a string or a number
- getToken();
+ // draw text
+ ctx.fillStyle = this.options.fontColor || "black";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
- if (token == '=') {
- // id statement
- getToken();
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
+ for (var i = 0; i < lineCount; i++) {
+ ctx.fillText(lines[i], x, yLine);
+ yLine += fontSize;
}
- graph[id] = token;
- getToken();
- // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
- }
- else {
- parseNodeStatement(graph, id);
}
- }
+ };
/**
- * Parse a subgraph
- * @param {Object} graph parent graph object
- * @return {Object | null} subgraph
+ * Redraw a edge as a dashed line
+ * Draw this edge in the given canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseSubgraph (graph) {
- var subgraph = null;
+ Edge.prototype._drawDashLine = function(ctx) {
+ // set style
+ if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight;}
+ else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover;}
+ else {ctx.strokeStyle = this.options.color.color;}
- // optional subgraph keyword
- if (token == 'subgraph') {
- subgraph = {};
- subgraph.type = 'subgraph';
- getToken();
+ ctx.lineWidth = this._getLineWidth();
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- subgraph.id = token;
- getToken();
+ var via = null;
+ // only firefox and chrome support this method, else we use the legacy one.
+ if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+ // configure the dash pattern
+ var pattern = [0];
+ if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) {
+ pattern = [this.options.dash.length,this.options.dash.gap];
}
- }
-
- // open angle bracket
- if (token == '{') {
- getToken();
-
- if (!subgraph) {
- subgraph = {};
+ else {
+ pattern = [5,5];
}
- subgraph.parent = graph;
- subgraph.node = graph.node;
- subgraph.edge = graph.edge;
- subgraph.graph = graph.graph;
- // statements
- parseStatements(subgraph);
+ // set dash settings for chrome or firefox
+ if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+ ctx.setLineDash(pattern);
+ ctx.lineDashOffset = 0;
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
+ } else { //Firefox
+ ctx.mozDash = pattern;
+ ctx.mozDashOffset = 0;
}
- getToken();
- // remove temporary default properties
- delete subgraph.node;
- delete subgraph.edge;
- delete subgraph.graph;
- delete subgraph.parent;
+ // draw the line
+ via = this._line(ctx);
- // register at the parent graph
- if (!graph.subgraphs) {
- graph.subgraphs = [];
+ // restore the dash settings.
+ if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+ ctx.setLineDash([0]);
+ ctx.lineDashOffset = 0;
+
+ } else { //Firefox
+ ctx.mozDash = [0];
+ ctx.mozDashOffset = 0;
}
- graph.subgraphs.push(subgraph);
+ }
+ else { // unsupporting smooth lines
+ // draw dashed line
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ if (this.options.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.options.dash.length,this.options.dash.gap,this.options.dash.altLength,this.options.dash.gap]);
+ }
+ else if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.options.dash.length,this.options.dash.gap]);
+ }
+ else //If all else fails draw a line
+ {
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
+ }
+ ctx.stroke();
}
- return subgraph;
- }
+ // draw label
+ if (this.label) {
+ var point;
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
+ }
+ else {
+ point = this._pointOnLine(0.5);
+ }
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ };
/**
- * parse an attribute statement like "node [shape=circle fontSize=16]".
- * Available keywords are 'node', 'edge', 'graph'.
- * The previous list with default attributes will be replaced
- * @param {Object} graph
- * @returns {String | null} keyword Returns the name of the parsed attribute
- * (node, edge, graph), or null if nothing
- * is parsed.
+ * Get a point on a line
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
*/
- function parseAttributeStatement (graph) {
- // attribute statements
- if (token == 'node') {
- getToken();
-
- // node attributes
- graph.node = parseAttributeList();
- return 'node';
- }
- else if (token == 'edge') {
- getToken();
-
- // edge attributes
- graph.edge = parseAttributeList();
- return 'edge';
- }
- else if (token == 'graph') {
- getToken();
-
- // graph attributes
- graph.graph = parseAttributeList();
- return 'graph';
+ Edge.prototype._pointOnLine = function (percentage) {
+ return {
+ x: (1 - percentage) * this.from.x + percentage * this.to.x,
+ y: (1 - percentage) * this.from.y + percentage * this.to.y
}
-
- return null;
- }
+ };
/**
- * parse a node statement
- * @param {Object} graph
- * @param {String | Number} id
+ * Get a point on a circle
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
*/
- function parseNodeStatement(graph, id) {
- // node statement
- var node = {
- id: id
- };
- var attr = parseAttributeList();
- if (attr) {
- node.attr = attr;
+ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+ var angle = (percentage - 3/8) * 2 * Math.PI;
+ return {
+ x: x + radius * Math.cos(angle),
+ y: y - radius * Math.sin(angle)
}
- addNode(graph, node);
-
- // edge statements
- parseEdge(graph, id);
- }
+ };
/**
- * Parse an edge or a series of edges
- * @param {Object} graph
- * @param {String | Number} from Id of the from node
+ * Redraw a edge as a line with an arrow halfway the line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseEdge(graph, from) {
- while (token == '->' || token == '--') {
- var to;
- var type = token;
- getToken();
+ Edge.prototype._drawArrowCenter = function(ctx) {
+ var point;
+ // set style
+ if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight; ctx.fillStyle = this.options.color.highlight;}
+ else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover; ctx.fillStyle = this.options.color.hover;}
+ else {ctx.strokeStyle = this.options.color.color; ctx.fillStyle = this.options.color.color;}
+ ctx.lineWidth = this._getLineWidth();
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- to = subgraph;
+ if (this.from != this.to) {
+ // draw line
+ var via = this._line(ctx);
+
+ var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ // draw an arrow halfway the line
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
}
else {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier or subgraph expected');
- }
- to = token;
- addNode(graph, {
- id: to
- });
- getToken();
+ point = this._pointOnLine(0.5);
}
- // parse edge attributes
- var attr = parseAttributeList();
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
- // create edge
- var edge = createEdge(graph, from, to, type, attr);
- addEdge(graph, edge);
+ // draw label
+ if (this.label) {
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
+ else {
+ // draw circle
+ var x, y;
+ var radius = 0.25 * Math.max(100,this.physics.springLength);
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width * 0.5;
+ y = node.y - radius;
+ }
+ else {
+ x = node.x + radius;
+ y = node.y - node.height * 0.5;
+ }
+ this._circle(ctx, x, y, radius);
- from = to;
+ // draw all arrows
+ var angle = 0.2 * Math.PI;
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
- }
+ };
+
+
/**
- * Parse a set with attributes,
- * for example [label="1.000", shape=solid]
- * @return {Object | null} attr
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseAttributeList() {
- var attr = null;
+ Edge.prototype._drawArrow = function(ctx) {
+ // set style
+ if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight; ctx.fillStyle = this.options.color.highlight;}
+ else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover; ctx.fillStyle = this.options.color.hover;}
+ else {ctx.strokeStyle = this.options.color.color; ctx.fillStyle = this.options.color.color;}
- while (token == '[') {
- getToken();
- attr = {};
- while (token !== '' && token != ']') {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute name expected');
- }
- var name = token;
+ ctx.lineWidth = this._getLineWidth();
- getToken();
- if (token != '=') {
- throw newSyntaxError('Equal sign = expected');
- }
- getToken();
+ var angle, length;
+ //draw a line
+ if (this.from != this.to) {
+ angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var dx = (this.to.x - this.from.x);
+ var dy = (this.to.y - this.from.y);
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute value expected');
- }
- var value = token;
- setValue(attr, name, value); // name can be a path
+ var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+ var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+ var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+ var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
- getToken();
- if (token ==',') {
- getToken();
- }
+ var via;
+ if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true ) {
+ via = this.via;
+ }
+ else if (this.options.smoothCurves.enabled == true) {
+ via = this._getViaCoordinates();
}
- if (token != ']') {
- throw newSyntaxError('Bracket ] expected');
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+ dx = (this.to.x - via.x);
+ dy = (this.to.y - via.y);
+ edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
}
- getToken();
- }
+ var toBorderDist = this.to.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
- return attr;
- }
+ var xTo,yTo;
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+ }
+ else {
+ xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+ }
- /**
- * Create a syntax error with extra information on current token and index.
- * @param {String} message
- * @returns {SyntaxError} err
- */
- function newSyntaxError(message) {
- return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
- }
+ ctx.beginPath();
+ ctx.moveTo(xFrom,yFrom);
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+ }
+ else {
+ ctx.lineTo(xTo, yTo);
+ }
+ ctx.stroke();
- /**
- * Chop off text after a maximum length
- * @param {String} text
- * @param {Number} maxLength
- * @returns {String}
- */
- function chop (text, maxLength) {
- return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
- }
+ // draw arrow at the end of the line
+ length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ ctx.arrow(xTo, yTo, angle, length);
+ ctx.fill();
+ ctx.stroke();
- /**
- * Execute a function fn for each pair of elements in two arrays
- * @param {Array | *} array1
- * @param {Array | *} array2
- * @param {function} fn
- */
- function forEach2(array1, array2, fn) {
- if (array1 instanceof Array) {
- array1.forEach(function (elem1) {
- if (array2 instanceof Array) {
- array2.forEach(function (elem2) {
- fn(elem1, elem2);
- });
+ // draw label
+ if (this.label) {
+ var point;
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
}
else {
- fn(elem1, array2);
+ point = this._pointOnLine(0.5);
}
- });
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
else {
- if (array2 instanceof Array) {
- array2.forEach(function (elem2) {
- fn(array1, elem2);
- });
+ // draw circle
+ var node = this.from;
+ var x, y, arrow;
+ var radius = 0.25 * Math.max(100,this.physics.springLength);
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width * 0.5;
+ y = node.y - radius;
+ arrow = {
+ x: x,
+ y: node.y,
+ angle: 0.9 * Math.PI
+ };
}
else {
- fn(array1, array2);
+ x = node.x + radius;
+ y = node.y - node.height * 0.5;
+ arrow = {
+ x: node.x,
+ y: y,
+ angle: 0.6 * Math.PI
+ };
}
- }
- }
+ ctx.beginPath();
+ // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
- /**
- * Convert a string containing a graph in DOT language into a map containing
- * with nodes and edges in the format of graph.
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graphData
- */
- function DOTToGraph (data) {
- // parse the DOT file
- var dotData = parseDOT(data);
- var graphData = {
- nodes: [],
- edges: [],
- options: {}
- };
+ // draw all arrows
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+ ctx.fill();
+ ctx.stroke();
- // copy the nodes
- if (dotData.nodes) {
- dotData.nodes.forEach(function (dotNode) {
- var graphNode = {
- id: dotNode.id,
- label: String(dotNode.label || dotNode.id)
- };
- merge(graphNode, dotNode.attr);
- if (graphNode.image) {
- graphNode.shape = 'image';
- }
- graphData.nodes.push(graphNode);
- });
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
+ };
- // copy the edges
- if (dotData.edges) {
- /**
- * Convert an edge in DOT format to an edge with VisGraph format
- * @param {Object} dotEdge
- * @returns {Object} graphEdge
- */
- function convertEdge(dotEdge) {
- var graphEdge = {
- from: dotEdge.from,
- to: dotEdge.to
- };
- merge(graphEdge, dotEdge.attr);
- graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
- return graphEdge;
- }
- dotData.edges.forEach(function (dotEdge) {
- var from, to;
- if (dotEdge.from instanceof Object) {
- from = dotEdge.from.nodes;
- }
- else {
- from = {
- id: dotEdge.from
- }
- }
- if (dotEdge.to instanceof Object) {
- to = dotEdge.to.nodes;
+ /**
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @private
+ */
+ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+ if (this.from != this.to) {
+ if (this.options.smoothCurves.enabled == true) {
+ var xVia, yVia;
+ if (this.options.smoothCurves.enabled == true && this.options.smoothCurves.dynamic == true) {
+ xVia = this.via.x;
+ yVia = this.via.y;
}
else {
- to = {
- id: dotEdge.to
- }
+ var via = this._getViaCoordinates();
+ xVia = via.x;
+ yVia = via.y;
}
-
- if (dotEdge.from instanceof Object && dotEdge.from.edges) {
- dotEdge.from.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
+ var minDistance = 1e9;
+ var distance;
+ var i,t,x,y, lastX, lastY;
+ for (i = 0; i < 10; i++) {
+ t = 0.1*i;
+ x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+ y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+ if (i > 0) {
+ distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
+ minDistance = distance < minDistance ? distance : minDistance;
+ }
+ lastX = x; lastY = y;
}
+ return minDistance
+ }
+ else {
+ return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
+ }
+ }
+ else {
+ var x, y, dx, dy;
+ var radius = 0.25 * this.physics.springLength;
+ var node = this.from;
+ if (node.width > node.height) {
+ x = node.x + 0.5 * node.width;
+ y = node.y - radius;
+ }
+ else {
+ x = node.x + radius;
+ y = node.y - 0.5 * node.height;
+ }
+ dx = x - x3;
+ dy = y - y3;
+ return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+ }
+ };
- forEach2(from, to, function (from, to) {
- var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
+ Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
+ var px = x2-x1,
+ py = y2-y1,
+ something = px*px + py*py,
+ u = ((x3 - x1) * px + (y3 - y1) * py) / something;
- if (dotEdge.to instanceof Object && dotEdge.to.edges) {
- dotEdge.to.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
- }
- });
+ if (u > 1) {
+ u = 1;
}
-
- // copy the options
- if (dotData.attr) {
- graphData.options = dotData.attr;
+ else if (u < 0) {
+ u = 0;
}
- return graphData;
+ var x = x1 + u * px,
+ y = y1 + u * py,
+ dx = x - x3,
+ dy = y - y3;
+
+ //# Note: If the actual distance does not matter,
+ //# if you only want to compare what this function
+ //# returns to other results of this function, you
+ //# can just return the squared distance instead
+ //# (i.e. remove the sqrt) to gain a little performance
+
+ return Math.sqrt(dx*dx + dy*dy);
}
- // exports
- exports.parseDOT = parseDOT;
- exports.DOTToGraph = DOTToGraph;
+ /**
+ * This allows the zoom level of the network to influence the rendering
+ *
+ * @param scale
+ */
+ Edge.prototype.setScale = function(scale) {
+ this.networkScaleInv = 1.0/scale;
+ };
-/***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
+ Edge.prototype.select = function() {
+ this.selected = true;
+ };
-
- function parseGephi(gephiJSON, options) {
- var edges = [];
- var nodes = [];
- this.options = {
- edges: {
- inheritColor: true
- },
- nodes: {
- allowedToMove: false,
- parseColor: false
- }
- };
-
- if (options !== undefined) {
- this.options.nodes['allowedToMove'] = options.allowedToMove | false;
- this.options.nodes['parseColor'] = options.parseColor | false;
- this.options.edges['inheritColor'] = options.inheritColor | true;
- }
+ Edge.prototype.unselect = function() {
+ this.selected = false;
+ };
- var gEdges = gephiJSON.edges;
- var gNodes = gephiJSON.nodes;
- for (var i = 0; i < gEdges.length; i++) {
- var edge = {};
- var gEdge = gEdges[i];
- edge['id'] = gEdge.id;
- edge['from'] = gEdge.source;
- edge['to'] = gEdge.target;
- edge['attributes'] = gEdge.attributes;
- // edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
- // edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
- edge['color'] = gEdge.color;
- edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor;
- edges.push(edge);
+ Edge.prototype.positionBezierNode = function() {
+ if (this.via !== null && this.from !== null && this.to !== null) {
+ this.via.x = 0.5 * (this.from.x + this.to.x);
+ this.via.y = 0.5 * (this.from.y + this.to.y);
}
+ };
- for (var i = 0; i < gNodes.length; i++) {
- var node = {};
- var gNode = gNodes[i];
- node['id'] = gNode.id;
- node['attributes'] = gNode.attributes;
- node['x'] = gNode.x;
- node['y'] = gNode.y;
- node['label'] = gNode.label;
- if (this.options.nodes.parseColor == true) {
- node['color'] = gNode.color;
- }
- else {
- node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color} : undefined;
+ /**
+ * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
+ * @param ctx
+ */
+ Edge.prototype._drawControlNodes = function(ctx) {
+ if (this.controlNodesEnabled == true) {
+ if (this.controlNodes.from === null && this.controlNodes.to === null) {
+ var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+ var nodeIdTo = "edgeIdTo:".concat(this.id);
+ var constants = {
+ nodes:{group:'', radius:8},
+ physics:{damping:0},
+ clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+ };
+ this.controlNodes.from = new Node(
+ {id:nodeIdFrom,
+ shape:'dot',
+ color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+ },{},{},constants);
+ this.controlNodes.to = new Node(
+ {id:nodeIdTo,
+ shape:'dot',
+ color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+ },{},{},constants);
}
- node['radius'] = gNode.size;
- node['allowedToMoveX'] = this.options.nodes.allowedToMove;
- node['allowedToMoveY'] = this.options.nodes.allowedToMove;
- nodes.push(node);
- }
-
- return {nodes:nodes, edges:edges};
- }
- exports.parseGephi = parseGephi;
-
-/***/ },
-/* 48 */
-/***/ function(module, exports, __webpack_require__) {
+ if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+ this.controlNodes.positions = this.getControlNodePositions(ctx);
+ this.controlNodes.from.x = this.controlNodes.positions.from.x;
+ this.controlNodes.from.y = this.controlNodes.positions.from.y;
+ this.controlNodes.to.x = this.controlNodes.positions.to.x;
+ this.controlNodes.to.y = this.controlNodes.positions.to.y;
+ }
- var util = __webpack_require__(1);
+ this.controlNodes.from.draw(ctx);
+ this.controlNodes.to.draw(ctx);
+ }
+ else {
+ this.controlNodes = {from:null, to:null, positions:{}};
+ }
+ };
/**
- * @class Groups
- * This class can store groups and properties specific for groups.
+ * Enable control nodes.
+ * @private
*/
- function Groups() {
- this.clear();
- this.defaultIndex = 0;
- }
-
+ Edge.prototype._enableControlNodes = function() {
+ this.controlNodesEnabled = true;
+ };
/**
- * default constants for group colors
+ * disable control nodes
+ * @private
*/
- Groups.DEFAULT = [
- {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
- {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
- {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
- {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
- {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
- {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
- {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
- {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
- {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
- {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}} // mint
- ];
-
+ Edge.prototype._disableControlNodes = function() {
+ this.controlNodesEnabled = false;
+ };
/**
- * Clear all groups
+ * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+ * @param x
+ * @param y
+ * @returns {null}
+ * @private
*/
- Groups.prototype.clear = function () {
- this.groups = {};
- this.groups.length = function()
- {
- var i = 0;
- for ( var p in this ) {
- if (this.hasOwnProperty(p)) {
- i++;
- }
- }
- return i;
+ Edge.prototype._getSelectedControlNode = function(x,y) {
+ var positions = this.controlNodes.positions;
+ var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+ var toDistance = Math.sqrt(Math.pow(x - positions.to.x ,2) + Math.pow(y - positions.to.y ,2));
+
+ if (fromDistance < 15) {
+ this.connectedNode = this.from;
+ this.from = this.controlNodes.from;
+ return this.controlNodes.from;
+ }
+ else if (toDistance < 15) {
+ this.connectedNode = this.to;
+ this.to = this.controlNodes.to;
+ return this.controlNodes.to;
+ }
+ else {
+ return null;
}
};
/**
- * get group properties of a groupname. If groupname is not found, a new group
- * is added.
- * @param {*} groupname Can be a number, string, Date, etc.
- * @return {Object} group The created group, containing all group properties
+ * this resets the control nodes to their original position.
+ * @private
*/
- Groups.prototype.get = function (groupname) {
- var group = this.groups[groupname];
- if (group == undefined) {
- // create new group
- var index = this.defaultIndex % Groups.DEFAULT.length;
- this.defaultIndex++;
- group = {};
- group.color = Groups.DEFAULT[index];
- this.groups[groupname] = group;
+ Edge.prototype._restoreControlNodes = function() {
+ if (this.controlNodes.from.selected == true) {
+ this.from = this.connectedNode;
+ this.connectedNode = null;
+ this.controlNodes.from.unselect();
+ }
+ if (this.controlNodes.to.selected == true) {
+ this.to = this.connectedNode;
+ this.connectedNode = null;
+ this.controlNodes.to.unselect();
}
-
- return group;
};
/**
- * Add a custom group style
- * @param {String} groupname
- * @param {Object} style An object containing borderColor,
- * backgroundColor, etc.
- * @return {Object} group The created group object
+ * this calculates the position of the control nodes on the edges of the parent nodes.
+ *
+ * @param ctx
+ * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
*/
- Groups.prototype.add = function (groupname, style) {
- this.groups[groupname] = style;
- if (style.color) {
- style.color = util.parseColor(style.color);
+ Edge.prototype.getControlNodePositions = function(ctx) {
+ var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var dx = (this.to.x - this.from.x);
+ var dy = (this.to.y - this.from.y);
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+ var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+ var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+ var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+ var via;
+ if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true) {
+ via = this.via;
+ }
+ else if (this.options.smoothCurves.enabled == true) {
+ via = this._getViaCoordinates();
}
- return style;
- };
- module.exports = Groups;
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+ dx = (this.to.x - via.x);
+ dy = (this.to.y - via.y);
+ edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ }
+ var toBorderDist = this.to.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+
+ var xTo,yTo;
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+ }
+ else {
+ xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+ }
+
+ return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+ };
+ module.exports = Edge;
/***/ },
-/* 49 */
+/* 47 */
/***/ function(module, exports, __webpack_require__) {
- /**
- * @class Images
- * This class loads images and keeps them stored.
- */
- function Images() {
- this.images = {};
-
- this.callback = undefined;
- }
-
- /**
- * Set an onload callback function. This will be called each time an image
- * is loaded
- * @param {function} callback
- */
- Images.prototype.setOnloadCallback = function(callback) {
- this.callback = callback;
- };
-
- /**
- *
- * @param {string} url Url of the image
- * @param {string} url Url of an image to use if the url image is not found
- * @return {Image} img The image object
- */
- Images.prototype.load = function(url, brokenUrl) {
- var img = this.images[url];
- if (img == undefined) {
- // create the image
- var images = this;
- img = new Image();
- this.images[url] = img;
- img.onload = function() {
- if (images.callback) {
- images.callback(this);
- }
- };
-
- img.onerror = function () {
- this.src = brokenUrl;
- if (images.callback) {
- images.callback(this);
- }
- };
-
- img.src = url;
- }
-
- return img;
- };
-
- module.exports = Images;
-
-
-/***/ },
-/* 50 */
-/***/ function(module, exports, __webpack_require__) {
-
- var util = __webpack_require__(1);
-
+ var util = __webpack_require__(1);
+
/**
* @class Node
* A node. A node can be connected to other nodes via one or multiple edges.
@@ -25273,1918 +25454,1514 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.fillRect(left, top, width, height);
}
- // draw text
- ctx.fillStyle = this.options.fontColor || "black";
- for (var i = 0; i < lineCount; i++) {
- ctx.fillText(lines[i], x, yLine);
- yLine += fontSize;
- }
- }
- };
-
-
- Node.prototype.getTextSize = function(ctx) {
- if (this.label !== undefined) {
- ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
-
- var lines = this.label.split('\n'),
- height = (Number(this.options.fontSize) + 4) * lines.length,
- width = 0;
-
- for (var i = 0, iMax = lines.length; i < iMax; i++) {
- width = Math.max(width, ctx.measureText(lines[i]).width);
- }
-
- return {"width": width, "height": height};
- }
- else {
- return {"width": 0, "height": 0};
- }
- };
-
- /**
- * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
- * there is a safety margin of 0.3 * width;
- *
- * @returns {boolean}
- */
- Node.prototype.inArea = function() {
- if (this.width !== undefined) {
- return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
- this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
- this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
- this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
- }
- else {
- return true;
- }
- };
-
- /**
- * checks if the core of the node is in the display area, this is used for opening clusters around zoom
- * @returns {boolean}
- */
- Node.prototype.inView = function() {
- return (this.x >= this.canvasTopLeft.x &&
- this.x < this.canvasBottomRight.x &&
- this.y >= this.canvasTopLeft.y &&
- this.y < this.canvasBottomRight.y);
- };
-
- /**
- * This allows the zoom level of the network to influence the rendering
- * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
- *
- * @param scale
- * @param canvasTopLeft
- * @param canvasBottomRight
- */
- Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- this.canvasTopLeft = canvasTopLeft;
- this.canvasBottomRight = canvasBottomRight;
- };
-
-
- /**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
- */
- Node.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- };
-
-
-
- /**
- * set the velocity at 0. Is called when this node is contained in another during clustering
- */
- Node.prototype.clearVelocity = function() {
- this.vx = 0;
- this.vy = 0;
- };
-
-
- /**
- * Basic preservation of (kinectic) energy
- *
- * @param massBeforeClustering
- */
- Node.prototype.updateVelocity = function(massBeforeClustering) {
- var energyBefore = this.vx * this.vx * massBeforeClustering;
- //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
- this.vx = Math.sqrt(energyBefore/this.options.mass);
- energyBefore = this.vy * this.vy * massBeforeClustering;
- //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
- this.vy = Math.sqrt(energyBefore/this.options.mass);
- };
-
- module.exports = Node;
-
-
-/***/ },
-/* 51 */
-/***/ function(module, exports, __webpack_require__) {
-
- var util = __webpack_require__(1);
- var Node = __webpack_require__(50);
-
- /**
- * @class Edge
- *
- * A edge connects two nodes
- * @param {Object} properties Object with properties. Must contain
- * At least properties from and to.
- * Available properties: from (number),
- * to (number), label (string, color (string),
- * width (number), style (string),
- * length (number), title (string)
- * @param {Network} network A Network object, used to find and edge to
- * nodes.
- * @param {Object} constants An object with default values for
- * example for the color
- */
- function Edge (properties, network, networkConstants) {
- if (!network) {
- throw "No network provided";
- }
- var fields = ['edges','physics'];
- var constants = util.selectiveBridgeObject(fields,networkConstants);
- this.options = constants.edges;
- this.physics = constants.physics;
- this.options['smoothCurves'] = networkConstants['smoothCurves'];
-
-
- this.network = network;
-
- // initialize variables
- this.id = undefined;
- this.fromId = undefined;
- this.toId = undefined;
- this.title = undefined;
- this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
- this.value = undefined;
- this.selected = false;
- this.hover = false;
-
- this.from = null; // a node
- this.to = null; // a node
- this.via = null; // a temp node
-
- // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
- // by storing the original information we can revert to the original connection when the cluser is opened.
- this.originalFromId = [];
- this.originalToId = [];
-
- this.connected = false;
-
- this.widthFixed = false;
- this.lengthFixed = false;
-
- this.setProperties(properties);
-
- this.controlNodesEnabled = false;
- this.controlNodes = {from:null, to:null, positions:{}};
- this.connectedNode = null;
- }
-
- /**
- * Set or overwrite properties for the edge
- * @param {Object} properties an object with properties
- * @param {Object} constants and object with default, global properties
- */
- Edge.prototype.setProperties = function(properties) {
- if (!properties) {
- return;
- }
-
- var fields = ['style','fontSize','fontFace','fontColor','fontFill','width',
- 'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
- ];
- util.selectiveDeepExtend(fields, this.options, properties);
-
- if (properties.from !== undefined) {this.fromId = properties.from;}
- if (properties.to !== undefined) {this.toId = properties.to;}
-
- if (properties.id !== undefined) {this.id = properties.id;}
- if (properties.label !== undefined) {this.label = properties.label;}
-
- if (properties.title !== undefined) {this.title = properties.title;}
- if (properties.value !== undefined) {this.value = properties.value;}
- if (properties.length !== undefined) {this.physics.springLength = properties.length;}
-
- if (properties.color !== undefined) {
- this.options.inheritColor = false;
- if (util.isString(properties.color)) {
- this.options.color.color = properties.color;
- this.options.color.highlight = properties.color;
- }
- else {
- if (properties.color.color !== undefined) {this.options.color.color = properties.color.color;}
- if (properties.color.highlight !== undefined) {this.options.color.highlight = properties.color.highlight;}
- if (properties.color.hover !== undefined) {this.options.color.hover = properties.color.hover;}
- }
- }
-
- // A node is connected when it has a from and to node.
- this.connect();
-
- this.widthFixed = this.widthFixed || (properties.width !== undefined);
- this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
-
- this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
-
- // set draw method based on style
- switch (this.options.style) {
- case 'line': this.draw = this._drawLine; break;
- case 'arrow': this.draw = this._drawArrow; break;
- case 'arrow-center': this.draw = this._drawArrowCenter; break;
- case 'dash-line': this.draw = this._drawDashLine; break;
- default: this.draw = this._drawLine; break;
- }
- };
-
- /**
- * Connect an edge to its nodes
- */
- Edge.prototype.connect = function () {
- this.disconnect();
-
- this.from = this.network.nodes[this.fromId] || null;
- this.to = this.network.nodes[this.toId] || null;
- this.connected = (this.from && this.to);
-
- if (this.connected) {
- this.from.attachEdge(this);
- this.to.attachEdge(this);
- }
- else {
- if (this.from) {
- this.from.detachEdge(this);
- }
- if (this.to) {
- this.to.detachEdge(this);
- }
- }
- };
-
- /**
- * Disconnect an edge from its nodes
- */
- Edge.prototype.disconnect = function () {
- if (this.from) {
- this.from.detachEdge(this);
- this.from = null;
- }
- if (this.to) {
- this.to.detachEdge(this);
- this.to = null;
- }
-
- this.connected = false;
- };
-
- /**
- * get the title of this edge.
- * @return {string} title The title of the edge, or undefined when no title
- * has been set.
- */
- Edge.prototype.getTitle = function() {
- return typeof this.title === "function" ? this.title() : this.title;
- };
-
-
- /**
- * Retrieve the value of the edge. Can be undefined
- * @return {Number} value
- */
- Edge.prototype.getValue = function() {
- return this.value;
- };
-
- /**
- * Adjust the value range of the edge. The edge will adjust it's width
- * based on its value.
- * @param {Number} min
- * @param {Number} max
- */
- Edge.prototype.setValueRange = function(min, max) {
- if (!this.widthFixed && this.value !== undefined) {
- var scale = (this.options.widthMax - this.options.widthMin) / (max - min);
- this.options.width= (this.value - min) * scale + this.options.widthMin;
- this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
- }
- };
-
- /**
- * Redraw a edge
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- */
- Edge.prototype.draw = function(ctx) {
- throw "Method draw not initialized in edge";
- };
-
- /**
- * Check if this object is overlapping with the provided object
- * @param {Object} obj an object with parameters left, top
- * @return {boolean} True if location is located on the edge
- */
- Edge.prototype.isOverlappingWith = function(obj) {
- if (this.connected) {
- var distMax = 10;
- var xFrom = this.from.x;
- var yFrom = this.from.y;
- var xTo = this.to.x;
- var yTo = this.to.y;
- var xObj = obj.left;
- var yObj = obj.top;
-
- var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
-
- return (dist < distMax);
- }
- else {
- return false
- }
- };
-
- Edge.prototype._getColor = function() {
- var colorObj = this.options.color;
- if (this.options.inheritColor == "to") {
- colorObj = {
- highlight: this.to.options.color.highlight.border,
- hover: this.to.options.color.hover.border,
- color: this.to.options.color.border
- };
- }
- else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
- colorObj = {
- highlight: this.from.options.color.highlight.border,
- hover: this.from.options.color.hover.border,
- color: this.from.options.color.border
- };
- }
-
- if (this.selected == true) {return colorObj.highlight;}
- else if (this.hover == true) {return colorObj.hover;}
- else {return colorObj.color;}
- }
-
-
- /**
- * Redraw a edge as a line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- Edge.prototype._drawLine = function(ctx) {
- // set style
- ctx.strokeStyle = this._getColor();
- ctx.lineWidth = this._getLineWidth();
-
- if (this.from != this.to) {
- // draw line
- var via = this._line(ctx);
-
- // draw label
- var point;
- if (this.label) {
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
- }
- this._label(ctx, this.label, point.x, point.y);
- }
- }
- else {
- var x, y;
- var radius = this.physics.springLength / 4;
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width / 2;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height / 2;
- }
- this._circle(ctx, x, y, radius);
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
- };
-
- /**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
- * @private
- */
- Edge.prototype._getLineWidth = function() {
- if (this.selected == true) {
- return Math.max(Math.min(this.widthSelected, this.options.widthMax), 0.3*this.networkScaleInv);
- }
- else {
- if (this.hover == true) {
- return Math.max(Math.min(this.options.hoverWidth, this.options.widthMax), 0.3*this.networkScaleInv);
- }
- else {
- return Math.max(this.options.width, 0.3*this.networkScaleInv);
- }
- }
- };
-
- Edge.prototype._getViaCoordinates = function () {
- var xVia = null;
- var yVia = null;
- var factor = this.options.smoothCurves.roundness;
- var type = this.options.smoothCurves.type;
-
- var dx = Math.abs(this.from.x - this.to.x);
- var dy = Math.abs(this.from.y - this.to.y);
- if (type == 'discrete' || type == 'diagonalCross') {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- }
- }
- if (type == "discrete") {
- xVia = dx < factor * dy ? this.from.x : xVia;
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- }
- }
- if (type == "discrete") {
- yVia = dy < factor * dx ? this.from.y : yVia;
- }
- }
- }
- else if (type == "straightCross") {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) { // up - down
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1-factor) * dy;
- }
- else {
- yVia = this.to.y + (1-factor) * dy;
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) { // left - right
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1-factor) * dx;
- }
- else {
- xVia = this.to.x + (1-factor) * dx;
- }
- yVia = this.from.y;
- }
- }
- else if (type == 'horizontal') {
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1-factor) * dx;
- }
- else {
- xVia = this.to.x + (1-factor) * dx;
- }
- yVia = this.from.y;
- }
- else if (type == 'vertical') {
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1-factor) * dy;
- }
- else {
- yVia = this.to.y + (1-factor) * dy;
- }
- }
- else { // continuous
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(1)
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(2)
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x > xVia ? this.to.x :xVia;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(3)
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(4, this.from.x, this.to.x)
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x > xVia ? this.to.x : xVia;
- }
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(5)
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(6)
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(7)
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(8)
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- }
- }
+ // draw text
+ ctx.fillStyle = this.options.fontColor || "black";
+ for (var i = 0; i < lineCount; i++) {
+ ctx.fillText(lines[i], x, yLine);
+ yLine += fontSize;
}
}
+ };
- return {x:xVia, y:yVia};
- }
+ Node.prototype.getTextSize = function(ctx) {
+ if (this.label !== undefined) {
+ ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
+
+ var lines = this.label.split('\n'),
+ height = (Number(this.options.fontSize) + 4) * lines.length,
+ width = 0;
+
+ for (var i = 0, iMax = lines.length; i < iMax; i++) {
+ width = Math.max(width, ctx.measureText(lines[i]).width);
+ }
+
+ return {"width": width, "height": height};
+ }
+ else {
+ return {"width": 0, "height": 0};
+ }
+ };
/**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+ * there is a safety margin of 0.3 * width;
+ *
+ * @returns {boolean}
*/
- Edge.prototype._line = function (ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- if (this.options.smoothCurves.enabled == true) {
- if (this.options.smoothCurves.dynamic == false) {
- var via = this._getViaCoordinates();
- if (via.x == null) {
- ctx.lineTo(this.to.x, this.to.y);
- ctx.stroke();
- return null;
- }
- else {
- // this.via.x = via.x;
- // this.via.y = via.y;
- ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
- ctx.stroke();
- return via;
- }
- }
- else {
- ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
- ctx.stroke();
- return this.via;
- }
+ Node.prototype.inArea = function() {
+ if (this.width !== undefined) {
+ return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
+ this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
+ this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
+ this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
}
else {
- ctx.lineTo(this.to.x, this.to.y);
- ctx.stroke();
- return null;
+ return true;
}
};
/**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @private
+ * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+ * @returns {boolean}
*/
- Edge.prototype._circle = function (ctx, x, y, radius) {
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ Node.prototype.inView = function() {
+ return (this.x >= this.canvasTopLeft.x &&
+ this.x < this.canvasBottomRight.x &&
+ this.y >= this.canvasTopLeft.y &&
+ this.y < this.canvasBottomRight.y);
};
/**
- * Draw label with white background and with the middle at (x, y)
- * @param {CanvasRenderingContext2D} ctx
- * @param {String} text
- * @param {Number} x
- * @param {Number} y
- * @private
+ * This allows the zoom level of the network to influence the rendering
+ * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+ *
+ * @param scale
+ * @param canvasTopLeft
+ * @param canvasBottomRight
*/
- Edge.prototype._label = function (ctx, text, x, y) {
- if (text) {
- // TODO: cache the calculated size
- ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
- this.options.fontSize + "px " + this.options.fontFace;
- ctx.fillStyle = this.options.fontFill;
+ Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+ this.networkScaleInv = 1.0/scale;
+ this.networkScale = scale;
+ this.canvasTopLeft = canvasTopLeft;
+ this.canvasBottomRight = canvasBottomRight;
+ };
- var lines = String(text).split('\n');
- var lineCount = lines.length;
- var fontSize = (Number(this.options.fontSize) + 4);
- var yLine = y + (1 - lineCount) / 2 * fontSize;
- if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
- var width = ctx.measureText(lines[0]).width;
- for (var i = 1; i < lineCount; i++) {
- var lineWidth = ctx.measureText(lines[i]).width;
- width = lineWidth > width ? lineWidth : width;
+ /**
+ * This allows the zoom level of the network to influence the rendering
+ *
+ * @param scale
+ */
+ Node.prototype.setScale = function(scale) {
+ this.networkScaleInv = 1.0/scale;
+ this.networkScale = scale;
+ };
+
+
+
+ /**
+ * set the velocity at 0. Is called when this node is contained in another during clustering
+ */
+ Node.prototype.clearVelocity = function() {
+ this.vx = 0;
+ this.vy = 0;
+ };
+
+
+ /**
+ * Basic preservation of (kinectic) energy
+ *
+ * @param massBeforeClustering
+ */
+ Node.prototype.updateVelocity = function(massBeforeClustering) {
+ var energyBefore = this.vx * this.vx * massBeforeClustering;
+ //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
+ this.vx = Math.sqrt(energyBefore/this.options.mass);
+ energyBefore = this.vy * this.vy * massBeforeClustering;
+ //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
+ this.vy = Math.sqrt(energyBefore/this.options.mass);
+ };
+
+ module.exports = Node;
+
+
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var util = __webpack_require__(1);
+
+ /**
+ * @class Groups
+ * This class can store groups and properties specific for groups.
+ */
+ function Groups() {
+ this.clear();
+ this.defaultIndex = 0;
+ }
+
+
+ /**
+ * default constants for group colors
+ */
+ Groups.DEFAULT = [
+ {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+ {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+ {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+ {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+ {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+ {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+ {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+ {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+ {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+ {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}} // mint
+ ];
+
+
+ /**
+ * Clear all groups
+ */
+ Groups.prototype.clear = function () {
+ this.groups = {};
+ this.groups.length = function()
+ {
+ var i = 0;
+ for ( var p in this ) {
+ if (this.hasOwnProperty(p)) {
+ i++;
}
- var height = this.options.fontSize * lineCount;
- var left = x - width / 2;
- var top = y - height / 2;
- ctx.fillRect(left, top, width, height);
}
+ return i;
+ }
+ };
+
+
+ /**
+ * get group properties of a groupname. If groupname is not found, a new group
+ * is added.
+ * @param {*} groupname Can be a number, string, Date, etc.
+ * @return {Object} group The created group, containing all group properties
+ */
+ Groups.prototype.get = function (groupname) {
+ var group = this.groups[groupname];
+ if (group == undefined) {
+ // create new group
+ var index = this.defaultIndex % Groups.DEFAULT.length;
+ this.defaultIndex++;
+ group = {};
+ group.color = Groups.DEFAULT[index];
+ this.groups[groupname] = group;
+ }
+
+ return group;
+ };
+
+ /**
+ * Add a custom group style
+ * @param {String} groupname
+ * @param {Object} style An object containing borderColor,
+ * backgroundColor, etc.
+ * @return {Object} group The created group object
+ */
+ Groups.prototype.add = function (groupname, style) {
+ this.groups[groupname] = style;
+ if (style.color) {
+ style.color = util.parseColor(style.color);
+ }
+ return style;
+ };
+
+ module.exports = Groups;
+
+
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * @class Images
+ * This class loads images and keeps them stored.
+ */
+ function Images() {
+ this.images = {};
- // draw text
- ctx.fillStyle = this.options.fontColor || "black";
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
+ this.callback = undefined;
+ }
- for (var i = 0; i < lineCount; i++) {
- ctx.fillText(lines[i], x, yLine);
- yLine += fontSize;
- }
- }
+ /**
+ * Set an onload callback function. This will be called each time an image
+ * is loaded
+ * @param {function} callback
+ */
+ Images.prototype.setOnloadCallback = function(callback) {
+ this.callback = callback;
};
/**
- * Redraw a edge as a dashed line
- * Draw this edge in the given canvas
- * @author David Jordan
- * @date 2012-08-08
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ *
+ * @param {string} url Url of the image
+ * @param {string} url Url of an image to use if the url image is not found
+ * @return {Image} img The image object
*/
- Edge.prototype._drawDashLine = function(ctx) {
- // set style
- if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover;}
- else {ctx.strokeStyle = this.options.color.color;}
-
- ctx.lineWidth = this._getLineWidth();
-
- var via = null;
- // only firefox and chrome support this method, else we use the legacy one.
- if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
- // configure the dash pattern
- var pattern = [0];
- if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) {
- pattern = [this.options.dash.length,this.options.dash.gap];
- }
- else {
- pattern = [5,5];
- }
+ Images.prototype.load = function(url, brokenUrl) {
+ var img = this.images[url];
+ if (img == undefined) {
+ // create the image
+ var images = this;
+ img = new Image();
+ this.images[url] = img;
+ img.onload = function() {
+ if (images.callback) {
+ images.callback(this);
+ }
+ };
+
+ img.onerror = function () {
+ this.src = brokenUrl;
+ if (images.callback) {
+ images.callback(this);
+ }
+ };
+
+ img.src = url;
+ }
- // set dash settings for chrome or firefox
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash(pattern);
- ctx.lineDashOffset = 0;
+ return img;
+ };
- } else { //Firefox
- ctx.mozDash = pattern;
- ctx.mozDashOffset = 0;
- }
+ module.exports = Images;
- // draw the line
- via = this._line(ctx);
- // restore the dash settings.
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash([0]);
- ctx.lineDashOffset = 0;
+/***/ },
+/* 50 */
+/***/ function(module, exports, __webpack_require__) {
- } else { //Firefox
- ctx.mozDash = [0];
- ctx.mozDashOffset = 0;
- }
+ /**
+ * Popup is a class to create a popup window with some text
+ * @param {Element} container The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @param {String} [text]
+ * @param {Object} [style] An object containing borderColor,
+ * backgroundColor, etc.
+ */
+ function Popup(container, x, y, text, style) {
+ if (container) {
+ this.container = container;
}
- else { // unsupporting smooth lines
- // draw dashed line
- ctx.beginPath();
- ctx.lineCap = 'round';
- if (this.options.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.options.dash.length,this.options.dash.gap,this.options.dash.altLength,this.options.dash.gap]);
- }
- else if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.options.dash.length,this.options.dash.gap]);
- }
- else //If all else fails draw a line
- {
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
- }
- ctx.stroke();
+ else {
+ this.container = document.body;
}
- // draw label
- if (this.label) {
- var point;
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
+ // x, y and text are optional, see if a style object was passed in their place
+ if (style === undefined) {
+ if (typeof x === "object") {
+ style = x;
+ x = undefined;
+ } else if (typeof text === "object") {
+ style = text;
+ text = undefined;
+ } else {
+ // for backwards compatibility, in case clients other than Network are creating Popup directly
+ style = {
+ fontColor: 'black',
+ fontSize: 14, // px
+ fontFace: 'verdana',
+ color: {
+ border: '#666',
+ background: '#FFFFC6'
+ }
+ }
}
- this._label(ctx, this.label, point.x, point.y);
}
- };
+
+ this.x = 0;
+ this.y = 0;
+ this.padding = 5;
+
+ if (x !== undefined && y !== undefined ) {
+ this.setPosition(x, y);
+ }
+ if (text !== undefined) {
+ this.setText(text);
+ }
+
+ // create the frame
+ this.frame = document.createElement("div");
+ var styleAttr = this.frame.style;
+ styleAttr.position = "absolute";
+ styleAttr.visibility = "hidden";
+ styleAttr.border = "1px solid " + style.color.border;
+ styleAttr.color = style.fontColor;
+ styleAttr.fontSize = style.fontSize + "px";
+ styleAttr.fontFamily = style.fontFace;
+ styleAttr.padding = this.padding + "px";
+ styleAttr.backgroundColor = style.color.background;
+ styleAttr.borderRadius = "3px";
+ styleAttr.MozBorderRadius = "3px";
+ styleAttr.WebkitBorderRadius = "3px";
+ styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+ styleAttr.whiteSpace = "nowrap";
+ this.container.appendChild(this.frame);
+ }
/**
- * Get a point on a line
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
+ * @param {number} x Horizontal position of the popup window
+ * @param {number} y Vertical position of the popup window
*/
- Edge.prototype._pointOnLine = function (percentage) {
- return {
- x: (1 - percentage) * this.from.x + percentage * this.to.x,
- y: (1 - percentage) * this.from.y + percentage * this.to.y
- }
+ Popup.prototype.setPosition = function(x, y) {
+ this.x = parseInt(x);
+ this.y = parseInt(y);
};
/**
- * Get a point on a circle
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
+ * Set the text for the popup window. This can be HTML code
+ * @param {string} text
*/
- Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
- var angle = (percentage - 3/8) * 2 * Math.PI;
- return {
- x: x + radius * Math.cos(angle),
- y: y - radius * Math.sin(angle)
- }
+ Popup.prototype.setText = function(text) {
+ this.frame.innerHTML = text;
};
/**
- * Redraw a edge as a line with an arrow halfway the line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Show the popup window
+ * @param {boolean} show Optional. Show or hide the window
*/
- Edge.prototype._drawArrowCenter = function(ctx) {
- var point;
- // set style
- if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight; ctx.fillStyle = this.options.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover; ctx.fillStyle = this.options.color.hover;}
- else {ctx.strokeStyle = this.options.color.color; ctx.fillStyle = this.options.color.color;}
- ctx.lineWidth = this._getLineWidth();
-
- if (this.from != this.to) {
- // draw line
- var via = this._line(ctx);
+ Popup.prototype.show = function (show) {
+ if (show === undefined) {
+ show = true;
+ }
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- // draw an arrow halfway the line
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
+ if (show) {
+ var height = this.frame.clientHeight;
+ var width = this.frame.clientWidth;
+ var maxHeight = this.frame.parentNode.clientHeight;
+ var maxWidth = this.frame.parentNode.clientWidth;
+
+ var top = (this.y - height);
+ if (top + height + this.padding > maxHeight) {
+ top = maxHeight - height - this.padding;
}
- else {
- point = this._pointOnLine(0.5);
+ if (top < this.padding) {
+ top = this.padding;
}
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- this._label(ctx, this.label, point.x, point.y);
+ var left = this.x;
+ if (left + width + this.padding > maxWidth) {
+ left = maxWidth - width - this.padding;
+ }
+ if (left < this.padding) {
+ left = this.padding;
}
+
+ this.frame.style.left = left + "px";
+ this.frame.style.top = top + "px";
+ this.frame.style.visibility = "visible";
}
else {
- // draw circle
- var x, y;
- var radius = 0.25 * Math.max(100,this.physics.springLength);
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height * 0.5;
- }
- this._circle(ctx, x, y, radius);
+ this.hide();
+ }
+ };
- // draw all arrows
- var angle = 0.2 * Math.PI;
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- point = this._pointOnCircle(x, y, radius, 0.5);
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
+ /**
+ * Hide the popup window
+ */
+ Popup.prototype.hide = function () {
+ this.frame.style.visibility = "hidden";
+ };
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
- }
+ module.exports = Popup;
+
+
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Parse a text source containing data in DOT language into a JSON object.
+ * The object contains two lists: one with nodes and one with edges.
+ *
+ * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+ *
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graph An object containing two parameters:
+ * {Object[]} nodes
+ * {Object[]} edges
+ */
+ function parseDOT (data) {
+ dot = data;
+ return parseGraph();
+ }
+
+ // token types enumeration
+ var TOKENTYPE = {
+ NULL : 0,
+ DELIMITER : 1,
+ IDENTIFIER: 2,
+ UNKNOWN : 3
};
+ // map with all delimiters
+ var DELIMITERS = {
+ '{': true,
+ '}': true,
+ '[': true,
+ ']': true,
+ ';': true,
+ '=': true,
+ ',': true,
+
+ '->': true,
+ '--': true
+ };
+ var dot = ''; // current dot file
+ var index = 0; // current index in dot file
+ var c = ''; // current token character in expr
+ var token = ''; // current token
+ var tokenType = TOKENTYPE.NULL; // type of the token
/**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Get the first character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
*/
- Edge.prototype._drawArrow = function(ctx) {
- // set style
- if (this.selected == true) {ctx.strokeStyle = this.options.color.highlight; ctx.fillStyle = this.options.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.options.color.hover; ctx.fillStyle = this.options.color.hover;}
- else {ctx.strokeStyle = this.options.color.color; ctx.fillStyle = this.options.color.color;}
+ function first() {
+ index = 0;
+ c = dot.charAt(0);
+ }
- ctx.lineWidth = this._getLineWidth();
+ /**
+ * Get the next character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
+ */
+ function next() {
+ index++;
+ c = dot.charAt(index);
+ }
- var angle, length;
- //draw a line
- if (this.from != this.to) {
- angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var dx = (this.to.x - this.from.x);
- var dy = (this.to.y - this.from.y);
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ /**
+ * Preview the next character from the dot file.
+ * @return {String} cNext
+ */
+ function nextPreview() {
+ return dot.charAt(index + 1);
+ }
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+ /**
+ * Test whether given character is alphabetic or numeric
+ * @param {String} c
+ * @return {Boolean} isAlphaNumeric
+ */
+ var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+ function isAlphaNumeric(c) {
+ return regexAlphaNumeric.test(c);
+ }
- var via;
- if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true ) {
- via = this.via;
- }
- else if (this.options.smoothCurves.enabled == true) {
- via = this._getViaCoordinates();
- }
+ /**
+ * Merge all properties of object b into object b
+ * @param {Object} a
+ * @param {Object} b
+ * @return {Object} a
+ */
+ function merge (a, b) {
+ if (!a) {
+ a = {};
+ }
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
- dx = (this.to.x - via.x);
- dy = (this.to.y - via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ if (b) {
+ for (var name in b) {
+ if (b.hasOwnProperty(name)) {
+ a[name] = b[name];
+ }
}
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+ }
+ return a;
+ }
- var xTo,yTo;
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+ /**
+ * Set a value in an object, where the provided parameter name can be a
+ * path with nested parameters. For example:
+ *
+ * var obj = {a: 2};
+ * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
+ *
+ * @param {Object} obj
+ * @param {String} path A parameter name or dot-separated parameter path,
+ * like "color.highlight.border".
+ * @param {*} value
+ */
+ function setValue(obj, path, value) {
+ var keys = path.split('.');
+ var o = obj;
+ while (keys.length) {
+ var key = keys.shift();
+ if (keys.length) {
+ // this isn't the end point
+ if (!o[key]) {
+ o[key] = {};
+ }
+ o = o[key];
}
else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+ // this is the end point
+ o[key] = value;
}
+ }
+ }
- ctx.beginPath();
- ctx.moveTo(xFrom,yFrom);
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
- }
- else {
- ctx.lineTo(xTo, yTo);
- }
- ctx.stroke();
+ /**
+ * Add a node to a graph object. If there is already a node with
+ * the same id, their attributes will be merged.
+ * @param {Object} graph
+ * @param {Object} node
+ */
+ function addNode(graph, node) {
+ var i, len;
+ var current = null;
- // draw arrow at the end of the line
- length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- ctx.arrow(xTo, yTo, angle, length);
- ctx.fill();
- ctx.stroke();
+ // find root graph (in case of subgraph)
+ var graphs = [graph]; // list with all graphs from current graph to root graph
+ var root = graph;
+ while (root.parent) {
+ graphs.push(root.parent);
+ root = root.parent;
+ }
- // draw label
- if (this.label) {
- var point;
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
+ // find existing node (at root level) by its id
+ if (root.nodes) {
+ for (i = 0, len = root.nodes.length; i < len; i++) {
+ if (node.id === root.nodes[i].id) {
+ current = root.nodes[i];
+ break;
}
- this._label(ctx, this.label, point.x, point.y);
}
}
- else {
- // draw circle
- var node = this.from;
- var x, y, arrow;
- var radius = 0.25 * Math.max(100,this.physics.springLength);
- if (!node.width) {
- node.resize(ctx);
+
+ if (!current) {
+ // this is a new node
+ current = {
+ id: node.id
+ };
+ if (graph.node) {
+ // clone default attributes
+ current.attr = merge(current.attr, graph.node);
}
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- y = node.y - radius;
- arrow = {
- x: x,
- y: node.y,
- angle: 0.9 * Math.PI
- };
+ }
+
+ // add node to this (sub)graph and all its parent graphs
+ for (i = graphs.length - 1; i >= 0; i--) {
+ var g = graphs[i];
+
+ if (!g.nodes) {
+ g.nodes = [];
}
- else {
- x = node.x + radius;
- y = node.y - node.height * 0.5;
- arrow = {
- x: node.x,
- y: y,
- angle: 0.6 * Math.PI
- };
+ if (g.nodes.indexOf(current) == -1) {
+ g.nodes.push(current);
}
- ctx.beginPath();
- // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ }
- // draw all arrows
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
- ctx.fill();
- ctx.stroke();
+ // merge attributes
+ if (node.attr) {
+ current.attr = merge(current.attr, node.attr);
+ }
+ }
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ /**
+ * Add an edge to a graph object
+ * @param {Object} graph
+ * @param {Object} edge
+ */
+ function addEdge(graph, edge) {
+ if (!graph.edges) {
+ graph.edges = [];
}
- };
+ graph.edges.push(edge);
+ if (graph.edge) {
+ var attr = merge({}, graph.edge); // clone default attributes
+ edge.attr = merge(attr, edge.attr); // merge attributes
+ }
+ }
+
+ /**
+ * Create an edge to a graph object
+ * @param {Object} graph
+ * @param {String | Number | Object} from
+ * @param {String | Number | Object} to
+ * @param {String} type
+ * @param {Object | null} attr
+ * @return {Object} edge
+ */
+ function createEdge(graph, from, to, type, attr) {
+ var edge = {
+ from: from,
+ to: to,
+ type: type
+ };
+ if (graph.edge) {
+ edge.attr = merge({}, graph.edge); // clone default attributes
+ }
+ edge.attr = merge(edge.attr || {}, attr); // merge attributes
+ return edge;
+ }
/**
- * Calculate the distance between a point (x3,y3) and a line segment from
- * (x1,y1) to (x2,y2).
- * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @param {number} x3
- * @param {number} y3
- * @private
+ * Get next token in the current dot file.
+ * The token and token type are available as token and tokenType
*/
- Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
- if (this.from != this.to) {
- if (this.options.smoothCurves.enabled == true) {
- var xVia, yVia;
- if (this.options.smoothCurves.enabled == true && this.options.smoothCurves.dynamic == true) {
- xVia = this.via.x;
- yVia = this.via.y;
+ function getToken() {
+ tokenType = TOKENTYPE.NULL;
+ token = '';
+
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
+ }
+
+ do {
+ var isComment = false;
+
+ // skip comment
+ if (c == '#') {
+ // find the previous non-space character
+ var i = index - 1;
+ while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+ i--;
}
- else {
- var via = this._getViaCoordinates();
- xVia = via.x;
- yVia = via.y;
+ if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+ // the # is at the start of a line, this is indeed a line comment
+ while (c != '' && c != '\n') {
+ next();
+ }
+ isComment = true;
}
- var minDistance = 1e9;
- var distance;
- var i,t,x,y, lastX, lastY;
- for (i = 0; i < 10; i++) {
- t = 0.1*i;
- x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
- y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
- if (i > 0) {
- distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
- minDistance = distance < minDistance ? distance : minDistance;
+ }
+ if (c == '/' && nextPreview() == '/') {
+ // skip line comment
+ while (c != '' && c != '\n') {
+ next();
+ }
+ isComment = true;
+ }
+ if (c == '/' && nextPreview() == '*') {
+ // skip block comment
+ while (c != '') {
+ if (c == '*' && nextPreview() == '/') {
+ // end of block comment found. skip these last two characters
+ next();
+ next();
+ break;
+ }
+ else {
+ next();
}
- lastX = x; lastY = y;
}
- return minDistance
+ isComment = true;
}
- else {
- return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
+
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
}
}
- else {
- var x, y, dx, dy;
- var radius = 0.25 * this.physics.springLength;
- var node = this.from;
- if (node.width > node.height) {
- x = node.x + 0.5 * node.width;
- y = node.y - radius;
+ while (isComment);
+
+ // check for end of dot file
+ if (c == '') {
+ // token is still empty
+ tokenType = TOKENTYPE.DELIMITER;
+ return;
+ }
+
+ // check for delimiters consisting of 2 characters
+ var c2 = c + nextPreview();
+ if (DELIMITERS[c2]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c2;
+ next();
+ next();
+ return;
+ }
+
+ // check for delimiters consisting of 1 character
+ if (DELIMITERS[c]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c;
+ next();
+ return;
+ }
+
+ // check for an identifier (number or string)
+ // TODO: more precise parsing of numbers/strings (and the port separator ':')
+ if (isAlphaNumeric(c) || c == '-') {
+ token += c;
+ next();
+
+ while (isAlphaNumeric(c)) {
+ token += c;
+ next();
}
- else {
- x = node.x + radius;
- y = node.y - 0.5 * node.height;
+ if (token == 'false') {
+ token = false; // convert to boolean
+ }
+ else if (token == 'true') {
+ token = true; // convert to boolean
+ }
+ else if (!isNaN(Number(token))) {
+ token = Number(token); // convert to number
}
- dx = x - x3;
- dy = y - y3;
- return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
}
- };
- Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
- var px = x2-x1,
- py = y2-y1,
- something = px*px + py*py,
- u = ((x3 - x1) * px + (y3 - y1) * py) / something;
-
- if (u > 1) {
- u = 1;
- }
- else if (u < 0) {
- u = 0;
+ // check for a string enclosed by double quotes
+ if (c == '"') {
+ next();
+ while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+ token += c;
+ if (c == '"') { // skip the escape character
+ next();
+ }
+ next();
+ }
+ if (c != '"') {
+ throw newSyntaxError('End of string " expected');
+ }
+ next();
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
}
- var x = x1 + u * px,
- y = y1 + u * py,
- dx = x - x3,
- dy = y - y3;
-
- //# Note: If the actual distance does not matter,
- //# if you only want to compare what this function
- //# returns to other results of this function, you
- //# can just return the squared distance instead
- //# (i.e. remove the sqrt) to gain a little performance
-
- return Math.sqrt(dx*dx + dy*dy);
+ // something unknown is found, wrong characters, a syntax error
+ tokenType = TOKENTYPE.UNKNOWN;
+ while (c != '') {
+ token += c;
+ next();
+ }
+ throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
}
/**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
+ * Parse a graph.
+ * @returns {Object} graph
*/
- Edge.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- };
+ function parseGraph() {
+ var graph = {};
+ first();
+ getToken();
- Edge.prototype.select = function() {
- this.selected = true;
- };
+ // optional strict keyword
+ if (token == 'strict') {
+ graph.strict = true;
+ getToken();
+ }
- Edge.prototype.unselect = function() {
- this.selected = false;
- };
+ // graph or digraph keyword
+ if (token == 'graph' || token == 'digraph') {
+ graph.type = token;
+ getToken();
+ }
- Edge.prototype.positionBezierNode = function() {
- if (this.via !== null && this.from !== null && this.to !== null) {
- this.via.x = 0.5 * (this.from.x + this.to.x);
- this.via.y = 0.5 * (this.from.y + this.to.y);
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ graph.id = token;
+ getToken();
}
- };
- /**
- * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
- * @param ctx
- */
- Edge.prototype._drawControlNodes = function(ctx) {
- if (this.controlNodesEnabled == true) {
- if (this.controlNodes.from === null && this.controlNodes.to === null) {
- var nodeIdFrom = "edgeIdFrom:".concat(this.id);
- var nodeIdTo = "edgeIdTo:".concat(this.id);
- var constants = {
- nodes:{group:'', radius:8},
- physics:{damping:0},
- clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
- };
- this.controlNodes.from = new Node(
- {id:nodeIdFrom,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- this.controlNodes.to = new Node(
- {id:nodeIdTo,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- }
+ // open angle bracket
+ if (token != '{') {
+ throw newSyntaxError('Angle bracket { expected');
+ }
+ getToken();
- if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
- this.controlNodes.positions = this.getControlNodePositions(ctx);
- this.controlNodes.from.x = this.controlNodes.positions.from.x;
- this.controlNodes.from.y = this.controlNodes.positions.from.y;
- this.controlNodes.to.x = this.controlNodes.positions.to.x;
- this.controlNodes.to.y = this.controlNodes.positions.to.y;
- }
+ // statements
+ parseStatements(graph);
- this.controlNodes.from.draw(ctx);
- this.controlNodes.to.draw(ctx);
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
}
- else {
- this.controlNodes = {from:null, to:null, positions:{}};
+ getToken();
+
+ // end of file
+ if (token !== '') {
+ throw newSyntaxError('End of file expected');
}
- };
+ getToken();
- /**
- * Enable control nodes.
- * @private
- */
- Edge.prototype._enableControlNodes = function() {
- this.controlNodesEnabled = true;
- };
+ // remove temporary default properties
+ delete graph.node;
+ delete graph.edge;
+ delete graph.graph;
+
+ return graph;
+ }
/**
- * disable control nodes
- * @private
+ * Parse a list with statements.
+ * @param {Object} graph
*/
- Edge.prototype._disableControlNodes = function() {
- this.controlNodesEnabled = false;
- };
+ function parseStatements (graph) {
+ while (token !== '' && token != '}') {
+ parseStatement(graph);
+ if (token == ';') {
+ getToken();
+ }
+ }
+ }
/**
- * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
- * @param x
- * @param y
- * @returns {null}
- * @private
+ * Parse a single statement. Can be a an attribute statement, node
+ * statement, a series of node statements and edge statements, or a
+ * parameter.
+ * @param {Object} graph
*/
- Edge.prototype._getSelectedControlNode = function(x,y) {
- var positions = this.controlNodes.positions;
- var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
- var toDistance = Math.sqrt(Math.pow(x - positions.to.x ,2) + Math.pow(y - positions.to.y ,2));
+ function parseStatement(graph) {
+ // parse subgraph
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ // edge statements
+ parseEdge(graph, subgraph);
- if (fromDistance < 15) {
- this.connectedNode = this.from;
- this.from = this.controlNodes.from;
- return this.controlNodes.from;
+ return;
}
- else if (toDistance < 15) {
- this.connectedNode = this.to;
- this.to = this.controlNodes.to;
- return this.controlNodes.to;
+
+ // parse an attribute statement
+ var attr = parseAttributeStatement(graph);
+ if (attr) {
+ return;
}
- else {
- return null;
+
+ // parse node
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
}
- };
+ var id = token; // id can be a string or a number
+ getToken();
+ if (token == '=') {
+ // id statement
+ getToken();
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
+ }
+ graph[id] = token;
+ getToken();
+ // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+ }
+ else {
+ parseNodeStatement(graph, id);
+ }
+ }
/**
- * this resets the control nodes to their original position.
- * @private
+ * Parse a subgraph
+ * @param {Object} graph parent graph object
+ * @return {Object | null} subgraph
*/
- Edge.prototype._restoreControlNodes = function() {
- if (this.controlNodes.from.selected == true) {
- this.from = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.from.unselect();
- }
- if (this.controlNodes.to.selected == true) {
- this.to = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.to.unselect();
+ function parseSubgraph (graph) {
+ var subgraph = null;
+
+ // optional subgraph keyword
+ if (token == 'subgraph') {
+ subgraph = {};
+ subgraph.type = 'subgraph';
+ getToken();
+
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ subgraph.id = token;
+ getToken();
+ }
}
- };
- /**
- * this calculates the position of the control nodes on the edges of the parent nodes.
- *
- * @param ctx
- * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
- */
- Edge.prototype.getControlNodePositions = function(ctx) {
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var dx = (this.to.x - this.from.x);
- var dy = (this.to.y - this.from.y);
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+ // open angle bracket
+ if (token == '{') {
+ getToken();
- var via;
- if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true) {
- via = this.via;
- }
- else if (this.options.smoothCurves.enabled == true) {
- via = this._getViaCoordinates();
- }
+ if (!subgraph) {
+ subgraph = {};
+ }
+ subgraph.parent = graph;
+ subgraph.node = graph.node;
+ subgraph.edge = graph.edge;
+ subgraph.graph = graph.graph;
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
- dx = (this.to.x - via.x);
- dy = (this.to.y - via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- }
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+ // statements
+ parseStatements(subgraph);
- var xTo,yTo;
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
- }
- else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
- }
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
- return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
- };
+ // remove temporary default properties
+ delete subgraph.node;
+ delete subgraph.edge;
+ delete subgraph.graph;
+ delete subgraph.parent;
- module.exports = Edge;
+ // register at the parent graph
+ if (!graph.subgraphs) {
+ graph.subgraphs = [];
+ }
+ graph.subgraphs.push(subgraph);
+ }
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
+ return subgraph;
+ }
/**
- * Popup is a class to create a popup window with some text
- * @param {Element} container The container object.
- * @param {Number} [x]
- * @param {Number} [y]
- * @param {String} [text]
- * @param {Object} [style] An object containing borderColor,
- * backgroundColor, etc.
+ * parse an attribute statement like "node [shape=circle fontSize=16]".
+ * Available keywords are 'node', 'edge', 'graph'.
+ * The previous list with default attributes will be replaced
+ * @param {Object} graph
+ * @returns {String | null} keyword Returns the name of the parsed attribute
+ * (node, edge, graph), or null if nothing
+ * is parsed.
*/
- function Popup(container, x, y, text, style) {
- if (container) {
- this.container = container;
- }
- else {
- this.container = document.body;
- }
+ function parseAttributeStatement (graph) {
+ // attribute statements
+ if (token == 'node') {
+ getToken();
- // x, y and text are optional, see if a style object was passed in their place
- if (style === undefined) {
- if (typeof x === "object") {
- style = x;
- x = undefined;
- } else if (typeof text === "object") {
- style = text;
- text = undefined;
- } else {
- // for backwards compatibility, in case clients other than Network are creating Popup directly
- style = {
- fontColor: 'black',
- fontSize: 14, // px
- fontFace: 'verdana',
- color: {
- border: '#666',
- background: '#FFFFC6'
- }
- }
- }
+ // node attributes
+ graph.node = parseAttributeList();
+ return 'node';
}
+ else if (token == 'edge') {
+ getToken();
- this.x = 0;
- this.y = 0;
- this.padding = 5;
-
- if (x !== undefined && y !== undefined ) {
- this.setPosition(x, y);
+ // edge attributes
+ graph.edge = parseAttributeList();
+ return 'edge';
}
- if (text !== undefined) {
- this.setText(text);
+ else if (token == 'graph') {
+ getToken();
+
+ // graph attributes
+ graph.graph = parseAttributeList();
+ return 'graph';
}
- // create the frame
- this.frame = document.createElement("div");
- var styleAttr = this.frame.style;
- styleAttr.position = "absolute";
- styleAttr.visibility = "hidden";
- styleAttr.border = "1px solid " + style.color.border;
- styleAttr.color = style.fontColor;
- styleAttr.fontSize = style.fontSize + "px";
- styleAttr.fontFamily = style.fontFace;
- styleAttr.padding = this.padding + "px";
- styleAttr.backgroundColor = style.color.background;
- styleAttr.borderRadius = "3px";
- styleAttr.MozBorderRadius = "3px";
- styleAttr.WebkitBorderRadius = "3px";
- styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
- styleAttr.whiteSpace = "nowrap";
- this.container.appendChild(this.frame);
+ return null;
}
/**
- * @param {number} x Horizontal position of the popup window
- * @param {number} y Vertical position of the popup window
+ * parse a node statement
+ * @param {Object} graph
+ * @param {String | Number} id
*/
- Popup.prototype.setPosition = function(x, y) {
- this.x = parseInt(x);
- this.y = parseInt(y);
- };
+ function parseNodeStatement(graph, id) {
+ // node statement
+ var node = {
+ id: id
+ };
+ var attr = parseAttributeList();
+ if (attr) {
+ node.attr = attr;
+ }
+ addNode(graph, node);
- /**
- * Set the text for the popup window. This can be HTML code
- * @param {string} text
- */
- Popup.prototype.setText = function(text) {
- this.frame.innerHTML = text;
- };
+ // edge statements
+ parseEdge(graph, id);
+ }
/**
- * Show the popup window
- * @param {boolean} show Optional. Show or hide the window
+ * Parse an edge or a series of edges
+ * @param {Object} graph
+ * @param {String | Number} from Id of the from node
*/
- Popup.prototype.show = function (show) {
- if (show === undefined) {
- show = true;
- }
-
- if (show) {
- var height = this.frame.clientHeight;
- var width = this.frame.clientWidth;
- var maxHeight = this.frame.parentNode.clientHeight;
- var maxWidth = this.frame.parentNode.clientWidth;
+ function parseEdge(graph, from) {
+ while (token == '->' || token == '--') {
+ var to;
+ var type = token;
+ getToken();
- var top = (this.y - height);
- if (top + height + this.padding > maxHeight) {
- top = maxHeight - height - this.padding;
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ to = subgraph;
}
- if (top < this.padding) {
- top = this.padding;
+ else {
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier or subgraph expected');
+ }
+ to = token;
+ addNode(graph, {
+ id: to
+ });
+ getToken();
}
- var left = this.x;
- if (left + width + this.padding > maxWidth) {
- left = maxWidth - width - this.padding;
- }
- if (left < this.padding) {
- left = this.padding;
- }
+ // parse edge attributes
+ var attr = parseAttributeList();
- this.frame.style.left = left + "px";
- this.frame.style.top = top + "px";
- this.frame.style.visibility = "visible";
- }
- else {
- this.hide();
- }
- };
+ // create edge
+ var edge = createEdge(graph, from, to, type, attr);
+ addEdge(graph, edge);
- /**
- * Hide the popup window
- */
- Popup.prototype.hide = function () {
- this.frame.style.visibility = "hidden";
- };
+ from = to;
+ }
+ }
- module.exports = Popup;
+ /**
+ * Parse a set with attributes,
+ * for example [label="1.000", shape=solid]
+ * @return {Object | null} attr
+ */
+ function parseAttributeList() {
+ var attr = null;
+ while (token == '[') {
+ getToken();
+ attr = {};
+ while (token !== '' && token != ']') {
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute name expected');
+ }
+ var name = token;
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
+ getToken();
+ if (token != '=') {
+ throw newSyntaxError('Equal sign = expected');
+ }
+ getToken();
- var PhysicsMixin = __webpack_require__(56);
- var ClusterMixin = __webpack_require__(60);
- var SectorsMixin = __webpack_require__(61);
- var SelectionMixin = __webpack_require__(62);
- var ManipulationMixin = __webpack_require__(63);
- var NavigationMixin = __webpack_require__(64);
- var HierarchicalLayoutMixin = __webpack_require__(65);
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute value expected');
+ }
+ var value = token;
+ setValue(attr, name, value); // name can be a path
- /**
- * Load a mixin into the network object
- *
- * @param {Object} sourceVariable | this object has to contain functions.
- * @private
- */
- exports._loadMixin = function (sourceVariable) {
- for (var mixinFunction in sourceVariable) {
- if (sourceVariable.hasOwnProperty(mixinFunction)) {
- this[mixinFunction] = sourceVariable[mixinFunction];
+ getToken();
+ if (token ==',') {
+ getToken();
+ }
}
- }
- };
-
- /**
- * removes a mixin from the network object.
- *
- * @param {Object} sourceVariable | this object has to contain functions.
- * @private
- */
- exports._clearMixin = function (sourceVariable) {
- for (var mixinFunction in sourceVariable) {
- if (sourceVariable.hasOwnProperty(mixinFunction)) {
- this[mixinFunction] = undefined;
+ if (token != ']') {
+ throw newSyntaxError('Bracket ] expected');
}
+ getToken();
}
- };
+ return attr;
+ }
/**
- * Mixin the physics system and initialize the parameters required.
- *
- * @private
+ * Create a syntax error with extra information on current token and index.
+ * @param {String} message
+ * @returns {SyntaxError} err
*/
- exports._loadPhysicsSystem = function () {
- this._loadMixin(PhysicsMixin);
- this._loadSelectedForceSolver();
- if (this.constants.configurePhysics == true) {
- this._loadPhysicsConfiguration();
- }
- };
-
+ function newSyntaxError(message) {
+ return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+ }
/**
- * Mixin the cluster system and initialize the parameters required.
- *
- * @private
+ * Chop off text after a maximum length
+ * @param {String} text
+ * @param {Number} maxLength
+ * @returns {String}
*/
- exports._loadClusterSystem = function () {
- this.clusterSession = 0;
- this.hubThreshold = 5;
- this._loadMixin(ClusterMixin);
- };
-
+ function chop (text, maxLength) {
+ return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+ }
/**
- * Mixin the sector system and initialize the parameters required
- *
- * @private
+ * Execute a function fn for each pair of elements in two arrays
+ * @param {Array | *} array1
+ * @param {Array | *} array2
+ * @param {function} fn
*/
- exports._loadSectorSystem = function () {
- this.sectors = {};
- this.activeSector = ["default"];
- this.sectors["active"] = {};
- this.sectors["active"]["default"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
- this.sectors["frozen"] = {};
- this.sectors["support"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
-
- this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"]; // the node indices list is used to speed up the computation of the repulsion fields
-
- this._loadMixin(SectorsMixin);
- };
-
+ function forEach2(array1, array2, fn) {
+ if (array1 instanceof Array) {
+ array1.forEach(function (elem1) {
+ if (array2 instanceof Array) {
+ array2.forEach(function (elem2) {
+ fn(elem1, elem2);
+ });
+ }
+ else {
+ fn(elem1, array2);
+ }
+ });
+ }
+ else {
+ if (array2 instanceof Array) {
+ array2.forEach(function (elem2) {
+ fn(array1, elem2);
+ });
+ }
+ else {
+ fn(array1, array2);
+ }
+ }
+ }
/**
- * Mixin the selection system and initialize the parameters required
- *
- * @private
+ * Convert a string containing a graph in DOT language into a map containing
+ * with nodes and edges in the format of graph.
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graphData
*/
- exports._loadSelectionSystem = function () {
- this.selectionObj = {nodes: {}, edges: {}};
-
- this._loadMixin(SelectionMixin);
- };
+ function DOTToGraph (data) {
+ // parse the DOT file
+ var dotData = parseDOT(data);
+ var graphData = {
+ nodes: [],
+ edges: [],
+ options: {}
+ };
+ // copy the nodes
+ if (dotData.nodes) {
+ dotData.nodes.forEach(function (dotNode) {
+ var graphNode = {
+ id: dotNode.id,
+ label: String(dotNode.label || dotNode.id)
+ };
+ merge(graphNode, dotNode.attr);
+ if (graphNode.image) {
+ graphNode.shape = 'image';
+ }
+ graphData.nodes.push(graphNode);
+ });
+ }
- /**
- * Mixin the navigationUI (User Interface) system and initialize the parameters required
- *
- * @private
- */
- exports._loadManipulationSystem = function () {
- // reset global variables -- these are used by the selection of nodes and edges.
- this.blockConnectingEdgeSelection = false;
- this.forceAppendSelection = false;
+ // copy the edges
+ if (dotData.edges) {
+ /**
+ * Convert an edge in DOT format to an edge with VisGraph format
+ * @param {Object} dotEdge
+ * @returns {Object} graphEdge
+ */
+ function convertEdge(dotEdge) {
+ var graphEdge = {
+ from: dotEdge.from,
+ to: dotEdge.to
+ };
+ merge(graphEdge, dotEdge.attr);
+ graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+ return graphEdge;
+ }
- if (this.constants.dataManipulation.enabled == true) {
- // load the manipulator HTML elements. All styling done in css.
- if (this.manipulationDiv === undefined) {
- this.manipulationDiv = document.createElement('div');
- this.manipulationDiv.className = 'network-manipulationDiv';
- this.manipulationDiv.id = 'network-manipulationDiv';
- if (this.editMode == true) {
- this.manipulationDiv.style.display = "block";
+ dotData.edges.forEach(function (dotEdge) {
+ var from, to;
+ if (dotEdge.from instanceof Object) {
+ from = dotEdge.from.nodes;
}
else {
- this.manipulationDiv.style.display = "none";
+ from = {
+ id: dotEdge.from
+ }
}
- this.frame.appendChild(this.manipulationDiv);
- }
- if (this.editModeDiv === undefined) {
- this.editModeDiv = document.createElement('div');
- this.editModeDiv.className = 'network-manipulation-editMode';
- this.editModeDiv.id = 'network-manipulation-editMode';
- if (this.editMode == true) {
- this.editModeDiv.style.display = "none";
+ if (dotEdge.to instanceof Object) {
+ to = dotEdge.to.nodes;
}
else {
- this.editModeDiv.style.display = "block";
+ to = {
+ id: dotEdge.to
+ }
+ }
+
+ if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+ dotEdge.from.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+ }
+
+ forEach2(from, to, function (from, to) {
+ var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+
+ if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+ dotEdge.to.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
}
- this.frame.appendChild(this.editModeDiv);
- }
+ });
+ }
- if (this.closeDiv === undefined) {
- this.closeDiv = document.createElement('div');
- this.closeDiv.className = 'network-manipulation-closeDiv';
- this.closeDiv.id = 'network-manipulation-closeDiv';
- this.closeDiv.style.display = this.manipulationDiv.style.display;
- this.frame.appendChild(this.closeDiv);
- }
+ // copy the options
+ if (dotData.attr) {
+ graphData.options = dotData.attr;
+ }
- // load the manipulation functions
- this._loadMixin(ManipulationMixin);
+ return graphData;
+ }
- // create the manipulator toolbar
- this._createManipulatorBar();
- }
- else {
- if (this.manipulationDiv !== undefined) {
- // removes all the bindings and overloads
- this._createManipulatorBar();
+ // exports
+ exports.parseDOT = parseDOT;
+ exports.DOTToGraph = DOTToGraph;
- // remove the manipulation divs
- this.frame.removeChild(this.manipulationDiv);
- this.frame.removeChild(this.editModeDiv);
- this.frame.removeChild(this.closeDiv);
- this.manipulationDiv = undefined;
- this.editModeDiv = undefined;
- this.closeDiv = undefined;
- // remove the mixin functions
- this._clearMixin(ManipulationMixin);
+/***/ },
+/* 52 */
+/***/ function(module, exports, __webpack_require__) {
+
+
+ function parseGephi(gephiJSON, options) {
+ var edges = [];
+ var nodes = [];
+ this.options = {
+ edges: {
+ inheritColor: true
+ },
+ nodes: {
+ allowedToMove: false,
+ parseColor: false
}
- }
- };
+ };
+ if (options !== undefined) {
+ this.options.nodes['allowedToMove'] = options.allowedToMove | false;
+ this.options.nodes['parseColor'] = options.parseColor | false;
+ this.options.edges['inheritColor'] = options.inheritColor | true;
+ }
- /**
- * Mixin the navigation (User Interface) system and initialize the parameters required
- *
- * @private
- */
- exports._loadNavigationControls = function () {
- this._loadMixin(NavigationMixin);
- // the clean function removes the button divs, this is done to remove the bindings.
- this._cleanNavigation();
- if (this.constants.navigation.enabled == true) {
- this._loadNavigationElements();
+ var gEdges = gephiJSON.edges;
+ var gNodes = gephiJSON.nodes;
+ for (var i = 0; i < gEdges.length; i++) {
+ var edge = {};
+ var gEdge = gEdges[i];
+ edge['id'] = gEdge.id;
+ edge['from'] = gEdge.source;
+ edge['to'] = gEdge.target;
+ edge['attributes'] = gEdge.attributes;
+ // edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
+ // edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
+ edge['color'] = gEdge.color;
+ edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor;
+ edges.push(edge);
}
- };
+ for (var i = 0; i < gNodes.length; i++) {
+ var node = {};
+ var gNode = gNodes[i];
+ node['id'] = gNode.id;
+ node['attributes'] = gNode.attributes;
+ node['x'] = gNode.x;
+ node['y'] = gNode.y;
+ node['label'] = gNode.label;
+ if (this.options.nodes.parseColor == true) {
+ node['color'] = gNode.color;
+ }
+ else {
+ node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color} : undefined;
+ }
+ node['radius'] = gNode.size;
+ node['allowedToMoveX'] = this.options.nodes.allowedToMove;
+ node['allowedToMoveY'] = this.options.nodes.allowedToMove;
+ nodes.push(node);
+ }
- /**
- * Mixin the hierarchical layout system.
- *
- * @private
- */
- exports._loadHierarchySystem = function () {
- this._loadMixin(HierarchicalLayoutMixin);
- };
+ return {nodes:nodes, edges:edges};
+ }
+ exports.parseGephi = parseGephi;
/***/ },
-/* 54 */
+/* 53 */
/***/ function(module, exports, __webpack_require__) {
- // English
- exports['en'] = {
- edit: 'Edit',
- del: 'Delete selected',
- back: 'Back',
- addNode: 'Add Node',
- addEdge: 'Add Edge',
- editNode: 'Edit Node',
- editEdge: 'Edit Edge',
- addDescription: 'Click in an empty space to place a new node.',
- edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
- editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
- createEdgeError: 'Cannot link edges to a cluster.',
- deleteClusterError: 'Clusters cannot be deleted.'
- };
- exports['en_EN'] = exports['en'];
- exports['en_US'] = exports['en'];
+ var PhysicsMixin = __webpack_require__(54);
+ var ClusterMixin = __webpack_require__(58);
+ var SectorsMixin = __webpack_require__(59);
+ var SelectionMixin = __webpack_require__(60);
+ var ManipulationMixin = __webpack_require__(61);
+ var NavigationMixin = __webpack_require__(62);
+ var HierarchicalLayoutMixin = __webpack_require__(63);
- // Dutch
- exports['nl'] = {
- edit: 'Wijzigen',
- del: 'Selectie verwijderen',
- back: 'Terug',
- addNode: 'Node toevoegen',
- addEdge: 'Link toevoegen',
- editNode: 'Node wijzigen',
- editEdge: 'Link wijzigen',
- addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
- edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
- editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
- createEdgeError: 'Kan geen link maken naar een cluster.',
- deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
+ /**
+ * Load a mixin into the network object
+ *
+ * @param {Object} sourceVariable | this object has to contain functions.
+ * @private
+ */
+ exports._loadMixin = function (sourceVariable) {
+ for (var mixinFunction in sourceVariable) {
+ if (sourceVariable.hasOwnProperty(mixinFunction)) {
+ this[mixinFunction] = sourceVariable[mixinFunction];
+ }
+ }
};
- exports['nl_NL'] = exports['nl'];
- exports['nl_BE'] = exports['nl'];
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
-
/**
- * Canvas shapes used by Network
+ * removes a mixin from the network object.
+ *
+ * @param {Object} sourceVariable | this object has to contain functions.
+ * @private
*/
- if (typeof CanvasRenderingContext2D !== 'undefined') {
-
- /**
- * Draw a circle shape
- */
- CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
- this.beginPath();
- this.arc(x, y, r, 0, 2*Math.PI, false);
- };
-
- /**
- * Draw a square shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r size, width and height of the square
- */
- CanvasRenderingContext2D.prototype.square = function(x, y, r) {
- this.beginPath();
- this.rect(x - r, y - r, r * 2, r * 2);
- };
-
- /**
- * Draw a triangle shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
-
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
-
- this.moveTo(x, y - (h - ir));
- this.lineTo(x + s2, y + ir);
- this.lineTo(x - s2, y + ir);
- this.lineTo(x, y - (h - ir));
- this.closePath();
- };
-
- /**
- * Draw a triangle shape in downward orientation
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius
- */
- CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
-
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
-
- this.moveTo(x, y + (h - ir));
- this.lineTo(x + s2, y - ir);
- this.lineTo(x - s2, y - ir);
- this.lineTo(x, y + (h - ir));
- this.closePath();
- };
-
- /**
- * Draw a star shape, a star with 5 points
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.star = function(x, y, r) {
- // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
- this.beginPath();
-
- for (var n = 0; n < 10; n++) {
- var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
- this.lineTo(
- x + radius * Math.sin(n * 2 * Math.PI / 10),
- y - radius * Math.cos(n * 2 * Math.PI / 10)
- );
+ exports._clearMixin = function (sourceVariable) {
+ for (var mixinFunction in sourceVariable) {
+ if (sourceVariable.hasOwnProperty(mixinFunction)) {
+ this[mixinFunction] = undefined;
}
+ }
+ };
- this.closePath();
- };
-
- /**
- * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
- */
- CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
- var r2d = Math.PI/180;
- if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
- if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
- this.beginPath();
- this.moveTo(x+r,y);
- this.lineTo(x+w-r,y);
- this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
- this.lineTo(x+w,y+h-r);
- this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
- this.lineTo(x+r,y+h);
- this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
- this.lineTo(x,y+r);
- this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
- };
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
- var kappa = .5522848,
- ox = (w / 2) * kappa, // control point offset horizontal
- oy = (h / 2) * kappa, // control point offset vertical
- xe = x + w, // x-end
- ye = y + h, // y-end
- xm = x + w / 2, // x-middle
- ym = y + h / 2; // y-middle
+ /**
+ * Mixin the physics system and initialize the parameters required.
+ *
+ * @private
+ */
+ exports._loadPhysicsSystem = function () {
+ this._loadMixin(PhysicsMixin);
+ this._loadSelectedForceSolver();
+ if (this.constants.configurePhysics == true) {
+ this._loadPhysicsConfiguration();
+ }
+ };
- this.beginPath();
- this.moveTo(x, ym);
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- };
+ /**
+ * Mixin the cluster system and initialize the parameters required.
+ *
+ * @private
+ */
+ exports._loadClusterSystem = function () {
+ this.clusterSession = 0;
+ this.hubThreshold = 5;
+ this._loadMixin(ClusterMixin);
+ };
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
- var f = 1/3;
- var wEllipse = w;
- var hEllipse = h * f;
+ /**
+ * Mixin the sector system and initialize the parameters required
+ *
+ * @private
+ */
+ exports._loadSectorSystem = function () {
+ this.sectors = {};
+ this.activeSector = ["default"];
+ this.sectors["active"] = {};
+ this.sectors["active"]["default"] = {"nodes": {},
+ "edges": {},
+ "nodeIndices": [],
+ "formationScale": 1.0,
+ "drawingNode": undefined };
+ this.sectors["frozen"] = {};
+ this.sectors["support"] = {"nodes": {},
+ "edges": {},
+ "nodeIndices": [],
+ "formationScale": 1.0,
+ "drawingNode": undefined };
- var kappa = .5522848,
- ox = (wEllipse / 2) * kappa, // control point offset horizontal
- oy = (hEllipse / 2) * kappa, // control point offset vertical
- xe = x + wEllipse, // x-end
- ye = y + hEllipse, // y-end
- xm = x + wEllipse / 2, // x-middle
- ym = y + hEllipse / 2, // y-middle
- ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
- yeb = y + h; // y-end, bottom ellipse
+ this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"]; // the node indices list is used to speed up the computation of the repulsion fields
- this.beginPath();
- this.moveTo(xe, ym);
+ this._loadMixin(SectorsMixin);
+ };
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ /**
+ * Mixin the selection system and initialize the parameters required
+ *
+ * @private
+ */
+ exports._loadSelectionSystem = function () {
+ this.selectionObj = {nodes: {}, edges: {}};
- this.lineTo(xe, ymb);
+ this._loadMixin(SelectionMixin);
+ };
- this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
- this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
- this.lineTo(x, ym);
- };
+ /**
+ * Mixin the navigationUI (User Interface) system and initialize the parameters required
+ *
+ * @private
+ */
+ exports._loadManipulationSystem = function () {
+ // reset global variables -- these are used by the selection of nodes and edges.
+ this.blockConnectingEdgeSelection = false;
+ this.forceAppendSelection = false;
+ if (this.constants.dataManipulation.enabled == true) {
+ // load the manipulator HTML elements. All styling done in css.
+ if (this.manipulationDiv === undefined) {
+ this.manipulationDiv = document.createElement('div');
+ this.manipulationDiv.className = 'network-manipulationDiv';
+ this.manipulationDiv.id = 'network-manipulationDiv';
+ if (this.editMode == true) {
+ this.manipulationDiv.style.display = "block";
+ }
+ else {
+ this.manipulationDiv.style.display = "none";
+ }
+ this.frame.appendChild(this.manipulationDiv);
+ }
- /**
- * Draw an arrow point (no line)
- */
- CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
- // tail
- var xt = x - length * Math.cos(angle);
- var yt = y - length * Math.sin(angle);
+ if (this.editModeDiv === undefined) {
+ this.editModeDiv = document.createElement('div');
+ this.editModeDiv.className = 'network-manipulation-editMode';
+ this.editModeDiv.id = 'network-manipulation-editMode';
+ if (this.editMode == true) {
+ this.editModeDiv.style.display = "none";
+ }
+ else {
+ this.editModeDiv.style.display = "block";
+ }
+ this.frame.appendChild(this.editModeDiv);
+ }
- // inner tail
- // TODO: allow to customize different shapes
- var xi = x - length * 0.9 * Math.cos(angle);
- var yi = y - length * 0.9 * Math.sin(angle);
+ if (this.closeDiv === undefined) {
+ this.closeDiv = document.createElement('div');
+ this.closeDiv.className = 'network-manipulation-closeDiv';
+ this.closeDiv.id = 'network-manipulation-closeDiv';
+ this.closeDiv.style.display = this.manipulationDiv.style.display;
+ this.frame.appendChild(this.closeDiv);
+ }
- // left
- var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
- var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+ // load the manipulation functions
+ this._loadMixin(ManipulationMixin);
- // right
- var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
- var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+ // create the manipulator toolbar
+ this._createManipulatorBar();
+ }
+ else {
+ if (this.manipulationDiv !== undefined) {
+ // removes all the bindings and overloads
+ this._createManipulatorBar();
- this.beginPath();
- this.moveTo(x, y);
- this.lineTo(xl, yl);
- this.lineTo(xi, yi);
- this.lineTo(xr, yr);
- this.closePath();
- };
+ // remove the manipulation divs
+ this.frame.removeChild(this.manipulationDiv);
+ this.frame.removeChild(this.editModeDiv);
+ this.frame.removeChild(this.closeDiv);
- /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
- CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
- if (!dashArray) dashArray=[10,5];
- if (dashLength==0) dashLength = 0.001; // Hack for Safari
- var dashCount = dashArray.length;
- this.moveTo(x, y);
- var dx = (x2-x), dy = (y2-y);
- var slope = dy/dx;
- var distRemaining = Math.sqrt( dx*dx + dy*dy );
- var dashIndex=0, draw=true;
- while (distRemaining>=0.1){
- var dashLength = dashArray[dashIndex++%dashCount];
- if (dashLength > distRemaining) dashLength = distRemaining;
- var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
- if (dx<0) xStep = -xStep;
- x += xStep;
- y += slope*xStep;
- this[draw ? 'lineTo' : 'moveTo'](x,y);
- distRemaining -= dashLength;
- draw = !draw;
+ this.manipulationDiv = undefined;
+ this.editModeDiv = undefined;
+ this.closeDiv = undefined;
+ // remove the mixin functions
+ this._clearMixin(ManipulationMixin);
}
- };
+ }
+ };
- // TODO: add diamond shape
- }
+
+ /**
+ * Mixin the navigation (User Interface) system and initialize the parameters required
+ *
+ * @private
+ */
+ exports._loadNavigationControls = function () {
+ this._loadMixin(NavigationMixin);
+ // the clean function removes the button divs, this is done to remove the bindings.
+ this._cleanNavigation();
+ if (this.constants.navigation.enabled == true) {
+ this._loadNavigationElements();
+ }
+ };
+
+
+ /**
+ * Mixin the hierarchical layout system.
+ *
+ * @private
+ */
+ exports._loadHierarchySystem = function () {
+ this._loadMixin(HierarchicalLayoutMixin);
+ };
/***/ },
-/* 56 */
+/* 54 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var RepulsionMixin = __webpack_require__(57);
- var HierarchialRepulsionMixin = __webpack_require__(58);
- var BarnesHutMixin = __webpack_require__(59);
+ var RepulsionMixin = __webpack_require__(55);
+ var HierarchialRepulsionMixin = __webpack_require__(56);
+ var BarnesHutMixin = __webpack_require__(57);
/**
* Toggling barnes Hut calculation on and off.
@@ -27892,7 +27669,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 57 */
+/* 55 */
/***/ function(module, exports, __webpack_require__) {
/**
@@ -27956,7 +27733,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 58 */
+/* 56 */
/***/ function(module, exports, __webpack_require__) {
/**
@@ -28115,7 +27892,7 @@ return /******/ (function(modules) { // webpackBootstrap
};
/***/ },
-/* 59 */
+/* 57 */
/***/ function(module, exports, __webpack_require__) {
/**
@@ -28520,7 +28297,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 60 */
+/* 58 */
/***/ function(module, exports, __webpack_require__) {
/**
@@ -29663,7 +29440,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 61 */
+/* 59 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
@@ -30221,10 +29998,10 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 62 */
+/* 60 */
/***/ function(module, exports, __webpack_require__) {
- var Node = __webpack_require__(50);
+ var Node = __webpack_require__(47);
/**
* This function can be called from the _doInAllSectors function
@@ -30932,12 +30709,12 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 63 */
+/* 61 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var Node = __webpack_require__(50);
- var Edge = __webpack_require__(51);
+ var Node = __webpack_require__(47);
+ var Edge = __webpack_require__(46);
/**
* clears the toolbar div element of children
@@ -31529,7 +31306,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 64 */
+/* 62 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
@@ -31716,7 +31493,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 65 */
+/* 63 */
/***/ function(module, exports, __webpack_require__) {
exports._resetLevels = function() {
@@ -31849,287 +31626,559 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
}
-
- // stabilize the system after positioning. This function calls zoomExtent.
- this._stabilize();
+
+ // stabilize the system after positioning. This function calls zoomExtent.
+ this._stabilize();
+ };
+
+
+ /**
+ * This function get the distribution of levels based on hubsize
+ *
+ * @returns {Object}
+ * @private
+ */
+ exports._getDistribution = function() {
+ var distribution = {};
+ var nodeId, node, level;
+
+ // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
+ // the fix of X is removed after the x value has been set.
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ node.xFixed = true;
+ node.yFixed = true;
+ if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+ node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
+ }
+ else {
+ node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
+ }
+ if (distribution[node.level] === undefined) {
+ distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+ }
+ distribution[node.level].amount += 1;
+ distribution[node.level].nodes[nodeId] = node;
+ }
+ }
+
+ // determine the largest amount of nodes of all levels
+ var maxCount = 0;
+ for (level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ if (maxCount < distribution[level].amount) {
+ maxCount = distribution[level].amount;
+ }
+ }
+ }
+
+ // set the initial position and spacing of each nodes accordingly
+ for (level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
+ distribution[level].nodeSpacing /= (distribution[level].amount + 1);
+ distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
+ }
+ }
+
+ return distribution;
+ };
+
+
+ /**
+ * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+ *
+ * @param hubsize
+ * @private
+ */
+ exports._determineLevels = function(hubsize) {
+ var nodeId, node;
+
+ // determine hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.edges.length == hubsize) {
+ node.level = 0;
+ }
+ }
+ }
+
+ // branch from hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.level == 0) {
+ this._setLevel(1,node.edges,node.id);
+ }
+ }
+ }
+ };
+
+ /**
+ * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+ *
+ * @param hubsize
+ * @private
+ */
+ exports._determineLevelsDirected = function() {
+ var nodeId, node;
+
+ // set first node to source
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ this.nodes[nodeId].level = 10000;
+ break;
+ }
+ }
+
+ // branch from hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.level == 10000) {
+ this._setLevelDirected(10000,node.edges,node.id);
+ }
+ }
+ }
+
+
+ // branch from hubs
+ var minLevel = 10000;
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ minLevel = node.level < minLevel ? node.level : minLevel;
+ }
+ }
+
+ // branch from hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ node.level -= minLevel;
+ }
+ }
+ };
+
+
+ /**
+ * Since hierarchical layout does not support:
+ * - smooth curves (based on the physics),
+ * - clustering (based on dynamic node counts)
+ *
+ * We disable both features so there will be no problems.
+ *
+ * @private
+ */
+ exports._changeConstants = function() {
+ this.constants.clustering.enabled = false;
+ this.constants.physics.barnesHut.enabled = false;
+ this.constants.physics.hierarchicalRepulsion.enabled = true;
+ this._loadSelectedForceSolver();
+ if (this.constants.smoothCurves.enabled == true) {
+ this.constants.smoothCurves.dynamic = false;
+ }
+ this._configureSmoothCurves();
+ };
+
+
+ /**
+ * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
+ * on a X position that ensures there will be no overlap.
+ *
+ * @param edges
+ * @param parentId
+ * @param distribution
+ * @param parentLevel
+ * @private
+ */
+ exports._placeBranchNodes = function(edges, parentId, distribution, parentLevel) {
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ if (edges[i].toId == parentId) {
+ childNode = edges[i].from;
+ }
+ else {
+ childNode = edges[i].to;
+ }
+
+ // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
+ var nodeMoved = false;
+ if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+ if (childNode.xFixed && childNode.level > parentLevel) {
+ childNode.xFixed = false;
+ childNode.x = distribution[childNode.level].minPos;
+ nodeMoved = true;
+ }
+ }
+ else {
+ if (childNode.yFixed && childNode.level > parentLevel) {
+ childNode.yFixed = false;
+ childNode.y = distribution[childNode.level].minPos;
+ nodeMoved = true;
+ }
+ }
+
+ if (nodeMoved == true) {
+ distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
+ if (childNode.edges.length > 1) {
+ this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
+ }
+ }
+ }
+ };
+
+
+ /**
+ * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+ *
+ * @param level
+ * @param edges
+ * @param parentId
+ * @private
+ */
+ exports._setLevel = function(level, edges, parentId) {
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ if (edges[i].toId == parentId) {
+ childNode = edges[i].from;
+ }
+ else {
+ childNode = edges[i].to;
+ }
+ if (childNode.level == -1 || childNode.level > level) {
+ childNode.level = level;
+ if (childNode.edges.length > 1) {
+ this._setLevel(level+1, childNode.edges, childNode.id);
+ }
+ }
+ }
};
/**
- * This function get the distribution of levels based on hubsize
+ * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
*
- * @returns {Object}
+ * @param level
+ * @param edges
+ * @param parentId
* @private
*/
- exports._getDistribution = function() {
- var distribution = {};
- var nodeId, node, level;
-
- // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
- // the fix of X is removed after the x value has been set.
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- node.xFixed = true;
- node.yFixed = true;
- if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
- node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
- }
- else {
- node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
- }
- if (distribution[node.level] === undefined) {
- distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
- }
- distribution[node.level].amount += 1;
- distribution[node.level].nodes[nodeId] = node;
+ exports._setLevelDirected = function(level, edges, parentId) {
+ this.nodes[parentId].hierarchyEnumerated = true;
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ var direction = 1;
+ if (edges[i].toId == parentId) {
+ childNode = edges[i].from;
+ direction = -1;
}
- }
-
- // determine the largest amount of nodes of all levels
- var maxCount = 0;
- for (level in distribution) {
- if (distribution.hasOwnProperty(level)) {
- if (maxCount < distribution[level].amount) {
- maxCount = distribution[level].amount;
- }
+ else {
+ childNode = edges[i].to;
+ }
+ if (childNode.level == -1) {
+ childNode.level = level + direction;
}
}
- // set the initial position and spacing of each nodes accordingly
- for (level in distribution) {
- if (distribution.hasOwnProperty(level)) {
- distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
- distribution[level].nodeSpacing /= (distribution[level].amount + 1);
- distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ if (edges[i].toId == parentId) {childNode = edges[i].from;}
+ else {childNode = edges[i].to;}
+ if (childNode.edges.length > 1 && childNode.hierarchyEnumerated === false) {
+ this._setLevelDirected(childNode.level, childNode.edges, childNode.id);
}
}
-
- return distribution;
};
/**
- * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+ * Unfix nodes
*
- * @param hubsize
* @private
*/
- exports._determineLevels = function(hubsize) {
- var nodeId, node;
-
- // determine hubs
- for (nodeId in this.nodes) {
+ exports._restoreNodes = function() {
+ for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.edges.length == hubsize) {
- node.level = 0;
- }
+ this.nodes[nodeId].xFixed = false;
+ this.nodes[nodeId].yFixed = false;
}
}
+ };
- // branch from hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.level == 0) {
- this._setLevel(1,node.edges,node.id);
- }
- }
- }
+
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // English
+ exports['en'] = {
+ edit: 'Edit',
+ del: 'Delete selected',
+ back: 'Back',
+ addNode: 'Add Node',
+ addEdge: 'Add Edge',
+ editNode: 'Edit Node',
+ editEdge: 'Edit Edge',
+ addDescription: 'Click in an empty space to place a new node.',
+ edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
+ editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
+ createEdgeError: 'Cannot link edges to a cluster.',
+ deleteClusterError: 'Clusters cannot be deleted.'
+ };
+ exports['en_EN'] = exports['en'];
+ exports['en_US'] = exports['en'];
+
+ // Dutch
+ exports['nl'] = {
+ edit: 'Wijzigen',
+ del: 'Selectie verwijderen',
+ back: 'Terug',
+ addNode: 'Node toevoegen',
+ addEdge: 'Link toevoegen',
+ editNode: 'Node wijzigen',
+ editEdge: 'Link wijzigen',
+ addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
+ edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
+ editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
+ createEdgeError: 'Kan geen link maken naar een cluster.',
+ deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
};
+ exports['nl_NL'] = exports['nl'];
+ exports['nl_BE'] = exports['nl'];
+
+
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
/**
- * this function allocates nodes in levels based on the recursive branching from the largest hubs.
- *
- * @param hubsize
- * @private
+ * Canvas shapes used by Network
*/
- exports._determineLevelsDirected = function() {
- var nodeId, node;
+ if (typeof CanvasRenderingContext2D !== 'undefined') {
+
+ /**
+ * Draw a circle shape
+ */
+ CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+ this.beginPath();
+ this.arc(x, y, r, 0, 2*Math.PI, false);
+ };
+
+ /**
+ * Draw a square shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r size, width and height of the square
+ */
+ CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+ this.beginPath();
+ this.rect(x - r, y - r, r * 2, r * 2);
+ };
+
+ /**
+ * Draw a triangle shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y - (h - ir));
+ this.lineTo(x + s2, y + ir);
+ this.lineTo(x - s2, y + ir);
+ this.lineTo(x, y - (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a triangle shape in downward orientation
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius
+ */
+ CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y + (h - ir));
+ this.lineTo(x + s2, y - ir);
+ this.lineTo(x - s2, y - ir);
+ this.lineTo(x, y + (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a star shape, a star with 5 points
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+ // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+ this.beginPath();
+
+ for (var n = 0; n < 10; n++) {
+ var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+ this.lineTo(
+ x + radius * Math.sin(n * 2 * Math.PI / 10),
+ y - radius * Math.cos(n * 2 * Math.PI / 10)
+ );
+ }
+
+ this.closePath();
+ };
+
+ /**
+ * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+ */
+ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+ var r2d = Math.PI/180;
+ if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+ if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+ this.beginPath();
+ this.moveTo(x+r,y);
+ this.lineTo(x+w-r,y);
+ this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+ this.lineTo(x+w,y+h-r);
+ this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+ this.lineTo(x+r,y+h);
+ this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+ this.lineTo(x,y+r);
+ this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+ };
+
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+ var kappa = .5522848,
+ ox = (w / 2) * kappa, // control point offset horizontal
+ oy = (h / 2) * kappa, // control point offset vertical
+ xe = x + w, // x-end
+ ye = y + h, // y-end
+ xm = x + w / 2, // x-middle
+ ym = y + h / 2; // y-middle
- // set first node to source
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.nodes[nodeId].level = 10000;
- break;
- }
- }
+ this.beginPath();
+ this.moveTo(x, ym);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
- // branch from hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.level == 10000) {
- this._setLevelDirected(10000,node.edges,node.id);
- }
- }
- }
- // branch from hubs
- var minLevel = 10000;
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- minLevel = node.level < minLevel ? node.level : minLevel;
- }
- }
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+ var f = 1/3;
+ var wEllipse = w;
+ var hEllipse = h * f;
- // branch from hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- node.level -= minLevel;
- }
- }
- };
+ var kappa = .5522848,
+ ox = (wEllipse / 2) * kappa, // control point offset horizontal
+ oy = (hEllipse / 2) * kappa, // control point offset vertical
+ xe = x + wEllipse, // x-end
+ ye = y + hEllipse, // y-end
+ xm = x + wEllipse / 2, // x-middle
+ ym = y + hEllipse / 2, // y-middle
+ ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
+ yeb = y + h; // y-end, bottom ellipse
+ this.beginPath();
+ this.moveTo(xe, ym);
- /**
- * Since hierarchical layout does not support:
- * - smooth curves (based on the physics),
- * - clustering (based on dynamic node counts)
- *
- * We disable both features so there will be no problems.
- *
- * @private
- */
- exports._changeConstants = function() {
- this.constants.clustering.enabled = false;
- this.constants.physics.barnesHut.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this._loadSelectedForceSolver();
- if (this.constants.smoothCurves.enabled == true) {
- this.constants.smoothCurves.dynamic = false;
- }
- this._configureSmoothCurves();
- };
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- /**
- * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
- * on a X position that ensures there will be no overlap.
- *
- * @param edges
- * @param parentId
- * @param distribution
- * @param parentLevel
- * @private
- */
- exports._placeBranchNodes = function(edges, parentId, distribution, parentLevel) {
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- if (edges[i].toId == parentId) {
- childNode = edges[i].from;
- }
- else {
- childNode = edges[i].to;
- }
+ this.lineTo(xe, ymb);
- // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
- var nodeMoved = false;
- if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
- if (childNode.xFixed && childNode.level > parentLevel) {
- childNode.xFixed = false;
- childNode.x = distribution[childNode.level].minPos;
- nodeMoved = true;
- }
- }
- else {
- if (childNode.yFixed && childNode.level > parentLevel) {
- childNode.yFixed = false;
- childNode.y = distribution[childNode.level].minPos;
- nodeMoved = true;
- }
- }
+ this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+ this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
- if (nodeMoved == true) {
- distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
- if (childNode.edges.length > 1) {
- this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
- }
- }
- }
- };
+ this.lineTo(x, ym);
+ };
- /**
- * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
- *
- * @param level
- * @param edges
- * @param parentId
- * @private
- */
- exports._setLevel = function(level, edges, parentId) {
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- if (edges[i].toId == parentId) {
- childNode = edges[i].from;
- }
- else {
- childNode = edges[i].to;
- }
- if (childNode.level == -1 || childNode.level > level) {
- childNode.level = level;
- if (childNode.edges.length > 1) {
- this._setLevel(level+1, childNode.edges, childNode.id);
- }
- }
- }
- };
+ /**
+ * Draw an arrow point (no line)
+ */
+ CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+ // tail
+ var xt = x - length * Math.cos(angle);
+ var yt = y - length * Math.sin(angle);
+ // inner tail
+ // TODO: allow to customize different shapes
+ var xi = x - length * 0.9 * Math.cos(angle);
+ var yi = y - length * 0.9 * Math.sin(angle);
- /**
- * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
- *
- * @param level
- * @param edges
- * @param parentId
- * @private
- */
- exports._setLevelDirected = function(level, edges, parentId) {
- this.nodes[parentId].hierarchyEnumerated = true;
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- var direction = 1;
- if (edges[i].toId == parentId) {
- childNode = edges[i].from;
- direction = -1;
- }
- else {
- childNode = edges[i].to;
- }
- if (childNode.level == -1) {
- childNode.level = level + direction;
- }
- }
+ // left
+ var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+ var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- if (edges[i].toId == parentId) {childNode = edges[i].from;}
- else {childNode = edges[i].to;}
- if (childNode.edges.length > 1 && childNode.hierarchyEnumerated === false) {
- this._setLevelDirected(childNode.level, childNode.edges, childNode.id);
- }
- }
- };
+ // right
+ var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+ var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+ this.beginPath();
+ this.moveTo(x, y);
+ this.lineTo(xl, yl);
+ this.lineTo(xi, yi);
+ this.lineTo(xr, yr);
+ this.closePath();
+ };
- /**
- * Unfix nodes
- *
- * @private
- */
- exports._restoreNodes = function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.nodes[nodeId].xFixed = false;
- this.nodes[nodeId].yFixed = false;
+ /**
+ * Sets up the dashedLine functionality for drawing
+ * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ */
+ CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+ if (!dashArray) dashArray=[10,5];
+ if (dashLength==0) dashLength = 0.001; // Hack for Safari
+ var dashCount = dashArray.length;
+ this.moveTo(x, y);
+ var dx = (x2-x), dy = (y2-y);
+ var slope = dy/dx;
+ var distRemaining = Math.sqrt( dx*dx + dy*dy );
+ var dashIndex=0, draw=true;
+ while (distRemaining>=0.1){
+ var dashLength = dashArray[dashIndex++%dashCount];
+ if (dashLength > distRemaining) dashLength = distRemaining;
+ var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+ if (dx<0) xStep = -xStep;
+ x += xStep;
+ y += slope*xStep;
+ this[draw ? 'lineTo' : 'moveTo'](x,y);
+ distRemaining -= dashLength;
+ draw = !draw;
}
- }
- };
+ };
+
+ // TODO: add diamond shape
+ }
/***/ }
diff --git a/docs/network.html b/docs/network.html
index 290568a8..174b904d 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -2158,6 +2158,7 @@ var options: {
The options that can be defined are:
scale:Number
- to zoom to that scale,
offset:{x:Number, y:Number}
- to offset the position from the center of the canvas (in DOM units),
+ locked: boolean
- if true, the view remains locked on this node until either another focusOnNode, moveTo, releaseNode or drag is done
animation: Object || Boolean
- to define the specifics of the animation. True is animated with default settings, false is not animated.
The animation object can consist of:
@@ -2168,6 +2169,12 @@ var options: {
easeInQuint, easeOutQuint, easeInOutQuint
+