diff --git a/dist/vis.js b/dist/vis.js
index c3beb866..942372af 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -176,35 +176,35 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var _componentsPhysicsBarnesHutSolver = __webpack_require__(77);
+ var _componentsPhysicsBarnesHutSolver = __webpack_require__(76);
var _componentsPhysicsBarnesHutSolver2 = _interopRequireDefault(_componentsPhysicsBarnesHutSolver);
- var _componentsPhysicsRepulsionSolver = __webpack_require__(78);
+ var _componentsPhysicsRepulsionSolver = __webpack_require__(77);
var _componentsPhysicsRepulsionSolver2 = _interopRequireDefault(_componentsPhysicsRepulsionSolver);
- var _componentsPhysicsHierarchicalRepulsionSolver = __webpack_require__(79);
+ var _componentsPhysicsHierarchicalRepulsionSolver = __webpack_require__(78);
var _componentsPhysicsHierarchicalRepulsionSolver2 = _interopRequireDefault(_componentsPhysicsHierarchicalRepulsionSolver);
- var _componentsPhysicsSpringSolver = __webpack_require__(80);
+ var _componentsPhysicsSpringSolver = __webpack_require__(79);
var _componentsPhysicsSpringSolver2 = _interopRequireDefault(_componentsPhysicsSpringSolver);
- var _componentsPhysicsHierarchicalSpringSolver = __webpack_require__(81);
+ var _componentsPhysicsHierarchicalSpringSolver = __webpack_require__(80);
var _componentsPhysicsHierarchicalSpringSolver2 = _interopRequireDefault(_componentsPhysicsHierarchicalSpringSolver);
- var _componentsPhysicsCentralGravitySolver = __webpack_require__(82);
+ var _componentsPhysicsCentralGravitySolver = __webpack_require__(81);
var _componentsPhysicsCentralGravitySolver2 = _interopRequireDefault(_componentsPhysicsCentralGravitySolver);
- var _componentsPhysicsFA2BasedRepulsionSolver = __webpack_require__(83);
+ var _componentsPhysicsFA2BasedRepulsionSolver = __webpack_require__(82);
var _componentsPhysicsFA2BasedRepulsionSolver2 = _interopRequireDefault(_componentsPhysicsFA2BasedRepulsionSolver);
- var _componentsPhysicsFA2BasedCentralGravitySolver = __webpack_require__(84);
+ var _componentsPhysicsFA2BasedCentralGravitySolver = __webpack_require__(83);
var _componentsPhysicsFA2BasedCentralGravitySolver2 = _interopRequireDefault(_componentsPhysicsFA2BasedCentralGravitySolver);
@@ -19073,7 +19073,7 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var _ColorPicker = __webpack_require__(73);
+ var _ColorPicker = __webpack_require__(113);
var _ColorPicker2 = _interopRequireDefault(_ColorPicker);
@@ -19422,7 +19422,9 @@ return /******/ (function(modules) { // webpackBootstrap
range.step = step;
if (value !== undefined) {
- if (value * 0.1 < min) {
+ if (value < 0 && value * 2 < min) {
+ range.min = value * 2;
+ } else if (value * 0.1 < min) {
range.min = value / 10;
}
if (value * 2 > max && max !== 1) {
@@ -21381,11 +21383,11 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var _componentsNode = __webpack_require__(74);
+ var _componentsNode = __webpack_require__(73);
var _componentsNode2 = _interopRequireDefault(_componentsNode);
- var _componentsSharedLabel = __webpack_require__(75);
+ var _componentsSharedLabel = __webpack_require__(74);
var _componentsSharedLabel2 = _interopRequireDefault(_componentsSharedLabel);
@@ -21859,11 +21861,11 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var _componentsEdge = __webpack_require__(76);
+ var _componentsEdge = __webpack_require__(75);
var _componentsEdge2 = _interopRequireDefault(_componentsEdge);
- var _componentsSharedLabel = __webpack_require__(75);
+ var _componentsSharedLabel = __webpack_require__(74);
var _componentsSharedLabel2 = _interopRequireDefault(_componentsSharedLabel);
@@ -22515,7 +22517,7 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
- var _componentsNodesCluster = __webpack_require__(113);
+ var _componentsNodesCluster = __webpack_require__(84);
var _componentsNodesCluster2 = _interopRequireDefault(_componentsNodesCluster);
@@ -25094,8 +25096,8 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- var Node = __webpack_require__(74);
- var Edge = __webpack_require__(76);
+ var Node = __webpack_require__(73);
+ var Edge = __webpack_require__(75);
var util = __webpack_require__(2);
var SelectionHandler = (function () {
@@ -34285,572 +34287,507 @@ 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; }; })();
+ 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 Hammer = __webpack_require__(41);
- var hammerUtil = __webpack_require__(49);
+ var _sharedLabel = __webpack_require__(74);
+
+ var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
+
+ var _nodesShapesBox = __webpack_require__(91);
+
+ var _nodesShapesBox2 = _interopRequireDefault(_nodesShapesBox);
+
+ var _nodesShapesCircle = __webpack_require__(92);
+
+ var _nodesShapesCircle2 = _interopRequireDefault(_nodesShapesCircle);
+
+ var _nodesShapesCircularImage = __webpack_require__(93);
+
+ var _nodesShapesCircularImage2 = _interopRequireDefault(_nodesShapesCircularImage);
+
+ var _nodesShapesDatabase = __webpack_require__(94);
+
+ var _nodesShapesDatabase2 = _interopRequireDefault(_nodesShapesDatabase);
+
+ var _nodesShapesDiamond = __webpack_require__(95);
+
+ var _nodesShapesDiamond2 = _interopRequireDefault(_nodesShapesDiamond);
+
+ var _nodesShapesDot = __webpack_require__(96);
+
+ var _nodesShapesDot2 = _interopRequireDefault(_nodesShapesDot);
+
+ var _nodesShapesEllipse = __webpack_require__(97);
+
+ var _nodesShapesEllipse2 = _interopRequireDefault(_nodesShapesEllipse);
+
+ var _nodesShapesIcon = __webpack_require__(98);
+
+ var _nodesShapesIcon2 = _interopRequireDefault(_nodesShapesIcon);
+
+ var _nodesShapesImage = __webpack_require__(99);
+
+ var _nodesShapesImage2 = _interopRequireDefault(_nodesShapesImage);
+
+ var _nodesShapesSquare = __webpack_require__(100);
+
+ var _nodesShapesSquare2 = _interopRequireDefault(_nodesShapesSquare);
+
+ var _nodesShapesStar = __webpack_require__(101);
+
+ var _nodesShapesStar2 = _interopRequireDefault(_nodesShapesStar);
+
+ var _nodesShapesText = __webpack_require__(102);
+
+ var _nodesShapesText2 = _interopRequireDefault(_nodesShapesText);
+
+ var _nodesShapesTriangle = __webpack_require__(103);
+
+ var _nodesShapesTriangle2 = _interopRequireDefault(_nodesShapesTriangle);
+
+ var _nodesShapesTriangleDown = __webpack_require__(104);
+
+ var _nodesShapesTriangleDown2 = _interopRequireDefault(_nodesShapesTriangleDown);
+
+ var _sharedValidator = __webpack_require__(46);
+
+ var _sharedValidator2 = _interopRequireDefault(_sharedValidator);
+
var util = __webpack_require__(2);
- var ColorPicker = (function () {
- function ColorPicker() {
- var pixelRatio = arguments[0] === undefined ? 1 : arguments[0];
+ /**
+ * @class Node
+ * A node. A node can be connected to other nodes via one or multiple edges.
+ * @param {object} options An object containing options for the node. All
+ * options are optional, except for the id.
+ * {number} id Id of the node. Required
+ * {string} label Text label for the node
+ * {number} x Horizontal position of the node
+ * {number} y Vertical position of the node
+ * {string} shape Node shape, available:
+ * "database", "circle", "ellipse",
+ * "box", "image", "text", "dot",
+ * "star", "triangle", "triangleDown",
+ * "square", "icon"
+ * {string} image An image url
+ * {string} title An title text, can be HTML
+ * {anytype} group A group name or number
+ * @param {Network.Images} imagelist A list with images. Only needed
+ * when the node has an image
+ * @param {Network.Groups} grouplist A list with groups. Needed for
+ * retrieving group options
+ * @param {Object} constants An object with default values for
+ * example for the color
+ *
+ */
- _classCallCheck(this, ColorPicker);
+ var Node = (function () {
+ function Node(options, body, imagelist, grouplist, globalOptions) {
+ _classCallCheck(this, Node);
- this.pixelRatio = pixelRatio;
- this.generated = false;
- this.centerCoordinates = { x: 289 / 2, y: 289 / 2 };
- this.r = 289 * 0.49;
- this.color = { r: 255, g: 255, b: 255, a: 1 };
- this.hueCircle = undefined;
- this.initialColor = { r: 255, g: 255, b: 255, a: 1 };
- this.previousColor = undefined;
- this.applied = false;
+ this.options = util.bridgeObject(globalOptions);
+ this.body = body;
- // bound by
- this.updateCallback = function () {};
+ this.edges = []; // all edges connected to this node
- // create all DOM elements
- this._create();
+ // set defaults for the options
+ this.id = undefined;
+ this.imagelist = imagelist;
+ this.grouplist = grouplist;
+
+ // state options
+ this.x = undefined;
+ this.y = undefined;
+ this.baseSize = this.options.size;
+ this.baseFontSize = this.options.font.size;
+ this.predefinedPosition = false; // used to check if initial fit should just take the range or approximate
+ this.selected = false;
+ this.hover = false;
+
+ this.labelModule = new _sharedLabel2['default'](this.body, this.options);
+ this.setOptions(options);
}
- _createClass(ColorPicker, [{
- key: 'insertTo',
+ _createClass(Node, [{
+ key: 'attachEdge',
/**
- * this inserts the colorPicker into a div from the DOM
- * @param container
+ * Attach a edge to the node
+ * @param {Edge} edge
*/
- value: function insertTo(container) {
- if (this.hammer !== undefined) {
- this.hammer.destroy();
- this.hammer = undefined;
+ value: function attachEdge(edge) {
+ if (this.edges.indexOf(edge) === -1) {
+ this.edges.push(edge);
}
- this.container = container;
- this.container.appendChild(this.frame);
- this._bindHammer();
-
- this._setSize();
}
}, {
- key: 'setCallback',
+ key: 'detachEdge',
/**
- * the callback is executed on apply and save. Bind it to the application
- * @param callback
+ * Detach a edge from the node
+ * @param {Edge} edge
*/
- value: function setCallback(callback) {
- if (typeof callback === 'function') {
- this.updateCallback = callback;
- } else {
- throw new Error('Function attempted to set as colorPicker callback is not a function.');
+ value: function detachEdge(edge) {
+ var index = this.edges.indexOf(edge);
+ if (index != -1) {
+ this.edges.splice(index, 1);
}
}
}, {
- key: '_isColorString',
- value: function _isColorString(color) {
- var htmlColors = { black: '#000000', navy: '#000080', darkblue: '#00008B', mediumblue: '#0000CD', blue: '#0000FF', darkgreen: '#006400', green: '#008000', teal: '#008080', darkcyan: '#008B8B', deepskyblue: '#00BFFF', darkturquoise: '#00CED1', mediumspringgreen: '#00FA9A', lime: '#00FF00', springgreen: '#00FF7F', aqua: '#00FFFF', cyan: '#00FFFF', midnightblue: '#191970', dodgerblue: '#1E90FF', lightseagreen: '#20B2AA', forestgreen: '#228B22', seagreen: '#2E8B57', darkslategray: '#2F4F4F', limegreen: '#32CD32', mediumseagreen: '#3CB371', turquoise: '#40E0D0', royalblue: '#4169E1', steelblue: '#4682B4', darkslateblue: '#483D8B', mediumturquoise: '#48D1CC', indigo: '#4B0082', darkolivegreen: '#556B2F', cadetblue: '#5F9EA0', cornflowerblue: '#6495ED', mediumaquamarine: '#66CDAA', dimgray: '#696969', slateblue: '#6A5ACD', olivedrab: '#6B8E23', slategray: '#708090', lightslategray: '#778899', mediumslateblue: '#7B68EE', lawngreen: '#7CFC00', chartreuse: '#7FFF00', aquamarine: '#7FFFD4', maroon: '#800000', purple: '#800080', olive: '#808000', gray: '#808080', skyblue: '#87CEEB', lightskyblue: '#87CEFA', blueviolet: '#8A2BE2', darkred: '#8B0000', darkmagenta: '#8B008B', saddlebrown: '#8B4513', darkseagreen: '#8FBC8F', lightgreen: '#90EE90', mediumpurple: '#9370D8', darkviolet: '#9400D3', palegreen: '#98FB98', darkorchid: '#9932CC', yellowgreen: '#9ACD32', sienna: '#A0522D', brown: '#A52A2A', darkgray: '#A9A9A9', lightblue: '#ADD8E6', greenyellow: '#ADFF2F', paleturquoise: '#AFEEEE', lightsteelblue: '#B0C4DE', powderblue: '#B0E0E6', firebrick: '#B22222', darkgoldenrod: '#B8860B', mediumorchid: '#BA55D3', rosybrown: '#BC8F8F', darkkhaki: '#BDB76B', silver: '#C0C0C0', mediumvioletred: '#C71585', indianred: '#CD5C5C', peru: '#CD853F', chocolate: '#D2691E', tan: '#D2B48C', lightgrey: '#D3D3D3', palevioletred: '#D87093', thistle: '#D8BFD8', orchid: '#DA70D6', goldenrod: '#DAA520', crimson: '#DC143C', gainsboro: '#DCDCDC', plum: '#DDA0DD', burlywood: '#DEB887', lightcyan: '#E0FFFF', lavender: '#E6E6FA', darksalmon: '#E9967A', violet: '#EE82EE', palegoldenrod: '#EEE8AA', lightcoral: '#F08080', khaki: '#F0E68C', aliceblue: '#F0F8FF', honeydew: '#F0FFF0', azure: '#F0FFFF', sandybrown: '#F4A460', wheat: '#F5DEB3', beige: '#F5F5DC', whitesmoke: '#F5F5F5', mintcream: '#F5FFFA', ghostwhite: '#F8F8FF', salmon: '#FA8072', antiquewhite: '#FAEBD7', linen: '#FAF0E6', lightgoldenrodyellow: '#FAFAD2', oldlace: '#FDF5E6', red: '#FF0000', fuchsia: '#FF00FF', magenta: '#FF00FF', deeppink: '#FF1493', orangered: '#FF4500', tomato: '#FF6347', hotpink: '#FF69B4', coral: '#FF7F50', darkorange: '#FF8C00', lightsalmon: '#FFA07A', orange: '#FFA500', lightpink: '#FFB6C1', pink: '#FFC0CB', gold: '#FFD700', peachpuff: '#FFDAB9', navajowhite: '#FFDEAD', moccasin: '#FFE4B5', bisque: '#FFE4C4', mistyrose: '#FFE4E1', blanchedalmond: '#FFEBCD', papayawhip: '#FFEFD5', lavenderblush: '#FFF0F5', seashell: '#FFF5EE', cornsilk: '#FFF8DC', lemonchiffon: '#FFFACD', floralwhite: '#FFFAF0', snow: '#FFFAFA', yellow: '#FFFF00', lightyellow: '#FFFFE0', ivory: '#FFFFF0', white: '#FFFFFF' };
- if (typeof color === 'string') {
- return htmlColors[color];
- }
+ key: 'togglePhysics',
+
+ /**
+ * Enable or disable the physics.
+ * @param status
+ */
+ value: function togglePhysics(status) {
+ this.options.physics = status;
}
}, {
- key: 'setColor',
+ key: 'setOptions',
/**
- * Set the color of the colorPicker
- * Supported formats:
- * 'red' --> HTML color string
- * '#ffffff' --> hex string
- * 'rbg(255,255,255)' --> rgb string
- * 'rgba(255,255,255,1.0)' --> rgba string
- * {r:255,g:255,b:255} --> rgb object
- * {r:255,g:255,b:255,a:1.0} --> rgba object
- * @param color
- * @param setInitial
+ * Set or overwrite options for the node
+ * @param {Object} options an object with options
+ * @param {Object} constants and object with default, global options
*/
- value: function setColor(color) {
- var setInitial = arguments[1] === undefined ? true : arguments[1];
-
- if (color === 'none') {
+ value: function setOptions(options) {
+ if (!options) {
return;
}
+ // basic options
+ if (options.id !== undefined) {
+ this.id = options.id;
+ }
- var rgba = undefined;
+ if (this.id === undefined) {
+ throw 'Node must have an id';
+ }
- // if a html color shorthand is used, convert to hex
- var htmlColor = this._isColorString(color);
- if (htmlColor !== undefined) {
- color = htmlColor;
+ // set these options locally
+ if (options.x !== undefined) {
+ this.x = parseInt(options.x);this.predefinedPosition = true;
+ }
+ if (options.y !== undefined) {
+ this.y = parseInt(options.y);this.predefinedPosition = true;
+ }
+ if (options.size !== undefined) {
+ this.baseSize = options.size;
+ }
+ if (options.value !== undefined) {
+ options.value = parseInt(options.value);
}
- // check format
- if (util.isString(color) === true) {
- if (util.isValidRGB(color) === true) {
- var rgbaArray = color.substr(4).substr(0, color.length - 5).split(',');
- rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: 1 };
- } else if (util.isValidRGBA(color) === true) {
- var rgbaArray = color.substr(5).substr(0, color.length - 6).split(',');
- rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: rgbaArray[3] };
- } else if (util.isValidHex(color) === true) {
- var rgbObj = util.hexToRGB(color);
- rgba = { r: rgbObj.r, g: rgbObj.g, b: rgbObj.b, a: 1 };
- }
- } else {
- if (color instanceof Object) {
- if (color.r !== undefined && color.g !== undefined && color.b !== undefined) {
- var alpha = color.a !== undefined ? color.a : '1.0';
- rgba = { r: color.r, g: color.g, b: color.b, a: alpha };
- }
+ // copy group options
+ if (typeof options.group === 'number' || typeof options.group === 'string' && options.group != '') {
+ var groupObj = this.grouplist.get(options.group);
+ util.deepExtend(this.options, groupObj);
+ // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
+ this.options.color = util.parseColor(this.options.color);
+ }
+
+ // this transforms all shorthands into fully defined options
+ Node.parseOptions(this.options, options, true);
+
+ // load the images
+ if (this.options.image !== undefined && this.options.image != '') {
+ if (this.imagelist) {
+ this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
+ } else {
+ throw 'No imagelist provided';
}
}
- // set color
- if (rgba === undefined) {
- throw new Error('Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: ' + JSON.stringify(color));
- } else {
- this._setColor(rgba, setInitial);
+ this.updateShape();
+ this.updateLabelModule();
+
+ // reset the size of the node, this can be changed
+ this._reset();
+ }
+ }, {
+ key: 'updateLabelModule',
+ value: function updateLabelModule() {
+ if (this.options.label === undefined || this.options.label === null) {
+ this.options.label = '';
+ }
+ this.labelModule.setOptions(this.options, true);
+ if (this.labelModule.baseSize !== undefined) {
+ this.baseFontSize = this.labelModule.baseSize;
}
}
}, {
- key: 'show',
+ key: 'updateShape',
+ value: function updateShape() {
+ // choose draw method depending on the shape
+ switch (this.options.shape) {
+ case 'box':
+ this.shape = new _nodesShapesBox2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'circle':
+ this.shape = new _nodesShapesCircle2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'circularImage':
+ this.shape = new _nodesShapesCircularImage2['default'](this.options, this.body, this.labelModule, this.imageObj);
+ break;
+ case 'database':
+ this.shape = new _nodesShapesDatabase2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'diamond':
+ this.shape = new _nodesShapesDiamond2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'dot':
+ this.shape = new _nodesShapesDot2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'ellipse':
+ this.shape = new _nodesShapesEllipse2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'icon':
+ this.shape = new _nodesShapesIcon2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'image':
+ this.shape = new _nodesShapesImage2['default'](this.options, this.body, this.labelModule, this.imageObj);
+ break;
+ case 'square':
+ this.shape = new _nodesShapesSquare2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'star':
+ this.shape = new _nodesShapesStar2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'text':
+ this.shape = new _nodesShapesText2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'triangle':
+ this.shape = new _nodesShapesTriangle2['default'](this.options, this.body, this.labelModule);
+ break;
+ case 'triangleDown':
+ this.shape = new _nodesShapesTriangleDown2['default'](this.options, this.body, this.labelModule);
+ break;
+ default:
+ this.shape = new _nodesShapesEllipse2['default'](this.options, this.body, this.labelModule);
+ break;
+ }
+ this._reset();
+ }
+ }, {
+ key: 'select',
/**
- * this shows the color picker at a location. The hue circle is constructed once and stored.
- * @param x
- * @param y
+ * select this node
*/
- value: function show(x, y) {
- this.applied = false;
- this.frame.style.display = 'block';
- this.frame.style.top = y + 'px';
- this.frame.style.left = x + 'px';
- this._generateHueCircle();
+ value: function select() {
+ this.selected = true;
+ this._reset();
}
}, {
- key: '_hide',
+ key: 'unselect',
- // ------------------------------------------ PRIVATE ----------------------------- //
+ /**
+ * unselect this node
+ */
+ value: function unselect() {
+ this.selected = false;
+ this._reset();
+ }
+ }, {
+ key: '_reset',
/**
- * Hide the picker. Is called by the cancel button.
- * Optional boolean to store the previous color for easy access later on.
- * @param storePrevious
+ * Reset the calculated size of the node, forces it to recalculate its size
* @private
*/
- value: function _hide() {
- var storePrevious = arguments[0] === undefined ? true : arguments[0];
-
- // store the previous color for next time;
- if (storePrevious === true) {
- this.previousColor = util.extend({}, this.color);
- }
-
- if (this.applied === true) {
- this.updateCallback(this.initialColor);
- }
+ value: function _reset() {
+ this.shape.width = undefined;
+ this.shape.height = undefined;
+ }
+ }, {
+ key: 'getTitle',
- this.frame.style.display = 'none';
+ /**
+ * get the title of this node.
+ * @return {string} title The title of the node, or undefined when no title
+ * has been set.
+ */
+ value: function getTitle() {
+ return this.options.title;
}
}, {
- key: '_save',
+ key: 'distanceToBorder',
/**
- * bound to the save button. Saves and hides.
- * @private
+ * Calculate the distance to the border of the Node
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} angle Angle in radians
+ * @returns {number} distance Distance to the border in pixels
*/
- value: function _save() {
- this.updateCallback(this.color);
- this.applied = false;
- this._hide();
+ value: function distanceToBorder(ctx, angle) {
+ return this.shape.distanceToBorder(ctx, angle);
}
}, {
- key: '_apply',
+ key: 'isFixed',
/**
- * Bound to apply button. Saves but does not close. Is undone by the cancel button.
- * @private
+ * Check if this node has a fixed x and y position
+ * @return {boolean} true if fixed, false if not
*/
- value: function _apply() {
- this.applied = true;
- this.updateCallback(this.color);
- this._updatePicker(this.color);
+ value: function isFixed() {
+ return this.options.fixed.x && this.options.fixed.y;
}
}, {
- key: '_loadLast',
+ key: 'isSelected',
/**
- * load the color from the previous session.
- * @private
+ * check if this node is selecte
+ * @return {boolean} selected True if node is selected, else false
*/
- value: function _loadLast() {
- if (this.previousColor !== undefined) {
- this.setColor(this.previousColor, false);
- } else {
- alert('There is no last color to load...');
- }
+ value: function isSelected() {
+ return this.selected;
}
}, {
- key: '_setColor',
+ key: 'getValue',
/**
- * set the color, place the picker
- * @param rgba
- * @param setInitial
- * @private
+ * Retrieve the value of the node. Can be undefined
+ * @return {Number} value
*/
- value: function _setColor(rgba) {
- var setInitial = arguments[1] === undefined ? true : arguments[1];
+ value: function getValue() {
+ return this.options.value;
+ }
+ }, {
+ key: 'setValueRange',
- // store the initial color
- if (setInitial === true) {
- this.initialColor = util.extend({}, rgba);
+ /**
+ * Adjust the value range of the node. The node will adjust it's size
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
+ */
+ value: function setValueRange(min, max, total) {
+ if (this.options.value !== undefined) {
+ var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
+ var sizeDiff = this.options.scaling.max - this.options.scaling.min;
+ if (this.options.scaling.label.enabled === true) {
+ var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
+ this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
+ }
+ this.options.size = this.options.scaling.min + scale * sizeDiff;
+ } else {
+ this.options.size = this.baseSize;
+ this.options.font.size = this.baseFontSize;
}
-
- this.color = rgba;
- var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
-
- var angleConvert = 2 * Math.PI;
- var radius = this.r * hsv.s;
- var x = this.centerCoordinates.x + radius * Math.sin(angleConvert * hsv.h);
- var y = this.centerCoordinates.y + radius * Math.cos(angleConvert * hsv.h);
-
- this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px';
- this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px';
-
- this._updatePicker(rgba);
}
}, {
- key: '_setOpacity',
+ key: 'draw',
/**
- * bound to opacity control
- * @param value
- * @private
+ * Draw this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
*/
- value: function _setOpacity(value) {
- this.color.a = value / 100;
- this._updatePicker(this.color);
+ value: function draw(ctx) {
+ this.shape.draw(ctx, this.x, this.y, this.selected, this.hover);
}
}, {
- key: '_setBrightness',
+ key: 'updateBoundingBox',
/**
- * bound to brightness control
- * @param value
- * @private
+ * Update the bounding box of the shape
*/
- value: function _setBrightness(value) {
- var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
- hsv.v = value / 100;
- var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
- rgba['a'] = this.color.a;
- this.color = rgba;
- this._updatePicker();
+ value: function updateBoundingBox() {
+ this.shape.updateBoundingBox(this.x, this.y);
}
}, {
- key: '_updatePicker',
+ key: 'resize',
/**
- * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
- * @param rgba
- * @private
- */
- value: function _updatePicker() {
- var rgba = arguments[0] === undefined ? this.color : arguments[0];
-
- var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
- var ctx = this.colorPickerCanvas.getContext('2d');
- if (this.pixelRation === undefined) {
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
- }
- ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-
- // clear the canvas
- var w = this.colorPickerCanvas.clientWidth;
- var h = this.colorPickerCanvas.clientHeight;
- ctx.clearRect(0, 0, w, h);
-
- ctx.putImageData(this.hueCircle, 0, 0);
- ctx.fillStyle = 'rgba(0,0,0,' + (1 - hsv.v) + ')';
- ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
- ctx.fill();
-
- this.brightnessRange.value = 100 * hsv.v;
- this.opacityRange.value = 100 * rgba.a;
-
- this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
- this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
+ * Recalculate the size of this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ */
+ value: function resize(ctx) {
+ this.shape.resize(ctx);
}
}, {
- key: '_setSize',
+ key: 'isOverlappingWith',
/**
- * used by create to set the size of the canvas.
- * @private
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top, right, bottom
+ * @return {boolean} True if location is located on node
*/
- value: function _setSize() {
- this.colorPickerCanvas.style.width = '100%';
- this.colorPickerCanvas.style.height = '100%';
-
- this.colorPickerCanvas.width = 289 * this.pixelRatio;
- this.colorPickerCanvas.height = 289 * this.pixelRatio;
+ value: function isOverlappingWith(obj) {
+ return this.shape.left < obj.right && this.shape.left + this.shape.width > obj.left && this.shape.top < obj.bottom && this.shape.top + this.shape.height > obj.top;
}
}, {
- key: '_create',
+ key: 'isBoundingBoxOverlappingWith',
/**
- * create all dom elements
- * TODO: cleanup, lots of similar dom elements
- * @private
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top, right, bottom
+ * @return {boolean} True if location is located on node
*/
- value: function _create() {
- this.frame = document.createElement('div');
- this.frame.className = 'vis-color-picker';
-
- this.colorPickerDiv = document.createElement('div');
- this.colorPickerSelector = document.createElement('div');
- this.colorPickerSelector.className = 'vis-selector';
- this.colorPickerDiv.appendChild(this.colorPickerSelector);
-
- this.colorPickerCanvas = document.createElement('canvas');
- this.colorPickerDiv.appendChild(this.colorPickerCanvas);
-
- if (!this.colorPickerCanvas.getContext) {
- var noCanvas = document.createElement('DIV');
- noCanvas.style.color = 'red';
- noCanvas.style.fontWeight = 'bold';
- noCanvas.style.padding = '10px';
- noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
- this.colorPickerCanvas.appendChild(noCanvas);
- } else {
- var ctx = this.colorPickerCanvas.getContext('2d');
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
-
- this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
- }
-
- this.colorPickerDiv.className = 'vis-color';
-
- this.opacityDiv = document.createElement('div');
- this.opacityDiv.className = 'vis-opacity';
-
- this.brightnessDiv = document.createElement('div');
- this.brightnessDiv.className = 'vis-brightness';
-
- this.arrowDiv = document.createElement('div');
- this.arrowDiv.className = 'vis-arrow';
-
- this.opacityRange = document.createElement('input');
- this.opacityRange.type = 'range';
- this.opacityRange.min = '0';
- this.opacityRange.max = '100';
- this.opacityRange.value = '100';
- this.opacityRange.className = 'vis-range';
-
- this.brightnessRange = document.createElement('input');
- this.brightnessRange.type = 'range';
- this.brightnessRange.min = '0';
- this.brightnessRange.max = '100';
- this.brightnessRange.value = '100';
- this.brightnessRange.className = 'vis-range';
-
- this.opacityDiv.appendChild(this.opacityRange);
- this.brightnessDiv.appendChild(this.brightnessRange);
-
- var me = this;
- this.opacityRange.onchange = function () {
- me._setOpacity(this.value);
- };
- this.opacityRange.oninput = function () {
- me._setOpacity(this.value);
- };
- this.brightnessRange.onchange = function () {
- me._setBrightness(this.value);
- };
- this.brightnessRange.oninput = function () {
- me._setBrightness(this.value);
- };
-
- this.brightnessLabel = document.createElement('div');
- this.brightnessLabel.className = 'vis-label vis-brightness';
- this.brightnessLabel.innerHTML = 'brightness:';
-
- this.opacityLabel = document.createElement('div');
- this.opacityLabel.className = 'vis-label vis-opacity';
- this.opacityLabel.innerHTML = 'opacity:';
-
- this.newColorDiv = document.createElement('div');
- this.newColorDiv.className = 'vis-new-color';
- this.newColorDiv.innerHTML = 'new';
-
- this.initialColorDiv = document.createElement('div');
- this.initialColorDiv.className = 'vis-initial-color';
- this.initialColorDiv.innerHTML = 'initial';
-
- this.cancelButton = document.createElement('div');
- this.cancelButton.className = 'vis-button vis-cancel';
- this.cancelButton.innerHTML = 'cancel';
- this.cancelButton.onclick = this._hide.bind(this, false);
-
- this.applyButton = document.createElement('div');
- this.applyButton.className = 'vis-button vis-apply';
- this.applyButton.innerHTML = 'apply';
- this.applyButton.onclick = this._apply.bind(this);
-
- this.saveButton = document.createElement('div');
- this.saveButton.className = 'vis-button vis-save';
- this.saveButton.innerHTML = 'save';
- this.saveButton.onclick = this._save.bind(this);
-
- this.loadButton = document.createElement('div');
- this.loadButton.className = 'vis-button vis-load';
- this.loadButton.innerHTML = 'load last';
- this.loadButton.onclick = this._loadLast.bind(this);
-
- this.frame.appendChild(this.colorPickerDiv);
- this.frame.appendChild(this.arrowDiv);
- this.frame.appendChild(this.brightnessLabel);
- this.frame.appendChild(this.brightnessDiv);
- this.frame.appendChild(this.opacityLabel);
- this.frame.appendChild(this.opacityDiv);
- this.frame.appendChild(this.newColorDiv);
- this.frame.appendChild(this.initialColorDiv);
-
- this.frame.appendChild(this.cancelButton);
- this.frame.appendChild(this.applyButton);
- this.frame.appendChild(this.saveButton);
- this.frame.appendChild(this.loadButton);
+ value: function isBoundingBoxOverlappingWith(obj) {
+ return this.shape.boundingBox.left < obj.right && this.shape.boundingBox.right > obj.left && this.shape.boundingBox.top < obj.bottom && this.shape.boundingBox.bottom > obj.top;
}
- }, {
- key: '_bindHammer',
+ }], [{
+ key: 'parseOptions',
/**
- * bind hammer to the color picker
- * @private
+ * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
+ * Static so it can also be used by the handler.
+ * @param parentOptions
+ * @param newOptions
*/
- value: function _bindHammer() {
- var _this = this;
-
- this.drag = {};
- this.pinch = {};
- this.hammer = new Hammer(this.colorPickerCanvas);
- this.hammer.get('pinch').set({ enable: true });
+ value: function parseOptions(parentOptions, newOptions) {
+ var allowDeletion = arguments[2] === undefined ? false : arguments[2];
- hammerUtil.onTouch(this.hammer, function (event) {
- _this._moveSelector(event);
- });
- this.hammer.on('tap', function (event) {
- _this._moveSelector(event);
- });
- this.hammer.on('panstart', function (event) {
- _this._moveSelector(event);
- });
- this.hammer.on('panmove', function (event) {
- _this._moveSelector(event);
- });
- this.hammer.on('panend', function (event) {
- _this._moveSelector(event);
- });
- }
- }, {
- key: '_generateHueCircle',
+ var fields = ['color', 'font', 'fixed', 'shadow'];
+ util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
- /**
- * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown.
- * @private
- */
- value: function _generateHueCircle() {
- if (this.generated === false) {
- var ctx = this.colorPickerCanvas.getContext('2d');
- if (this.pixelRation === undefined) {
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
- }
- ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+ // merge the shadow options into the parent.
+ util.mergeOptions(parentOptions, newOptions, 'shadow');
- // clear the canvas
- var w = this.colorPickerCanvas.clientWidth;
- var h = this.colorPickerCanvas.clientHeight;
- ctx.clearRect(0, 0, w, h);
+ // individual shape newOptions
+ if (newOptions.color !== undefined && newOptions.color !== null) {
+ var parsedColor = util.parseColor(newOptions.color);
+ util.fillIfDefined(parentOptions.color, parsedColor);
+ } else if (allowDeletion === true && newOptions.color === null) {
+ parentOptions.color = undefined;
+ delete parentOptions.color;
+ }
- // draw hue circle
- var x = undefined,
- y = undefined,
- hue = undefined,
- sat = undefined;
- this.centerCoordinates = { x: w * 0.5, y: h * 0.5 };
- this.r = 0.49 * w;
- var angleConvert = 2 * Math.PI / 360;
- var hfac = 1 / 360;
- var sfac = 1 / this.r;
- var rgb = undefined;
- for (hue = 0; hue < 360; hue++) {
- for (sat = 0; sat < this.r; sat++) {
- x = this.centerCoordinates.x + sat * Math.sin(angleConvert * hue);
- y = this.centerCoordinates.y + sat * Math.cos(angleConvert * hue);
- rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1);
- ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
- ctx.fillRect(x - 0.5, y - 0.5, 2, 2);
+ // handle the fixed options
+ if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
+ if (typeof newOptions.fixed === 'boolean') {
+ parentOptions.fixed.x = newOptions.fixed;
+ parentOptions.fixed.y = newOptions.fixed;
+ } else {
+ if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
+ parentOptions.fixed.x = newOptions.fixed.x;
+ }
+ if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
+ parentOptions.fixed.y = newOptions.fixed.y;
}
}
- ctx.strokeStyle = 'rgba(0,0,0,1)';
- ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
- ctx.stroke();
-
- this.hueCircle = ctx.getImageData(0, 0, w, h);
}
- this.generated = true;
- }
- }, {
- key: '_moveSelector',
-
- /**
- * move the selector. This is called by hammer functions.
- *
- * @param event
- * @private
- */
- value: function _moveSelector(event) {
- var rect = this.colorPickerDiv.getBoundingClientRect();
- var left = event.center.x - rect.left;
- var top = event.center.y - rect.top;
-
- var centerY = 0.5 * this.colorPickerDiv.clientHeight;
- var centerX = 0.5 * this.colorPickerDiv.clientWidth;
-
- var x = left - centerX;
- var y = top - centerY;
-
- var angle = Math.atan2(x, y);
- var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
-
- var newTop = Math.cos(angle) * radius + centerY;
- var newLeft = Math.sin(angle) * radius + centerX;
-
- this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
- this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
- // set color
- var h = angle / (2 * Math.PI);
- h = h < 0 ? h + 1 : h;
- var s = radius / this.r;
- var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
- hsv.h = h;
- hsv.s = s;
- var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
- rgba['a'] = this.color.a;
- this.color = rgba;
+ // handle the font options
+ if (newOptions.font !== undefined) {
+ _sharedLabel2['default'].parseOptions(parentOptions.font, newOptions);
+ }
- // update previews
- this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
- this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
+ // handle the scaling options, specifically the label part
+ if (newOptions.scaling !== undefined) {
+ util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
+ }
}
}]);
- return ColorPicker;
+ return Node;
})();
- exports['default'] = ColorPicker;
+ exports['default'] = Node;
module.exports = exports['default'];
/***/ },
@@ -34865,352 +34802,560 @@ 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; }; })();
- 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'); } }
- var _sharedLabel = __webpack_require__(75);
-
- var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
-
- var _nodesShapesBox = __webpack_require__(91);
-
- var _nodesShapesBox2 = _interopRequireDefault(_nodesShapesBox);
+ var util = __webpack_require__(2);
- var _nodesShapesCircle = __webpack_require__(92);
+ var Label = (function () {
+ function Label(body, options) {
+ _classCallCheck(this, Label);
- var _nodesShapesCircle2 = _interopRequireDefault(_nodesShapesCircle);
+ this.body = body;
- var _nodesShapesCircularImage = __webpack_require__(93);
+ this.baseSize = undefined;
+ this.setOptions(options);
+ this.size = { top: 0, left: 0, width: 0, height: 0, yLine: 0 }; // could be cached
+ }
- var _nodesShapesCircularImage2 = _interopRequireDefault(_nodesShapesCircularImage);
+ _createClass(Label, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ var allowDeletion = arguments[1] === undefined ? false : arguments[1];
- var _nodesShapesDatabase = __webpack_require__(94);
+ this.options = options;
- var _nodesShapesDatabase2 = _interopRequireDefault(_nodesShapesDatabase);
+ if (options.label !== undefined) {
+ this.labelDirty = true;
+ }
- var _nodesShapesDiamond = __webpack_require__(95);
+ if (options.font !== undefined) {
+ Label.parseOptions(this.options.font, options, allowDeletion);
+ if (typeof options.font === 'string') {
+ this.baseSize = this.options.font.size;
+ } else if (typeof options.font === 'object') {
+ if (options.font.size !== undefined) {
+ this.baseSize = options.font.size;
+ }
+ }
+ }
+ }
+ }, {
+ key: 'draw',
- var _nodesShapesDiamond2 = _interopRequireDefault(_nodesShapesDiamond);
+ /**
+ * Main function. This is called from anything that wants to draw a label.
+ * @param ctx
+ * @param x
+ * @param y
+ * @param selected
+ * @param baseline
+ */
+ value: function draw(ctx, x, y, selected) {
+ var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
- var _nodesShapesDot = __webpack_require__(96);
+ // if no label, return
+ if (this.options.label === undefined) return;
- var _nodesShapesDot2 = _interopRequireDefault(_nodesShapesDot);
+ // check if we have to render the label
+ var viewFontSize = this.options.font.size * this.body.view.scale;
+ if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1) return;
- var _nodesShapesEllipse = __webpack_require__(97);
+ // update the size cache if required
+ this.calculateLabelSize(ctx, selected, x, y, baseline);
- var _nodesShapesEllipse2 = _interopRequireDefault(_nodesShapesEllipse);
+ // create the fontfill background
+ this._drawBackground(ctx);
+ // draw text
+ this._drawText(ctx, selected, x, y, baseline);
+ }
+ }, {
+ key: '_drawBackground',
- var _nodesShapesIcon = __webpack_require__(98);
+ /**
+ * Draws the label background
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _drawBackground(ctx) {
+ if (this.options.font.background !== undefined && this.options.font.background !== 'none') {
+ ctx.fillStyle = this.options.font.background;
- var _nodesShapesIcon2 = _interopRequireDefault(_nodesShapesIcon);
+ var lineMargin = 2;
- var _nodesShapesImage = __webpack_require__(99);
+ switch (this.options.font.align) {
+ case 'middle':
+ ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
+ break;
+ case 'top':
+ ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
+ break;
+ case 'bottom':
+ ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
+ break;
+ default:
+ ctx.fillRect(this.size.left, this.size.top - 0.5 * lineMargin, this.size.width, this.size.height);
+ break;
+ }
+ }
+ }
+ }, {
+ key: '_drawText',
- var _nodesShapesImage2 = _interopRequireDefault(_nodesShapesImage);
+ /**
+ *
+ * @param ctx
+ * @param x
+ * @param baseline
+ * @private
+ */
+ value: function _drawText(ctx, selected, x, y) {
+ var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
- var _nodesShapesSquare = __webpack_require__(100);
+ var fontSize = this.options.font.size;
+ var viewFontSize = fontSize * this.body.view.scale;
+ // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
+ if (viewFontSize >= this.options.scaling.label.maxVisible) {
+ fontSize = Number(this.options.scaling.label.maxVisible) / this.body.view.scale;
+ }
- var _nodesShapesSquare2 = _interopRequireDefault(_nodesShapesSquare);
+ var yLine = this.size.yLine;
- var _nodesShapesStar = __webpack_require__(101);
+ var _getColor = this._getColor(viewFontSize);
- var _nodesShapesStar2 = _interopRequireDefault(_nodesShapesStar);
+ var _getColor2 = _slicedToArray(_getColor, 2);
- var _nodesShapesText = __webpack_require__(102);
+ var fontColor = _getColor2[0];
+ var strokeColor = _getColor2[1];
- var _nodesShapesText2 = _interopRequireDefault(_nodesShapesText);
+ var _setAlignment = this._setAlignment(ctx, x, yLine, baseline);
- var _nodesShapesTriangle = __webpack_require__(103);
+ var _setAlignment2 = _slicedToArray(_setAlignment, 2);
- var _nodesShapesTriangle2 = _interopRequireDefault(_nodesShapesTriangle);
+ x = _setAlignment2[0];
+ yLine = _setAlignment2[1];
- var _nodesShapesTriangleDown = __webpack_require__(104);
+ // configure context for drawing the text
+ ctx.font = (selected ? 'bold ' : '') + fontSize + 'px ' + this.options.font.face;
+ ctx.fillStyle = fontColor;
+ ctx.textAlign = 'center';
- var _nodesShapesTriangleDown2 = _interopRequireDefault(_nodesShapesTriangleDown);
+ // set the strokeWidth
+ if (this.options.font.strokeWidth > 0) {
+ ctx.lineWidth = this.options.font.strokeWidth;
+ ctx.strokeStyle = strokeColor;
+ ctx.lineJoin = 'round';
+ }
- var _sharedValidator = __webpack_require__(46);
+ // draw the text
+ for (var i = 0; i < this.lineCount; i++) {
+ if (this.options.font.strokeWidth > 0) {
+ ctx.strokeText(this.lines[i], x, yLine);
+ }
+ ctx.fillText(this.lines[i], x, yLine);
+ yLine += fontSize;
+ }
+ }
+ }, {
+ key: '_setAlignment',
+ value: function _setAlignment(ctx, x, yLine, baseline) {
+ // check for label alignment (for edges)
+ // TODO: make alignment for nodes
+ if (this.options.font.align !== 'horizontal') {
+ x = 0;
+ yLine = 0;
- var _sharedValidator2 = _interopRequireDefault(_sharedValidator);
+ var lineMargin = 2;
+ if (this.options.font.align === 'top') {
+ ctx.textBaseline = 'alphabetic';
+ yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
+ } else if (this.options.font.align === 'bottom') {
+ ctx.textBaseline = 'hanging';
+ yLine += 2 * lineMargin; // distance from edge, required because we use hanging. Hanging has less difference between browsers
+ } else {
+ ctx.textBaseline = 'middle';
+ }
+ } else {
+ ctx.textBaseline = baseline;
+ }
- var util = __webpack_require__(2);
+ return [x, yLine];
+ }
+ }, {
+ key: '_getColor',
+
+ /**
+ * fade in when relative scale is between threshold and threshold - 1.
+ * If the relative scale would be smaller than threshold -1 the draw function would have returned before coming here.
+ *
+ * @param viewFontSize
+ * @returns {*[]}
+ * @private
+ */
+ value: function _getColor(viewFontSize) {
+ var fontColor = this.options.font.color || '#000000';
+ var strokeColor = this.options.font.strokeColor || '#ffffff';
+ if (viewFontSize <= this.options.scaling.label.drawThreshold) {
+ var opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
+ fontColor = util.overrideOpacity(fontColor, opacity);
+ strokeColor = util.overrideOpacity(strokeColor, opacity);
+ }
+ return [fontColor, strokeColor];
+ }
+ }, {
+ key: 'getTextSize',
+
+ /**
+ *
+ * @param ctx
+ * @param selected
+ * @returns {{width: number, height: number}}
+ */
+ value: function getTextSize(ctx) {
+ var selected = arguments[1] === undefined ? false : arguments[1];
+
+ var size = {
+ width: this._processLabel(ctx, selected),
+ height: this.options.font.size * this.lineCount,
+ lineCount: this.lineCount
+ };
+ return size;
+ }
+ }, {
+ key: 'calculateLabelSize',
+
+ /**
+ *
+ * @param ctx
+ * @param selected
+ * @param x
+ * @param y
+ * @param baseline
+ */
+ value: function calculateLabelSize(ctx, selected) {
+ var x = arguments[2] === undefined ? 0 : arguments[2];
+ var y = arguments[3] === undefined ? 0 : arguments[3];
+ var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
+
+ if (this.labelDirty === true) {
+ this.size.width = this._processLabel(ctx, selected);
+ }
+ this.size.height = this.options.font.size * this.lineCount;
+ this.size.left = x - this.size.width * 0.5;
+ this.size.top = y - this.size.height * 0.5;
+ this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
+ if (baseline === 'hanging') {
+ this.size.top += 0.5 * this.options.font.size;
+ this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
+ this.size.yLine += 4; // distance from node
+ }
+
+ this.labelDirty = false;
+ }
+ }, {
+ key: '_processLabel',
+
+ /**
+ * This calculates the width as well as explodes the label string and calculates the amount of lines.
+ * @param ctx
+ * @param selected
+ * @returns {number}
+ * @private
+ */
+ value: function _processLabel(ctx, selected) {
+ var width = 0;
+ var lines = [''];
+ var lineCount = 0;
+ if (this.options.label !== undefined) {
+ lines = String(this.options.label).split('\n');
+ lineCount = lines.length;
+ ctx.font = (selected ? 'bold ' : '') + this.options.font.size + 'px ' + this.options.font.face;
+ width = ctx.measureText(lines[0]).width;
+ for (var i = 1; i < lineCount; i++) {
+ var lineWidth = ctx.measureText(lines[i]).width;
+ width = lineWidth > width ? lineWidth : width;
+ }
+ }
+ this.lines = lines;
+ this.lineCount = lineCount;
+
+ return width;
+ }
+ }], [{
+ key: 'parseOptions',
+ value: function parseOptions(parentOptions, newOptions) {
+ var allowDeletion = arguments[2] === undefined ? false : arguments[2];
+
+ if (typeof newOptions.font === 'string') {
+ var newOptionsArray = newOptions.font.split(' ');
+ parentOptions.size = newOptionsArray[0].replace('px', '');
+ parentOptions.face = newOptionsArray[1];
+ parentOptions.color = newOptionsArray[2];
+ } else if (typeof newOptions.font === 'object') {
+ util.fillIfDefined(parentOptions, newOptions.font, allowDeletion);
+ }
+ parentOptions.size = Number(parentOptions.size);
+ }
+ }]);
+
+ return Label;
+ })();
+
+ exports['default'] = Label;
+ module.exports = exports['default'];
+
+/***/ },
+/* 75 */
+/***/ 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 _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 _sharedLabel = __webpack_require__(74);
+
+ var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
+
+ var _edgesBezierEdgeDynamic = __webpack_require__(105);
+
+ var _edgesBezierEdgeDynamic2 = _interopRequireDefault(_edgesBezierEdgeDynamic);
+
+ var _edgesBezierEdgeStatic = __webpack_require__(106);
+
+ var _edgesBezierEdgeStatic2 = _interopRequireDefault(_edgesBezierEdgeStatic);
+
+ var _edgesStraightEdge = __webpack_require__(107);
+
+ var _edgesStraightEdge2 = _interopRequireDefault(_edgesStraightEdge);
+
+ var util = __webpack_require__(2);
/**
- * @class Node
- * A node. A node can be connected to other nodes via one or multiple edges.
- * @param {object} options An object containing options for the node. All
- * options are optional, except for the id.
- * {number} id Id of the node. Required
- * {string} label Text label for the node
- * {number} x Horizontal position of the node
- * {number} y Vertical position of the node
- * {string} shape Node shape, available:
- * "database", "circle", "ellipse",
- * "box", "image", "text", "dot",
- * "star", "triangle", "triangleDown",
- * "square", "icon"
- * {string} image An image url
- * {string} title An title text, can be HTML
- * {anytype} group A group name or number
- * @param {Network.Images} imagelist A list with images. Only needed
- * when the node has an image
- * @param {Network.Groups} grouplist A list with groups. Needed for
- * retrieving group options
- * @param {Object} constants An object with default values for
- * example for the color
+ * @class Edge
*
+ * A edge connects two nodes
+ * @param {Object} properties Object with options. Must contain
+ * At least options from and to.
+ * Available options: from (number),
+ * to (number), label (string, color (string),
+ * width (number), style (string),
+ * length (number), title (string)
+ * @param {Network} network A Network object, used to find and edge to
+ * nodes.
+ * @param {Object} constants An object with default values for
+ * example for the color
*/
- var Node = (function () {
- function Node(options, body, imagelist, grouplist, globalOptions) {
- _classCallCheck(this, Node);
+ var Edge = (function () {
+ function Edge(options, body, globalOptions) {
+ _classCallCheck(this, Edge);
+ if (body === undefined) {
+ throw 'No body provided';
+ }
this.options = util.bridgeObject(globalOptions);
this.body = body;
- this.edges = []; // all edges connected to this node
-
- // set defaults for the options
+ // initialize variables
this.id = undefined;
- this.imagelist = imagelist;
- this.grouplist = grouplist;
-
- // state options
- this.x = undefined;
- this.y = undefined;
- this.baseSize = this.options.size;
- this.baseFontSize = this.options.font.size;
- this.predefinedPosition = false; // used to check if initial fit should just take the range or approximate
+ this.fromId = undefined;
+ this.toId = undefined;
this.selected = false;
this.hover = false;
+ this.labelDirty = true;
+ this.colorDirty = true;
- this.labelModule = new _sharedLabel2['default'](this.body, this.options);
- this.setOptions(options);
- }
+ this.baseWidth = this.options.width;
+ this.baseFontSize = this.options.font.size;
- _createClass(Node, [{
- key: 'attachEdge',
+ this.from = undefined; // a node
+ this.to = undefined; // a node
- /**
- * Attach a edge to the node
- * @param {Edge} edge
- */
- value: function attachEdge(edge) {
- if (this.edges.indexOf(edge) === -1) {
- this.edges.push(edge);
- }
- }
- }, {
- key: 'detachEdge',
+ this.edgeType = undefined;
- /**
- * Detach a edge from the node
- * @param {Edge} edge
- */
- value: function detachEdge(edge) {
- var index = this.edges.indexOf(edge);
- if (index != -1) {
- this.edges.splice(index, 1);
- }
- }
- }, {
- key: 'togglePhysics',
+ this.connected = false;
- /**
- * Enable or disable the physics.
- * @param status
- */
- value: function togglePhysics(status) {
- this.options.physics = status;
- }
- }, {
+ this.labelModule = new _sharedLabel2['default'](this.body, this.options);
+
+ this.setOptions(options);
+ }
+
+ _createClass(Edge, [{
key: 'setOptions',
/**
- * Set or overwrite options for the node
- * @param {Object} options an object with options
- * @param {Object} constants and object with default, global options
+ * Set or overwrite options for the edge
+ * @param {Object} options an object with options
+ * @param doNotEmit
*/
value: function setOptions(options) {
if (!options) {
return;
}
- // basic options
+ this.colorDirty = true;
+
+ Edge.parseOptions(this.options, options, true);
+
if (options.id !== undefined) {
this.id = options.id;
}
-
- if (this.id === undefined) {
- throw 'Node must have an id';
- }
-
- // set these options locally
- if (options.x !== undefined) {
- this.x = parseInt(options.x);this.predefinedPosition = true;
+ if (options.from !== undefined) {
+ this.fromId = options.from;
}
- if (options.y !== undefined) {
- this.y = parseInt(options.y);this.predefinedPosition = true;
+ if (options.to !== undefined) {
+ this.toId = options.to;
}
- if (options.size !== undefined) {
- this.baseSize = options.size;
+ if (options.title !== undefined) {
+ this.title = options.title;
}
if (options.value !== undefined) {
options.value = parseInt(options.value);
}
- // copy group options
- if (typeof options.group === 'number' || typeof options.group === 'string' && options.group != '') {
- var groupObj = this.grouplist.get(options.group);
- util.deepExtend(this.options, groupObj);
- // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
- this.options.color = util.parseColor(this.options.color);
- }
+ // update label Module
+ this.updateLabelModule();
- // this transforms all shorthands into fully defined options
- Node.parseOptions(this.options, options, true);
+ var dataChanged = this.updateEdgeType();
- // load the images
- if (this.options.image !== undefined && this.options.image != '') {
- if (this.imagelist) {
- this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
- } else {
- throw 'No imagelist provided';
- }
- }
+ // if anything has been updates, reset the selection width and the hover width
+ this._setInteractionWidths();
- this.updateShape();
- this.updateLabelModule();
+ // A node is connected when it has a from and to node that both exist in the network.body.nodes.
+ this.connect();
- // reset the size of the node, this can be changed
- this._reset();
+ return dataChanged;
}
}, {
key: 'updateLabelModule',
+
+ /**
+ * update the options in the label module
+ */
value: function updateLabelModule() {
- if (this.options.label === undefined || this.options.label === null) {
- this.options.label = '';
- }
this.labelModule.setOptions(this.options, true);
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize;
}
}
}, {
- key: 'updateShape',
- value: function updateShape() {
- // choose draw method depending on the shape
- switch (this.options.shape) {
- case 'box':
- this.shape = new _nodesShapesBox2['default'](this.options, this.body, this.labelModule);
- break;
- case 'circle':
- this.shape = new _nodesShapesCircle2['default'](this.options, this.body, this.labelModule);
- break;
- case 'circularImage':
- this.shape = new _nodesShapesCircularImage2['default'](this.options, this.body, this.labelModule, this.imageObj);
- break;
- case 'database':
- this.shape = new _nodesShapesDatabase2['default'](this.options, this.body, this.labelModule);
- break;
- case 'diamond':
- this.shape = new _nodesShapesDiamond2['default'](this.options, this.body, this.labelModule);
- break;
- case 'dot':
- this.shape = new _nodesShapesDot2['default'](this.options, this.body, this.labelModule);
- break;
- case 'ellipse':
- this.shape = new _nodesShapesEllipse2['default'](this.options, this.body, this.labelModule);
- break;
- case 'icon':
- this.shape = new _nodesShapesIcon2['default'](this.options, this.body, this.labelModule);
- break;
- case 'image':
- this.shape = new _nodesShapesImage2['default'](this.options, this.body, this.labelModule, this.imageObj);
- break;
- case 'square':
- this.shape = new _nodesShapesSquare2['default'](this.options, this.body, this.labelModule);
- break;
- case 'star':
- this.shape = new _nodesShapesStar2['default'](this.options, this.body, this.labelModule);
- break;
- case 'text':
- this.shape = new _nodesShapesText2['default'](this.options, this.body, this.labelModule);
- break;
- case 'triangle':
- this.shape = new _nodesShapesTriangle2['default'](this.options, this.body, this.labelModule);
- break;
- case 'triangleDown':
- this.shape = new _nodesShapesTriangleDown2['default'](this.options, this.body, this.labelModule);
- break;
- default:
- this.shape = new _nodesShapesEllipse2['default'](this.options, this.body, this.labelModule);
- break;
- }
- this._reset();
- }
- }, {
- key: 'select',
+ key: 'updateEdgeType',
/**
- * select this node
+ * update the edge type, set the options
+ * @returns {boolean}
*/
- value: function select() {
- this.selected = true;
- this._reset();
- }
- }, {
- key: 'unselect',
+ value: function updateEdgeType() {
+ var dataChanged = false;
+ var changeInType = true;
+ if (this.edgeType !== undefined) {
+ if (this.edgeType instanceof _edgesBezierEdgeDynamic2['default'] && this.options.smooth.enabled === true && this.options.smooth.type === 'dynamic') {
+ changeInType = false;
+ }
+ if (this.edgeType instanceof _edgesBezierEdgeStatic2['default'] && this.options.smooth.enabled === true && this.options.smooth.type !== 'dynamic') {
+ changeInType = false;
+ }
+ if (this.edgeType instanceof _edgesStraightEdge2['default'] && this.options.smooth.enabled === false) {
+ changeInType = false;
+ }
- /**
- * unselect this node
- */
- value: function unselect() {
- this.selected = false;
- this._reset();
+ if (changeInType === true) {
+ dataChanged = this.edgeType.cleanup();
+ }
+ }
+
+ if (changeInType === true) {
+ if (this.options.smooth.enabled === true) {
+ if (this.options.smooth.type === 'dynamic') {
+ dataChanged = true;
+ this.edgeType = new _edgesBezierEdgeDynamic2['default'](this.options, this.body, this.labelModule);
+ } else {
+ this.edgeType = new _edgesBezierEdgeStatic2['default'](this.options, this.body, this.labelModule);
+ }
+ } else {
+ this.edgeType = new _edgesStraightEdge2['default'](this.options, this.body, this.labelModule);
+ }
+ } else {
+ // if nothing changes, we just set the options.
+ this.edgeType.setOptions(this.options);
+ }
+
+ return dataChanged;
}
}, {
- key: '_reset',
+ key: 'togglePhysics',
/**
- * Reset the calculated size of the node, forces it to recalculate its size
- * @private
+ * Enable or disable the physics.
+ * @param status
*/
- value: function _reset() {
- this.shape.width = undefined;
- this.shape.height = undefined;
+ value: function togglePhysics(status) {
+ this.options.physics = status;
+ this.edgeType.togglePhysics(status);
}
}, {
- key: 'getTitle',
+ key: 'connect',
/**
- * get the title of this node.
- * @return {string} title The title of the node, or undefined when no title
- * has been set.
+ * Connect an edge to its nodes
*/
- value: function getTitle() {
- return this.options.title;
+ value: function connect() {
+ this.disconnect();
+
+ this.from = this.body.nodes[this.fromId] || undefined;
+ this.to = this.body.nodes[this.toId] || undefined;
+ this.connected = this.from !== undefined && this.to !== undefined;
+
+ if (this.connected === true) {
+ this.from.attachEdge(this);
+ this.to.attachEdge(this);
+ } else {
+ if (this.from) {
+ this.from.detachEdge(this);
+ }
+ if (this.to) {
+ this.to.detachEdge(this);
+ }
+ }
+
+ this.edgeType.connect();
}
}, {
- key: 'distanceToBorder',
+ key: 'disconnect',
/**
- * Calculate the distance to the border of the Node
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} angle Angle in radians
- * @returns {number} distance Distance to the border in pixels
+ * Disconnect an edge from its nodes
*/
- value: function distanceToBorder(ctx, angle) {
- return this.shape.distanceToBorder(ctx, angle);
+ value: function disconnect() {
+ if (this.from) {
+ this.from.detachEdge(this);
+ this.from = undefined;
+ }
+ if (this.to) {
+ this.to.detachEdge(this);
+ this.to = undefined;
+ }
+
+ this.connected = false;
}
}, {
- key: 'isFixed',
+ key: 'getTitle',
/**
- * Check if this node has a fixed x and y position
- * @return {boolean} true if fixed, false if not
+ * get the title of this edge.
+ * @return {string} title The title of the edge, or undefined when no title
+ * has been set.
*/
- value: function isFixed() {
- return this.options.fixed.x && this.options.fixed.y;
+ value: function getTitle() {
+ return this.title;
}
}, {
key: 'isSelected',
@@ -35226,7 +35371,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: 'getValue',
/**
- * Retrieve the value of the node. Can be undefined
+ * Retrieve the value of the edge. Can be undefined
* @return {Number} value
*/
value: function getValue() {
@@ -35236,1602 +35381,879 @@ return /******/ (function(modules) { // webpackBootstrap
key: 'setValueRange',
/**
- * Adjust the value range of the node. The node will adjust it's size
+ * Adjust the value range of the edge. The edge will adjust it's width
* based on its value.
* @param {Number} min
* @param {Number} max
+ * @param total
*/
value: function setValueRange(min, max, total) {
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
- var sizeDiff = this.options.scaling.max - this.options.scaling.min;
+ var widthDiff = this.options.scaling.max - this.options.scaling.min;
if (this.options.scaling.label.enabled === true) {
var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
}
- this.options.size = this.options.scaling.min + scale * sizeDiff;
+ this.options.width = this.options.scaling.min + scale * widthDiff;
} else {
- this.options.size = this.baseSize;
+ this.options.width = this.baseWidth;
this.options.font.size = this.baseFontSize;
}
+
+ this._setInteractionWidths();
+ }
+ }, {
+ key: '_setInteractionWidths',
+ value: function _setInteractionWidths() {
+ if (typeof this.options.hoverWidth === 'function') {
+ this.edgeType.hoverWidth = this.options.hoverWidth(this.options.width);
+ } else {
+ this.edgeType.hoverWidth = this.options.hoverWidth + this.options.width;
+ }
+
+ if (typeof this.options.selectionWidth === 'function') {
+ this.edgeType.selectionWidth = this.options.selectionWidth(this.options.width);
+ } else {
+ this.edgeType.selectionWidth = this.options.selectionWidth + this.options.width;
+ }
}
}, {
key: 'draw',
/**
- * Draw this node in the given canvas
+ * Redraw a edge
+ * Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
value: function draw(ctx) {
- this.shape.draw(ctx, this.x, this.y, this.selected, this.hover);
+ var via = this.edgeType.drawLine(ctx, this.selected, this.hover);
+ this.drawArrows(ctx, via);
+ this.drawLabel(ctx, via);
}
}, {
- key: 'updateBoundingBox',
-
- /**
- * Update the bounding box of the shape
- */
- value: function updateBoundingBox() {
- this.shape.updateBoundingBox(this.x, this.y);
+ key: 'drawArrows',
+ value: function drawArrows(ctx, viaNode) {
+ if (this.options.arrows.from.enabled === true) {
+ this.edgeType.drawArrowHead(ctx, 'from', viaNode, this.selected, this.hover);
+ }
+ if (this.options.arrows.middle.enabled === true) {
+ this.edgeType.drawArrowHead(ctx, 'middle', viaNode, this.selected, this.hover);
+ }
+ if (this.options.arrows.to.enabled === true) {
+ this.edgeType.drawArrowHead(ctx, 'to', viaNode, this.selected, this.hover);
+ }
}
}, {
- key: 'resize',
+ key: 'drawLabel',
+ value: function drawLabel(ctx, viaNode) {
+ if (this.options.label !== undefined) {
+ // set style
+ var node1 = this.from;
+ var node2 = this.to;
+ var selected = this.from.selected || this.to.selected || this.selected;
+ if (node1.id != node2.id) {
+ var point = this.edgeType.getPoint(0.5, viaNode);
+ ctx.save();
- /**
- * Recalculate the size of this node in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- */
- value: function resize(ctx) {
- this.shape.resize(ctx);
+ // if the label has to be rotated:
+ if (this.options.font.align !== 'horizontal') {
+ this.labelModule.calculateLabelSize(ctx, selected, point.x, point.y);
+ ctx.translate(point.x, this.labelModule.size.yLine);
+ this._rotateForLabelAlignment(ctx);
+ }
+
+ // draw the label
+ this.labelModule.draw(ctx, point.x, point.y, selected);
+ ctx.restore();
+ } else {
+ var x, y;
+ var radius = this.options.selfReferenceSize;
+ if (node1.shape.width > node1.shape.height) {
+ x = node1.x + node1.shape.width * 0.5;
+ y = node1.y - radius;
+ } else {
+ x = node1.x + radius;
+ y = node1.y - node1.shape.height * 0.5;
+ }
+ point = this._pointOnCircle(x, y, radius, 0.125);
+ this.labelModule.draw(ctx, point.x, point.y, selected);
+ }
+ }
}
}, {
key: 'isOverlappingWith',
/**
* Check if this object is overlapping with the provided object
- * @param {Object} obj an object with parameters left, top, right, bottom
- * @return {boolean} True if location is located on node
+ * @param {Object} obj an object with parameters left, top
+ * @return {boolean} True if location is located on the edge
*/
value: function isOverlappingWith(obj) {
- return this.shape.left < obj.right && this.shape.left + this.shape.width > obj.left && this.shape.top < obj.bottom && this.shape.top + this.shape.height > obj.top;
+ if (this.connected) {
+ var distMax = 10;
+ var xFrom = this.from.x;
+ var yFrom = this.from.y;
+ var xTo = this.to.x;
+ var yTo = this.to.y;
+ var xObj = obj.left;
+ var yObj = obj.top;
+
+ var dist = this.edgeType.getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+ return dist < distMax;
+ } else {
+ return false;
+ }
}
}, {
- key: 'isBoundingBoxOverlappingWith',
+ key: '_rotateForLabelAlignment',
/**
- * Check if this object is overlapping with the provided object
- * @param {Object} obj an object with parameters left, top, right, bottom
- * @return {boolean} True if location is located on node
+ * Rotates the canvas so the text is most readable
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- value: function isBoundingBoxOverlappingWith(obj) {
- return this.shape.boundingBox.left < obj.right && this.shape.boundingBox.right > obj.left && this.shape.boundingBox.top < obj.bottom && this.shape.boundingBox.bottom > obj.top;
+ value: function _rotateForLabelAlignment(ctx) {
+ var dy = this.from.y - this.to.y;
+ var dx = this.from.x - this.to.x;
+ var angleInDegrees = Math.atan2(dy, dx);
+
+ // rotate so label it is readable
+ if (angleInDegrees < -1 && dx < 0 || angleInDegrees > 0 && dx < 0) {
+ angleInDegrees = angleInDegrees + Math.PI;
+ }
+
+ ctx.rotate(angleInDegrees);
}
- }], [{
- key: 'parseOptions',
+ }, {
+ key: '_pointOnCircle',
/**
- * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
- * Static so it can also be used by the handler.
- * @param parentOptions
- * @param newOptions
+ * 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: 'select',
+ value: function select() {
+ this.selected = true;
+ }
+ }, {
+ key: 'unselect',
+ value: function unselect() {
+ this.selected = false;
+ }
+ }], [{
+ key: 'parseOptions',
value: function parseOptions(parentOptions, newOptions) {
var allowDeletion = arguments[2] === undefined ? false : arguments[2];
- var fields = ['color', 'font', 'fixed', 'shadow'];
- util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
+ var fields = ['id', 'from', 'hidden', 'hoverWidth', 'label', 'length', 'line', 'opacity', 'physics', 'selectionWidth', 'selfReferenceSize', 'to', 'title', 'value', 'width'];
- // merge the shadow options into the parent.
+ // only deep extend the items in the field array. These do not have shorthand.
+ util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
+
+ util.mergeOptions(parentOptions, newOptions, 'smooth');
util.mergeOptions(parentOptions, newOptions, 'shadow');
- // individual shape newOptions
- if (newOptions.color !== undefined && newOptions.color !== null) {
- var parsedColor = util.parseColor(newOptions.color);
- util.fillIfDefined(parentOptions.color, parsedColor);
- } else if (allowDeletion === true && newOptions.color === null) {
- parentOptions.color = undefined;
- delete parentOptions.color;
+ if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
+ parentOptions.dashes = newOptions.dashes;
+ } else if (allowDeletion === true && newOptions.dashes === null) {
+ parentOptions.dashes = undefined;
+ delete parentOptions.dashes;
}
- // handle the fixed options
- if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
- if (typeof newOptions.fixed === 'boolean') {
- parentOptions.fixed.x = newOptions.fixed;
- parentOptions.fixed.y = newOptions.fixed;
+ // set the scaling newOptions
+ if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
+ if (newOptions.scaling.min !== undefined) {
+ parentOptions.scaling.min = newOptions.scaling.min;
+ }
+ if (newOptions.scaling.max !== undefined) {
+ parentOptions.scaling.max = newOptions.scaling.max;
+ }
+ util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
+ } else if (allowDeletion === true && newOptions.scaling === null) {
+ parentOptions.scaling = undefined;
+ delete parentOptions.scaling;
+ }
+
+ // hanlde multiple input cases for arrows
+ if (newOptions.arrows !== undefined && newOptions.arrows !== null) {
+ if (typeof newOptions.arrows === 'string') {
+ var arrows = newOptions.arrows.toLowerCase();
+ if (arrows.indexOf('to') != -1) {
+ parentOptions.arrows.to.enabled = true;
+ }
+ if (arrows.indexOf('middle') != -1) {
+ parentOptions.arrows.middle.enabled = true;
+ }
+ if (arrows.indexOf('from') != -1) {
+ parentOptions.arrows.from.enabled = true;
+ }
+ } else if (typeof newOptions.arrows === 'object') {
+ util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to');
+ util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
+ util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
} else {
- if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
- parentOptions.fixed.x = newOptions.fixed.x;
+ 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 && newOptions.arrows === null) {
+ parentOptions.arrows = undefined;
+ delete parentOptions.arrows;
+ }
+
+ // hanlde multiple input cases for color
+ if (newOptions.color !== undefined && newOptions.color !== null) {
+ if (util.isString(newOptions.color)) {
+ parentOptions.color.color = newOptions.color;
+ parentOptions.color.highlight = newOptions.color;
+ parentOptions.color.hover = newOptions.color;
+ parentOptions.color.inherit = false;
+ } else {
+ var colorsDefined = false;
+ if (newOptions.color.color !== undefined) {
+ parentOptions.color.color = newOptions.color.color;colorsDefined = true;
}
- if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
- parentOptions.fixed.y = newOptions.fixed.y;
+ if (newOptions.color.highlight !== undefined) {
+ parentOptions.color.highlight = newOptions.color.highlight;colorsDefined = true;
+ }
+ if (newOptions.color.hover !== undefined) {
+ parentOptions.color.hover = newOptions.color.hover;colorsDefined = true;
+ }
+ if (newOptions.color.inherit !== undefined) {
+ parentOptions.color.inherit = newOptions.color.inherit;
+ }
+ if (newOptions.color.opacity !== undefined) {
+ parentOptions.color.opacity = Math.min(1, Math.max(0, newOptions.color.opacity));
+ }
+
+ if (newOptions.color.inherit === undefined && colorsDefined === true) {
+ parentOptions.color.inherit = false;
}
}
+ } else if (allowDeletion === true && newOptions.color === null) {
+ parentOptions.color = undefined;
+ delete parentOptions.color;
}
- // handle the font options
+ // handle the font settings
if (newOptions.font !== undefined) {
_sharedLabel2['default'].parseOptions(parentOptions.font, newOptions);
}
-
- // handle the scaling options, specifically the label part
- if (newOptions.scaling !== undefined) {
- util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
- }
}
}]);
- return Node;
+ return Edge;
})();
- exports['default'] = Node;
+ exports['default'] = Edge;
module.exports = exports['default'];
/***/ },
-/* 75 */
+/* 76 */
/***/ function(module, exports, __webpack_require__) {
- 'use strict';
+ "use strict";
- Object.defineProperty(exports, '__esModule', {
+ 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 _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 util = __webpack_require__(2);
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- var Label = (function () {
- function Label(body, options) {
- _classCallCheck(this, Label);
+ var BarnesHutSolver = (function () {
+ function BarnesHutSolver(body, physicsBody, options) {
+ _classCallCheck(this, BarnesHutSolver);
this.body = body;
-
- this.baseSize = undefined;
+ this.physicsBody = physicsBody;
+ this.barnesHutTree;
this.setOptions(options);
- this.size = { top: 0, left: 0, width: 0, height: 0, yLine: 0 }; // could be cached
}
- _createClass(Label, [{
- key: 'setOptions',
+ _createClass(BarnesHutSolver, [{
+ key: "setOptions",
value: function setOptions(options) {
- var allowDeletion = arguments[1] === undefined ? false : arguments[1];
-
this.options = options;
-
- if (options.label !== undefined) {
- this.labelDirty = true;
- }
-
- if (options.font !== undefined) {
- Label.parseOptions(this.options.font, options, allowDeletion);
- if (typeof options.font === 'string') {
- this.baseSize = this.options.font.size;
- } else if (typeof options.font === 'object') {
- if (options.font.size !== undefined) {
- this.baseSize = options.font.size;
- }
- }
- }
+ this.thetaInversed = 1 / this.options.theta;
+ 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: 'draw',
+ key: "solve",
/**
- * Main function. This is called from anything that wants to draw a label.
- * @param ctx
- * @param x
- * @param y
- * @param selected
- * @param baseline
+ * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+ * The Barnes Hut method is used to speed up this N-body simulation.
+ *
+ * @private
*/
- value: function draw(ctx, x, y, selected) {
- var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
-
- // if no label, return
- if (this.options.label === undefined) return;
+ value: function solve() {
+ if (this.options.gravitationalConstant !== 0 && this.physicsBody.physicsNodeIndices.length > 0) {
+ var node = undefined;
+ var nodes = this.body.nodes;
+ var nodeIndices = this.physicsBody.physicsNodeIndices;
+ var nodeCount = nodeIndices.length;
- // check if we have to render the label
- var viewFontSize = this.options.font.size * this.body.view.scale;
- if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1) return;
+ // create the tree
+ var barnesHutTree = this._formBarnesHutTree(nodes, nodeIndices);
- // update the size cache if required
- this.calculateLabelSize(ctx, selected, x, y, baseline);
+ // for debugging
+ this.barnesHutTree = barnesHutTree;
- // create the fontfill background
- this._drawBackground(ctx);
- // draw text
- this._drawText(ctx, selected, x, y, baseline);
+ // place the nodes one by one recursively
+ for (var i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ // starting with root is irrelevant, it never passes the BarnesHutSolver condition
+ this._getForceContribution(barnesHutTree.root.children.NW, node);
+ this._getForceContribution(barnesHutTree.root.children.NE, node);
+ this._getForceContribution(barnesHutTree.root.children.SW, node);
+ this._getForceContribution(barnesHutTree.root.children.SE, node);
+ }
+ }
+ }
}
}, {
- key: '_drawBackground',
+ key: "_getForceContribution",
/**
- * Draws the label background
- * @param {CanvasRenderingContext2D} ctx
+ * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+ * If a region contains a single node, we check if it is not itself, then we apply the force.
+ *
+ * @param parentBranch
+ * @param node
* @private
*/
- value: function _drawBackground(ctx) {
- if (this.options.font.background !== undefined && this.options.font.background !== 'none') {
- ctx.fillStyle = this.options.font.background;
+ value: function _getForceContribution(parentBranch, node) {
+ // we get no force contribution from an empty region
+ if (parentBranch.childrenCount > 0) {
+ var dx = undefined,
+ dy = undefined,
+ distance = undefined;
- var lineMargin = 2;
+ // get the distance from the center of mass to the node.
+ dx = parentBranch.centerOfMass.x - node.x;
+ dy = parentBranch.centerOfMass.y - node.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
- switch (this.options.font.align) {
- case 'middle':
- ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
- break;
- case 'top':
- ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
- break;
- case 'bottom':
- ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
- break;
- default:
- ctx.fillRect(this.size.left, this.size.top - 0.5 * lineMargin, this.size.width, this.size.height);
- break;
+ // BarnesHutSolver condition
+ // original condition : s/d < theta = passed === d/s > 1/theta = passed
+ // calcSize = 1/s --> d * 1/s > 1/theta = passed
+ if (distance * parentBranch.calcSize > this.thetaInversed) {
+ this._calculateForces(distance, dx, dy, node, parentBranch);
+ } else {
+ // Did not pass the condition, go into children if available
+ if (parentBranch.childrenCount === 4) {
+ this._getForceContribution(parentBranch.children.NW, node);
+ this._getForceContribution(parentBranch.children.NE, node);
+ this._getForceContribution(parentBranch.children.SW, node);
+ this._getForceContribution(parentBranch.children.SE, node);
+ } else {
+ // parentBranch must have only one node, if it was empty we wouldnt be here
+ if (parentBranch.children.data.id != node.id) {
+ // if it is not self
+ this._calculateForces(distance, dx, dy, node, parentBranch);
+ }
+ }
}
}
}
}, {
- key: '_drawText',
+ key: "_calculateForces",
/**
+ * Calculate the forces based on the distance.
*
- * @param ctx
- * @param x
- * @param baseline
+ * @param distance
+ * @param dx
+ * @param dy
+ * @param node
+ * @param parentBranch
* @private
*/
- value: function _drawText(ctx, selected, x, y) {
- var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
-
- var fontSize = this.options.font.size;
- var viewFontSize = fontSize * this.body.view.scale;
- // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
- if (viewFontSize >= this.options.scaling.label.maxVisible) {
- fontSize = Number(this.options.scaling.label.maxVisible) / this.body.view.scale;
- }
-
- var yLine = this.size.yLine;
-
- var _getColor = this._getColor(viewFontSize);
-
- var _getColor2 = _slicedToArray(_getColor, 2);
-
- var fontColor = _getColor2[0];
- var strokeColor = _getColor2[1];
-
- var _setAlignment = this._setAlignment(ctx, x, yLine, baseline);
-
- var _setAlignment2 = _slicedToArray(_setAlignment, 2);
-
- x = _setAlignment2[0];
- yLine = _setAlignment2[1];
-
- // configure context for drawing the text
- ctx.font = (selected ? 'bold ' : '') + fontSize + 'px ' + this.options.font.face;
- ctx.fillStyle = fontColor;
- ctx.textAlign = 'center';
-
- // set the strokeWidth
- if (this.options.font.strokeWidth > 0) {
- ctx.lineWidth = this.options.font.strokeWidth;
- ctx.strokeStyle = strokeColor;
- ctx.lineJoin = 'round';
+ value: function _calculateForces(distance, dx, dy, node, parentBranch) {
+ if (distance === 0) {
+ distance = 0.1 * Math.random();
+ dx = distance;
}
- // draw the text
- for (var i = 0; i < this.lineCount; i++) {
- if (this.options.font.strokeWidth > 0) {
- ctx.strokeText(this.lines[i], x, yLine);
- }
- ctx.fillText(this.lines[i], x, yLine);
- yLine += fontSize;
+ if (this.overlapAvoidanceFactor < 1) {
+ distance = Math.max(0.1 + this.overlapAvoidanceFactor * node.shape.radius, distance - node.shape.radius);
}
- }
- }, {
- key: '_setAlignment',
- value: function _setAlignment(ctx, x, yLine, baseline) {
- // check for label alignment (for edges)
- // TODO: make alignment for nodes
- if (this.options.font.align !== 'horizontal') {
- x = 0;
- yLine = 0;
- var lineMargin = 2;
- if (this.options.font.align === 'top') {
- ctx.textBaseline = 'alphabetic';
- yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
- } else if (this.options.font.align === 'bottom') {
- ctx.textBaseline = 'hanging';
- yLine += 2 * lineMargin; // distance from edge, required because we use hanging. Hanging has less difference between browsers
- } else {
- ctx.textBaseline = 'middle';
- }
- } else {
- ctx.textBaseline = baseline;
- }
+ // the dividing by the distance cubed instead of squared allows us to get the fx and fy components without sines and cosines
+ // it is shorthand for gravityforce with distance squared and fx = dx/distance * gravityForce
+ var gravityForce = this.options.gravitationalConstant * parentBranch.mass * node.options.mass / Math.pow(distance, 3);
+ var fx = dx * gravityForce;
+ var fy = dy * gravityForce;
- return [x, yLine];
+ this.physicsBody.forces[node.id].x += fx;
+ this.physicsBody.forces[node.id].y += fy;
}
}, {
- key: '_getColor',
+ key: "_formBarnesHutTree",
/**
- * fade in when relative scale is between threshold and threshold - 1.
- * If the relative scale would be smaller than threshold -1 the draw function would have returned before coming here.
+ * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
*
- * @param viewFontSize
- * @returns {*[]}
+ * @param nodes
+ * @param nodeIndices
* @private
*/
- value: function _getColor(viewFontSize) {
- var fontColor = this.options.font.color || '#000000';
- var strokeColor = this.options.font.strokeColor || '#ffffff';
- if (viewFontSize <= this.options.scaling.label.drawThreshold) {
- var opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
- fontColor = util.overrideOpacity(fontColor, opacity);
- strokeColor = util.overrideOpacity(strokeColor, opacity);
+ value: function _formBarnesHutTree(nodes, nodeIndices) {
+ var node = undefined;
+ var nodeCount = nodeIndices.length;
+
+ var minX = nodes[nodeIndices[0]].x;
+ var minY = nodes[nodeIndices[0]].y;
+ var maxX = nodes[nodeIndices[0]].x;
+ var maxY = nodes[nodeIndices[0]].y;
+
+ // get the range of the nodes
+ for (var i = 1; i < nodeCount; i++) {
+ var x = nodes[nodeIndices[i]].x;
+ var y = nodes[nodeIndices[i]].y;
+ if (nodes[nodeIndices[i]].options.mass > 0) {
+ if (x < minX) {
+ minX = x;
+ }
+ if (x > maxX) {
+ maxX = x;
+ }
+ if (y < minY) {
+ minY = y;
+ }
+ if (y > maxY) {
+ maxY = y;
+ }
+ }
}
- return [fontColor, strokeColor];
+ // make the range a square
+ var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+ if (sizeDiff > 0) {
+ minY -= 0.5 * sizeDiff;
+ maxY += 0.5 * sizeDiff;
+ } // xSize > ySize
+ else {
+ minX += 0.5 * sizeDiff;
+ maxX -= 0.5 * sizeDiff;
+ } // xSize < ySize
+
+ var minimumTreeSize = 0.00001;
+ var rootSize = Math.max(minimumTreeSize, Math.abs(maxX - minX));
+ var halfRootSize = 0.5 * rootSize;
+ var centerX = 0.5 * (minX + maxX),
+ centerY = 0.5 * (minY + maxY);
+
+ // construct the barnesHutTree
+ var barnesHutTree = {
+ root: {
+ centerOfMass: { x: 0, y: 0 },
+ mass: 0,
+ range: {
+ minX: centerX - halfRootSize, maxX: centerX + halfRootSize,
+ minY: centerY - halfRootSize, maxY: centerY + halfRootSize
+ },
+ size: rootSize,
+ calcSize: 1 / rootSize,
+ children: { data: null },
+ maxWidth: 0,
+ level: 0,
+ childrenCount: 4
+ }
+ };
+ this._splitBranch(barnesHutTree.root);
+
+ // place the nodes one by one recursively
+ for (var i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ this._placeInTree(barnesHutTree.root, node);
+ }
+ }
+
+ // make global
+ return barnesHutTree;
}
}, {
- key: 'getTextSize',
+ key: "_updateBranchMass",
/**
+ * this updates the mass of a branch. this is increased by adding a node.
*
- * @param ctx
- * @param selected
- * @returns {{width: number, height: number}}
+ * @param parentBranch
+ * @param node
+ * @private
*/
- value: function getTextSize(ctx) {
- var selected = arguments[1] === undefined ? false : arguments[1];
+ value: function _updateBranchMass(parentBranch, node) {
+ var totalMass = parentBranch.mass + node.options.mass;
+ var totalMassInv = 1 / totalMass;
- var size = {
- width: this._processLabel(ctx, selected),
- height: this.options.font.size * this.lineCount,
- lineCount: this.lineCount
- };
- return size;
+ parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
+ parentBranch.centerOfMass.x *= totalMassInv;
+
+ parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
+ parentBranch.centerOfMass.y *= totalMassInv;
+
+ parentBranch.mass = totalMass;
+ var biggestSize = Math.max(Math.max(node.height, node.radius), node.width);
+ parentBranch.maxWidth = parentBranch.maxWidth < biggestSize ? biggestSize : parentBranch.maxWidth;
}
}, {
- key: 'calculateLabelSize',
+ key: "_placeInTree",
/**
+ * determine in which branch the node will be placed.
*
- * @param ctx
- * @param selected
- * @param x
- * @param y
- * @param baseline
+ * @param parentBranch
+ * @param node
+ * @param skipMassUpdate
+ * @private
*/
- value: function calculateLabelSize(ctx, selected) {
- var x = arguments[2] === undefined ? 0 : arguments[2];
- var y = arguments[3] === undefined ? 0 : arguments[3];
- var baseline = arguments[4] === undefined ? 'middle' : arguments[4];
+ value: function _placeInTree(parentBranch, node, skipMassUpdate) {
+ if (skipMassUpdate != true || skipMassUpdate === undefined) {
+ // update the mass of the branch.
+ this._updateBranchMass(parentBranch, node);
+ }
- if (this.labelDirty === true) {
- this.size.width = this._processLabel(ctx, selected);
+ if (parentBranch.children.NW.range.maxX > node.x) {
+ // in NW or SW
+ if (parentBranch.children.NW.range.maxY > node.y) {
+ // in NW
+ this._placeInRegion(parentBranch, node, "NW");
+ } else {
+ // in SW
+ this._placeInRegion(parentBranch, node, "SW");
+ }
+ } else {
+ // in NE or SE
+ if (parentBranch.children.NW.range.maxY > node.y) {
+ // in NE
+ this._placeInRegion(parentBranch, node, "NE");
+ } else {
+ // in SE
+ this._placeInRegion(parentBranch, node, "SE");
+ }
}
- this.size.height = this.options.font.size * this.lineCount;
- this.size.left = x - this.size.width * 0.5;
- this.size.top = y - this.size.height * 0.5;
- this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
- if (baseline === 'hanging') {
- this.size.top += 0.5 * this.options.font.size;
- this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
- this.size.yLine += 4; // distance from node
+ }
+ }, {
+ key: "_placeInRegion",
+
+ /**
+ * actually place the node in a region (or branch)
+ *
+ * @param parentBranch
+ * @param node
+ * @param region
+ * @private
+ */
+ value: function _placeInRegion(parentBranch, node, region) {
+ switch (parentBranch.children[region].childrenCount) {
+ case 0:
+ // place node here
+ parentBranch.children[region].children.data = node;
+ parentBranch.children[region].childrenCount = 1;
+ this._updateBranchMass(parentBranch.children[region], node);
+ break;
+ case 1:
+ // convert into children
+ // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+ // we move one node a pixel and we do not put it in the tree.
+ if (parentBranch.children[region].children.data.x === node.x && parentBranch.children[region].children.data.y === node.y) {
+ node.x += Math.random();
+ node.y += Math.random();
+ } else {
+ this._splitBranch(parentBranch.children[region]);
+ this._placeInTree(parentBranch.children[region], node);
+ }
+ break;
+ case 4:
+ // place in branch
+ this._placeInTree(parentBranch.children[region], node);
+ break;
}
+ }
+ }, {
+ key: "_splitBranch",
- this.labelDirty = false;
+ /**
+ * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+ * after the split is complete.
+ *
+ * @param parentBranch
+ * @private
+ */
+ value: function _splitBranch(parentBranch) {
+ // if the branch is shaded with a node, replace the node in the new subset.
+ var containedNode = null;
+ if (parentBranch.childrenCount === 1) {
+ containedNode = parentBranch.children.data;
+ parentBranch.mass = 0;
+ parentBranch.centerOfMass.x = 0;
+ parentBranch.centerOfMass.y = 0;
+ }
+ parentBranch.childrenCount = 4;
+ parentBranch.children.data = null;
+ this._insertRegion(parentBranch, "NW");
+ this._insertRegion(parentBranch, "NE");
+ this._insertRegion(parentBranch, "SW");
+ this._insertRegion(parentBranch, "SE");
+
+ if (containedNode != null) {
+ this._placeInTree(parentBranch, containedNode);
+ }
}
}, {
- key: '_processLabel',
+ key: "_insertRegion",
/**
- * This calculates the width as well as explodes the label string and calculates the amount of lines.
- * @param ctx
- * @param selected
- * @returns {number}
+ * This function subdivides the region into four new segments.
+ * Specifically, this inserts a single new segment.
+ * It fills the children section of the parentBranch
+ *
+ * @param parentBranch
+ * @param region
+ * @param parentRange
* @private
*/
- value: function _processLabel(ctx, selected) {
- var width = 0;
- var lines = [''];
- var lineCount = 0;
- if (this.options.label !== undefined) {
- lines = String(this.options.label).split('\n');
- lineCount = lines.length;
- ctx.font = (selected ? 'bold ' : '') + this.options.font.size + 'px ' + this.options.font.face;
- width = ctx.measureText(lines[0]).width;
- for (var i = 1; i < lineCount; i++) {
- var lineWidth = ctx.measureText(lines[i]).width;
- width = lineWidth > width ? lineWidth : width;
- }
+ value: function _insertRegion(parentBranch, region) {
+ var minX = undefined,
+ maxX = undefined,
+ minY = undefined,
+ maxY = undefined;
+ var childSize = 0.5 * parentBranch.size;
+ switch (region) {
+ case "NW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "NE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "SW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
+ case "SE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
}
- this.lines = lines;
- this.lineCount = lineCount;
- return width;
+ parentBranch.children[region] = {
+ centerOfMass: { x: 0, y: 0 },
+ mass: 0,
+ range: { minX: minX, maxX: maxX, minY: minY, maxY: maxY },
+ size: 0.5 * parentBranch.size,
+ calcSize: 2 * parentBranch.calcSize,
+ children: { data: null },
+ maxWidth: 0,
+ level: parentBranch.level + 1,
+ childrenCount: 0
+ };
}
- }], [{
- key: 'parseOptions',
- value: function parseOptions(parentOptions, newOptions) {
- var allowDeletion = arguments[2] === undefined ? false : arguments[2];
+ }, {
+ key: "_debug",
- if (typeof newOptions.font === 'string') {
- var newOptionsArray = newOptions.font.split(' ');
- parentOptions.size = newOptionsArray[0].replace('px', '');
- parentOptions.face = newOptionsArray[1];
- parentOptions.color = newOptionsArray[2];
- } else if (typeof newOptions.font === 'object') {
- util.fillIfDefined(parentOptions, newOptions.font, allowDeletion);
+ //--------------------------- DEBUGGING BELOW ---------------------------//
+
+ /**
+ * This function is for debugging purposed, it draws the tree.
+ *
+ * @param ctx
+ * @param color
+ * @private
+ */
+ value: function _debug(ctx, color) {
+ if (this.barnesHutTree !== undefined) {
+
+ ctx.lineWidth = 1;
+
+ this._drawBranch(this.barnesHutTree.root, ctx, color);
}
- parentOptions.size = Number(parentOptions.size);
+ }
+ }, {
+ key: "_drawBranch",
+
+ /**
+ * This function is for debugging purposes. It draws the branches recursively.
+ *
+ * @param branch
+ * @param ctx
+ * @param color
+ * @private
+ */
+ value: function _drawBranch(branch, ctx, color) {
+ if (color === undefined) {
+ color = "#FF0000";
+ }
+
+ if (branch.childrenCount === 4) {
+ this._drawBranch(branch.children.NW, ctx);
+ this._drawBranch(branch.children.NE, ctx);
+ this._drawBranch(branch.children.SE, ctx);
+ this._drawBranch(branch.children.SW, ctx);
+ }
+ ctx.strokeStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX, branch.range.minY);
+ ctx.lineTo(branch.range.maxX, branch.range.minY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX, branch.range.minY);
+ ctx.lineTo(branch.range.maxX, branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX, branch.range.maxY);
+ ctx.lineTo(branch.range.minX, branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX, branch.range.maxY);
+ ctx.lineTo(branch.range.minX, branch.range.minY);
+ ctx.stroke();
+
+ /*
+ if (branch.mass > 0) {
+ ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+ ctx.stroke();
+ }
+ */
}
}]);
- return Label;
+ return BarnesHutSolver;
})();
- exports['default'] = Label;
- module.exports = exports['default'];
+ exports["default"] = BarnesHutSolver;
+ module.exports = exports["default"];
/***/ },
-/* 76 */
+/* 77 */
/***/ function(module, exports, __webpack_require__) {
- 'use strict';
+ "use strict";
- Object.defineProperty(exports, '__esModule', {
+ 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 _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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+ var RepulsionSolver = (function () {
+ function RepulsionSolver(body, physicsBody, options) {
+ _classCallCheck(this, RepulsionSolver);
- var _sharedLabel = __webpack_require__(75);
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
- var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
+ _createClass(RepulsionSolver, [{
+ key: "setOptions",
+ value: function setOptions(options) {
+ this.options = options;
+ }
+ }, {
+ key: "solve",
- var _edgesBezierEdgeDynamic = __webpack_require__(105);
+ /**
+ * Calculate the forces the nodes apply on each other based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ value: function solve() {
+ var dx, dy, distance, fx, fy, repulsingForce, node1, node2;
- var _edgesBezierEdgeDynamic2 = _interopRequireDefault(_edgesBezierEdgeDynamic);
+ var nodes = this.body.nodes;
+ var nodeIndices = this.physicsBody.physicsNodeIndices;
+ var forces = this.physicsBody.forces;
- var _edgesBezierEdgeStatic = __webpack_require__(106);
+ // repulsing forces between nodes
+ var nodeDistance = this.options.nodeDistance;
- var _edgesBezierEdgeStatic2 = _interopRequireDefault(_edgesBezierEdgeStatic);
+ // approximation constants
+ var a = -2 / 3 / nodeDistance;
+ var b = 4 / 3;
- var _edgesStraightEdge = __webpack_require__(107);
+ // we loop from i over all but the last entree in the array
+ // j loops from i+1 to the last. This way we do not double count any of the indices, nor i === j
+ for (var i = 0; i < nodeIndices.length - 1; i++) {
+ node1 = nodes[nodeIndices[i]];
+ for (var j = i + 1; j < nodeIndices.length; j++) {
+ node2 = nodes[nodeIndices[j]];
- var _edgesStraightEdge2 = _interopRequireDefault(_edgesStraightEdge);
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
- var util = __webpack_require__(2);
+ // same condition as BarnesHutSolver, making sure nodes are never 100% overlapping.
+ if (distance === 0) {
+ distance = 0.1 * Math.random();
+ dx = distance;
+ }
- /**
- * @class Edge
- *
- * A edge connects two nodes
- * @param {Object} properties Object with options. Must contain
- * At least options from and to.
- * Available options: from (number),
- * to (number), label (string, color (string),
- * width (number), style (string),
- * length (number), title (string)
- * @param {Network} network A Network object, used to find and edge to
- * nodes.
- * @param {Object} constants An object with default values for
- * example for the color
- */
+ if (distance < 2 * nodeDistance) {
+ if (distance < 0.5 * nodeDistance) {
+ repulsingForce = 1;
+ } else {
+ repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / nodeDistance - 1) * steepness))
+ }
+ repulsingForce = repulsingForce / distance;
- var Edge = (function () {
- function Edge(options, body, globalOptions) {
- _classCallCheck(this, Edge);
+ fx = dx * repulsingForce;
+ fy = dy * repulsingForce;
- if (body === undefined) {
- throw 'No body provided';
+ forces[node1.id].x -= fx;
+ forces[node1.id].y -= fy;
+ forces[node2.id].x += fx;
+ forces[node2.id].y += fy;
+ }
+ }
+ }
}
- this.options = util.bridgeObject(globalOptions);
- this.body = body;
-
- // initialize variables
- this.id = undefined;
- this.fromId = undefined;
- this.toId = undefined;
- this.selected = false;
- this.hover = false;
- this.labelDirty = true;
- this.colorDirty = true;
+ }]);
- this.baseWidth = this.options.width;
- this.baseFontSize = this.options.font.size;
+ return RepulsionSolver;
+ })();
- this.from = undefined; // a node
- this.to = undefined; // a node
+ exports["default"] = RepulsionSolver;
+ module.exports = exports["default"];
- this.edgeType = undefined;
+/***/ },
+/* 78 */
+/***/ function(module, exports, __webpack_require__) {
- this.connected = false;
-
- this.labelModule = new _sharedLabel2['default'](this.body, this.options);
-
- this.setOptions(options);
- }
-
- _createClass(Edge, [{
- key: 'setOptions',
-
- /**
- * Set or overwrite options for the edge
- * @param {Object} options an object with options
- * @param doNotEmit
- */
- value: function setOptions(options) {
- if (!options) {
- return;
- }
- this.colorDirty = true;
-
- Edge.parseOptions(this.options, options, true);
-
- if (options.id !== undefined) {
- this.id = options.id;
- }
- if (options.from !== undefined) {
- this.fromId = options.from;
- }
- if (options.to !== undefined) {
- this.toId = options.to;
- }
- if (options.title !== undefined) {
- this.title = options.title;
- }
- if (options.value !== undefined) {
- options.value = parseInt(options.value);
- }
-
- // update label Module
- this.updateLabelModule();
-
- var dataChanged = this.updateEdgeType();
-
- // if anything has been updates, reset the selection width and the hover width
- this._setInteractionWidths();
-
- // A node is connected when it has a from and to node that both exist in the network.body.nodes.
- this.connect();
-
- return dataChanged;
- }
- }, {
- key: 'updateLabelModule',
-
- /**
- * update the options in the label module
- */
- value: function updateLabelModule() {
- this.labelModule.setOptions(this.options, true);
- if (this.labelModule.baseSize !== undefined) {
- this.baseFontSize = this.labelModule.baseSize;
- }
- }
- }, {
- key: 'updateEdgeType',
-
- /**
- * update the edge type, set the options
- * @returns {boolean}
- */
- value: function updateEdgeType() {
- var dataChanged = false;
- var changeInType = true;
- if (this.edgeType !== undefined) {
- if (this.edgeType instanceof _edgesBezierEdgeDynamic2['default'] && this.options.smooth.enabled === true && this.options.smooth.type === 'dynamic') {
- changeInType = false;
- }
- if (this.edgeType instanceof _edgesBezierEdgeStatic2['default'] && this.options.smooth.enabled === true && this.options.smooth.type !== 'dynamic') {
- changeInType = false;
- }
- if (this.edgeType instanceof _edgesStraightEdge2['default'] && this.options.smooth.enabled === false) {
- changeInType = false;
- }
-
- if (changeInType === true) {
- dataChanged = this.edgeType.cleanup();
- }
- }
-
- if (changeInType === true) {
- if (this.options.smooth.enabled === true) {
- if (this.options.smooth.type === 'dynamic') {
- dataChanged = true;
- this.edgeType = new _edgesBezierEdgeDynamic2['default'](this.options, this.body, this.labelModule);
- } else {
- this.edgeType = new _edgesBezierEdgeStatic2['default'](this.options, this.body, this.labelModule);
- }
- } else {
- this.edgeType = new _edgesStraightEdge2['default'](this.options, this.body, this.labelModule);
- }
- } else {
- // if nothing changes, we just set the options.
- this.edgeType.setOptions(this.options);
- }
-
- return dataChanged;
- }
- }, {
- key: 'togglePhysics',
-
- /**
- * Enable or disable the physics.
- * @param status
- */
- value: function togglePhysics(status) {
- this.options.physics = status;
- this.edgeType.togglePhysics(status);
- }
- }, {
- key: 'connect',
-
- /**
- * Connect an edge to its nodes
- */
- value: function connect() {
- this.disconnect();
-
- this.from = this.body.nodes[this.fromId] || undefined;
- this.to = this.body.nodes[this.toId] || undefined;
- this.connected = this.from !== undefined && this.to !== undefined;
-
- if (this.connected === true) {
- this.from.attachEdge(this);
- this.to.attachEdge(this);
- } else {
- if (this.from) {
- this.from.detachEdge(this);
- }
- if (this.to) {
- this.to.detachEdge(this);
- }
- }
-
- this.edgeType.connect();
- }
- }, {
- key: 'disconnect',
-
- /**
- * Disconnect an edge from its nodes
- */
- value: function disconnect() {
- if (this.from) {
- this.from.detachEdge(this);
- this.from = undefined;
- }
- if (this.to) {
- this.to.detachEdge(this);
- this.to = undefined;
- }
-
- this.connected = false;
- }
- }, {
- key: 'getTitle',
-
- /**
- * get the title of this edge.
- * @return {string} title The title of the edge, or undefined when no title
- * has been set.
- */
- value: function getTitle() {
- return this.title;
- }
- }, {
- key: 'isSelected',
-
- /**
- * check if this node is selecte
- * @return {boolean} selected True if node is selected, else false
- */
- value: function isSelected() {
- return this.selected;
- }
- }, {
- key: 'getValue',
-
- /**
- * Retrieve the value of the edge. Can be undefined
- * @return {Number} value
- */
- value: function getValue() {
- return this.options.value;
- }
- }, {
- key: 'setValueRange',
-
- /**
- * Adjust the value range of the edge. The edge will adjust it's width
- * based on its value.
- * @param {Number} min
- * @param {Number} max
- * @param total
- */
- value: function setValueRange(min, max, total) {
- if (this.options.value !== undefined) {
- var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
- var widthDiff = this.options.scaling.max - this.options.scaling.min;
- if (this.options.scaling.label.enabled === true) {
- var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
- this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
- }
- this.options.width = this.options.scaling.min + scale * widthDiff;
- } else {
- this.options.width = this.baseWidth;
- this.options.font.size = this.baseFontSize;
- }
-
- this._setInteractionWidths();
- }
- }, {
- key: '_setInteractionWidths',
- value: function _setInteractionWidths() {
- if (typeof this.options.hoverWidth === 'function') {
- this.edgeType.hoverWidth = this.options.hoverWidth(this.options.width);
- } else {
- this.edgeType.hoverWidth = this.options.hoverWidth + this.options.width;
- }
-
- if (typeof this.options.selectionWidth === 'function') {
- this.edgeType.selectionWidth = this.options.selectionWidth(this.options.width);
- } else {
- this.edgeType.selectionWidth = this.options.selectionWidth + this.options.width;
- }
- }
- }, {
- key: 'draw',
-
- /**
- * Redraw a edge
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- */
- value: function draw(ctx) {
- var via = this.edgeType.drawLine(ctx, this.selected, this.hover);
- this.drawArrows(ctx, via);
- this.drawLabel(ctx, via);
- }
- }, {
- key: 'drawArrows',
- value: function drawArrows(ctx, viaNode) {
- if (this.options.arrows.from.enabled === true) {
- this.edgeType.drawArrowHead(ctx, 'from', viaNode, this.selected, this.hover);
- }
- if (this.options.arrows.middle.enabled === true) {
- this.edgeType.drawArrowHead(ctx, 'middle', viaNode, this.selected, this.hover);
- }
- if (this.options.arrows.to.enabled === true) {
- this.edgeType.drawArrowHead(ctx, 'to', viaNode, this.selected, this.hover);
- }
- }
- }, {
- key: 'drawLabel',
- value: function drawLabel(ctx, viaNode) {
- if (this.options.label !== undefined) {
- // set style
- var node1 = this.from;
- var node2 = this.to;
- var selected = this.from.selected || this.to.selected || this.selected;
- if (node1.id != node2.id) {
- var point = this.edgeType.getPoint(0.5, viaNode);
- ctx.save();
-
- // if the label has to be rotated:
- if (this.options.font.align !== 'horizontal') {
- this.labelModule.calculateLabelSize(ctx, selected, point.x, point.y);
- ctx.translate(point.x, this.labelModule.size.yLine);
- this._rotateForLabelAlignment(ctx);
- }
-
- // draw the label
- this.labelModule.draw(ctx, point.x, point.y, selected);
- ctx.restore();
- } else {
- var x, y;
- var radius = this.options.selfReferenceSize;
- if (node1.shape.width > node1.shape.height) {
- x = node1.x + node1.shape.width * 0.5;
- y = node1.y - radius;
- } else {
- x = node1.x + radius;
- y = node1.y - node1.shape.height * 0.5;
- }
- point = this._pointOnCircle(x, y, radius, 0.125);
- this.labelModule.draw(ctx, point.x, point.y, selected);
- }
- }
- }
- }, {
- key: 'isOverlappingWith',
-
- /**
- * Check if this object is overlapping with the provided object
- * @param {Object} obj an object with parameters left, top
- * @return {boolean} True if location is located on the edge
- */
- value: function isOverlappingWith(obj) {
- if (this.connected) {
- var distMax = 10;
- var xFrom = this.from.x;
- var yFrom = this.from.y;
- var xTo = this.to.x;
- var yTo = this.to.y;
- var xObj = obj.left;
- var yObj = obj.top;
-
- var dist = this.edgeType.getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
-
- return dist < distMax;
- } else {
- return false;
- }
- }
- }, {
- key: '_rotateForLabelAlignment',
-
- /**
- * Rotates the canvas so the text is most readable
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _rotateForLabelAlignment(ctx) {
- var dy = this.from.y - this.to.y;
- var dx = this.from.x - this.to.x;
- var angleInDegrees = Math.atan2(dy, dx);
-
- // rotate so label it is readable
- if (angleInDegrees < -1 && dx < 0 || angleInDegrees > 0 && dx < 0) {
- angleInDegrees = angleInDegrees + Math.PI;
- }
-
- ctx.rotate(angleInDegrees);
- }
- }, {
- 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: 'select',
- value: function select() {
- this.selected = true;
- }
- }, {
- key: 'unselect',
- value: function unselect() {
- this.selected = false;
- }
- }], [{
- key: 'parseOptions',
- value: function parseOptions(parentOptions, newOptions) {
- var allowDeletion = arguments[2] === undefined ? false : arguments[2];
-
- var fields = ['id', 'from', 'hidden', 'hoverWidth', 'label', 'length', 'line', 'opacity', 'physics', 'selectionWidth', 'selfReferenceSize', 'to', 'title', 'value', 'width'];
-
- // only deep extend the items in the field array. These do not have shorthand.
- util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
-
- util.mergeOptions(parentOptions, newOptions, 'smooth');
- util.mergeOptions(parentOptions, newOptions, 'shadow');
-
- if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
- parentOptions.dashes = newOptions.dashes;
- } else if (allowDeletion === true && newOptions.dashes === null) {
- parentOptions.dashes = undefined;
- delete parentOptions.dashes;
- }
-
- // set the scaling newOptions
- if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
- if (newOptions.scaling.min !== undefined) {
- parentOptions.scaling.min = newOptions.scaling.min;
- }
- if (newOptions.scaling.max !== undefined) {
- parentOptions.scaling.max = newOptions.scaling.max;
- }
- util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
- } else if (allowDeletion === true && newOptions.scaling === null) {
- parentOptions.scaling = undefined;
- delete parentOptions.scaling;
- }
-
- // hanlde multiple input cases for arrows
- if (newOptions.arrows !== undefined && newOptions.arrows !== null) {
- if (typeof newOptions.arrows === 'string') {
- var arrows = newOptions.arrows.toLowerCase();
- if (arrows.indexOf('to') != -1) {
- parentOptions.arrows.to.enabled = true;
- }
- if (arrows.indexOf('middle') != -1) {
- parentOptions.arrows.middle.enabled = true;
- }
- if (arrows.indexOf('from') != -1) {
- parentOptions.arrows.from.enabled = true;
- }
- } else if (typeof newOptions.arrows === 'object') {
- util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to');
- util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
- util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
- } 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 && newOptions.arrows === null) {
- parentOptions.arrows = undefined;
- delete parentOptions.arrows;
- }
-
- // hanlde multiple input cases for color
- if (newOptions.color !== undefined && newOptions.color !== null) {
- if (util.isString(newOptions.color)) {
- parentOptions.color.color = newOptions.color;
- parentOptions.color.highlight = newOptions.color;
- parentOptions.color.hover = newOptions.color;
- parentOptions.color.inherit = false;
- } else {
- var colorsDefined = false;
- if (newOptions.color.color !== undefined) {
- parentOptions.color.color = newOptions.color.color;colorsDefined = true;
- }
- if (newOptions.color.highlight !== undefined) {
- parentOptions.color.highlight = newOptions.color.highlight;colorsDefined = true;
- }
- if (newOptions.color.hover !== undefined) {
- parentOptions.color.hover = newOptions.color.hover;colorsDefined = true;
- }
- if (newOptions.color.inherit !== undefined) {
- parentOptions.color.inherit = newOptions.color.inherit;
- }
- if (newOptions.color.opacity !== undefined) {
- parentOptions.color.opacity = Math.min(1, Math.max(0, newOptions.color.opacity));
- }
-
- if (newOptions.color.inherit === undefined && colorsDefined === true) {
- parentOptions.color.inherit = false;
- }
- }
- } else if (allowDeletion === true && newOptions.color === null) {
- parentOptions.color = undefined;
- delete parentOptions.color;
- }
-
- // handle the font settings
- if (newOptions.font !== undefined) {
- _sharedLabel2['default'].parseOptions(parentOptions.font, newOptions);
- }
- }
- }]);
-
- return Edge;
- })();
-
- exports['default'] = Edge;
- module.exports = exports['default'];
-
-/***/ },
-/* 77 */
-/***/ 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 BarnesHutSolver = (function () {
- function BarnesHutSolver(body, physicsBody, options) {
- _classCallCheck(this, BarnesHutSolver);
-
- this.body = body;
- this.physicsBody = physicsBody;
- this.barnesHutTree;
- this.setOptions(options);
- }
-
- _createClass(BarnesHutSolver, [{
- key: "setOptions",
- value: function setOptions(options) {
- this.options = options;
- this.thetaInversed = 1 / this.options.theta;
- 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",
-
- /**
- * This function calculates the forces the nodes apply on eachother based on a gravitational model.
- * The Barnes Hut method is used to speed up this N-body simulation.
- *
- * @private
- */
- value: function solve() {
- if (this.options.gravitationalConstant !== 0 && this.physicsBody.physicsNodeIndices.length > 0) {
- var node = undefined;
- var nodes = this.body.nodes;
- var nodeIndices = this.physicsBody.physicsNodeIndices;
- var nodeCount = nodeIndices.length;
-
- // create the tree
- var barnesHutTree = this._formBarnesHutTree(nodes, nodeIndices);
-
- // for debugging
- this.barnesHutTree = barnesHutTree;
-
- // place the nodes one by one recursively
- for (var i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- // starting with root is irrelevant, it never passes the BarnesHutSolver condition
- this._getForceContribution(barnesHutTree.root.children.NW, node);
- this._getForceContribution(barnesHutTree.root.children.NE, node);
- this._getForceContribution(barnesHutTree.root.children.SW, node);
- this._getForceContribution(barnesHutTree.root.children.SE, node);
- }
- }
- }
- }
- }, {
- key: "_getForceContribution",
-
- /**
- * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
- * If a region contains a single node, we check if it is not itself, then we apply the force.
- *
- * @param parentBranch
- * @param node
- * @private
- */
- value: function _getForceContribution(parentBranch, node) {
- // we get no force contribution from an empty region
- if (parentBranch.childrenCount > 0) {
- var dx = undefined,
- dy = undefined,
- distance = undefined;
-
- // get the distance from the center of mass to the node.
- dx = parentBranch.centerOfMass.x - node.x;
- dy = parentBranch.centerOfMass.y - node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- // BarnesHutSolver condition
- // original condition : s/d < theta = passed === d/s > 1/theta = passed
- // calcSize = 1/s --> d * 1/s > 1/theta = passed
- if (distance * parentBranch.calcSize > this.thetaInversed) {
- this._calculateForces(distance, dx, dy, node, parentBranch);
- } else {
- // Did not pass the condition, go into children if available
- if (parentBranch.childrenCount === 4) {
- this._getForceContribution(parentBranch.children.NW, node);
- this._getForceContribution(parentBranch.children.NE, node);
- this._getForceContribution(parentBranch.children.SW, node);
- this._getForceContribution(parentBranch.children.SE, node);
- } else {
- // parentBranch must have only one node, if it was empty we wouldnt be here
- if (parentBranch.children.data.id != node.id) {
- // if it is not self
- this._calculateForces(distance, dx, dy, node, parentBranch);
- }
- }
- }
- }
- }
- }, {
- key: "_calculateForces",
-
- /**
- * Calculate the forces based on the distance.
- *
- * @param distance
- * @param dx
- * @param dy
- * @param node
- * @param parentBranch
- * @private
- */
- value: function _calculateForces(distance, dx, dy, node, parentBranch) {
- if (distance === 0) {
- distance = 0.1 * Math.random();
- dx = distance;
- }
-
- if (this.overlapAvoidanceFactor < 1) {
- distance = Math.max(0.1 + this.overlapAvoidanceFactor * node.shape.radius, distance - node.shape.radius);
- }
-
- // the dividing by the distance cubed instead of squared allows us to get the fx and fy components without sines and cosines
- // it is shorthand for gravityforce with distance squared and fx = dx/distance * gravityForce
- var gravityForce = this.options.gravitationalConstant * parentBranch.mass * node.options.mass / Math.pow(distance, 3);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
-
- this.physicsBody.forces[node.id].x += fx;
- this.physicsBody.forces[node.id].y += fy;
- }
- }, {
- key: "_formBarnesHutTree",
-
- /**
- * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
- *
- * @param nodes
- * @param nodeIndices
- * @private
- */
- value: function _formBarnesHutTree(nodes, nodeIndices) {
- var node = undefined;
- var nodeCount = nodeIndices.length;
-
- var minX = nodes[nodeIndices[0]].x;
- var minY = nodes[nodeIndices[0]].y;
- var maxX = nodes[nodeIndices[0]].x;
- var maxY = nodes[nodeIndices[0]].y;
-
- // get the range of the nodes
- for (var i = 1; i < nodeCount; i++) {
- var x = nodes[nodeIndices[i]].x;
- var y = nodes[nodeIndices[i]].y;
- if (nodes[nodeIndices[i]].options.mass > 0) {
- if (x < minX) {
- minX = x;
- }
- if (x > maxX) {
- maxX = x;
- }
- if (y < minY) {
- minY = y;
- }
- if (y > maxY) {
- maxY = y;
- }
- }
- }
- // make the range a square
- var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
- if (sizeDiff > 0) {
- minY -= 0.5 * sizeDiff;
- maxY += 0.5 * sizeDiff;
- } // xSize > ySize
- else {
- minX += 0.5 * sizeDiff;
- maxX -= 0.5 * sizeDiff;
- } // xSize < ySize
-
- var minimumTreeSize = 0.00001;
- var rootSize = Math.max(minimumTreeSize, Math.abs(maxX - minX));
- var halfRootSize = 0.5 * rootSize;
- var centerX = 0.5 * (minX + maxX),
- centerY = 0.5 * (minY + maxY);
-
- // construct the barnesHutTree
- var barnesHutTree = {
- root: {
- centerOfMass: { x: 0, y: 0 },
- mass: 0,
- range: {
- minX: centerX - halfRootSize, maxX: centerX + halfRootSize,
- minY: centerY - halfRootSize, maxY: centerY + halfRootSize
- },
- size: rootSize,
- calcSize: 1 / rootSize,
- children: { data: null },
- maxWidth: 0,
- level: 0,
- childrenCount: 4
- }
- };
- this._splitBranch(barnesHutTree.root);
-
- // place the nodes one by one recursively
- for (var i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- this._placeInTree(barnesHutTree.root, node);
- }
- }
-
- // make global
- return barnesHutTree;
- }
- }, {
- key: "_updateBranchMass",
-
- /**
- * this updates the mass of a branch. this is increased by adding a node.
- *
- * @param parentBranch
- * @param node
- * @private
- */
- value: function _updateBranchMass(parentBranch, node) {
- var totalMass = parentBranch.mass + node.options.mass;
- var totalMassInv = 1 / totalMass;
-
- parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
- parentBranch.centerOfMass.x *= totalMassInv;
-
- parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
- parentBranch.centerOfMass.y *= totalMassInv;
-
- parentBranch.mass = totalMass;
- var biggestSize = Math.max(Math.max(node.height, node.radius), node.width);
- parentBranch.maxWidth = parentBranch.maxWidth < biggestSize ? biggestSize : parentBranch.maxWidth;
- }
- }, {
- key: "_placeInTree",
-
- /**
- * determine in which branch the node will be placed.
- *
- * @param parentBranch
- * @param node
- * @param skipMassUpdate
- * @private
- */
- value: function _placeInTree(parentBranch, node, skipMassUpdate) {
- if (skipMassUpdate != true || skipMassUpdate === undefined) {
- // update the mass of the branch.
- this._updateBranchMass(parentBranch, node);
- }
-
- if (parentBranch.children.NW.range.maxX > node.x) {
- // in NW or SW
- if (parentBranch.children.NW.range.maxY > node.y) {
- // in NW
- this._placeInRegion(parentBranch, node, "NW");
- } else {
- // in SW
- this._placeInRegion(parentBranch, node, "SW");
- }
- } else {
- // in NE or SE
- if (parentBranch.children.NW.range.maxY > node.y) {
- // in NE
- this._placeInRegion(parentBranch, node, "NE");
- } else {
- // in SE
- this._placeInRegion(parentBranch, node, "SE");
- }
- }
- }
- }, {
- key: "_placeInRegion",
-
- /**
- * actually place the node in a region (or branch)
- *
- * @param parentBranch
- * @param node
- * @param region
- * @private
- */
- value: function _placeInRegion(parentBranch, node, region) {
- switch (parentBranch.children[region].childrenCount) {
- case 0:
- // place node here
- parentBranch.children[region].children.data = node;
- parentBranch.children[region].childrenCount = 1;
- this._updateBranchMass(parentBranch.children[region], node);
- break;
- case 1:
- // convert into children
- // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
- // we move one node a pixel and we do not put it in the tree.
- if (parentBranch.children[region].children.data.x === node.x && parentBranch.children[region].children.data.y === node.y) {
- node.x += Math.random();
- node.y += Math.random();
- } else {
- this._splitBranch(parentBranch.children[region]);
- this._placeInTree(parentBranch.children[region], node);
- }
- break;
- case 4:
- // place in branch
- this._placeInTree(parentBranch.children[region], node);
- break;
- }
- }
- }, {
- key: "_splitBranch",
-
- /**
- * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
- * after the split is complete.
- *
- * @param parentBranch
- * @private
- */
- value: function _splitBranch(parentBranch) {
- // if the branch is shaded with a node, replace the node in the new subset.
- var containedNode = null;
- if (parentBranch.childrenCount === 1) {
- containedNode = parentBranch.children.data;
- parentBranch.mass = 0;
- parentBranch.centerOfMass.x = 0;
- parentBranch.centerOfMass.y = 0;
- }
- parentBranch.childrenCount = 4;
- parentBranch.children.data = null;
- this._insertRegion(parentBranch, "NW");
- this._insertRegion(parentBranch, "NE");
- this._insertRegion(parentBranch, "SW");
- this._insertRegion(parentBranch, "SE");
-
- if (containedNode != null) {
- this._placeInTree(parentBranch, containedNode);
- }
- }
- }, {
- key: "_insertRegion",
-
- /**
- * This function subdivides the region into four new segments.
- * Specifically, this inserts a single new segment.
- * It fills the children section of the parentBranch
- *
- * @param parentBranch
- * @param region
- * @param parentRange
- * @private
- */
- value: function _insertRegion(parentBranch, region) {
- var minX = undefined,
- maxX = undefined,
- minY = undefined,
- maxY = undefined;
- var childSize = 0.5 * parentBranch.size;
- switch (region) {
- case "NW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "NE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "SW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- case "SE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- }
-
- parentBranch.children[region] = {
- centerOfMass: { x: 0, y: 0 },
- mass: 0,
- range: { minX: minX, maxX: maxX, minY: minY, maxY: maxY },
- size: 0.5 * parentBranch.size,
- calcSize: 2 * parentBranch.calcSize,
- children: { data: null },
- maxWidth: 0,
- level: parentBranch.level + 1,
- childrenCount: 0
- };
- }
- }, {
- key: "_debug",
-
- //--------------------------- DEBUGGING BELOW ---------------------------//
-
- /**
- * This function is for debugging purposed, it draws the tree.
- *
- * @param ctx
- * @param color
- * @private
- */
- value: function _debug(ctx, color) {
- if (this.barnesHutTree !== undefined) {
-
- ctx.lineWidth = 1;
-
- this._drawBranch(this.barnesHutTree.root, ctx, color);
- }
- }
- }, {
- key: "_drawBranch",
-
- /**
- * This function is for debugging purposes. It draws the branches recursively.
- *
- * @param branch
- * @param ctx
- * @param color
- * @private
- */
- value: function _drawBranch(branch, ctx, color) {
- if (color === undefined) {
- color = "#FF0000";
- }
-
- if (branch.childrenCount === 4) {
- this._drawBranch(branch.children.NW, ctx);
- this._drawBranch(branch.children.NE, ctx);
- this._drawBranch(branch.children.SE, ctx);
- this._drawBranch(branch.children.SW, ctx);
- }
- ctx.strokeStyle = color;
- ctx.beginPath();
- ctx.moveTo(branch.range.minX, branch.range.minY);
- ctx.lineTo(branch.range.maxX, branch.range.minY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX, branch.range.minY);
- ctx.lineTo(branch.range.maxX, branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX, branch.range.maxY);
- ctx.lineTo(branch.range.minX, branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.minX, branch.range.maxY);
- ctx.lineTo(branch.range.minX, branch.range.minY);
- ctx.stroke();
-
- /*
- if (branch.mass > 0) {
- ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
- ctx.stroke();
- }
- */
- }
- }]);
-
- return BarnesHutSolver;
- })();
-
- exports["default"] = BarnesHutSolver;
- module.exports = exports["default"];
-
-/***/ },
-/* 78 */
-/***/ 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 RepulsionSolver = (function () {
- function RepulsionSolver(body, physicsBody, options) {
- _classCallCheck(this, RepulsionSolver);
-
- this.body = body;
- this.physicsBody = physicsBody;
- this.setOptions(options);
- }
-
- _createClass(RepulsionSolver, [{
- key: "setOptions",
- value: function setOptions(options) {
- this.options = options;
- }
- }, {
- key: "solve",
-
- /**
- * Calculate the forces the nodes apply on each other based on a repulsion field.
- * This field is linearly approximated.
- *
- * @private
- */
- value: function solve() {
- var dx, dy, distance, fx, fy, repulsingForce, node1, node2;
-
- var nodes = this.body.nodes;
- var nodeIndices = this.physicsBody.physicsNodeIndices;
- var forces = this.physicsBody.forces;
-
- // repulsing forces between nodes
- var nodeDistance = this.options.nodeDistance;
-
- // approximation constants
- var a = -2 / 3 / nodeDistance;
- var b = 4 / 3;
-
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i === j
- for (var i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (var j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
-
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- // same condition as BarnesHutSolver, making sure nodes are never 100% overlapping.
- if (distance === 0) {
- distance = 0.1 * Math.random();
- dx = distance;
- }
-
- if (distance < 2 * nodeDistance) {
- if (distance < 0.5 * nodeDistance) {
- repulsingForce = 1;
- } else {
- repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / nodeDistance - 1) * steepness))
- }
- repulsingForce = repulsingForce / distance;
-
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
-
- forces[node1.id].x -= fx;
- forces[node1.id].y -= fy;
- forces[node2.id].x += fx;
- forces[node2.id].y += fy;
- }
- }
- }
- }
- }]);
-
- return RepulsionSolver;
- })();
-
- exports["default"] = RepulsionSolver;
- module.exports = exports["default"];
-
-/***/ },
-/* 79 */
-/***/ function(module, exports, __webpack_require__) {
-
- "use strict";
+ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
@@ -36919,7 +36341,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 80 */
+/* 79 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -37029,7 +36451,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 81 */
+/* 80 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -37150,7 +36572,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 82 */
+/* 81 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -37219,7 +36641,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 83 */
+/* 82 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -37238,7 +36660,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 _BarnesHutSolver2 = __webpack_require__(77);
+ var _BarnesHutSolver2 = __webpack_require__(76);
var _BarnesHutSolver3 = _interopRequireDefault(_BarnesHutSolver2);
@@ -37293,7 +36715,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 84 */
+/* 83 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -37312,7 +36734,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 _CentralGravitySolver2 = __webpack_require__(82);
+ var _CentralGravitySolver2 = __webpack_require__(81);
var _CentralGravitySolver3 = _interopRequireDefault(_CentralGravitySolver2);
@@ -37348,6 +36770,51 @@ return /******/ (function(modules) { // webpackBootstrap
exports["default"] = ForceAtlas2BasedCentralGravitySolver;
module.exports = exports["default"];
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; 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 _Node2 = __webpack_require__(73);
+
+ var _Node3 = _interopRequireDefault(_Node2);
+
+ /**
+ *
+ */
+
+ var Cluster = (function (_Node) {
+ function Cluster(options, body, imagelist, grouplist, globalOptions) {
+ _classCallCheck(this, Cluster);
+
+ _get(Object.getPrototypeOf(Cluster.prototype), 'constructor', this).call(this, options, body, imagelist, grouplist, globalOptions);
+
+ this.isCluster = true;
+ this.containedNodes = {};
+ this.containedEdges = {};
+ }
+
+ _inherits(Cluster, _Node);
+
+ return Cluster;
+ })(_Node3['default']);
+
+ exports['default'] = Cluster;
+ module.exports = exports['default'];
+
/***/ },
/* 85 */
/***/ function(module, exports, __webpack_require__) {
@@ -40474,274 +39941,809 @@ return /******/ (function(modules) { // webpackBootstrap
} else if (hover === true) {
return this.color.hover;
} else {
- return this.color.color;
+ 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, selected, hover);
+ 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'];
+
+/***/ },
+/* 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+ var Hammer = __webpack_require__(41);
+ var hammerUtil = __webpack_require__(49);
+ var util = __webpack_require__(2);
+
+ var ColorPicker = (function () {
+ function ColorPicker() {
+ var pixelRatio = arguments[0] === undefined ? 1 : arguments[0];
+
+ _classCallCheck(this, ColorPicker);
+
+ this.pixelRatio = pixelRatio;
+ this.generated = false;
+ this.centerCoordinates = { x: 289 / 2, y: 289 / 2 };
+ this.r = 289 * 0.49;
+ this.color = { r: 255, g: 255, b: 255, a: 1 };
+ this.hueCircle = undefined;
+ this.initialColor = { r: 255, g: 255, b: 255, a: 1 };
+ this.previousColor = undefined;
+ this.applied = false;
+
+ // bound by
+ this.updateCallback = function () {};
+
+ // create all DOM elements
+ this._create();
+ }
+
+ _createClass(ColorPicker, [{
+ key: 'insertTo',
+
+ /**
+ * this inserts the colorPicker into a div from the DOM
+ * @param container
+ */
+ value: function insertTo(container) {
+ if (this.hammer !== undefined) {
+ this.hammer.destroy();
+ this.hammer = undefined;
+ }
+ this.container = container;
+ this.container.appendChild(this.frame);
+ this._bindHammer();
+
+ this._setSize();
+ }
+ }, {
+ key: 'setCallback',
+
+ /**
+ * the callback is executed on apply and save. Bind it to the application
+ * @param callback
+ */
+ value: function setCallback(callback) {
+ if (typeof callback === 'function') {
+ this.updateCallback = callback;
+ } else {
+ throw new Error('Function attempted to set as colorPicker callback is not a function.');
+ }
+ }
+ }, {
+ key: '_isColorString',
+ value: function _isColorString(color) {
+ var htmlColors = { black: '#000000', navy: '#000080', darkblue: '#00008B', mediumblue: '#0000CD', blue: '#0000FF', darkgreen: '#006400', green: '#008000', teal: '#008080', darkcyan: '#008B8B', deepskyblue: '#00BFFF', darkturquoise: '#00CED1', mediumspringgreen: '#00FA9A', lime: '#00FF00', springgreen: '#00FF7F', aqua: '#00FFFF', cyan: '#00FFFF', midnightblue: '#191970', dodgerblue: '#1E90FF', lightseagreen: '#20B2AA', forestgreen: '#228B22', seagreen: '#2E8B57', darkslategray: '#2F4F4F', limegreen: '#32CD32', mediumseagreen: '#3CB371', turquoise: '#40E0D0', royalblue: '#4169E1', steelblue: '#4682B4', darkslateblue: '#483D8B', mediumturquoise: '#48D1CC', indigo: '#4B0082', darkolivegreen: '#556B2F', cadetblue: '#5F9EA0', cornflowerblue: '#6495ED', mediumaquamarine: '#66CDAA', dimgray: '#696969', slateblue: '#6A5ACD', olivedrab: '#6B8E23', slategray: '#708090', lightslategray: '#778899', mediumslateblue: '#7B68EE', lawngreen: '#7CFC00', chartreuse: '#7FFF00', aquamarine: '#7FFFD4', maroon: '#800000', purple: '#800080', olive: '#808000', gray: '#808080', skyblue: '#87CEEB', lightskyblue: '#87CEFA', blueviolet: '#8A2BE2', darkred: '#8B0000', darkmagenta: '#8B008B', saddlebrown: '#8B4513', darkseagreen: '#8FBC8F', lightgreen: '#90EE90', mediumpurple: '#9370D8', darkviolet: '#9400D3', palegreen: '#98FB98', darkorchid: '#9932CC', yellowgreen: '#9ACD32', sienna: '#A0522D', brown: '#A52A2A', darkgray: '#A9A9A9', lightblue: '#ADD8E6', greenyellow: '#ADFF2F', paleturquoise: '#AFEEEE', lightsteelblue: '#B0C4DE', powderblue: '#B0E0E6', firebrick: '#B22222', darkgoldenrod: '#B8860B', mediumorchid: '#BA55D3', rosybrown: '#BC8F8F', darkkhaki: '#BDB76B', silver: '#C0C0C0', mediumvioletred: '#C71585', indianred: '#CD5C5C', peru: '#CD853F', chocolate: '#D2691E', tan: '#D2B48C', lightgrey: '#D3D3D3', palevioletred: '#D87093', thistle: '#D8BFD8', orchid: '#DA70D6', goldenrod: '#DAA520', crimson: '#DC143C', gainsboro: '#DCDCDC', plum: '#DDA0DD', burlywood: '#DEB887', lightcyan: '#E0FFFF', lavender: '#E6E6FA', darksalmon: '#E9967A', violet: '#EE82EE', palegoldenrod: '#EEE8AA', lightcoral: '#F08080', khaki: '#F0E68C', aliceblue: '#F0F8FF', honeydew: '#F0FFF0', azure: '#F0FFFF', sandybrown: '#F4A460', wheat: '#F5DEB3', beige: '#F5F5DC', whitesmoke: '#F5F5F5', mintcream: '#F5FFFA', ghostwhite: '#F8F8FF', salmon: '#FA8072', antiquewhite: '#FAEBD7', linen: '#FAF0E6', lightgoldenrodyellow: '#FAFAD2', oldlace: '#FDF5E6', red: '#FF0000', fuchsia: '#FF00FF', magenta: '#FF00FF', deeppink: '#FF1493', orangered: '#FF4500', tomato: '#FF6347', hotpink: '#FF69B4', coral: '#FF7F50', darkorange: '#FF8C00', lightsalmon: '#FFA07A', orange: '#FFA500', lightpink: '#FFB6C1', pink: '#FFC0CB', gold: '#FFD700', peachpuff: '#FFDAB9', navajowhite: '#FFDEAD', moccasin: '#FFE4B5', bisque: '#FFE4C4', mistyrose: '#FFE4E1', blanchedalmond: '#FFEBCD', papayawhip: '#FFEFD5', lavenderblush: '#FFF0F5', seashell: '#FFF5EE', cornsilk: '#FFF8DC', lemonchiffon: '#FFFACD', floralwhite: '#FFFAF0', snow: '#FFFAFA', yellow: '#FFFF00', lightyellow: '#FFFFE0', ivory: '#FFFFF0', white: '#FFFFFF' };
+ if (typeof color === 'string') {
+ return htmlColors[color];
+ }
+ }
+ }, {
+ key: 'setColor',
+
+ /**
+ * Set the color of the colorPicker
+ * Supported formats:
+ * 'red' --> HTML color string
+ * '#ffffff' --> hex string
+ * 'rbg(255,255,255)' --> rgb string
+ * 'rgba(255,255,255,1.0)' --> rgba string
+ * {r:255,g:255,b:255} --> rgb object
+ * {r:255,g:255,b:255,a:1.0} --> rgba object
+ * @param color
+ * @param setInitial
+ */
+ value: function setColor(color) {
+ var setInitial = arguments[1] === undefined ? true : arguments[1];
+
+ if (color === 'none') {
+ return;
+ }
+
+ var rgba = undefined;
+
+ // if a html color shorthand is used, convert to hex
+ var htmlColor = this._isColorString(color);
+ if (htmlColor !== undefined) {
+ color = htmlColor;
+ }
+
+ // check format
+ if (util.isString(color) === true) {
+ if (util.isValidRGB(color) === true) {
+ var rgbaArray = color.substr(4).substr(0, color.length - 5).split(',');
+ rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: 1 };
+ } else if (util.isValidRGBA(color) === true) {
+ var rgbaArray = color.substr(5).substr(0, color.length - 6).split(',');
+ rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: rgbaArray[3] };
+ } else if (util.isValidHex(color) === true) {
+ var rgbObj = util.hexToRGB(color);
+ rgba = { r: rgbObj.r, g: rgbObj.g, b: rgbObj.b, a: 1 };
+ }
+ } else {
+ if (color instanceof Object) {
+ if (color.r !== undefined && color.g !== undefined && color.b !== undefined) {
+ var alpha = color.a !== undefined ? color.a : '1.0';
+ rgba = { r: color.r, g: color.g, b: color.b, a: alpha };
+ }
+ }
+ }
+
+ // set color
+ if (rgba === undefined) {
+ throw new Error('Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: ' + JSON.stringify(color));
+ } else {
+ this._setColor(rgba, setInitial);
+ }
+ }
+ }, {
+ key: 'show',
+
+ /**
+ * this shows the color picker at a location. The hue circle is constructed once and stored.
+ * @param x
+ * @param y
+ */
+ value: function show(x, y) {
+ this.applied = false;
+ this.frame.style.display = 'block';
+ this.frame.style.top = y + 'px';
+ this.frame.style.left = x + 'px';
+ this._generateHueCircle();
+ }
+ }, {
+ key: '_hide',
+
+ // ------------------------------------------ PRIVATE ----------------------------- //
+
+ /**
+ * Hide the picker. Is called by the cancel button.
+ * Optional boolean to store the previous color for easy access later on.
+ * @param storePrevious
+ * @private
+ */
+ value: function _hide() {
+ var storePrevious = arguments[0] === undefined ? true : arguments[0];
+
+ // store the previous color for next time;
+ if (storePrevious === true) {
+ this.previousColor = util.extend({}, this.color);
+ }
+
+ if (this.applied === true) {
+ this.updateCallback(this.initialColor);
+ }
+
+ this.frame.style.display = 'none';
+ }
+ }, {
+ key: '_save',
+
+ /**
+ * bound to the save button. Saves and hides.
+ * @private
+ */
+ value: function _save() {
+ this.updateCallback(this.color);
+ this.applied = false;
+ this._hide();
+ }
+ }, {
+ key: '_apply',
+
+ /**
+ * Bound to apply button. Saves but does not close. Is undone by the cancel button.
+ * @private
+ */
+ value: function _apply() {
+ this.applied = true;
+ this.updateCallback(this.color);
+ this._updatePicker(this.color);
+ }
+ }, {
+ key: '_loadLast',
+
+ /**
+ * load the color from the previous session.
+ * @private
+ */
+ value: function _loadLast() {
+ if (this.previousColor !== undefined) {
+ this.setColor(this.previousColor, false);
+ } else {
+ alert('There is no last color to load...');
}
}
}, {
- key: '_circle',
+ key: '_setColor',
/**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
+ * set the color, place the picker
+ * @param rgba
+ * @param setInitial
* @private
*/
- value: function _circle(ctx, x, y, radius) {
- // draw shadow if enabled
- this.enableShadow(ctx);
+ value: function _setColor(rgba) {
+ var setInitial = arguments[1] === undefined ? true : arguments[1];
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ // store the initial color
+ if (setInitial === true) {
+ this.initialColor = util.extend({}, rgba);
+ }
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ this.color = rgba;
+ var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
+
+ var angleConvert = 2 * Math.PI;
+ var radius = this.r * hsv.s;
+ var x = this.centerCoordinates.x + radius * Math.sin(angleConvert * hsv.h);
+ var y = this.centerCoordinates.y + radius * Math.cos(angleConvert * hsv.h);
+
+ this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px';
+ this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px';
+
+ this._updatePicker(rgba);
}
}, {
- key: 'getDistanceToEdge',
+ key: '_setOpacity',
/**
- * 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
+ * bound to opacity control
+ * @param value
* @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();
+ value: function _setOpacity(value) {
+ this.color.a = value / 100;
+ this._updatePicker(this.color);
+ }
+ }, {
+ key: '_setBrightness',
- var _getCircleData62 = _slicedToArray(_getCircleData6, 3);
+ /**
+ * bound to brightness control
+ * @param value
+ * @private
+ */
+ value: function _setBrightness(value) {
+ var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
+ hsv.v = value / 100;
+ var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
+ rgba['a'] = this.color.a;
+ this.color = rgba;
+ this._updatePicker();
+ }
+ }, {
+ key: '_updatePicker',
- var x = _getCircleData62[0];
- var y = _getCircleData62[1];
- var radius = _getCircleData62[2];
+ /**
+ * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
+ * @param rgba
+ * @private
+ */
+ value: function _updatePicker() {
+ var rgba = arguments[0] === undefined ? this.color : arguments[0];
- var dx = x - x3;
- var dy = y - y3;
- returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
+ var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
+ var ctx = this.colorPickerCanvas.getContext('2d');
+ if (this.pixelRation === undefined) {
+ this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
}
+ ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
- 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;
+ // clear the canvas
+ var w = this.colorPickerCanvas.clientWidth;
+ var h = this.colorPickerCanvas.clientHeight;
+ ctx.clearRect(0, 0, w, h);
- if (u > 1) {
- u = 1;
- } else if (u < 0) {
- u = 0;
- }
+ ctx.putImageData(this.hueCircle, 0, 0);
+ ctx.fillStyle = 'rgba(0,0,0,' + (1 - hsv.v) + ')';
+ ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
+ ctx.fill();
- var x = x1 + u * px;
- var y = y1 + u * py;
- var dx = x - x3;
- var dy = y - y3;
+ this.brightnessRange.value = 100 * hsv.v;
+ this.opacityRange.value = 100 * rgba.a;
- //# 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
+ this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
+ this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
+ }
+ }, {
+ key: '_setSize',
- return Math.sqrt(dx * dx + dy * dy);
+ /**
+ * used by create to set the size of the canvas.
+ * @private
+ */
+ value: function _setSize() {
+ this.colorPickerCanvas.style.width = '100%';
+ this.colorPickerCanvas.style.height = '100%';
+
+ this.colorPickerCanvas.width = 289 * this.pixelRatio;
+ this.colorPickerCanvas.height = 289 * this.pixelRatio;
}
}, {
- key: 'drawArrowHead',
+ key: '_create',
/**
- *
- * @param ctx
- * @param position
- * @param viaNode
+ * create all dom elements
+ * TODO: cleanup, lots of similar dom elements
+ * @private
*/
- value: function drawArrowHead(ctx, position, viaNode, selected, hover) {
- // set style
- ctx.strokeStyle = this.getColor(ctx, selected, hover);
- ctx.fillStyle = ctx.strokeStyle;
- ctx.lineWidth = this.getLineWidth(selected, hover);
+ value: function _create() {
+ this.frame = document.createElement('div');
+ this.frame.className = 'vis-color-picker';
- // set lets
- var angle = undefined;
- var length = undefined;
- var arrowPos = undefined;
- var node1 = undefined;
- var node2 = undefined;
- var guideOffset = undefined;
- var scaleFactor = undefined;
+ this.colorPickerDiv = document.createElement('div');
+ this.colorPickerSelector = document.createElement('div');
+ this.colorPickerSelector.className = 'vis-selector';
+ this.colorPickerDiv.appendChild(this.colorPickerSelector);
- 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;
+ this.colorPickerCanvas = document.createElement('canvas');
+ this.colorPickerDiv.appendChild(this.colorPickerCanvas);
+
+ if (!this.colorPickerCanvas.getContext) {
+ var noCanvas = document.createElement('DIV');
+ noCanvas.style.color = 'red';
+ noCanvas.style.fontWeight = 'bold';
+ noCanvas.style.padding = '10px';
+ noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
+ this.colorPickerCanvas.appendChild(noCanvas);
} else {
- node1 = this.to;
- node2 = this.from;
- scaleFactor = this.options.arrows.middle.scaleFactor;
+ var ctx = this.colorPickerCanvas.getContext('2d');
+ this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
+
+ this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
}
- // 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);
+ this.colorPickerDiv.className = 'vis-color';
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
+ this.opacityDiv = document.createElement('div');
+ this.opacityDiv.className = 'vis-opacity';
- // disable shadows for other elements.
- this.disableShadow(ctx);
- ctx.stroke();
- } else {
- // draw circle
- var _angle = undefined,
- point = undefined;
+ this.brightnessDiv = document.createElement('div');
+ this.brightnessDiv.className = 'vis-brightness';
- var _getCircleData7 = this._getCircleData(ctx);
+ this.arrowDiv = document.createElement('div');
+ this.arrowDiv.className = 'vis-arrow';
- var _getCircleData72 = _slicedToArray(_getCircleData7, 3);
+ this.opacityRange = document.createElement('input');
+ this.opacityRange.type = 'range';
+ this.opacityRange.min = '0';
+ this.opacityRange.max = '100';
+ this.opacityRange.value = '100';
+ this.opacityRange.className = 'vis-range';
- var x = _getCircleData72[0];
- var y = _getCircleData72[1];
- var radius = _getCircleData72[2];
+ this.brightnessRange = document.createElement('input');
+ this.brightnessRange.type = 'range';
+ this.brightnessRange.min = '0';
+ this.brightnessRange.max = '100';
+ this.brightnessRange.value = '100';
+ this.brightnessRange.className = 'vis-range';
- 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;
- }
+ this.opacityDiv.appendChild(this.opacityRange);
+ this.brightnessDiv.appendChild(this.brightnessRange);
- // draw the arrowhead
- var _length = (10 + 5 * this.options.width) * scaleFactor;
- ctx.arrow(point.x, point.y, _angle, _length);
+ var me = this;
+ this.opacityRange.onchange = function () {
+ me._setOpacity(this.value);
+ };
+ this.opacityRange.oninput = function () {
+ me._setOpacity(this.value);
+ };
+ this.brightnessRange.onchange = function () {
+ me._setBrightness(this.value);
+ };
+ this.brightnessRange.oninput = function () {
+ me._setBrightness(this.value);
+ };
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
+ this.brightnessLabel = document.createElement('div');
+ this.brightnessLabel.className = 'vis-label vis-brightness';
+ this.brightnessLabel.innerHTML = 'brightness:';
- // 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;
- }
+ this.opacityLabel = document.createElement('div');
+ this.opacityLabel.className = 'vis-label vis-opacity';
+ this.opacityLabel.innerHTML = 'opacity:';
+
+ this.newColorDiv = document.createElement('div');
+ this.newColorDiv.className = 'vis-new-color';
+ this.newColorDiv.innerHTML = 'new';
+
+ this.initialColorDiv = document.createElement('div');
+ this.initialColorDiv.className = 'vis-initial-color';
+ this.initialColorDiv.innerHTML = 'initial';
+
+ this.cancelButton = document.createElement('div');
+ this.cancelButton.className = 'vis-button vis-cancel';
+ this.cancelButton.innerHTML = 'cancel';
+ this.cancelButton.onclick = this._hide.bind(this, false);
+
+ this.applyButton = document.createElement('div');
+ this.applyButton.className = 'vis-button vis-apply';
+ this.applyButton.innerHTML = 'apply';
+ this.applyButton.onclick = this._apply.bind(this);
+
+ this.saveButton = document.createElement('div');
+ this.saveButton.className = 'vis-button vis-save';
+ this.saveButton.innerHTML = 'save';
+ this.saveButton.onclick = this._save.bind(this);
+
+ this.loadButton = document.createElement('div');
+ this.loadButton.className = 'vis-button vis-load';
+ this.loadButton.innerHTML = 'load last';
+ this.loadButton.onclick = this._loadLast.bind(this);
+
+ this.frame.appendChild(this.colorPickerDiv);
+ this.frame.appendChild(this.arrowDiv);
+ this.frame.appendChild(this.brightnessLabel);
+ this.frame.appendChild(this.brightnessDiv);
+ this.frame.appendChild(this.opacityLabel);
+ this.frame.appendChild(this.opacityDiv);
+ this.frame.appendChild(this.newColorDiv);
+ this.frame.appendChild(this.initialColorDiv);
+
+ this.frame.appendChild(this.cancelButton);
+ this.frame.appendChild(this.applyButton);
+ this.frame.appendChild(this.saveButton);
+ this.frame.appendChild(this.loadButton);
}
}, {
- 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;
- })();
+ key: '_bindHammer',
- exports['default'] = EdgeBase;
- module.exports = exports['default'];
+ /**
+ * bind hammer to the color picker
+ * @private
+ */
+ value: function _bindHammer() {
+ var _this = this;
-/***/ },
-/* 113 */
-/***/ function(module, exports, __webpack_require__) {
+ this.drag = {};
+ this.pinch = {};
+ this.hammer = new Hammer(this.colorPickerCanvas);
+ this.hammer.get('pinch').set({ enable: true });
- 'use strict';
+ hammerUtil.onTouch(this.hammer, function (event) {
+ _this._moveSelector(event);
+ });
+ this.hammer.on('tap', function (event) {
+ _this._moveSelector(event);
+ });
+ this.hammer.on('panstart', function (event) {
+ _this._moveSelector(event);
+ });
+ this.hammer.on('panmove', function (event) {
+ _this._moveSelector(event);
+ });
+ this.hammer.on('panend', function (event) {
+ _this._moveSelector(event);
+ });
+ }
+ }, {
+ key: '_generateHueCircle',
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ /**
+ * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown.
+ * @private
+ */
+ value: function _generateHueCircle() {
+ if (this.generated === false) {
+ var ctx = this.colorPickerCanvas.getContext('2d');
+ if (this.pixelRation === undefined) {
+ this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
+ }
+ ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
- var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; 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); } } };
+ // clear the canvas
+ var w = this.colorPickerCanvas.clientWidth;
+ var h = this.colorPickerCanvas.clientHeight;
+ ctx.clearRect(0, 0, w, h);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+ // draw hue circle
+ var x = undefined,
+ y = undefined,
+ hue = undefined,
+ sat = undefined;
+ this.centerCoordinates = { x: w * 0.5, y: h * 0.5 };
+ this.r = 0.49 * w;
+ var angleConvert = 2 * Math.PI / 360;
+ var hfac = 1 / 360;
+ var sfac = 1 / this.r;
+ var rgb = undefined;
+ for (hue = 0; hue < 360; hue++) {
+ for (sat = 0; sat < this.r; sat++) {
+ x = this.centerCoordinates.x + sat * Math.sin(angleConvert * hue);
+ y = this.centerCoordinates.y + sat * Math.cos(angleConvert * hue);
+ rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1);
+ ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+ ctx.fillRect(x - 0.5, y - 0.5, 2, 2);
+ }
+ }
+ ctx.strokeStyle = 'rgba(0,0,0,1)';
+ ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
+ ctx.stroke();
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+ this.hueCircle = ctx.getImageData(0, 0, w, h);
+ }
+ this.generated = true;
+ }
+ }, {
+ key: '_moveSelector',
- 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; }
+ /**
+ * move the selector. This is called by hammer functions.
+ *
+ * @param event
+ * @private
+ */
+ value: function _moveSelector(event) {
+ var rect = this.colorPickerDiv.getBoundingClientRect();
+ var left = event.center.x - rect.left;
+ var top = event.center.y - rect.top;
- var _Node2 = __webpack_require__(74);
+ var centerY = 0.5 * this.colorPickerDiv.clientHeight;
+ var centerX = 0.5 * this.colorPickerDiv.clientWidth;
- var _Node3 = _interopRequireDefault(_Node2);
+ var x = left - centerX;
+ var y = top - centerY;
- /**
- *
- */
+ var angle = Math.atan2(x, y);
+ var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
- var Cluster = (function (_Node) {
- function Cluster(options, body, imagelist, grouplist, globalOptions) {
- _classCallCheck(this, Cluster);
+ var newTop = Math.cos(angle) * radius + centerY;
+ var newLeft = Math.sin(angle) * radius + centerX;
- _get(Object.getPrototypeOf(Cluster.prototype), 'constructor', this).call(this, options, body, imagelist, grouplist, globalOptions);
+ this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
+ this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
- this.isCluster = true;
- this.containedNodes = {};
- this.containedEdges = {};
- }
+ // set color
+ var h = angle / (2 * Math.PI);
+ h = h < 0 ? h + 1 : h;
+ var s = radius / this.r;
+ var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
+ hsv.h = h;
+ hsv.s = s;
+ var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
+ rgba['a'] = this.color.a;
+ this.color = rgba;
- _inherits(Cluster, _Node);
+ // update previews
+ this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
+ this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
+ }
+ }]);
- return Cluster;
- })(_Node3['default']);
+ return ColorPicker;
+ })();
- exports['default'] = Cluster;
+ exports['default'] = ColorPicker;
module.exports = exports['default'];
/***/ }
diff --git a/lib/shared/Configurator.js b/lib/shared/Configurator.js
index 2083ef7c..8401495d 100644
--- a/lib/shared/Configurator.js
+++ b/lib/shared/Configurator.js
@@ -313,7 +313,10 @@ class Configurator {
range.step = step;
if (value !== undefined) {
- if (value * 0.1 < min) {
+ if (value < 0 && value * 2 < min) {
+ range.min = value*2;
+ }
+ else if (value * 0.1 < min) {
range.min = value / 10;
}
if (value * 2 > max && max !== 1) {
diff --git a/test/networkTest.html b/test/networkTest.html
index 82e34a81..792b9947 100644
--- a/test/networkTest.html
+++ b/test/networkTest.html
@@ -4,7 +4,7 @@
Network | Basic usage
-
+