diff --git a/dist/vis.js b/dist/vis.js
index 0a5654a8..79c3fd29 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 4.0.0-SNAPSHOT
- * @date 2015-05-19
+ * @date 2015-05-20
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -377,7 +377,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (a[prop].constructor === Object) {
exports.deepExtend(a[prop], b[prop], false, allowDeletion);
} else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if (b[prop] === null && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
} else {
a[prop] = b[prop];
@@ -419,7 +419,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (a[prop].constructor === Object) {
exports.deepExtend(a[prop], b[prop]);
} else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if (b[prop] === null && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
} else {
a[prop] = b[prop];
@@ -442,7 +442,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {Object} b
* @param [Boolean] protoExtend --> optional parameter. If true, the prototype values will also be extended.
* (ie. the options objects that inherit from others will also get the inherited options)
- * @param [Boolean] global --> optional parameter. If true, the values of fields that are undefined or null will not deleted
+ * @param [Boolean] global --> optional parameter. If true, the values of fields that are null will not deleted
* @returns {Object}
*/
exports.deepExtend = function (a, b, protoExtend, allowDeletion) {
@@ -455,7 +455,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (a[prop].constructor === Object) {
exports.deepExtend(a[prop], b[prop], protoExtend);
} else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if (b[prop] === null && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
} else {
a[prop] = b[prop];
@@ -1324,14 +1324,21 @@ return /******/ (function(modules) { // webpackBootstrap
* @private
*/
exports.mergeOptions = function (mergeTarget, options, option) {
- if (options[option] !== undefined) {
- if (typeof options[option] == 'boolean') {
- mergeTarget[option].enabled = options[option];
- } else {
- mergeTarget[option].enabled = true;
- for (var prop in options[option]) {
- if (options[option].hasOwnProperty(prop)) {
- mergeTarget[option][prop] = options[option][prop];
+ var allowDeletion = arguments[3] === undefined ? false : arguments[3];
+
+ if (options[option] === null) {
+ mergeTarget[option] = undefined;
+ delete mergeTarget[option];
+ } else {
+ if (options[option] !== undefined) {
+ if (typeof options[option] == 'boolean') {
+ mergeTarget[option].enabled = options[option];
+ } else {
+ mergeTarget[option].enabled = true;
+ for (var prop in options[option]) {
+ if (options[option].hasOwnProperty(prop)) {
+ mergeTarget[option][prop] = options[option][prop];
+ }
}
}
}
@@ -15814,6 +15821,10 @@ return /******/ (function(modules) { // webpackBootstrap
this.renderer.setOptions(options.interaction); // options for rendering are in interaction
this.selectionHandler.setOptions(options.interaction); // options for selection are in interaction
+ // reload the settings of the nodes to apply changes in groups that are not referenced by pointer.
+ if (options.groups !== undefined) {
+ this.body.emitter.emit('refreshNodes');
+ }
// these two do not have options at the moment, here for completeness
//this.view.setOptions(options.view);
//this.clustering.setOptions(options.clustering);
@@ -21108,7 +21119,7 @@ return /******/ (function(modules) { // webpackBootstrap
var data = changedData[i];
if (node !== undefined) {
// update node
- node.setOptions(data, this.constants);
+ node.setOptions(data);
} else {
dataChanged = true;
// create node
@@ -27486,7 +27497,6 @@ return /******/ (function(modules) { // webpackBootstrap
springConstant: { number: number },
nodeDistance: { number: number },
damping: { number: number },
- avoidOverlap: { number: number },
__type__: { object: object }
},
hierarchicalRepulsion: {
@@ -27693,8 +27703,7 @@ return /******/ (function(modules) { // webpackBootstrap
springLength: [200, 0, 500, 5],
springConstant: [0.05, 0, 5, 0.005],
nodeDistance: [100, 0, 500, 5],
- damping: [0.09, 0, 1, 0.01],
- avoidOverlap: [0, 0, 1, 0.01]
+ damping: [0.09, 0, 1, 0.01]
},
hierarchicalRepulsion: {
centralGravity: [0.2, 0, 10, 0.05],
@@ -34583,59 +34592,59 @@ return /******/ (function(modules) { // webpackBootstrap
var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
- var _nodesShapesBox = __webpack_require__(92);
+ var _nodesShapesBox = __webpack_require__(97);
var _nodesShapesBox2 = _interopRequireDefault(_nodesShapesBox);
- var _nodesShapesCircle = __webpack_require__(93);
+ var _nodesShapesCircle = __webpack_require__(98);
var _nodesShapesCircle2 = _interopRequireDefault(_nodesShapesCircle);
- var _nodesShapesCircularImage = __webpack_require__(94);
+ var _nodesShapesCircularImage = __webpack_require__(99);
var _nodesShapesCircularImage2 = _interopRequireDefault(_nodesShapesCircularImage);
- var _nodesShapesDatabase = __webpack_require__(95);
+ var _nodesShapesDatabase = __webpack_require__(100);
var _nodesShapesDatabase2 = _interopRequireDefault(_nodesShapesDatabase);
- var _nodesShapesDiamond = __webpack_require__(96);
+ var _nodesShapesDiamond = __webpack_require__(101);
var _nodesShapesDiamond2 = _interopRequireDefault(_nodesShapesDiamond);
- var _nodesShapesDot = __webpack_require__(97);
+ var _nodesShapesDot = __webpack_require__(102);
var _nodesShapesDot2 = _interopRequireDefault(_nodesShapesDot);
- var _nodesShapesEllipse = __webpack_require__(98);
+ var _nodesShapesEllipse = __webpack_require__(103);
var _nodesShapesEllipse2 = _interopRequireDefault(_nodesShapesEllipse);
- var _nodesShapesIcon = __webpack_require__(99);
+ var _nodesShapesIcon = __webpack_require__(104);
var _nodesShapesIcon2 = _interopRequireDefault(_nodesShapesIcon);
- var _nodesShapesImage = __webpack_require__(100);
+ var _nodesShapesImage = __webpack_require__(105);
var _nodesShapesImage2 = _interopRequireDefault(_nodesShapesImage);
- var _nodesShapesSquare = __webpack_require__(101);
+ var _nodesShapesSquare = __webpack_require__(106);
var _nodesShapesSquare2 = _interopRequireDefault(_nodesShapesSquare);
- var _nodesShapesStar = __webpack_require__(102);
+ var _nodesShapesStar = __webpack_require__(107);
var _nodesShapesStar2 = _interopRequireDefault(_nodesShapesStar);
- var _nodesShapesText = __webpack_require__(103);
+ var _nodesShapesText = __webpack_require__(108);
var _nodesShapesText2 = _interopRequireDefault(_nodesShapesText);
- var _nodesShapesTriangle = __webpack_require__(104);
+ var _nodesShapesTriangle = __webpack_require__(109);
var _nodesShapesTriangle2 = _interopRequireDefault(_nodesShapesTriangle);
- var _nodesShapesTriangleDown = __webpack_require__(105);
+ var _nodesShapesTriangleDown = __webpack_require__(110);
var _nodesShapesTriangleDown2 = _interopRequireDefault(_nodesShapesTriangleDown);
@@ -34745,7 +34754,6 @@ return /******/ (function(modules) { // webpackBootstrap
if (!options) {
return;
}
-
// basic options
if (options.id !== undefined) {
this.id = options.id;
@@ -35031,7 +35039,7 @@ return /******/ (function(modules) { // webpackBootstrap
var allowDeletion = arguments[2] === undefined ? false : arguments[2];
var fields = ['color', 'font', 'fixed', 'shadow'];
- util.selectiveNotDeepExtend(fields, parentOptions, newOptions);
+ util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
// merge the shadow options into the parent.
util.mergeOptions(parentOptions, newOptions, 'shadow');
@@ -35040,7 +35048,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (newOptions.color !== undefined && newOptions.color !== null) {
var parsedColor = util.parseColor(newOptions.color);
util.fillIfDefined(parentOptions.color, parsedColor);
- } else if (allowDeletion === true) {
+ } else if (allowDeletion === true && newOptions.color === null) {
parentOptions.color = undefined;
delete parentOptions.color;
}
@@ -35410,15 +35418,15 @@ return /******/ (function(modules) { // webpackBootstrap
var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
- var _edgesBezierEdgeDynamic = __webpack_require__(106);
+ var _edgesBezierEdgeDynamic = __webpack_require__(92);
var _edgesBezierEdgeDynamic2 = _interopRequireDefault(_edgesBezierEdgeDynamic);
- var _edgesBezierEdgeStatic = __webpack_require__(107);
+ var _edgesBezierEdgeStatic = __webpack_require__(93);
var _edgesBezierEdgeStatic2 = _interopRequireDefault(_edgesBezierEdgeStatic);
- var _edgesStraightEdge = __webpack_require__(108);
+ var _edgesStraightEdge = __webpack_require__(94);
var _edgesStraightEdge2 = _interopRequireDefault(_edgesStraightEdge);
@@ -35854,7 +35862,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
parentOptions.dashes = newOptions.dashes;
- } else if (allowDeletion === true) {
+ } else if (allowDeletion === true && newOptions.dashes === null) {
parentOptions.dashes = undefined;
delete parentOptions.dashes;
}
@@ -35868,7 +35876,7 @@ return /******/ (function(modules) { // webpackBootstrap
parentOptions.scaling.max = newOptions.scaling.max;
}
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
- } else if (allowDeletion === true) {
+ } else if (allowDeletion === true && newOptions.scaling === null) {
parentOptions.scaling = undefined;
delete parentOptions.scaling;
}
@@ -35893,7 +35901,7 @@ return /******/ (function(modules) { // webpackBootstrap
} else {
throw new Error('The arrow newOptions can only be an object or a string. Refer to the documentation. You used:' + JSON.stringify(newOptions.arrows));
}
- } else if (allowDeletion === true) {
+ } else if (allowDeletion === true && newOptions.arrows === null) {
parentOptions.arrows = undefined;
delete parentOptions.arrows;
}
@@ -35927,7 +35935,7 @@ return /******/ (function(modules) { // webpackBootstrap
parentOptions.color.inherit = false;
}
}
- } else if (allowDeletion === true) {
+ } else if (allowDeletion === true && newOptions.color === null) {
parentOptions.color = undefined;
delete parentOptions.color;
}
@@ -36645,7 +36653,6 @@ return /******/ (function(modules) { // webpackBootstrap
key: "setOptions",
value: function setOptions(options) {
this.options = options;
- this.overlapAvoidanceFactor = 1 - Math.max(0, Math.min(1, this.options.avoidOverlap)); // if 1 then min distance = 0.5, if 0.5 then min distance = 0.5 + 0.5*node.shape.radius
}
}, {
key: "solve",
@@ -36700,19 +36707,9 @@ return /******/ (function(modules) { // webpackBootstrap
* @private
*/
value: function _calculateSpringForce(node1, node2, edgeLength) {
- var dx = undefined,
- dy = undefined;
- if (this.overlapAvoidanceFactor < 1) {
- var nodesWidth = this.overlapAvoidanceFactor * (node1.shape.radius + node2.shape.radius);
- dx = node1.x - node2.x - nodesWidth;
- dy = node1.y - node2.y - nodesWidth;
- } else {
- dx = node1.x - node2.x;
- dy = node1.y - node2.y;
- }
-
- var distance = Math.sqrt(dx * dx + dy * dy);
- distance = distance === 0 ? 0.01 : distance;
+ var dx = node1.x - node2.x;
+ var dy = node1.y - node2.y;
+ var distance = Math.max(Math.sqrt(dx * dx + dy * dy), 0.01);
// the 1/distance is so the fx and fy can be calculated without sine or cosine.
var springForce = this.options.springConstant * (edgeLength - distance) / distance;
@@ -37764,95 +37761,410 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
-
- var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
+ var _utilBezierEdgeBase = __webpack_require__(95);
- 'use strict';
+ var _utilBezierEdgeBase2 = _interopRequireDefault(_utilBezierEdgeBase);
- var Box = (function (_NodeBase) {
- function Box(options, body, labelModule) {
- _classCallCheck(this, Box);
+ var BezierEdgeDynamic = (function (_BezierEdgeBase) {
+ function BezierEdgeDynamic(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeDynamic);
- _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule);
+ //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
+ _get(Object.getPrototypeOf(BezierEdgeDynamic.prototype), 'constructor', this).call(this, options, body, labelModule); // --> this calls the setOptions below
}
- _inherits(Box, _NodeBase);
+ _inherits(BezierEdgeDynamic, _BezierEdgeBase);
- _createClass(Box, [{
- key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
- this.radius = 0.5 * this.width;
+ _createClass(BezierEdgeDynamic, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ this.options = options;
+ this.from = this.body.nodes[this.options.from];
+ this.to = this.body.nodes[this.options.to];
+ this.id = this.options.id;
+ this.setupSupportNode();
+
+ // fix weird behaviour
+ if (this.from.id === this.to.id) {
+ this.via.setOptions({ physics: false });
+ } else {
+ this.via.setOptions({ physics: true });
}
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ key: 'cleanup',
+ value: function cleanup() {
+ if (this.via !== undefined) {
+ delete this.body.nodes[this.via.id];
+ this.via = undefined;
+ return true;
+ }
+ return false;
+ }
+ }, {
+ key: 'togglePhysics',
+ value: function togglePhysics(status) {
+ this.via.setOptions({ physics: status });
+ }
+ }, {
+ key: 'setupSupportNode',
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+ /**
+ * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
+ * are used for the force calculation.
+ *
+ * The changed data is not called, if needed, it is returned by the main edge constructor.
+ * @private
+ */
+ value: function setupSupportNode() {
+ if (this.via === undefined) {
+ var nodeId = 'edgeId:' + this.id;
+ var node = this.body.functions.createNode({
+ id: nodeId,
+ shape: 'circle',
+ physics: true,
+ hidden: true
+ });
+ this.body.nodes[nodeId] = node;
+ this.via = node;
+ this.via.parentEdgeId = this.id;
+ this.positionBezierNode();
+ }
+ }
+ }, {
+ key: 'positionBezierNode',
+ value: function positionBezierNode() {
+ if (this.via !== undefined && this.from !== undefined && this.to !== undefined) {
+ this.via.x = 0.5 * (this.from.x + this.to.x);
+ this.via.y = 0.5 * (this.from.y + this.to.y);
+ } else if (this.via !== undefined) {
+ this.via.x = 0;
+ this.via.y = 0;
+ }
+ }
+ }, {
+ key: '_line',
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
- ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth /= this.body.view.scale;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.stroke();
+ this.disableShadow(ctx);
+ return this.via;
+ }
+ }, {
+ key: 'getPoint',
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ var t = percentage;
+ var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * this.via.x + Math.pow(t, 2) * this.to.x;
+ var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * this.via.y + Math.pow(t, 2) * this.to.y;
- var borderRadius = 6;
- ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
+ return { x: x, y: y };
+ }
+ }, {
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ return this._findBorderPositionBezier(nearNode, ctx, this.via);
+ }
+ }, {
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ // x3,y3 is the point
+ return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
+ }
+ }]);
+
+ return BezierEdgeDynamic;
+ })(_utilBezierEdgeBase2['default']);
+
+ exports['default'] = BezierEdgeDynamic;
+ module.exports = exports['default'];
+
+/***/ },
+/* 93 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+ var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x4,
+ property = _x5,
+ receiver = _x6; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+ var _utilBezierEdgeBase = __webpack_require__(95);
+
+ var _utilBezierEdgeBase2 = _interopRequireDefault(_utilBezierEdgeBase);
+
+ var BezierEdgeStatic = (function (_BezierEdgeBase) {
+ function BezierEdgeStatic(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeStatic);
+
+ _get(Object.getPrototypeOf(BezierEdgeStatic.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(BezierEdgeStatic, _BezierEdgeBase);
+
+ _createClass(BezierEdgeStatic, [{
+ key: 'cleanup',
+ value: function cleanup() {
+ return false;
+ }
+ }, {
+ key: '_line',
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ var via = this._getViaCoordinates();
+ var returnValue = via;
+
+ // fallback to normal straight edges
+ if (via.x === undefined) {
+ ctx.lineTo(this.to.x, this.to.y);
+ returnValue = undefined;
+ } else {
+ ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
+ }
// draw shadow if enabled
this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
+ ctx.stroke();
this.disableShadow(ctx);
+ return returnValue;
+ }
+ }, {
+ key: '_getViaCoordinates',
+ value: function _getViaCoordinates() {
+ var xVia = undefined;
+ var yVia = undefined;
+ var factor = this.options.smooth.roundness;
+ var type = this.options.smooth.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 if (type === 'curvedCW') {
+ dx = this.to.x - this.from.x;
+ dy = this.from.y - this.to.y;
+ var radius = Math.sqrt(dx * dx + dy * dy);
+ var pi = Math.PI;
- ctx.stroke();
+ var originalAngle = Math.atan2(dy, dx);
+ var myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
- this.updateBoundingBox(x, y);
- this.labelModule.draw(ctx, x, y, selected);
+ xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
+ yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
+ } else if (type === 'curvedCCW') {
+ dx = this.to.x - this.from.x;
+ dy = this.from.y - this.to.y;
+ var radius = Math.sqrt(dx * dx + dy * dy);
+ var pi = Math.PI;
+
+ var originalAngle = Math.atan2(dy, dx);
+ var myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
+
+ xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
+ yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
+ } 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) {
+ 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) {
+ 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) {
+ 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) {
+ 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) {
+ 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) {
+ 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) {
+ 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) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ }
+ }
+ }
+ return { x: xVia, y: yVia };
}
}, {
- key: 'updateBoundingBox',
- value: function updateBoundingBox(x, y) {
- this.left = x - this.width * 0.5;
- this.top = y - this.height * 0.5;
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ var options = arguments[2] === undefined ? {} : arguments[2];
- this.boundingBox.left = this.left;
- this.boundingBox.top = this.top;
- this.boundingBox.bottom = this.top + this.height;
- this.boundingBox.right = this.left + this.width;
+ return this._findBorderPositionBezier(nearNode, ctx, options.via);
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ var via = arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
+ // x3,y3 is the point
+ return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via);
+ }
+ }, {
+ key: 'getPoint',
+
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ var via = arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
+
+ var t = percentage;
+ var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * this.to.x;
+ var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * this.to.y;
+
+ return { x: x, y: y };
}
}]);
- return Box;
- })(_utilNodeBase2['default']);
+ return BezierEdgeStatic;
+ })(_utilBezierEdgeBase2['default']);
- exports['default'] = Box;
+ exports['default'] = BezierEdgeStatic;
module.exports = exports['default'];
/***/ },
-/* 93 */
+/* 94 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37873,80 +38185,98 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilCircleImageBase = __webpack_require__(110);
+ var _utilEdgeBase = __webpack_require__(96);
- var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
-
- 'use strict';
+ var _utilEdgeBase2 = _interopRequireDefault(_utilEdgeBase);
- var Circle = (function (_CircleImageBase) {
- function Circle(options, body, labelModule) {
- _classCallCheck(this, Circle);
+ var StraightEdge = (function (_EdgeBase) {
+ function StraightEdge(options, body, labelModule) {
+ _classCallCheck(this, StraightEdge);
- _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(StraightEdge.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Circle, _CircleImageBase);
-
- _createClass(Circle, [{
- key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
- this.options.size = diameter / 2;
+ _inherits(StraightEdge, _EdgeBase);
- this.width = diameter;
- this.height = diameter;
- this.radius = 0.5 * this.width;
- }
+ _createClass(StraightEdge, [{
+ key: 'cleanup',
+ value: function cleanup() {
+ return false;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- this._drawRawCircle(ctx, x, y, selected, hover, this.options.size);
+ key: '_line',
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.stroke();
+ this.disableShadow(ctx);
+ return undefined;
+ }
+ }, {
+ key: 'getPoint',
- this.updateBoundingBox(x, y);
- this.labelModule.draw(ctx, x, y, selected);
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ return {
+ x: (1 - percentage) * this.from.x + percentage * this.to.x,
+ y: (1 - percentage) * this.from.y + percentage * this.to.y
+ };
}
}, {
- key: 'updateBoundingBox',
- value: function updateBoundingBox(x, y) {
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ var node1 = this.to;
+ var node2 = this.from;
+ if (nearNode.id === this.from.id) {
+ node1 = this.from;
+ node2 = this.to;
+ }
+
+ var angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
+ var dx = node1.x - node2.x;
+ var dy = node1.y - node2.y;
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ var toBorderDist = nearNode.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+
+ var borderPos = {};
+ borderPos.x = (1 - toBorderPoint) * node2.x + toBorderPoint * node1.x;
+ borderPos.y = (1 - toBorderPoint) * node2.y + toBorderPoint * node1.y;
+
+ return borderPos;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ // x3,y3 is the point
+ return this._getDistanceToLine(x1, y1, x2, y2, x3, y3);
}
}]);
- return Circle;
- })(_utilCircleImageBase2['default']);
+ return StraightEdge;
+ })(_utilEdgeBase2['default']);
- exports['default'] = Circle;
+ exports['default'] = StraightEdge;
module.exports = exports['default'];
/***/ },
-/* 94 */
+/* 95 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37957,9 +38287,9 @@ return /******/ (function(modules) { // webpackBootstrap
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
- property = _x2,
- receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+ var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x2,
+ property = _x3,
+ receiver = _x4; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -37967,94 +38297,135 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilCircleImageBase = __webpack_require__(110);
+ var _EdgeBase2 = __webpack_require__(96);
- var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
-
- 'use strict';
+ var _EdgeBase3 = _interopRequireDefault(_EdgeBase2);
- var CircularImage = (function (_CircleImageBase) {
- function CircularImage(options, body, labelModule, imageObj) {
- _classCallCheck(this, CircularImage);
+ var BezierEdgeBase = (function (_EdgeBase) {
+ function BezierEdgeBase(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeBase);
- _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule);
- this.imageObj = imageObj;
- this._swapToImageResizeWhenImageLoaded = true;
+ _get(Object.getPrototypeOf(BezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(CircularImage, _CircleImageBase);
-
- _createClass(CircularImage, [{
- key: 'resize',
- value: function resize() {
- if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) {
- if (!this.width) {
- var diameter = this.options.size * 2;
- this.width = diameter;
- this.height = diameter;
- this._swapToImageResizeWhenImageLoaded = true;
- this.radius = 0.5 * this.width;
- }
- } else {
- if (this._swapToImageResizeWhenImageLoaded) {
- this.width = undefined;
- this.height = undefined;
- this._swapToImageResizeWhenImageLoaded = false;
- }
- this._resizeImage();
- }
- }
- }, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize();
+ _inherits(BezierEdgeBase, _EdgeBase);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ _createClass(BezierEdgeBase, [{
+ key: '_findBorderPositionBezier',
- var size = Math.min(0.5 * this.height, 0.5 * this.width);
- this._drawRawCircle(ctx, x, y, selected, hover, size);
+ /**
+ * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
+ *
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
+ */
+ value: function _findBorderPositionBezier(nearNode, ctx) {
+ var viaNode = arguments[2] === undefined ? this._getViaCoordinates() : arguments[2];
- ctx.save();
- ctx.circle(x, y, size);
- ctx.stroke();
- ctx.clip();
+ var maxIterations = 10;
+ var iteration = 0;
+ var low = 0;
+ var high = 1;
+ var pos, angle, distanceToBorder, distanceToPoint, difference;
+ var threshold = 0.2;
+ var node = this.to;
+ var from = false;
+ if (nearNode.id === this.from.id) {
+ node = this.from;
+ from = true;
+ }
- this._drawImageAtPosition(ctx);
+ while (low <= high && iteration < maxIterations) {
+ var middle = (low + high) * 0.5;
- ctx.restore();
+ pos = this.getPoint(middle, viaNode);
+ angle = Math.atan2(node.y - pos.y, node.x - pos.x);
+ distanceToBorder = node.distanceToBorder(ctx, angle);
+ distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
+ difference = distanceToBorder - distanceToPoint;
+ if (Math.abs(difference) < threshold) {
+ break; // found
+ } else if (difference < 0) {
+ // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
+ if (from === false) {
+ low = middle;
+ } else {
+ high = middle;
+ }
+ } else {
+ if (from === false) {
+ high = middle;
+ } else {
+ low = middle;
+ }
+ }
- this._drawImageLabel(ctx, x, y, selected);
+ iteration++;
+ }
+ pos.t = middle;
- this.updateBoundingBox(x, y);
- }
- }, {
- key: 'updateBoundingBox',
- value: function updateBoundingBox(x, y) {
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
+ return pos;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- return this._distanceToBorder(angle);
+ key: '_getDistanceToBezierEdge',
+
+ /**
+ * 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
+ */
+ value: function _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via) {
+ // x3,y3 is the point
+ var xVia = undefined,
+ yVia = undefined;
+ xVia = via.x;
+ yVia = via.y;
+ var minDistance = 1000000000;
+ var distance = undefined;
+ var i = undefined,
+ t = undefined,
+ x = undefined,
+ y = undefined;
+ var lastX = x1;
+ var lastY = y1;
+ for (i = 1; 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;
}
}]);
- return CircularImage;
- })(_utilCircleImageBase2['default']);
+ return BezierEdgeBase;
+ })(_EdgeBase3['default']);
- exports['default'] = CircularImage;
+ exports['default'] = BezierEdgeBase;
module.exports = exports['default'];
/***/ },
-/* 95 */
+/* 96 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -38065,225 +38436,582 @@ return /******/ (function(modules) { // webpackBootstrap
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
- property = _x2,
- receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
-
- var _utilNodeBase = __webpack_require__(109);
-
- var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
-
- 'use strict';
+ var util = __webpack_require__(1);
- var Database = (function (_NodeBase) {
- function Database(options, body, labelModule) {
- _classCallCheck(this, Database);
+ var EdgeBase = (function () {
+ function EdgeBase(options, body, labelModule) {
+ _classCallCheck(this, EdgeBase);
- _get(Object.getPrototypeOf(Database.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.body = body;
+ this.labelModule = labelModule;
+ this.setOptions(options);
+ this.colorDirty = true;
+ this.color = {};
+ this.selectionWidth = 2;
+ this.hoverWidth = 1.5;
}
- _inherits(Database, _NodeBase);
-
- _createClass(Database, [{
- key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- var size = textSize.width + 2 * margin;
- this.width = size;
- this.height = size;
- this.radius = 0.5 * this.width;
- }
+ _createClass(EdgeBase, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ this.options = options;
+ this.from = this.body.nodes[this.options.from];
+ this.to = this.body.nodes[this.options.to];
+ this.id = this.options.id;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
-
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
- ctx.lineWidth = this.selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
-
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
-
- ctx.stroke();
-
- this.updateBoundingBox(x, y);
+ key: 'togglePhysics',
- this.labelModule.draw(ctx, x, y, selected);
- }
+ /**
+ * overloadable if the shape has to toggle the via node to disabled
+ * @param status
+ */
+ value: function togglePhysics(status) {}
}, {
- key: 'updateBoundingBox',
- value: function updateBoundingBox(x, y) {
- this.left = x - this.width * 0.5;
- this.top = y - this.height * 0.5;
+ key: 'drawLine',
- this.boundingBox.left = this.left;
- this.boundingBox.top = this.top;
- this.boundingBox.bottom = this.top + this.height;
- this.boundingBox.right = this.left + this.width;
+ /**
+ * 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
+ */
+ value: function drawLine(ctx, selected, hover) {
+ // set style
+ ctx.strokeStyle = this.getColor(ctx);
+ ctx.lineWidth = this.getLineWidth(selected, hover);
+ var via = undefined;
+ if (this.options.dashes !== false) {
+ via = this._drawDashedLine(ctx);
+ } else {
+ via = this._drawLine(ctx);
+ }
+ return via;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
- }
- }]);
-
- return Database;
- })(_utilNodeBase2['default']);
+ key: '_drawLine',
+ value: function _drawLine(ctx) {
+ var via = undefined;
+ if (this.from != this.to) {
+ // draw line
+ via = this._line(ctx);
+ } else {
+ var _getCircleData = this._getCircleData(ctx);
- exports['default'] = Database;
- module.exports = exports['default'];
+ var _getCircleData2 = _slicedToArray(_getCircleData, 3);
-/***/ },
-/* 96 */
-/***/ function(module, exports, __webpack_require__) {
+ var x = _getCircleData2[0];
+ var y = _getCircleData2[1];
+ var radius = _getCircleData2[2];
- 'use strict';
+ this._circle(ctx, x, y, radius);
+ }
+ return via;
+ }
+ }, {
+ key: '_drawDashedLine',
+ value: function _drawDashedLine(ctx) {
+ var via = undefined;
+ ctx.lineCap = 'round';
+ var pattern = [5, 5];
+ if (Array.isArray(this.options.dashes) === true) {
+ pattern = this.options.dashes;
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ // only firefox and chrome support this method, else we use the legacy one.
+ if (ctx.setLineDash !== undefined) {
+ ctx.save();
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ // set dash settings for chrome or firefox
+ ctx.setLineDash(pattern);
+ ctx.lineDashOffset = 0;
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
- property = _x2,
- receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+ // draw the line
+ if (this.from != this.to) {
+ // draw line
+ via = this._line(ctx);
+ } else {
+ var _getCircleData3 = this._getCircleData(ctx);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+ var _getCircleData32 = _slicedToArray(_getCircleData3, 3);
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+ var x = _getCircleData32[0];
+ var y = _getCircleData32[1];
+ var radius = _getCircleData32[2];
- function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+ this._circle(ctx, x, y, radius);
+ }
- var _utilShapeBase = __webpack_require__(111);
+ // restore the dash settings.
+ ctx.setLineDash([0]);
+ ctx.lineDashOffset = 0;
+ ctx.restore();
+ } else {
+ // unsupporting smooth lines
- var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+ if (this.from != this.to) {
+ // draw line
+ ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
+ } else {
+ var _getCircleData4 = this._getCircleData(ctx);
- 'use strict';
+ var _getCircleData42 = _slicedToArray(_getCircleData4, 3);
- var Diamond = (function (_ShapeBase) {
- function Diamond(options, body, labelModule) {
- _classCallCheck(this, Diamond);
+ var x = _getCircleData42[0];
+ var y = _getCircleData42[1];
+ var radius = _getCircleData42[2];
- _get(Object.getPrototypeOf(Diamond.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ this._circle(ctx, x, y, radius);
+ }
+ // draw shadow if enabled
+ this.enableShadow(ctx);
- _inherits(Diamond, _ShapeBase);
+ ctx.stroke();
- _createClass(Diamond, [{
- key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ }
+ return via;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
+ key: 'findBorderPosition',
+ value: function findBorderPosition(nearNode, ctx, options) {
+ if (this.from != this.to) {
+ return this._findBorderPosition(nearNode, ctx, options);
+ } else {
+ return this._findBorderPositionCircle(nearNode, ctx, options);
+ }
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ key: 'findBorderPositions',
+ value: function findBorderPositions(ctx) {
+ var from = {};
+ var to = {};
+ if (this.from != this.to) {
+ from = this._findBorderPosition(this.from, ctx);
+ to = this._findBorderPosition(this.to, ctx);
+ } else {
+ var _getCircleData5 = this._getCircleData(ctx);
+
+ var _getCircleData52 = _slicedToArray(_getCircleData5, 3);
+
+ var x = _getCircleData52[0];
+ var y = _getCircleData52[1];
+ var radius = _getCircleData52[2];
+
+ from = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
+ to = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.6, high: 0.8, direction: 1 });
+ }
+ return { from: from, to: to };
}
- }]);
+ }, {
+ key: '_getCircleData',
+ value: function _getCircleData(ctx) {
+ var x = undefined,
+ y = undefined;
+ var node = this.from;
+ var radius = this.options.selfReferenceSize;
- return Diamond;
- })(_utilShapeBase2['default']);
+ if (ctx !== undefined) {
+ if (node.shape.width === undefined) {
+ node.shape.resize(ctx);
+ }
+ }
- exports['default'] = Diamond;
- module.exports = exports['default'];
+ // get circle coordinates
+ if (node.shape.width > node.shape.height) {
+ x = node.x + node.shape.width * 0.5;
+ y = node.y - radius;
+ } else {
+ x = node.x + radius;
+ y = node.y - node.shape.height * 0.5;
+ }
+ return [x, y, radius];
+ }
+ }, {
+ key: '_pointOnCircle',
-/***/ },
-/* 97 */
-/***/ function(module, exports, __webpack_require__) {
+ /**
+ * 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
+ */
+ value: function _pointOnCircle(x, y, radius, percentage) {
+ var angle = percentage * 2 * Math.PI;
+ return {
+ x: x + radius * Math.cos(angle),
+ y: y - radius * Math.sin(angle)
+ };
+ }
+ }, {
+ key: '_findBorderPositionCircle',
- 'use strict';
+ /**
+ * This function uses binary search to look for the point where the circle crosses the border of the node.
+ * @param node
+ * @param ctx
+ * @param options
+ * @returns {*}
+ * @private
+ */
+ value: function _findBorderPositionCircle(node, ctx, options) {
+ var x = options.x;
+ var y = options.y;
+ var low = options.low;
+ var high = options.high;
+ var direction = options.direction;
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ var maxIterations = 10;
+ var iteration = 0;
+ var radius = this.options.selfReferenceSize;
+ var pos = undefined,
+ angle = undefined,
+ distanceToBorder = undefined,
+ distanceToPoint = undefined,
+ difference = undefined;
+ var threshold = 0.05;
+ var middle = (low + high) * 0.5;
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ while (low <= high && iteration < maxIterations) {
+ middle = (low + high) * 0.5;
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
- property = _x2,
- receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+ pos = this._pointOnCircle(x, y, radius, middle);
+ angle = Math.atan2(node.y - pos.y, node.x - pos.x);
+ distanceToBorder = node.distanceToBorder(ctx, angle);
+ distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
+ difference = distanceToBorder - distanceToPoint;
+ if (Math.abs(difference) < threshold) {
+ break; // found
+ } else if (difference > 0) {
+ // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
+ if (direction > 0) {
+ low = middle;
+ } else {
+ high = middle;
+ }
+ } else {
+ if (direction > 0) {
+ high = middle;
+ } else {
+ low = middle;
+ }
+ }
+ iteration++;
+ }
+ pos.t = middle;
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+ return pos;
+ }
+ }, {
+ key: 'getLineWidth',
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+ /**
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
+ */
+ value: function getLineWidth(selected, hover) {
+ if (selected === true) {
+ return Math.max(this.selectionWidth, 0.3 / this.body.view.scale);
+ } else {
+ if (hover === true) {
+ return Math.max(this.hoverWidth, 0.3 / this.body.view.scale);
+ } else {
+ return Math.max(this.options.width, 0.3 / this.body.view.scale);
+ }
+ }
+ }
+ }, {
+ key: 'getColor',
+ value: function getColor(ctx) {
+ var colorOptions = this.options.color;
+ if (colorOptions.inherit !== false) {
+ // when this is a loop edge, just use the 'from' method
+ if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {
+ var grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
+ var fromColor = undefined,
+ toColor = undefined;
+ fromColor = this.from.options.color.highlight.border;
+ toColor = this.to.options.color.highlight.border;
- function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+ if (this.from.selected === false && this.to.selected === false) {
+ fromColor = util.overrideOpacity(this.from.options.color.border, this.options.color.opacity);
+ toColor = util.overrideOpacity(this.to.options.color.border, this.options.color.opacity);
+ } else if (this.from.selected === true && this.to.selected === false) {
+ toColor = this.to.options.color.border;
+ } else if (this.from.selected === false && this.to.selected === true) {
+ fromColor = this.from.options.color.border;
+ }
+ grd.addColorStop(0, fromColor);
+ grd.addColorStop(1, toColor);
- var _utilShapeBase = __webpack_require__(111);
+ // -------------------- this returns -------------------- //
+ return grd;
+ }
- var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+ if (this.colorDirty === true) {
+ if (colorOptions.inherit === 'to') {
+ this.color.highlight = this.to.options.color.highlight.border;
+ this.color.hover = this.to.options.color.hover.border;
+ this.color.color = util.overrideOpacity(this.to.options.color.border, colorOptions.opacity);
+ } else {
+ // (this.options.color.inherit.source === "from") {
+ this.color.highlight = this.from.options.color.highlight.border;
+ this.color.hover = this.from.options.color.hover.border;
+ this.color.color = util.overrideOpacity(this.from.options.color.border, colorOptions.opacity);
+ }
+ }
+ } else if (this.colorDirty === true) {
+ this.color.highlight = colorOptions.highlight;
+ this.color.hover = colorOptions.hover;
+ this.color.color = util.overrideOpacity(colorOptions.color, colorOptions.opacity);
+ }
- 'use strict';
+ // if color inherit is on and gradients are used, the function has already returned by now.
+ this.colorDirty = false;
- var Dot = (function (_ShapeBase) {
- function Dot(options, body, labelModule) {
- _classCallCheck(this, Dot);
+ if (this.selected === true) {
+ return this.color.highlight;
+ } else if (this.hover === true) {
+ return this.color.hover;
+ } else {
+ return this.color.color;
+ }
+ }
+ }, {
+ key: '_circle',
- _get(Object.getPrototypeOf(Dot.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ /**
+ * Draw a line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @private
+ */
+ value: function _circle(ctx, x, y, radius) {
+ // draw shadow if enabled
+ this.enableShadow(ctx);
- _inherits(Dot, _ShapeBase);
+ // draw a circle
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
- _createClass(Dot, [{
- key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'circle', 2, x, y, selected, hover);
+ key: 'getDistanceToEdge',
+
+ /**
+ * 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
+ */
+ value: function getDistanceToEdge(x1, y1, x2, y2, x3, y3, via) {
+ // x3,y3 is the point
+ var returnValue = 0;
+ if (this.from != this.to) {
+ returnValue = this._getDistanceToEdge(x1, y1, x2, y2, x3, y3, via);
+ } else {
+ var _getCircleData6 = this._getCircleData();
+
+ var _getCircleData62 = _slicedToArray(_getCircleData6, 3);
+
+ var x = _getCircleData62[0];
+ var y = _getCircleData62[1];
+ var radius = _getCircleData62[2];
+
+ var dx = x - x3;
+ var dy = y - y3;
+ returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
+ }
+
+ if (this.labelModule.size.left < x3 && this.labelModule.size.left + this.labelModule.size.width > x3 && this.labelModule.size.top < y3 && this.labelModule.size.top + this.labelModule.size.height > y3) {
+ return 0;
+ } else {
+ return returnValue;
+ }
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- return this.options.size + this.options.borderWidth;
+ key: '_getDistanceToLine',
+ value: function _getDistanceToLine(x1, y1, x2, y2, x3, y3) {
+ var px = x2 - x1;
+ var py = y2 - y1;
+ var something = px * px + py * py;
+ var u = ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+ if (u > 1) {
+ u = 1;
+ } else if (u < 0) {
+ u = 0;
+ }
+
+ var x = x1 + u * px;
+ var y = y1 + u * py;
+ var dx = x - x3;
+ var 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);
+ }
+ }, {
+ key: 'drawArrowHead',
+
+ /**
+ *
+ * @param ctx
+ * @param position
+ * @param viaNode
+ */
+ value: function drawArrowHead(ctx, position, viaNode, selected, hover) {
+ // set style
+ ctx.strokeStyle = this.getColor(ctx);
+ ctx.fillStyle = ctx.strokeStyle;
+ ctx.lineWidth = this.getLineWidth(selected, hover);
+
+ // set lets
+ var angle = undefined;
+ var length = undefined;
+ var arrowPos = undefined;
+ var node1 = undefined;
+ var node2 = undefined;
+ var guideOffset = undefined;
+ var scaleFactor = undefined;
+
+ if (position === 'from') {
+ node1 = this.from;
+ node2 = this.to;
+ guideOffset = 0.1;
+ scaleFactor = this.options.arrows.from.scaleFactor;
+ } else if (position === 'to') {
+ node1 = this.to;
+ node2 = this.from;
+ guideOffset = -0.1;
+ scaleFactor = this.options.arrows.to.scaleFactor;
+ } else {
+ node1 = this.to;
+ node2 = this.from;
+ scaleFactor = this.options.arrows.middle.scaleFactor;
+ }
+
+ // if not connected to itself
+ if (node1 != node2) {
+ if (position !== 'middle') {
+ // draw arrow head
+ if (this.options.smooth.enabled === true) {
+ arrowPos = this.findBorderPosition(node1, ctx, { via: viaNode });
+ var guidePos = this.getPoint(Math.max(0, Math.min(1, arrowPos.t + guideOffset)), viaNode);
+ angle = Math.atan2(arrowPos.y - guidePos.y, arrowPos.x - guidePos.x);
+ } else {
+ angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
+ arrowPos = this.findBorderPosition(node1, ctx);
+ }
+ } else {
+ angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
+ arrowPos = this.getPoint(0.6, viaNode); // this is 0.6 to account for the size of the arrow.
+ }
+ // draw arrow at the end of the line
+ length = (10 + 5 * this.options.width) * scaleFactor;
+ ctx.arrow(arrowPos.x, arrowPos.y, angle, length);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ ctx.stroke();
+ } else {
+ // draw circle
+ var _angle = undefined,
+ point = undefined;
+
+ var _getCircleData7 = this._getCircleData(ctx);
+
+ var _getCircleData72 = _slicedToArray(_getCircleData7, 3);
+
+ var x = _getCircleData72[0];
+ var y = _getCircleData72[1];
+ var radius = _getCircleData72[2];
+
+ if (position === 'from') {
+ point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
+ _angle = point.t * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
+ } else if (position === 'to') {
+ point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.6, high: 1, direction: 1 });
+ _angle = point.t * -2 * Math.PI + 1.5 * Math.PI - 1.1 * Math.PI;
+ } else {
+ point = this._pointOnCircle(x, y, radius, 0.175);
+ _angle = 3.9269908169872414; // === 0.175 * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
+ }
+
+ // draw the arrowhead
+ var _length = (10 + 5 * this.options.width) * scaleFactor;
+ ctx.arrow(point.x, point.y, _angle, _length);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ ctx.stroke();
+ }
+ }
+ }, {
+ key: 'enableShadow',
+ value: function enableShadow(ctx) {
+ if (this.options.shadow.enabled === true) {
+ ctx.shadowColor = 'rgba(0,0,0,0.5)';
+ ctx.shadowBlur = this.options.shadow.size;
+ ctx.shadowOffsetX = this.options.shadow.x;
+ ctx.shadowOffsetY = this.options.shadow.y;
+ }
+ }
+ }, {
+ key: 'disableShadow',
+ value: function disableShadow(ctx) {
+ if (this.options.shadow.enabled === true) {
+ ctx.shadowColor = 'rgba(0,0,0,0)';
+ ctx.shadowBlur = 0;
+ ctx.shadowOffsetX = 0;
+ ctx.shadowOffsetY = 0;
+ }
}
}]);
- return Dot;
- })(_utilShapeBase2['default']);
+ return EdgeBase;
+ })();
- exports['default'] = Dot;
+ exports['default'] = EdgeBase;
module.exports = exports['default'];
/***/ },
-/* 98 */
+/* 97 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -38304,32 +39032,29 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
+ var _utilNodeBase = __webpack_require__(111);
var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
'use strict';
- var Ellipse = (function (_NodeBase) {
- function Ellipse(options, body, labelModule) {
- _classCallCheck(this, Ellipse);
+ var Box = (function (_NodeBase) {
+ function Box(options, body, labelModule) {
+ _classCallCheck(this, Box);
- _get(Object.getPrototypeOf(Ellipse.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Ellipse, _NodeBase);
+ _inherits(Box, _NodeBase);
- _createClass(Ellipse, [{
+ _createClass(Box, [{
key: 'resize',
value: function resize(ctx, selected) {
if (this.width === undefined) {
+ var margin = 5;
var textSize = this.labelModule.getTextSize(ctx, selected);
-
- this.width = textSize.width * 1.5;
- this.height = textSize.height * 2;
- if (this.width < this.height) {
- this.width = this.height;
- }
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
this.radius = 0.5 * this.width;
}
}
@@ -38337,20 +39062,21 @@ return /******/ (function(modules) { // webpackBootstrap
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
this.resize(ctx, selected);
- this.left = x - this.width * 0.5;
- this.top = y - this.height * 0.5;
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-
ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
ctx.lineWidth /= this.body.view.scale;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx.ellipse(this.left, this.top, this.width, this.height);
+
+ var borderRadius = 6;
+ ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
// draw shadow if enabled
this.enableShadow(ctx);
@@ -38379,22 +39105,22 @@ return /******/ (function(modules) { // webpackBootstrap
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
this.resize(ctx);
- var a = this.width * 0.5;
- var b = this.height * 0.5;
+ var a = this.width / 2;
+ var b = this.height / 2;
var w = Math.sin(angle) * a;
var h = Math.cos(angle) * b;
return a * b / Math.sqrt(w * w + h * h);
}
}]);
- return Ellipse;
+ return Box;
})(_utilNodeBase2['default']);
- exports['default'] = Ellipse;
+ exports['default'] = Box;
module.exports = exports['default'];
/***/ },
-/* 99 */
+/* 98 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -38415,102 +39141,184 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
+ var _utilCircleImageBase = __webpack_require__(112);
- var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
+ var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
'use strict';
- var Icon = (function (_NodeBase) {
- function Icon(options, body, labelModule) {
- _classCallCheck(this, Icon);
+ var Circle = (function (_CircleImageBase) {
+ function Circle(options, body, labelModule) {
+ _classCallCheck(this, Circle);
- _get(Object.getPrototypeOf(Icon.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Icon, _NodeBase);
+ _inherits(Circle, _CircleImageBase);
- _createClass(Icon, [{
+ _createClass(Circle, [{
key: 'resize',
- value: function resize(ctx) {
+ value: function resize(ctx, selected) {
if (this.width === undefined) {
var margin = 5;
- var iconSize = {
- width: Number(this.options.icon.size),
- height: Number(this.options.icon.size)
- };
- this.width = iconSize.width + 2 * margin;
- this.height = iconSize.height + 2 * margin;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+ this.options.size = diameter / 2;
+
+ this.width = diameter;
+ this.height = diameter;
this.radius = 0.5 * this.width;
}
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx);
- this.options.icon.size = this.options.icon.size || 50;
+ this.resize(ctx, selected);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- this.left = x - this.width * 0.5;
- this.top = y - this.height * 0.5;
- this._icon(ctx, x, y, selected);
+ this._drawRawCircle(ctx, x, y, selected, hover, this.options.size);
- if (this.options.label !== undefined) {
- var iconTextSpacing = 5;
- this.labelModule.draw(ctx, x, y + this.height * 0.5 + iconTextSpacing, selected);
- }
+ this.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
this.updateBoundingBox(x, y);
+ this.labelModule.draw(ctx, x, y, selected);
}
}, {
key: 'updateBoundingBox',
value: function updateBoundingBox(x, y) {
- this.boundingBox.top = y - this.options.icon.size * 0.5;
- this.boundingBox.left = x - this.options.icon.size * 0.5;
- this.boundingBox.right = x + this.options.icon.size * 0.5;
- this.boundingBox.bottom = y + this.options.icon.size * 0.5;
-
- if (this.options.label !== undefined) {
- var iconTextSpacing = 5;
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height + iconTextSpacing);
- }
+ this.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
}
}, {
- key: '_icon',
- value: function _icon(ctx, x, y, selected) {
- var iconSize = Number(this.options.icon.size);
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
+ }
+ }]);
- if (this.options.icon.code !== undefined) {
- ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face;
+ return Circle;
+ })(_utilCircleImageBase2['default']);
- // draw icon
- ctx.fillStyle = this.options.icon.color || 'black';
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
+ exports['default'] = Circle;
+ module.exports = exports['default'];
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fillText(this.options.icon.code, x, y);
+/***/ },
+/* 99 */
+/***/ function(module, exports, __webpack_require__) {
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
+ property = _x2,
+ receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+ var _utilCircleImageBase = __webpack_require__(112);
+
+ var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
+
+ 'use strict';
+
+ var CircularImage = (function (_CircleImageBase) {
+ function CircularImage(options, body, labelModule, imageObj) {
+ _classCallCheck(this, CircularImage);
+
+ _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.imageObj = imageObj;
+ this._swapToImageResizeWhenImageLoaded = true;
+ }
+
+ _inherits(CircularImage, _CircleImageBase);
+
+ _createClass(CircularImage, [{
+ key: 'resize',
+ value: function resize() {
+ if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) {
+ if (!this.width) {
+ var diameter = this.options.size * 2;
+ this.width = diameter;
+ this.height = diameter;
+ this._swapToImageResizeWhenImageLoaded = true;
+ this.radius = 0.5 * this.width;
+ }
} else {
- console.error('When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally.');
+ if (this._swapToImageResizeWhenImageLoaded) {
+ this.width = undefined;
+ this.height = undefined;
+ this._swapToImageResizeWhenImageLoaded = false;
+ }
+ this._resizeImage();
}
}
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize();
+
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
+
+ var size = Math.min(0.5 * this.height, 0.5 * this.width);
+ this._drawRawCircle(ctx, x, y, selected, hover, size);
+
+ ctx.save();
+ ctx.circle(x, y, size);
+ ctx.stroke();
+ ctx.clip();
+
+ this._drawImageAtPosition(ctx);
+
+ ctx.restore();
+
+ this._drawImageLabel(ctx, x, y, selected);
+
+ this.updateBoundingBox(x, y);
+ }
+ }, {
+ key: 'updateBoundingBox',
+ value: function updateBoundingBox(x, y) {
+ this.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
+ }
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
this.resize(ctx);
- this._distanceToBorder(angle);
+ return this._distanceToBorder(angle);
}
}]);
- return Icon;
- })(_utilNodeBase2['default']);
+ return CircularImage;
+ })(_utilCircleImageBase2['default']);
- exports['default'] = Icon;
+ exports['default'] = CircularImage;
module.exports = exports['default'];
/***/ },
@@ -38535,56 +39343,74 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilCircleImageBase = __webpack_require__(110);
+ var _utilNodeBase = __webpack_require__(111);
- var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
+ var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
'use strict';
- var Image = (function (_CircleImageBase) {
- function Image(options, body, labelModule, imageObj) {
- _classCallCheck(this, Image);
+ var Database = (function (_NodeBase) {
+ function Database(options, body, labelModule) {
+ _classCallCheck(this, Database);
- _get(Object.getPrototypeOf(Image.prototype), 'constructor', this).call(this, options, body, labelModule);
- this.imageObj = imageObj;
+ _get(Object.getPrototypeOf(Database.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Image, _CircleImageBase);
+ _inherits(Database, _NodeBase);
- _createClass(Image, [{
+ _createClass(Database, [{
key: 'resize',
- value: function resize() {
- this._resizeImage();
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ var size = textSize.width + 2 * margin;
+ this.width = size;
+ this.height = size;
+ this.radius = 0.5 * this.width;
+ }
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize();
+ this.resize(ctx, selected);
this.left = x - this.width / 2;
this.top = y - this.height / 2;
- this._drawImageAtPosition(ctx);
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
- this._drawImageLabel(ctx, x, y, selected || hover);
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+ ctx.lineWidth = this.selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth *= this.networkScaleInv;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
this.updateBoundingBox(x, y);
+
+ this.labelModule.draw(ctx, x, y, selected);
}
}, {
key: 'updateBoundingBox',
value: function updateBoundingBox(x, y) {
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ this.left = x - this.width * 0.5;
+ this.top = y - this.height * 0.5;
- this.boundingBox.top = this.top;
this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
+ this.boundingBox.top = this.top;
this.boundingBox.bottom = this.top + this.height;
-
- if (this.options.label !== undefined) {
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
- }
+ this.boundingBox.right = this.left + this.width;
}
}, {
key: 'distanceToBorder',
@@ -38598,10 +39424,10 @@ return /******/ (function(modules) { // webpackBootstrap
}
}]);
- return Image;
- })(_utilCircleImageBase2['default']);
+ return Database;
+ })(_utilNodeBase2['default']);
- exports['default'] = Image;
+ exports['default'] = Database;
module.exports = exports['default'];
/***/ },
@@ -38626,43 +39452,42 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilShapeBase = __webpack_require__(111);
+ var _utilShapeBase = __webpack_require__(113);
var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
'use strict';
- var Square = (function (_ShapeBase) {
- function Square(options, body, labelModule) {
- _classCallCheck(this, Square);
+ var Diamond = (function (_ShapeBase) {
+ function Diamond(options, body, labelModule) {
+ _classCallCheck(this, Diamond);
- _get(Object.getPrototypeOf(Square.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Diamond.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Square, _ShapeBase);
+ _inherits(Diamond, _ShapeBase);
- _createClass(Square, [{
+ _createClass(Diamond, [{
key: 'resize',
- value: function resize() {
+ value: function resize(ctx) {
this._resizeShape();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'square', 2, x, y, selected, hover);
+ this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
return this._distanceToBorder(angle);
}
}]);
- return Square;
+ return Diamond;
})(_utilShapeBase2['default']);
- exports['default'] = Square;
+ exports['default'] = Diamond;
module.exports = exports['default'];
/***/ },
@@ -38687,22 +39512,22 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilShapeBase = __webpack_require__(111);
+ var _utilShapeBase = __webpack_require__(113);
var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
'use strict';
- var Star = (function (_ShapeBase) {
- function Star(options, body, labelModule) {
- _classCallCheck(this, Star);
+ var Dot = (function (_ShapeBase) {
+ function Dot(options, body, labelModule) {
+ _classCallCheck(this, Dot);
- _get(Object.getPrototypeOf(Star.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Dot.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Star, _ShapeBase);
+ _inherits(Dot, _ShapeBase);
- _createClass(Star, [{
+ _createClass(Dot, [{
key: 'resize',
value: function resize(ctx) {
this._resizeShape();
@@ -38710,19 +39535,19 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'star', 4, x, y, selected, hover);
+ this._drawShape(ctx, 'circle', 2, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ return this.options.size + this.options.borderWidth;
}
}]);
- return Star;
+ return Dot;
})(_utilShapeBase2['default']);
- exports['default'] = Star;
+ exports['default'] = Dot;
module.exports = exports['default'];
/***/ },
@@ -38747,71 +39572,93 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
+ var _utilNodeBase = __webpack_require__(111);
var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
'use strict';
- var Text = (function (_NodeBase) {
- function Text(options, body, labelModule) {
- _classCallCheck(this, Text);
+ var Ellipse = (function (_NodeBase) {
+ function Ellipse(options, body, labelModule) {
+ _classCallCheck(this, Ellipse);
- _get(Object.getPrototypeOf(Text.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Ellipse.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Text, _NodeBase);
+ _inherits(Ellipse, _NodeBase);
- _createClass(Text, [{
+ _createClass(Ellipse, [{
key: 'resize',
value: function resize(ctx, selected) {
if (this.width === undefined) {
- var margin = 5;
var textSize = this.labelModule.getTextSize(ctx, selected);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
+
+ this.width = textSize.width * 1.5;
+ this.height = textSize.height * 2;
+ if (this.width < this.height) {
+ this.width = this.height;
+ }
this.radius = 0.5 * this.width;
}
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected || hover);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ this.resize(ctx, selected);
+ this.left = x - this.width * 0.5;
+ this.top = y - this.height * 0.5;
+
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+
+ ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth /= this.body.view.scale;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx.ellipse(this.left, this.top, this.width, this.height);
// draw shadow if enabled
this.enableShadow(ctx);
- this.labelModule.draw(ctx, x, y, selected || hover);
+ ctx.fill();
// disable shadows for other elements.
this.disableShadow(ctx);
+ ctx.stroke();
+
this.updateBoundingBox(x, y);
+ this.labelModule.draw(ctx, x, y, selected);
}
}, {
key: 'updateBoundingBox',
value: function updateBoundingBox(x, y) {
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ this.left = x - this.width * 0.5;
+ this.top = y - this.height * 0.5;
- this.boundingBox.top = this.top;
this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
+ this.boundingBox.top = this.top;
this.boundingBox.bottom = this.top + this.height;
+ this.boundingBox.right = this.left + this.width;
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
this.resize(ctx);
- return this._distanceToBorder(angle);
+ var a = this.width * 0.5;
+ var b = this.height * 0.5;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
}
}]);
- return Text;
+ return Ellipse;
})(_utilNodeBase2['default']);
- exports['default'] = Text;
+ exports['default'] = Ellipse;
module.exports = exports['default'];
/***/ },
@@ -38836,42 +39683,102 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilShapeBase = __webpack_require__(111);
+ var _utilNodeBase = __webpack_require__(111);
- var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+ var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
'use strict';
- var Triangle = (function (_ShapeBase) {
- function Triangle(options, body, labelModule) {
- _classCallCheck(this, Triangle);
+ var Icon = (function (_NodeBase) {
+ function Icon(options, body, labelModule) {
+ _classCallCheck(this, Icon);
- _get(Object.getPrototypeOf(Triangle.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Icon.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Triangle, _ShapeBase);
+ _inherits(Icon, _NodeBase);
- _createClass(Triangle, [{
+ _createClass(Icon, [{
key: 'resize',
value: function resize(ctx) {
- this._resizeShape();
+ if (this.width === undefined) {
+ var margin = 5;
+ var iconSize = {
+ width: Number(this.options.icon.size),
+ height: Number(this.options.icon.size)
+ };
+ this.width = iconSize.width + 2 * margin;
+ this.height = iconSize.height + 2 * margin;
+ this.radius = 0.5 * this.width;
+ }
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'triangle', 3, x, y, selected, hover);
+ this.resize(ctx);
+ this.options.icon.size = this.options.icon.size || 50;
+
+ this.left = x - this.width * 0.5;
+ this.top = y - this.height * 0.5;
+ this._icon(ctx, x, y, selected);
+
+ if (this.options.label !== undefined) {
+ var iconTextSpacing = 5;
+ this.labelModule.draw(ctx, x, y + this.height * 0.5 + iconTextSpacing, selected);
+ }
+
+ this.updateBoundingBox(x, y);
+ }
+ }, {
+ key: 'updateBoundingBox',
+ value: function updateBoundingBox(x, y) {
+ this.boundingBox.top = y - this.options.icon.size * 0.5;
+ this.boundingBox.left = x - this.options.icon.size * 0.5;
+ this.boundingBox.right = x + this.options.icon.size * 0.5;
+ this.boundingBox.bottom = y + this.options.icon.size * 0.5;
+
+ if (this.options.label !== undefined) {
+ var iconTextSpacing = 5;
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height + iconTextSpacing);
+ }
+ }
+ }, {
+ key: '_icon',
+ value: function _icon(ctx, x, y, selected) {
+ var iconSize = Number(this.options.icon.size);
+
+ if (this.options.icon.code !== undefined) {
+ ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face;
+
+ // draw icon
+ ctx.fillStyle = this.options.icon.color || 'black';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fillText(this.options.icon.code, x, y);
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ } else {
+ console.error('When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally.');
+ }
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ this.resize(ctx);
+ this._distanceToBorder(angle);
}
}]);
- return Triangle;
- })(_utilShapeBase2['default']);
+ return Icon;
+ })(_utilNodeBase2['default']);
- exports['default'] = Triangle;
+ exports['default'] = Icon;
module.exports = exports['default'];
/***/ },
@@ -38896,42 +39803,73 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilShapeBase = __webpack_require__(111);
+ var _utilCircleImageBase = __webpack_require__(112);
- var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+ var _utilCircleImageBase2 = _interopRequireDefault(_utilCircleImageBase);
'use strict';
- var TriangleDown = (function (_ShapeBase) {
- function TriangleDown(options, body, labelModule) {
- _classCallCheck(this, TriangleDown);
+ var Image = (function (_CircleImageBase) {
+ function Image(options, body, labelModule, imageObj) {
+ _classCallCheck(this, Image);
- _get(Object.getPrototypeOf(TriangleDown.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Image.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.imageObj = imageObj;
}
- _inherits(TriangleDown, _ShapeBase);
+ _inherits(Image, _CircleImageBase);
- _createClass(TriangleDown, [{
+ _createClass(Image, [{
key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
+ value: function resize() {
+ this._resizeImage();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover);
+ this.resize();
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
+
+ this._drawImageAtPosition(ctx);
+
+ this._drawImageLabel(ctx, x, y, selected || hover);
+
+ this.updateBoundingBox(x, y);
+ }
+ }, {
+ key: 'updateBoundingBox',
+ value: function updateBoundingBox(x, y) {
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
+
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
+
+ if (this.options.label !== undefined) {
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);
+ }
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
}
}]);
- return TriangleDown;
- })(_utilShapeBase2['default']);
+ return Image;
+ })(_utilCircleImageBase2['default']);
- exports['default'] = TriangleDown;
+ exports['default'] = Image;
module.exports = exports['default'];
/***/ },
@@ -38956,140 +39894,43 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilBezierEdgeBase = __webpack_require__(112);
+ var _utilShapeBase = __webpack_require__(113);
- var _utilBezierEdgeBase2 = _interopRequireDefault(_utilBezierEdgeBase);
+ var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
- var BezierEdgeDynamic = (function (_BezierEdgeBase) {
- function BezierEdgeDynamic(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeDynamic);
+ 'use strict';
- //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
- _get(Object.getPrototypeOf(BezierEdgeDynamic.prototype), 'constructor', this).call(this, options, body, labelModule); // --> this calls the setOptions below
- }
+ var Square = (function (_ShapeBase) {
+ function Square(options, body, labelModule) {
+ _classCallCheck(this, Square);
- _inherits(BezierEdgeDynamic, _BezierEdgeBase);
+ _get(Object.getPrototypeOf(Square.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
- _createClass(BezierEdgeDynamic, [{
- key: 'setOptions',
- value: function setOptions(options) {
- this.options = options;
- this.from = this.body.nodes[this.options.from];
- this.to = this.body.nodes[this.options.to];
- this.id = this.options.id;
- this.setupSupportNode();
+ _inherits(Square, _ShapeBase);
- // fix weird behaviour
- if (this.from.id === this.to.id) {
- this.via.setOptions({ physics: false });
- } else {
- this.via.setOptions({ physics: true });
- }
- }
- }, {
- key: 'cleanup',
- value: function cleanup() {
- if (this.via !== undefined) {
- delete this.body.nodes[this.via.id];
- this.via = undefined;
- return true;
- }
- return false;
- }
- }, {
- key: 'togglePhysics',
- value: function togglePhysics(status) {
- this.via.setOptions({ physics: status });
- }
- }, {
- key: 'setupSupportNode',
-
- /**
- * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
- * are used for the force calculation.
- *
- * The changed data is not called, if needed, it is returned by the main edge constructor.
- * @private
- */
- value: function setupSupportNode() {
- if (this.via === undefined) {
- var nodeId = 'edgeId:' + this.id;
- var node = this.body.functions.createNode({
- id: nodeId,
- shape: 'circle',
- physics: true,
- hidden: true
- });
- this.body.nodes[nodeId] = node;
- this.via = node;
- this.via.parentEdgeId = this.id;
- this.positionBezierNode();
- }
- }
- }, {
- key: 'positionBezierNode',
- value: function positionBezierNode() {
- if (this.via !== undefined && this.from !== undefined && this.to !== undefined) {
- this.via.x = 0.5 * (this.from.x + this.to.x);
- this.via.y = 0.5 * (this.from.y + this.to.y);
- } else if (this.via !== undefined) {
- this.via.x = 0;
- this.via.y = 0;
- }
- }
- }, {
- key: '_line',
-
- /**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.stroke();
- this.disableShadow(ctx);
- return this.via;
- }
- }, {
- key: 'getPoint',
-
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- var t = percentage;
- var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * this.via.x + Math.pow(t, 2) * this.to.x;
- var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * this.via.y + Math.pow(t, 2) * this.to.y;
-
- return { x: x, y: y };
+ _createClass(Square, [{
+ key: 'resize',
+ value: function resize() {
+ this._resizeShape();
}
}, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- return this._findBorderPositionBezier(nearNode, ctx, this.via);
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'square', 2, x, y, selected, hover);
}
}, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
- // x3,y3 is the point
- return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ return this._distanceToBorder(angle);
}
}]);
- return BezierEdgeDynamic;
- })(_utilBezierEdgeBase2['default']);
+ return Square;
+ })(_utilShapeBase2['default']);
- exports['default'] = BezierEdgeDynamic;
+ exports['default'] = Square;
module.exports = exports['default'];
/***/ },
@@ -39104,9 +39945,9 @@ return /******/ (function(modules) { // webpackBootstrap
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x4,
- property = _x5,
- receiver = _x6; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
+ property = _x2,
+ receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -39114,248 +39955,42 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilBezierEdgeBase = __webpack_require__(112);
-
- var _utilBezierEdgeBase2 = _interopRequireDefault(_utilBezierEdgeBase);
-
- var BezierEdgeStatic = (function (_BezierEdgeBase) {
- function BezierEdgeStatic(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeStatic);
-
- _get(Object.getPrototypeOf(BezierEdgeStatic.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
-
- _inherits(BezierEdgeStatic, _BezierEdgeBase);
-
- _createClass(BezierEdgeStatic, [{
- key: 'cleanup',
- value: function cleanup() {
- return false;
- }
- }, {
- key: '_line',
-
- /**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- var via = this._getViaCoordinates();
- var returnValue = via;
+ var _utilShapeBase = __webpack_require__(113);
- // fallback to normal straight edges
- if (via.x === undefined) {
- ctx.lineTo(this.to.x, this.to.y);
- returnValue = undefined;
- } else {
- ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
- }
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.stroke();
- this.disableShadow(ctx);
- return returnValue;
- }
- }, {
- key: '_getViaCoordinates',
- value: function _getViaCoordinates() {
- var xVia = undefined;
- var yVia = undefined;
- var factor = this.options.smooth.roundness;
- var type = this.options.smooth.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 if (type === 'curvedCW') {
- dx = this.to.x - this.from.x;
- dy = this.from.y - this.to.y;
- var radius = Math.sqrt(dx * dx + dy * dy);
- var pi = Math.PI;
+ var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
- var originalAngle = Math.atan2(dy, dx);
- var myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
+ 'use strict';
- xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
- yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
- } else if (type === 'curvedCCW') {
- dx = this.to.x - this.from.x;
- dy = this.from.y - this.to.y;
- var radius = Math.sqrt(dx * dx + dy * dy);
- var pi = Math.PI;
+ var Star = (function (_ShapeBase) {
+ function Star(options, body, labelModule) {
+ _classCallCheck(this, Star);
- var originalAngle = Math.atan2(dy, dx);
- var myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
+ _get(Object.getPrototypeOf(Star.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
- xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
- yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
- } 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) {
- 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) {
- 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) {
- 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) {
- 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) {
- 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) {
- 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) {
- 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) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- }
- }
- }
- }
- return { x: xVia, y: yVia };
- }
- }, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- var options = arguments[2] === undefined ? {} : arguments[2];
+ _inherits(Star, _ShapeBase);
- return this._findBorderPositionBezier(nearNode, ctx, options.via);
+ _createClass(Star, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ this._resizeShape();
}
}, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
- var via = arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
- // x3,y3 is the point
- return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via);
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'star', 4, x, y, selected, hover);
}
}, {
- key: 'getPoint',
-
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- var via = arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
-
- var t = percentage;
- var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * this.to.x;
- var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * this.to.y;
-
- return { x: x, y: y };
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ return this._distanceToBorder(angle);
}
}]);
- return BezierEdgeStatic;
- })(_utilBezierEdgeBase2['default']);
+ return Star;
+ })(_utilShapeBase2['default']);
- exports['default'] = BezierEdgeStatic;
+ exports['default'] = Star;
module.exports = exports['default'];
/***/ },
@@ -39380,94 +40015,71 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilEdgeBase = __webpack_require__(113);
+ var _utilNodeBase = __webpack_require__(111);
- var _utilEdgeBase2 = _interopRequireDefault(_utilEdgeBase);
+ var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
- var StraightEdge = (function (_EdgeBase) {
- function StraightEdge(options, body, labelModule) {
- _classCallCheck(this, StraightEdge);
+ 'use strict';
- _get(Object.getPrototypeOf(StraightEdge.prototype), 'constructor', this).call(this, options, body, labelModule);
+ var Text = (function (_NodeBase) {
+ function Text(options, body, labelModule) {
+ _classCallCheck(this, Text);
+
+ _get(Object.getPrototypeOf(Text.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(StraightEdge, _EdgeBase);
+ _inherits(Text, _NodeBase);
- _createClass(StraightEdge, [{
- key: 'cleanup',
- value: function cleanup() {
- return false;
+ _createClass(Text, [{
+ key: 'resize',
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
+ this.radius = 0.5 * this.width;
+ }
}
}, {
- key: '_line',
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize(ctx, selected || hover);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- /**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
// draw shadow if enabled
this.enableShadow(ctx);
- ctx.stroke();
+ this.labelModule.draw(ctx, x, y, selected || hover);
+
+ // disable shadows for other elements.
this.disableShadow(ctx);
- return undefined;
- }
- }, {
- key: 'getPoint',
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- return {
- x: (1 - percentage) * this.from.x + percentage * this.to.x,
- y: (1 - percentage) * this.from.y + percentage * this.to.y
- };
+ this.updateBoundingBox(x, y);
}
}, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- var node1 = this.to;
- var node2 = this.from;
- if (nearNode.id === this.from.id) {
- node1 = this.from;
- node2 = this.to;
- }
-
- var angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
- var dx = node1.x - node2.x;
- var dy = node1.y - node2.y;
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- var toBorderDist = nearNode.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
- var borderPos = {};
- borderPos.x = (1 - toBorderPoint) * node2.x + toBorderPoint * node1.x;
- borderPos.y = (1 - toBorderPoint) * node2.y + toBorderPoint * node1.y;
+ key: 'updateBoundingBox',
+ value: function updateBoundingBox(x, y) {
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- return borderPos;
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
}
}, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
- // x3,y3 is the point
- return this._getDistanceToLine(x1, y1, x2, y2, x3, y3);
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ return this._distanceToBorder(angle);
}
}]);
- return StraightEdge;
- })(_utilEdgeBase2['default']);
+ return Text;
+ })(_utilNodeBase2['default']);
- exports['default'] = StraightEdge;
+ exports['default'] = Text;
module.exports = exports['default'];
/***/ },
@@ -39482,28 +40094,148 @@ return /******/ (function(modules) { // webpackBootstrap
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
+ property = _x2,
+ receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var NodeBase = (function () {
- function NodeBase(options, body, labelModule) {
- _classCallCheck(this, NodeBase);
+ function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- this.body = body;
- this.labelModule = labelModule;
- this.setOptions(options);
- this.top = undefined;
- this.left = undefined;
- this.height = undefined;
- this.width = undefined;
- this.radius = undefined;
- this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 };
+ var _utilShapeBase = __webpack_require__(113);
+
+ var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+
+ 'use strict';
+
+ var Triangle = (function (_ShapeBase) {
+ function Triangle(options, body, labelModule) {
+ _classCallCheck(this, Triangle);
+
+ _get(Object.getPrototypeOf(Triangle.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _createClass(NodeBase, [{
- key: 'setOptions',
- value: function setOptions(options) {
- this.options = options;
- }
+ _inherits(Triangle, _ShapeBase);
+
+ _createClass(Triangle, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ this._resizeShape();
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'triangle', 3, x, y, selected, hover);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ return this._distanceToBorder(angle);
+ }
+ }]);
+
+ return Triangle;
+ })(_utilShapeBase2['default']);
+
+ exports['default'] = Triangle;
+ module.exports = exports['default'];
+
+/***/ },
+/* 110 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x,
+ property = _x2,
+ receiver = _x3; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+ var _utilShapeBase = __webpack_require__(113);
+
+ var _utilShapeBase2 = _interopRequireDefault(_utilShapeBase);
+
+ 'use strict';
+
+ var TriangleDown = (function (_ShapeBase) {
+ function TriangleDown(options, body, labelModule) {
+ _classCallCheck(this, TriangleDown);
+
+ _get(Object.getPrototypeOf(TriangleDown.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(TriangleDown, _ShapeBase);
+
+ _createClass(TriangleDown, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ this._resizeShape();
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ return this._distanceToBorder(angle);
+ }
+ }]);
+
+ return TriangleDown;
+ })(_utilShapeBase2['default']);
+
+ exports['default'] = TriangleDown;
+ module.exports = exports['default'];
+
+/***/ },
+/* 111 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ var NodeBase = (function () {
+ function NodeBase(options, body, labelModule) {
+ _classCallCheck(this, NodeBase);
+
+ this.body = body;
+ this.labelModule = labelModule;
+ this.setOptions(options);
+ this.top = undefined;
+ this.left = undefined;
+ this.height = undefined;
+ this.width = undefined;
+ this.radius = undefined;
+ this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 };
+ }
+
+ _createClass(NodeBase, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ this.options = options;
+ }
}, {
key: '_distanceToBorder',
value: function _distanceToBorder(angle) {
@@ -39539,7 +40271,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 110 */
+/* 112 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -39560,7 +40292,7 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
+ var _utilNodeBase = __webpack_require__(111);
var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
@@ -39668,7 +40400,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 111 */
+/* 113 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -39689,7 +40421,7 @@ return /******/ (function(modules) { // webpackBootstrap
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
- var _utilNodeBase = __webpack_require__(109);
+ var _utilNodeBase = __webpack_require__(111);
var _utilNodeBase2 = _interopRequireDefault(_utilNodeBase);
@@ -39768,741 +40500,6 @@ return /******/ (function(modules) { // webpackBootstrap
exports['default'] = ShapeBase;
module.exports = exports['default'];
-/***/ },
-/* 112 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
- var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { desc = parent = getter = undefined; _again = false; var object = _x2,
- property = _x3,
- receiver = _x4; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
- function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
-
- var _EdgeBase2 = __webpack_require__(113);
-
- var _EdgeBase3 = _interopRequireDefault(_EdgeBase2);
-
- var BezierEdgeBase = (function (_EdgeBase) {
- function BezierEdgeBase(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeBase);
-
- _get(Object.getPrototypeOf(BezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
-
- _inherits(BezierEdgeBase, _EdgeBase);
-
- _createClass(BezierEdgeBase, [{
- key: '_findBorderPositionBezier',
-
- /**
- * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
- *
- * @param nearNode
- * @param ctx
- * @param viaNode
- * @param nearNode
- * @param ctx
- * @param viaNode
- * @param nearNode
- * @param ctx
- * @param viaNode
- */
- value: function _findBorderPositionBezier(nearNode, ctx) {
- var viaNode = arguments[2] === undefined ? this._getViaCoordinates() : arguments[2];
-
- var maxIterations = 10;
- var iteration = 0;
- var low = 0;
- var high = 1;
- var pos, angle, distanceToBorder, distanceToPoint, difference;
- var threshold = 0.2;
- var node = this.to;
- var from = false;
- if (nearNode.id === this.from.id) {
- node = this.from;
- from = true;
- }
-
- while (low <= high && iteration < maxIterations) {
- var middle = (low + high) * 0.5;
-
- pos = this.getPoint(middle, viaNode);
- angle = Math.atan2(node.y - pos.y, node.x - pos.x);
- distanceToBorder = node.distanceToBorder(ctx, angle);
- distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
- difference = distanceToBorder - distanceToPoint;
- if (Math.abs(difference) < threshold) {
- break; // found
- } else if (difference < 0) {
- // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
- if (from === false) {
- low = middle;
- } else {
- high = middle;
- }
- } else {
- if (from === false) {
- high = middle;
- } else {
- low = middle;
- }
- }
-
- iteration++;
- }
- pos.t = middle;
-
- return pos;
- }
- }, {
- key: '_getDistanceToBezierEdge',
-
- /**
- * 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
- */
- value: function _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via) {
- // x3,y3 is the point
- var xVia = undefined,
- yVia = undefined;
- xVia = via.x;
- yVia = via.y;
- var minDistance = 1000000000;
- var distance = undefined;
- var i = undefined,
- t = undefined,
- x = undefined,
- y = undefined;
- var lastX = x1;
- var lastY = y1;
- for (i = 1; 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;
- }
- }]);
-
- return BezierEdgeBase;
- })(_EdgeBase3['default']);
-
- exports['default'] = BezierEdgeBase;
- module.exports = exports['default'];
-
-/***/ },
-/* 113 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
- function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }
-
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
- var util = __webpack_require__(1);
-
- var EdgeBase = (function () {
- function EdgeBase(options, body, labelModule) {
- _classCallCheck(this, EdgeBase);
-
- this.body = body;
- this.labelModule = labelModule;
- this.setOptions(options);
- this.colorDirty = true;
- this.color = {};
- this.selectionWidth = 2;
- this.hoverWidth = 1.5;
- }
-
- _createClass(EdgeBase, [{
- key: 'setOptions',
- value: function setOptions(options) {
- this.options = options;
- this.from = this.body.nodes[this.options.from];
- this.to = this.body.nodes[this.options.to];
- this.id = this.options.id;
- }
- }, {
- key: 'togglePhysics',
-
- /**
- * overloadable if the shape has to toggle the via node to disabled
- * @param status
- */
- value: function togglePhysics(status) {}
- }, {
- key: 'drawLine',
-
- /**
- * 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
- */
- value: function drawLine(ctx, selected, hover) {
- // set style
- ctx.strokeStyle = this.getColor(ctx);
- ctx.lineWidth = this.getLineWidth(selected, hover);
- var via = undefined;
- if (this.options.dashes !== false) {
- via = this._drawDashedLine(ctx);
- } else {
- via = this._drawLine(ctx);
- }
- return via;
- }
- }, {
- key: '_drawLine',
- value: function _drawLine(ctx) {
- var via = undefined;
- if (this.from != this.to) {
- // draw line
- via = this._line(ctx);
- } else {
- var _getCircleData = this._getCircleData(ctx);
-
- var _getCircleData2 = _slicedToArray(_getCircleData, 3);
-
- var x = _getCircleData2[0];
- var y = _getCircleData2[1];
- var radius = _getCircleData2[2];
-
- this._circle(ctx, x, y, radius);
- }
- return via;
- }
- }, {
- key: '_drawDashedLine',
- value: function _drawDashedLine(ctx) {
- var via = undefined;
- ctx.lineCap = 'round';
- var pattern = [5, 5];
- if (Array.isArray(this.options.dashes) === true) {
- pattern = this.options.dashes;
- }
-
- // only firefox and chrome support this method, else we use the legacy one.
- if (ctx.setLineDash !== undefined) {
- ctx.save();
-
- // set dash settings for chrome or firefox
- ctx.setLineDash(pattern);
- ctx.lineDashOffset = 0;
-
- // draw the line
- if (this.from != this.to) {
- // draw line
- via = this._line(ctx);
- } else {
- var _getCircleData3 = this._getCircleData(ctx);
-
- var _getCircleData32 = _slicedToArray(_getCircleData3, 3);
-
- var x = _getCircleData32[0];
- var y = _getCircleData32[1];
- var radius = _getCircleData32[2];
-
- this._circle(ctx, x, y, radius);
- }
-
- // restore the dash settings.
- ctx.setLineDash([0]);
- ctx.lineDashOffset = 0;
- ctx.restore();
- } else {
- // unsupporting smooth lines
-
- if (this.from != this.to) {
- // draw line
- ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
- } else {
- var _getCircleData4 = this._getCircleData(ctx);
-
- var _getCircleData42 = _slicedToArray(_getCircleData4, 3);
-
- var x = _getCircleData42[0];
- var y = _getCircleData42[1];
- var radius = _getCircleData42[2];
-
- this._circle(ctx, x, y, radius);
- }
- // draw shadow if enabled
- this.enableShadow(ctx);
-
- ctx.stroke();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
- }
- return via;
- }
- }, {
- key: 'findBorderPosition',
- value: function findBorderPosition(nearNode, ctx, options) {
- if (this.from != this.to) {
- return this._findBorderPosition(nearNode, ctx, options);
- } else {
- return this._findBorderPositionCircle(nearNode, ctx, options);
- }
- }
- }, {
- key: 'findBorderPositions',
- value: function findBorderPositions(ctx) {
- var from = {};
- var to = {};
- if (this.from != this.to) {
- from = this._findBorderPosition(this.from, ctx);
- to = this._findBorderPosition(this.to, ctx);
- } else {
- var _getCircleData5 = this._getCircleData(ctx);
-
- var _getCircleData52 = _slicedToArray(_getCircleData5, 3);
-
- var x = _getCircleData52[0];
- var y = _getCircleData52[1];
- var radius = _getCircleData52[2];
-
- from = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
- to = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.6, high: 0.8, direction: 1 });
- }
- return { from: from, to: to };
- }
- }, {
- key: '_getCircleData',
- value: function _getCircleData(ctx) {
- var x = undefined,
- y = undefined;
- var node = this.from;
- var radius = this.options.selfReferenceSize;
-
- if (ctx !== undefined) {
- if (node.shape.width === undefined) {
- node.shape.resize(ctx);
- }
- }
-
- // get circle coordinates
- if (node.shape.width > node.shape.height) {
- x = node.x + node.shape.width * 0.5;
- y = node.y - radius;
- } else {
- x = node.x + radius;
- y = node.y - node.shape.height * 0.5;
- }
- return [x, y, radius];
- }
- }, {
- key: '_pointOnCircle',
-
- /**
- * 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
- */
- value: function _pointOnCircle(x, y, radius, percentage) {
- var angle = percentage * 2 * Math.PI;
- return {
- x: x + radius * Math.cos(angle),
- y: y - radius * Math.sin(angle)
- };
- }
- }, {
- key: '_findBorderPositionCircle',
-
- /**
- * This function uses binary search to look for the point where the circle crosses the border of the node.
- * @param node
- * @param ctx
- * @param options
- * @returns {*}
- * @private
- */
- value: function _findBorderPositionCircle(node, ctx, options) {
- var x = options.x;
- var y = options.y;
- var low = options.low;
- var high = options.high;
- var direction = options.direction;
-
- var maxIterations = 10;
- var iteration = 0;
- var radius = this.options.selfReferenceSize;
- var pos = undefined,
- angle = undefined,
- distanceToBorder = undefined,
- distanceToPoint = undefined,
- difference = undefined;
- var threshold = 0.05;
- var middle = (low + high) * 0.5;
-
- while (low <= high && iteration < maxIterations) {
- middle = (low + high) * 0.5;
-
- pos = this._pointOnCircle(x, y, radius, middle);
- angle = Math.atan2(node.y - pos.y, node.x - pos.x);
- distanceToBorder = node.distanceToBorder(ctx, angle);
- distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
- difference = distanceToBorder - distanceToPoint;
- if (Math.abs(difference) < threshold) {
- break; // found
- } else if (difference > 0) {
- // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
- if (direction > 0) {
- low = middle;
- } else {
- high = middle;
- }
- } else {
- if (direction > 0) {
- high = middle;
- } else {
- low = middle;
- }
- }
- iteration++;
- }
- pos.t = middle;
-
- return pos;
- }
- }, {
- key: 'getLineWidth',
-
- /**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
- * @private
- */
- value: function getLineWidth(selected, hover) {
- if (selected === true) {
- return Math.max(this.selectionWidth, 0.3 / this.body.view.scale);
- } else {
- if (hover === true) {
- return Math.max(this.hoverWidth, 0.3 / this.body.view.scale);
- } else {
- return Math.max(this.options.width, 0.3 / this.body.view.scale);
- }
- }
- }
- }, {
- key: 'getColor',
- value: function getColor(ctx) {
- var colorOptions = this.options.color;
- if (colorOptions.inherit !== false) {
- // when this is a loop edge, just use the 'from' method
- if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {
- var grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
- var fromColor = undefined,
- toColor = undefined;
- fromColor = this.from.options.color.highlight.border;
- toColor = this.to.options.color.highlight.border;
-
- if (this.from.selected === false && this.to.selected === false) {
- fromColor = util.overrideOpacity(this.from.options.color.border, this.options.color.opacity);
- toColor = util.overrideOpacity(this.to.options.color.border, this.options.color.opacity);
- } else if (this.from.selected === true && this.to.selected === false) {
- toColor = this.to.options.color.border;
- } else if (this.from.selected === false && this.to.selected === true) {
- fromColor = this.from.options.color.border;
- }
- grd.addColorStop(0, fromColor);
- grd.addColorStop(1, toColor);
-
- // -------------------- this returns -------------------- //
- return grd;
- }
-
- if (this.colorDirty === true) {
- if (colorOptions.inherit === 'to') {
- this.color.highlight = this.to.options.color.highlight.border;
- this.color.hover = this.to.options.color.hover.border;
- this.color.color = util.overrideOpacity(this.to.options.color.border, colorOptions.opacity);
- } else {
- // (this.options.color.inherit.source === "from") {
- this.color.highlight = this.from.options.color.highlight.border;
- this.color.hover = this.from.options.color.hover.border;
- this.color.color = util.overrideOpacity(this.from.options.color.border, colorOptions.opacity);
- }
- }
- } else if (this.colorDirty === true) {
- this.color.highlight = colorOptions.highlight;
- this.color.hover = colorOptions.hover;
- this.color.color = util.overrideOpacity(colorOptions.color, colorOptions.opacity);
- }
-
- // if color inherit is on and gradients are used, the function has already returned by now.
- this.colorDirty = false;
-
- if (this.selected === true) {
- return this.color.highlight;
- } else if (this.hover === true) {
- return this.color.hover;
- } else {
- return this.color.color;
- }
- }
- }, {
- key: '_circle',
-
- /**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @private
- */
- value: function _circle(ctx, x, y, radius) {
- // draw shadow if enabled
- this.enableShadow(ctx);
-
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
- }
- }, {
- key: 'getDistanceToEdge',
-
- /**
- * 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
- */
- value: function getDistanceToEdge(x1, y1, x2, y2, x3, y3, via) {
- // x3,y3 is the point
- var returnValue = 0;
- if (this.from != this.to) {
- returnValue = this._getDistanceToEdge(x1, y1, x2, y2, x3, y3, via);
- } else {
- var _getCircleData6 = this._getCircleData();
-
- var _getCircleData62 = _slicedToArray(_getCircleData6, 3);
-
- var x = _getCircleData62[0];
- var y = _getCircleData62[1];
- var radius = _getCircleData62[2];
-
- var dx = x - x3;
- var dy = y - y3;
- returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
- }
-
- if (this.labelModule.size.left < x3 && this.labelModule.size.left + this.labelModule.size.width > x3 && this.labelModule.size.top < y3 && this.labelModule.size.top + this.labelModule.size.height > y3) {
- return 0;
- } else {
- return returnValue;
- }
- }
- }, {
- key: '_getDistanceToLine',
- value: function _getDistanceToLine(x1, y1, x2, y2, x3, y3) {
- var px = x2 - x1;
- var py = y2 - y1;
- var something = px * px + py * py;
- var u = ((x3 - x1) * px + (y3 - y1) * py) / something;
-
- if (u > 1) {
- u = 1;
- } else if (u < 0) {
- u = 0;
- }
-
- var x = x1 + u * px;
- var y = y1 + u * py;
- var dx = x - x3;
- var 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);
- }
- }, {
- key: 'drawArrowHead',
-
- /**
- *
- * @param ctx
- * @param position
- * @param viaNode
- */
- value: function drawArrowHead(ctx, position, viaNode, selected, hover) {
- // set style
- ctx.strokeStyle = this.getColor(ctx);
- ctx.fillStyle = ctx.strokeStyle;
- ctx.lineWidth = this.getLineWidth(selected, hover);
-
- // set lets
- var angle = undefined;
- var length = undefined;
- var arrowPos = undefined;
- var node1 = undefined;
- var node2 = undefined;
- var guideOffset = undefined;
- var scaleFactor = undefined;
-
- if (position === 'from') {
- node1 = this.from;
- node2 = this.to;
- guideOffset = 0.1;
- scaleFactor = this.options.arrows.from.scaleFactor;
- } else if (position === 'to') {
- node1 = this.to;
- node2 = this.from;
- guideOffset = -0.1;
- scaleFactor = this.options.arrows.to.scaleFactor;
- } else {
- node1 = this.to;
- node2 = this.from;
- scaleFactor = this.options.arrows.middle.scaleFactor;
- }
-
- // if not connected to itself
- if (node1 != node2) {
- if (position !== 'middle') {
- // draw arrow head
- if (this.options.smooth.enabled === true) {
- arrowPos = this.findBorderPosition(node1, ctx, { via: viaNode });
- var guidePos = this.getPoint(Math.max(0, Math.min(1, arrowPos.t + guideOffset)), viaNode);
- angle = Math.atan2(arrowPos.y - guidePos.y, arrowPos.x - guidePos.x);
- } else {
- angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
- arrowPos = this.findBorderPosition(node1, ctx);
- }
- } else {
- angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
- arrowPos = this.getPoint(0.6, viaNode); // this is 0.6 to account for the size of the arrow.
- }
- // draw arrow at the end of the line
- length = (10 + 5 * this.options.width) * scaleFactor;
- ctx.arrow(arrowPos.x, arrowPos.y, angle, length);
-
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
- ctx.stroke();
- } else {
- // draw circle
- var _angle = undefined,
- point = undefined;
-
- var _getCircleData7 = this._getCircleData(ctx);
-
- var _getCircleData72 = _slicedToArray(_getCircleData7, 3);
-
- var x = _getCircleData72[0];
- var y = _getCircleData72[1];
- var radius = _getCircleData72[2];
-
- if (position === 'from') {
- point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
- _angle = point.t * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
- } else if (position === 'to') {
- point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.6, high: 1, direction: 1 });
- _angle = point.t * -2 * Math.PI + 1.5 * Math.PI - 1.1 * Math.PI;
- } else {
- point = this._pointOnCircle(x, y, radius, 0.175);
- _angle = 3.9269908169872414; // === 0.175 * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
- }
-
- // draw the arrowhead
- var _length = (10 + 5 * this.options.width) * scaleFactor;
- ctx.arrow(point.x, point.y, _angle, _length);
-
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
- ctx.stroke();
- }
- }
- }, {
- key: 'enableShadow',
- value: function enableShadow(ctx) {
- if (this.options.shadow.enabled === true) {
- ctx.shadowColor = 'rgba(0,0,0,0.5)';
- ctx.shadowBlur = this.options.shadow.size;
- ctx.shadowOffsetX = this.options.shadow.x;
- ctx.shadowOffsetY = this.options.shadow.y;
- }
- }
- }, {
- key: 'disableShadow',
- value: function disableShadow(ctx) {
- if (this.options.shadow.enabled === true) {
- ctx.shadowColor = 'rgba(0,0,0,0)';
- ctx.shadowBlur = 0;
- ctx.shadowOffsetX = 0;
- ctx.shadowOffsetY = 0;
- }
- }
- }]);
-
- return EdgeBase;
- })();
-
- exports['default'] = EdgeBase;
- module.exports = exports['default'];
-
/***/ }
/******/ ])
});
diff --git a/examples/network/categories/data/datasets.html b/examples/network/categories/data/datasets.html
new file mode 100644
index 00000000..74d93557
--- /dev/null
+++ b/examples/network/categories/data/datasets.html
@@ -0,0 +1,79 @@
+
+
+
+ Network | Basic usage
+
+
+
+
+
+
+
+
+
+ Create a simple network with some nodes and edges.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/network/categories/data/dynamic_data.html b/examples/network/categories/data/dynamic_data.html
index 305c4780..2132f507 100644
--- a/examples/network/categories/data/dynamic_data.html
+++ b/examples/network/categories/data/dynamic_data.html
@@ -53,8 +53,8 @@
-
-
+
+
-
+
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 00f5f28c..fa299807 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -169,6 +169,10 @@ Network.prototype.setOptions = function (options) {
this.renderer.setOptions(options.interaction); // options for rendering are in interaction
this.selectionHandler.setOptions(options.interaction); // options for selection are in interaction
+ // reload the settings of the nodes to apply changes in groups that are not referenced by pointer.
+ if (options.groups !== undefined) {
+ this.body.emitter.emit("refreshNodes");
+ }
// these two do not have options at the moment, here for completeness
//this.view.setOptions(options.view);
//this.clustering.setOptions(options.clustering);
diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index df40f59d..b6dd460e 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -106,7 +106,7 @@ class NodesHandler {
// refresh the nodes. Used when reverting from hierarchical layout
this.body.emitter.on('refreshNodes', this.refresh.bind(this));
this.body.emitter.on('refresh', this.refresh.bind(this));
- this.body.emitter.on("destroy", () => {
+ this.body.emitter.on('destroy', () => {
delete this.body.functions.createNode;
delete this.nodesListeners.add;
delete this.nodesListeners.update;
@@ -242,7 +242,7 @@ class NodesHandler {
let data = changedData[i];
if (node !== undefined) {
// update node
- node.setOptions(data, this.constants);
+ node.setOptions(data);
}
else {
dataChanged = true;
diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js
index 9e542539..76a0e760 100644
--- a/lib/network/modules/components/Edge.js
+++ b/lib/network/modules/components/Edge.js
@@ -115,7 +115,7 @@ class Edge {
if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
parentOptions.dashes = newOptions.dashes;
}
- else if (allowDeletion === true) {
+ else if (allowDeletion === true && newOptions.dashes === null) {
parentOptions.dashes = undefined;
delete parentOptions.dashes;
}
@@ -126,7 +126,7 @@ class Edge {
if (newOptions.scaling.max !== undefined) {parentOptions.scaling.max = newOptions.scaling.max;}
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
}
- else if (allowDeletion === true) {
+ else if (allowDeletion === true && newOptions.scaling === null) {
parentOptions.scaling = undefined;
delete parentOptions.scaling;
}
@@ -148,7 +148,7 @@ class Edge {
throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
}
}
- else if (allowDeletion === true) {
+ else if (allowDeletion === true && newOptions.arrows === null) {
parentOptions.arrows = undefined;
delete parentOptions.arrows;
}
@@ -174,7 +174,7 @@ class Edge {
}
}
}
- else if (allowDeletion === true) {
+ else if (allowDeletion === true && newOptions.color === null) {
parentOptions.color = undefined;
delete parentOptions.color;
}
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index 5ff7efa4..2debfeea 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -111,7 +111,6 @@ class Node {
if (!options) {
return;
}
-
// basic options
if (options.id !== undefined) {this.id = options.id;}
@@ -166,7 +165,7 @@ class Node {
'fixed',
'shadow'
];
- util.selectiveNotDeepExtend(fields, parentOptions, newOptions);
+ util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
// merge the shadow options into the parent.
util.mergeOptions(parentOptions, newOptions, 'shadow');
@@ -176,7 +175,7 @@ class Node {
let parsedColor = util.parseColor(newOptions.color);
util.fillIfDefined(parentOptions.color, parsedColor);
}
- else if (allowDeletion === true) {
+ else if (allowDeletion === true && newOptions.color === null) {
parentOptions.color = undefined;
delete parentOptions.color;
}
diff --git a/lib/network/modules/components/physics/SpringSolver.js b/lib/network/modules/components/physics/SpringSolver.js
index 5998823a..194631f3 100644
--- a/lib/network/modules/components/physics/SpringSolver.js
+++ b/lib/network/modules/components/physics/SpringSolver.js
@@ -7,8 +7,6 @@ class SpringSolver {
setOptions(options) {
this.options = options;
- this.overlapAvoidanceFactor = 1 - Math.max(0, Math.min(1,this.options.avoidOverlap)); // if 1 then min distance = 0.5, if 0.5 then min distance = 0.5 + 0.5*node.shape.radius
-
}
/**
@@ -58,19 +56,9 @@ class SpringSolver {
* @private
*/
_calculateSpringForce(node1, node2, edgeLength) {
- let dx,dy;
- if (this.overlapAvoidanceFactor < 1) {
- let nodesWidth = this.overlapAvoidanceFactor * (node1.shape.radius + node2.shape.radius);
- dx = (node1.x - node2.x) - nodesWidth;
- dy = (node1.y - node2.y) - nodesWidth;
- }
- else {
- dx = (node1.x - node2.x);
- dy = (node1.y - node2.y);
- }
-
- let distance = Math.sqrt(dx * dx + dy * dy);
- distance = distance === 0 ? 0.01 : distance;
+ let dx = (node1.x - node2.x);
+ let dy = (node1.y - node2.y);
+ let distance = Math.max(Math.sqrt(dx * dx + dy * dy),0.01);
// the 1/distance is so the fx and fy can be calculated without sine or cosine.
let springForce = this.options.springConstant * (edgeLength - distance) / distance;
diff --git a/lib/network/options.js b/lib/network/options.js
index ddbb37d3..f9276c70 100644
--- a/lib/network/options.js
+++ b/lib/network/options.js
@@ -238,7 +238,6 @@ let allOptions = {
springConstant: {number},
nodeDistance: {number},
damping: {number},
- avoidOverlap: {number},
__type__: {object}
},
hierarchicalRepulsion: {
@@ -446,8 +445,7 @@ let configureOptions = {
springLength: [200, 0, 500, 5],
springConstant: [0.05, 0, 5, 0.005],
nodeDistance: [100, 0, 500, 5],
- damping: [0.09, 0, 1, 0.01],
- avoidOverlap: [0, 0, 1, 0.01]
+ damping: [0.09, 0, 1, 0.01]
},
hierarchicalRepulsion: {
centralGravity: [0.2, 0, 10, 0.05],
diff --git a/lib/util.js b/lib/util.js
index 01b03d4e..c8142dd9 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -126,6 +126,8 @@ exports.fillIfDefined = function (a, b, allowDeletion = false) {
}
}
+
+
/**
* Extend object a with the properties of object b or a series of objects
* Only properties with defined values are copied
@@ -214,7 +216,7 @@ exports.selectiveDeepExtend = function (props, a, b, allowDeletion = false) {
exports.deepExtend(a[prop], b[prop], false, allowDeletion);
}
else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if ((b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
}
else {
@@ -257,7 +259,7 @@ exports.selectiveNotDeepExtend = function (props, a, b, allowDeletion = false) {
exports.deepExtend(a[prop], b[prop]);
}
else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if ((b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
}
else {
@@ -281,7 +283,7 @@ exports.selectiveNotDeepExtend = function (props, a, b, allowDeletion = false) {
* @param {Object} b
* @param [Boolean] protoExtend --> optional parameter. If true, the prototype values will also be extended.
* (ie. the options objects that inherit from others will also get the inherited options)
- * @param [Boolean] global --> optional parameter. If true, the values of fields that are undefined or null will not deleted
+ * @param [Boolean] global --> optional parameter. If true, the values of fields that are null will not deleted
* @returns {Object}
*/
exports.deepExtend = function(a, b, protoExtend, allowDeletion) {
@@ -295,7 +297,7 @@ exports.deepExtend = function(a, b, protoExtend, allowDeletion) {
exports.deepExtend(a[prop], b[prop], protoExtend);
}
else {
- if ((b[prop] === undefined || b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
+ if ((b[prop] === null) && a[prop] !== undefined && allowDeletion === true) {
delete a[prop];
}
else {
@@ -1209,16 +1211,22 @@ exports.bridgeObject = function(referenceObject) {
* @param [String] option | this is the option key in the options argument
* @private
*/
-exports.mergeOptions = function (mergeTarget, options, option) {
- if (options[option] !== undefined) {
- if (typeof options[option] == 'boolean') {
- mergeTarget[option].enabled = options[option];
- }
- else {
- mergeTarget[option].enabled = true;
- for (var prop in options[option]) {
- if (options[option].hasOwnProperty(prop)) {
- mergeTarget[option][prop] = options[option][prop];
+exports.mergeOptions = function (mergeTarget, options, option, allowDeletion = false) {
+ if (options[option] === null) {
+ mergeTarget[option] = undefined;
+ delete mergeTarget[option];
+ }
+ else {
+ if (options[option] !== undefined) {
+ if (typeof options[option] == 'boolean') {
+ mergeTarget[option].enabled = options[option];
+ }
+ else {
+ mergeTarget[option].enabled = true;
+ for (var prop in options[option]) {
+ if (options[option].hasOwnProperty(prop)) {
+ mergeTarget[option][prop] = options[option][prop];
+ }
}
}
}