diff --git a/dist/vis.js b/dist/vis.js
index 31deb7af..785c41b4 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -19927,10 +19927,7 @@ return /******/ (function(modules) { // webpackBootstrap
inherit: 'from',
opacity: 1
},
- dashes: {
- enabled: false,
- pattern: [5, 5]
- },
+ dashes: false,
font: {
color: '#343434',
size: 14, // px
@@ -22624,11 +22621,11 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NavigationHandler = __webpack_require__(80);
+ var _NavigationHandler = __webpack_require__(108);
var _NavigationHandler2 = _interopRequireWildcard(_NavigationHandler);
- var _Popup = __webpack_require__(81);
+ var _Popup = __webpack_require__(109);
var _Popup2 = _interopRequireWildcard(_Popup);
@@ -24533,7 +24530,7 @@ return /******/ (function(modules) { // webpackBootstrap
var util = __webpack_require__(1);
var Hammer = __webpack_require__(41);
var hammerUtil = __webpack_require__(45);
- var locales = __webpack_require__(82);
+ var locales = __webpack_require__(80);
/**
* clears the toolbar div element of children
@@ -25711,7 +25708,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _ColorPicker = __webpack_require__(83);
+ var _ColorPicker = __webpack_require__(81);
var _ColorPicker2 = _interopRequireWildcard(_ColorPicker);
@@ -26621,11 +26618,7 @@ return /******/ (function(modules) { // webpackBootstrap
opacity: { number: number },
__type__: { object: object, string: string }
},
- dashes: {
- enabled: { boolean: boolean },
- pattern: { array: array },
- __type__: { boolean: boolean, object: object }
- },
+ dashes: { boolean: boolean, array: array },
font: {
color: { string: string },
size: { number: number }, // px
@@ -27318,7 +27311,7 @@ return /******/ (function(modules) { // webpackBootstrap
'use strict';
- var keycharm = __webpack_require__(84);
+ var keycharm = __webpack_require__(82);
var Emitter = __webpack_require__(43);
var Hammer = __webpack_require__(41);
var util = __webpack_require__(1);
@@ -30552,7 +30545,7 @@ return /******/ (function(modules) { // webpackBootstrap
return _moment;
}));
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(86)(module)))
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(84)(module)))
/***/ },
/* 68 */
@@ -33238,7 +33231,7 @@ return /******/ (function(modules) { // webpackBootstrap
prefixed: prefixed
});
- if ("function" == TYPE_FUNCTION && __webpack_require__(87)) {
+ if ("function" == TYPE_FUNCTION && __webpack_require__(85)) {
!(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
return Hammer;
}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -33271,59 +33264,59 @@ return /******/ (function(modules) { // webpackBootstrap
var _Label2 = _interopRequireWildcard(_Label);
- var _Box = __webpack_require__(88);
+ var _Box = __webpack_require__(86);
var _Box2 = _interopRequireWildcard(_Box);
- var _Circle = __webpack_require__(89);
+ var _Circle = __webpack_require__(87);
var _Circle2 = _interopRequireWildcard(_Circle);
- var _CircularImage = __webpack_require__(90);
+ var _CircularImage = __webpack_require__(88);
var _CircularImage2 = _interopRequireWildcard(_CircularImage);
- var _Database = __webpack_require__(91);
+ var _Database = __webpack_require__(89);
var _Database2 = _interopRequireWildcard(_Database);
- var _Diamond = __webpack_require__(92);
+ var _Diamond = __webpack_require__(90);
var _Diamond2 = _interopRequireWildcard(_Diamond);
- var _Dot = __webpack_require__(93);
+ var _Dot = __webpack_require__(91);
var _Dot2 = _interopRequireWildcard(_Dot);
- var _Ellipse = __webpack_require__(94);
+ var _Ellipse = __webpack_require__(92);
var _Ellipse2 = _interopRequireWildcard(_Ellipse);
- var _Icon = __webpack_require__(95);
+ var _Icon = __webpack_require__(93);
var _Icon2 = _interopRequireWildcard(_Icon);
- var _Image = __webpack_require__(96);
+ var _Image = __webpack_require__(94);
var _Image2 = _interopRequireWildcard(_Image);
- var _Square = __webpack_require__(97);
+ var _Square = __webpack_require__(95);
var _Square2 = _interopRequireWildcard(_Square);
- var _Star = __webpack_require__(98);
+ var _Star = __webpack_require__(96);
var _Star2 = _interopRequireWildcard(_Star);
- var _Text = __webpack_require__(99);
+ var _Text = __webpack_require__(97);
var _Text2 = _interopRequireWildcard(_Text);
- var _Triangle = __webpack_require__(100);
+ var _Triangle = __webpack_require__(98);
var _Triangle2 = _interopRequireWildcard(_Triangle);
- var _TriangleDown = __webpack_require__(101);
+ var _TriangleDown = __webpack_require__(99);
var _TriangleDown2 = _interopRequireWildcard(_TriangleDown);
@@ -34073,15 +34066,15 @@ return /******/ (function(modules) { // webpackBootstrap
var _Label2 = _interopRequireWildcard(_Label);
- var _BezierEdgeDynamic = __webpack_require__(102);
+ var _BezierEdgeDynamic = __webpack_require__(100);
var _BezierEdgeDynamic2 = _interopRequireWildcard(_BezierEdgeDynamic);
- var _BezierEdgeStatic = __webpack_require__(103);
+ var _BezierEdgeStatic = __webpack_require__(101);
var _BezierEdgeStatic2 = _interopRequireWildcard(_BezierEdgeStatic);
- var _StraightEdge = __webpack_require__(104);
+ var _StraightEdge = __webpack_require__(102);
var _StraightEdge2 = _interopRequireWildcard(_StraightEdge);
@@ -34514,9 +34507,15 @@ return /******/ (function(modules) { // webpackBootstrap
util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
util.mergeOptions(parentOptions, newOptions, 'smooth');
- util.mergeOptions(parentOptions, newOptions, 'dashes');
util.mergeOptions(parentOptions, newOptions, 'shadow');
+ if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
+ parentOptions.dashes = newOptions.dashes;
+ } else if (allowDeletion === true) {
+ parentOptions.dashes = undefined;
+ delete parentOptions.dashes;
+ }
+
// set the scaling newOptions
if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
if (newOptions.scaling.min !== undefined) {
@@ -35600,6 +35599,50 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
/* 80 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // English
+ 'use strict';
+
+ exports.en = {
+ edit: 'Edit',
+ del: 'Delete selected',
+ back: 'Back',
+ addNode: 'Add Node',
+ addEdge: 'Add Edge',
+ editNode: 'Edit Node',
+ editEdge: 'Edit Edge',
+ addDescription: 'Click in an empty space to place a new node.',
+ edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
+ editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
+ createEdgeError: 'Cannot link edges to a cluster.',
+ deleteClusterError: 'Clusters cannot be deleted.',
+ editClusterError: 'Clusters cannot be edited.'
+ };
+ exports.en_EN = exports.en;
+ exports.en_US = exports.en;
+
+ // Dutch
+ exports.nl = {
+ edit: 'Wijzigen',
+ del: 'Selectie verwijderen',
+ back: 'Terug',
+ addNode: 'Node toevoegen',
+ addEdge: 'Link toevoegen',
+ editNode: 'Node wijzigen',
+ editEdge: 'Link wijzigen',
+ addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
+ edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
+ editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
+ createEdgeError: 'Kan geen link maken naar een cluster.',
+ deleteClusterError: 'Clusters kunnen niet worden verwijderd.',
+ editClusterError: 'Clusters kunnen niet worden aangepast.'
+ };
+ exports.nl_NL = exports.nl;
+ exports.nl_BE = exports.nl;
+
+/***/ },
+/* 81 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -35611,1246 +35654,1304 @@ return /******/ (function(modules) { // webpackBootstrap
Object.defineProperty(exports, '__esModule', {
value: true
});
- var util = __webpack_require__(1);
var Hammer = __webpack_require__(41);
var hammerUtil = __webpack_require__(45);
- var keycharm = __webpack_require__(84);
-
- var NavigationHandler = (function () {
- function NavigationHandler(body, canvas) {
- var _this = this;
+ var util = __webpack_require__(1);
- _classCallCheck(this, NavigationHandler);
+ var ColorPicker = (function () {
+ function ColorPicker() {
+ var pixelRatio = arguments[0] === undefined ? 1 : arguments[0];
- this.body = body;
- this.canvas = canvas;
+ _classCallCheck(this, ColorPicker);
- this.iconsCreated = false;
- this.navigationHammers = [];
- this.boundFunctions = {};
- this.touchTime = 0;
- this.activated = false;
+ 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.body.emitter.on('release', this._stopMovement.bind(this));
- this.body.emitter.on('activate', function () {
- _this.activated = true;_this.configureKeyboardBindings();
- });
- this.body.emitter.on('deactivate', function () {
- _this.activated = false;_this.configureKeyboardBindings();
- });
- this.body.emitter.on('destroy', function () {
- if (_this.keycharm !== undefined) {
- _this.keycharm.destroy();
- }
- });
+ // bound by
+ this.updateCallback = function () {};
- this.options = {};
+ // create all DOM elements
+ this._create();
}
- _createClass(NavigationHandler, [{
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- this.options = options;
- 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: 'create',
- value: function create() {
- if (this.options.navigationButtons === true) {
- if (this.iconsCreated === false) {
- this.loadNavigationElements();
- }
- } else if (this.iconsCreated === true) {
- this.cleanNavigation();
- }
+ key: 'setCallback',
- this.configureKeyboardBindings();
+ /**
+ * 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: 'cleanNavigation',
- value: function cleanNavigation() {
- // clean hammer bindings
- if (this.navigationHammers.length != 0) {
- for (var i = 0; i < this.navigationHammers.length; i++) {
- this.navigationHammers[i].destroy();
- }
- this.navigationHammers = [];
- }
-
- this._navigationReleaseOverload = function () {};
-
- // clean up previous navigation items
- if (this.navigationDOM && this.navigationDOM.wrapper && this.navigationDOM.wrapper.parentNode) {
- this.navigationDOM.wrapper.parentNode.removeChild(this.navigationDOM.wrapper);
+ 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];
}
-
- this.iconsCreated = false;
}
}, {
- key: 'loadNavigationElements',
+ key: 'setColor',
/**
- * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
- * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
- * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
- * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
- *
- * @private
+ * 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 loadNavigationElements() {
- this.cleanNavigation();
+ value: function setColor(color) {
+ var setInitial = arguments[1] === undefined ? true : arguments[1];
- this.navigationDOM = {};
- var navigationDivs = ['up', 'down', 'left', 'right', 'zoomIn', 'zoomOut', 'zoomExtends'];
- var navigationDivActions = ['_moveUp', '_moveDown', '_moveLeft', '_moveRight', '_zoomIn', '_zoomOut', '_fit'];
+ if (color === 'none') {
+ return;
+ }
- this.navigationDOM.wrapper = document.createElement('div');
- this.navigationDOM.wrapper.className = 'vis-navigation';
- this.canvas.frame.appendChild(this.navigationDOM.wrapper);
+ var rgba = undefined;
- for (var i = 0; i < navigationDivs.length; i++) {
- this.navigationDOM[navigationDivs[i]] = document.createElement('div');
- this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
- this.navigationDOM.wrapper.appendChild(this.navigationDOM[navigationDivs[i]]);
+ // if a html color shorthand is used, convert to hex
+ var htmlColor = this._isColorString(color);
+ if (htmlColor !== undefined) {
+ color = htmlColor;
+ }
- var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
- if (navigationDivActions[i] === '_fit') {
- hammerUtil.onTouch(hammer, this._fit.bind(this));
- } else {
- hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this, navigationDivActions[i]));
+ // 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 };
+ }
}
-
- this.navigationHammers.push(hammer);
}
- this.iconsCreated = true;
- }
- }, {
- key: 'bindToRedraw',
- value: function bindToRedraw(action) {
- if (this.boundFunctions[action] === undefined) {
- this.boundFunctions[action] = this[action].bind(this);
- this.body.emitter.on('initRedraw', this.boundFunctions[action]);
- this.body.emitter.emit('_startRendering');
- }
- }
- }, {
- key: 'unbindFromRedraw',
- value: function unbindFromRedraw(action) {
- if (this.boundFunctions[action] !== undefined) {
- this.body.emitter.off('initRedraw', this.boundFunctions[action]);
- this.body.emitter.emit('_stopRendering');
- delete this.boundFunctions[action];
+ // 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: '_fit',
+ key: 'show',
/**
- * this stops all movement induced by the navigation buttons
- *
- * @private
- */
- value: function _fit() {
- if (new Date().valueOf() - this.touchTime > 700) {
- // TODO: fix ugly hack to avoid hammer's double fireing of event (because we use release?)
- this.body.emitter.emit('fit', { duration: 700 });
- this.touchTime = new Date().valueOf();
- }
+ * 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: '_stopMovement',
+ key: '_hide',
+
+ // ------------------------------------------ PRIVATE ----------------------------- //
/**
- * this stops all movement induced by the navigation buttons
- *
+ * 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 _stopMovement() {
- for (var boundAction in this.boundFunctions) {
- if (this.boundFunctions.hasOwnProperty(boundAction)) {
- this.body.emitter.off('initRedraw', this.boundFunctions[boundAction]);
- this.body.emitter.emit('_stopRendering');
- }
+ 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);
}
- this.boundFunctions = {};
- }
- }, {
- key: '_moveUp',
- value: function _moveUp() {
- this.body.view.translation.y += this.options.keyboard.speed.y;
- }
- }, {
- key: '_moveDown',
- value: function _moveDown() {
- this.body.view.translation.y -= this.options.keyboard.speed.y;
- }
- }, {
- key: '_moveLeft',
- value: function _moveLeft() {
- this.body.view.translation.x += this.options.keyboard.speed.x;
- }
- }, {
- key: '_moveRight',
- value: function _moveRight() {
- this.body.view.translation.x -= this.options.keyboard.speed.x;
+
+ if (this.applied === true) {
+ this.updateCallback(this.initialColor);
+ }
+
+ this.frame.style.display = 'none';
}
}, {
- key: '_zoomIn',
- value: function _zoomIn() {
- this.body.view.scale *= 1 + this.options.keyboard.speed.zoom;
+ key: '_save',
+
+ /**
+ * bound to the save button. Saves and hides.
+ * @private
+ */
+ value: function _save() {
+ this.updateCallback(this.color);
+ this.applied = false;
+ this._hide();
}
}, {
- key: '_zoomOut',
- value: function _zoomOut() {
- this.body.view.scale /= 1 + this.options.keyboard.speed.zoom;
+ 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: 'configureKeyboardBindings',
+ key: '_loadLast',
/**
- * bind all keys using keycharm.
+ * load the color from the previous session.
+ * @private
*/
- value: function configureKeyboardBindings() {
- if (this.keycharm !== undefined) {
- this.keycharm.destroy();
- }
-
- if (this.options.keyboard.enabled === true) {
-
- if (this.options.keyboard.bindToWindow === true) {
- this.keycharm = keycharm({ container: window, preventDefault: false });
- } else {
- this.keycharm = keycharm({ container: this.canvas.frame, preventDefault: false });
- }
-
- this.keycharm.reset();
-
- if (this.activated === true) {
- this.keycharm.bind('up', this.bindToRedraw.bind(this, '_moveUp'), 'keydown');
- this.keycharm.bind('down', this.bindToRedraw.bind(this, '_moveDown'), 'keydown');
- this.keycharm.bind('left', this.bindToRedraw.bind(this, '_moveLeft'), 'keydown');
- this.keycharm.bind('right', this.bindToRedraw.bind(this, '_moveRight'), 'keydown');
- this.keycharm.bind('=', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
- this.keycharm.bind('num+', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
- this.keycharm.bind('num-', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
- this.keycharm.bind('-', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
- this.keycharm.bind('[', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
- this.keycharm.bind(']', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
- this.keycharm.bind('pageup', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
- this.keycharm.bind('pagedown', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
-
- this.keycharm.bind('up', this.unbindFromRedraw.bind(this, '_moveUp'), 'keyup');
- this.keycharm.bind('down', this.unbindFromRedraw.bind(this, '_moveDown'), 'keyup');
- this.keycharm.bind('left', this.unbindFromRedraw.bind(this, '_moveLeft'), 'keyup');
- this.keycharm.bind('right', this.unbindFromRedraw.bind(this, '_moveRight'), 'keyup');
- this.keycharm.bind('=', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
- this.keycharm.bind('num+', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
- this.keycharm.bind('num-', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
- this.keycharm.bind('-', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
- this.keycharm.bind('[', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
- this.keycharm.bind(']', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
- this.keycharm.bind('pageup', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
- this.keycharm.bind('pagedown', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
- }
+ value: function _loadLast() {
+ if (this.previousColor !== undefined) {
+ this.setColor(this.previousColor, false);
+ } else {
+ alert('There is no last color to load...');
}
}
- }]);
-
- return NavigationHandler;
- })();
-
- exports['default'] = NavigationHandler;
- module.exports = exports['default'];
-
-/***/ },
-/* 81 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _classCallCheck = function (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; }; })();
+ }, {
+ key: '_setColor',
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- /**
- * Popup is a class to create a popup window with some text
- * @param {Element} container The container object.
- * @param {Number} [x]
- * @param {Number} [y]
- * @param {String} [text]
- * @param {Object} [style] An object containing borderColor,
- * backgroundColor, etc.
- */
+ /**
+ * set the color, place the picker
+ * @param rgba
+ * @param setInitial
+ * @private
+ */
+ value: function _setColor(rgba) {
+ var setInitial = arguments[1] === undefined ? true : arguments[1];
- var Popup = (function () {
- function Popup(container) {
- _classCallCheck(this, Popup);
+ // store the initial color
+ if (setInitial === true) {
+ this.initialColor = util.extend({}, rgba);
+ }
- this.container = container;
+ this.color = rgba;
+ var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
- this.x = 0;
- this.y = 0;
- this.padding = 5;
- this.hidden = false;
+ 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);
- // create the frame
- this.frame = document.createElement('div');
- this.frame.className = 'vis-network-tooltip';
- this.container.appendChild(this.frame);
- }
+ this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px';
+ this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px';
- _createClass(Popup, [{
- key: 'setPosition',
+ this._updatePicker(rgba);
+ }
+ }, {
+ key: '_setOpacity',
/**
- * @param {number} x Horizontal position of the popup window
- * @param {number} y Vertical position of the popup window
+ * bound to opacity control
+ * @param value
+ * @private
*/
- value: function setPosition(x, y) {
- this.x = parseInt(x);
- this.y = parseInt(y);
+ value: function _setOpacity(value) {
+ this.color.a = value / 100;
+ this._updatePicker(this.color);
}
}, {
- key: 'setText',
+ key: '_setBrightness',
/**
- * Set the content for the popup window. This can be HTML code or text.
- * @param {string | Element} content
+ * bound to brightness control
+ * @param value
+ * @private
*/
- value: function setText(content) {
- if (content instanceof Element) {
- this.frame.innerHTML = '';
- this.frame.appendChild(content);
- } else {
- this.frame.innerHTML = content; // string containing text or HTML
- }
+ 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: 'show',
+ key: '_updatePicker',
/**
- * Show the popup window
- * @param {boolean} [doShow] Show or hide the window
+ * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
+ * @param rgba
+ * @private
*/
- value: function show(doShow) {
- if (doShow === undefined) {
- doShow = true;
- }
+ value: function _updatePicker() {
+ var rgba = arguments[0] === undefined ? this.color : arguments[0];
- if (doShow === true) {
- var height = this.frame.clientHeight;
- var width = this.frame.clientWidth;
- var maxHeight = this.frame.parentNode.clientHeight;
- var maxWidth = this.frame.parentNode.clientWidth;
+ 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);
- var top = this.y - height;
- if (top + height + this.padding > maxHeight) {
- top = maxHeight - height - this.padding;
- }
- if (top < this.padding) {
- top = this.padding;
- }
+ // clear the canvas
+ var w = this.colorPickerCanvas.clientWidth;
+ var h = this.colorPickerCanvas.clientHeight;
+ ctx.clearRect(0, 0, w, h);
- var left = this.x;
- if (left + width + this.padding > maxWidth) {
- left = maxWidth - width - this.padding;
- }
- if (left < this.padding) {
- left = this.padding;
- }
+ 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.frame.style.left = left + 'px';
- this.frame.style.top = top + 'px';
- this.frame.style.visibility = 'visible';
- this.hidden = false;
- } else {
- this.hide();
- }
+ 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 + ')';
}
}, {
- key: 'hide',
+ key: '_setSize',
/**
- * Hide the popup window
+ * used by create to set the size of the canvas.
+ * @private
*/
- value: function hide() {
- this.hidden = true;
- this.frame.style.visibility = 'hidden';
+ 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: '_create',
- return Popup;
- })();
+ /**
+ * create all dom elements
+ * TODO: cleanup, lots of similar dom elements
+ * @private
+ */
+ value: function _create() {
+ this.frame = document.createElement('div');
+ this.frame.className = 'vis-color-picker';
- exports['default'] = Popup;
- module.exports = exports['default'];
+ this.colorPickerDiv = document.createElement('div');
+ this.colorPickerSelector = document.createElement('div');
+ this.colorPickerSelector.className = 'vis-selector';
+ this.colorPickerDiv.appendChild(this.colorPickerSelector);
-/***/ },
-/* 82 */
-/***/ function(module, exports, __webpack_require__) {
+ this.colorPickerCanvas = document.createElement('canvas');
+ this.colorPickerDiv.appendChild(this.colorPickerCanvas);
- // English
- 'use strict';
+ 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);
- exports.en = {
- edit: 'Edit',
- del: 'Delete selected',
- back: 'Back',
- addNode: 'Add Node',
- addEdge: 'Add Edge',
- editNode: 'Edit Node',
- editEdge: 'Edit Edge',
- addDescription: 'Click in an empty space to place a new node.',
- edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
- editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
- createEdgeError: 'Cannot link edges to a cluster.',
- deleteClusterError: 'Clusters cannot be deleted.',
- editClusterError: 'Clusters cannot be edited.'
- };
- exports.en_EN = exports.en;
- exports.en_US = exports.en;
+ this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+ }
- // Dutch
- exports.nl = {
- edit: 'Wijzigen',
- del: 'Selectie verwijderen',
- back: 'Terug',
- addNode: 'Node toevoegen',
- addEdge: 'Link toevoegen',
- editNode: 'Node wijzigen',
- editEdge: 'Link wijzigen',
- addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
- edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
- editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
- createEdgeError: 'Kan geen link maken naar een cluster.',
- deleteClusterError: 'Clusters kunnen niet worden verwijderd.',
- editClusterError: 'Clusters kunnen niet worden aangepast.'
- };
- exports.nl_NL = exports.nl;
- exports.nl_BE = exports.nl;
+ this.colorPickerDiv.className = 'vis-color';
-/***/ },
-/* 83 */
-/***/ function(module, exports, __webpack_require__) {
+ this.opacityDiv = document.createElement('div');
+ this.opacityDiv.className = 'vis-opacity';
- 'use strict';
+ this.brightnessDiv = document.createElement('div');
+ this.brightnessDiv.className = 'vis-brightness';
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ this.arrowDiv = document.createElement('div');
+ this.arrowDiv.className = 'vis-arrow';
- 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; }; })();
+ 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';
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- var Hammer = __webpack_require__(41);
- var hammerUtil = __webpack_require__(45);
- var util = __webpack_require__(1);
+ 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';
- var ColorPicker = (function () {
- function ColorPicker() {
- var pixelRatio = arguments[0] === undefined ? 1 : arguments[0];
+ this.opacityDiv.appendChild(this.opacityRange);
+ this.brightnessDiv.appendChild(this.brightnessRange);
- _classCallCheck(this, ColorPicker);
+ 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.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.brightnessLabel = document.createElement('div');
+ this.brightnessLabel.className = 'vis-label vis-brightness';
+ this.brightnessLabel.innerHTML = 'brightness:';
- // bound by
- this.updateCallback = function () {};
+ this.opacityLabel = document.createElement('div');
+ this.opacityLabel.className = 'vis-label vis-opacity';
+ this.opacityLabel.innerHTML = 'opacity:';
- // create all DOM elements
- this._create();
- }
+ this.newColorDiv = document.createElement('div');
+ this.newColorDiv.className = 'vis-new-color';
+ this.newColorDiv.innerHTML = 'new';
- _createClass(ColorPicker, [{
- key: 'insertTo',
+ this.initialColorDiv = document.createElement('div');
+ this.initialColorDiv.className = 'vis-initial-color';
+ this.initialColorDiv.innerHTML = 'initial';
- /**
- * 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.cancelButton = document.createElement('div');
+ this.cancelButton.className = 'vis-button vis-cancel';
+ this.cancelButton.innerHTML = 'cancel';
+ this.cancelButton.onclick = this._hide.bind(this, false);
- this._setSize();
+ 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: 'setCallback',
+ key: '_bindHammer',
/**
- * the callback is executed on apply and save. Bind it to the application
- * @param callback
+ * bind hammer to the color picker
+ * @private
*/
- 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];
- }
+ value: function _bindHammer() {
+ var _this = this;
+
+ this.drag = {};
+ this.pinch = {};
+ this.hammer = new Hammer(this.colorPickerCanvas);
+ this.hammer.get('pinch').set({ enable: true });
+
+ 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: 'setColor',
+ key: '_generateHueCircle',
/**
- * 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
+ * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown.
+ * @private
*/
- value: function setColor(color) {
- var setInitial = arguments[1] === undefined ? true : arguments[1];
-
- if (color === 'none') {
- return;
- }
-
- var rgba = undefined;
+ 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);
- // if a html color shorthand is used, convert to hex
- var htmlColor = this._isColorString(color);
- if (htmlColor !== undefined) {
- color = htmlColor;
- }
+ // clear the canvas
+ var w = this.colorPickerCanvas.clientWidth;
+ var h = this.colorPickerCanvas.clientHeight;
+ ctx.clearRect(0, 0, w, h);
- // 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 };
+ // 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();
- // 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.hueCircle = ctx.getImageData(0, 0, w, h);
}
+ this.generated = true;
}
}, {
- 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 ----------------------------- //
+ key: '_moveSelector',
/**
- * Hide the picker. Is called by the cancel button.
- * Optional boolean to store the previous color for easy access later on.
- * @param storePrevious
+ * move the selector. This is called by hammer functions.
+ *
+ * @param event
* @private
*/
- value: function _hide() {
- var storePrevious = arguments[0] === undefined ? true : arguments[0];
+ value: function _moveSelector(event) {
+ var rect = this.colorPickerDiv.getBoundingClientRect();
+ var left = event.center.x - rect.left;
+ var top = event.center.y - rect.top;
- // store the previous color for next time;
- if (storePrevious === true) {
- this.previousColor = util.extend({}, this.color);
- }
+ var centerY = 0.5 * this.colorPickerDiv.clientHeight;
+ var centerX = 0.5 * this.colorPickerDiv.clientWidth;
- if (this.applied === true) {
- this.updateCallback(this.initialColor);
- }
+ var x = left - centerX;
+ var y = top - centerY;
- this.frame.style.display = 'none';
- }
- }, {
- key: '_save',
+ var angle = Math.atan2(x, y);
+ var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
- /**
- * bound to the save button. Saves and hides.
- * @private
- */
- value: function _save() {
- this.updateCallback(this.color);
- this.applied = false;
- this._hide();
- }
- }, {
- key: '_apply',
+ var newTop = Math.cos(angle) * radius + centerY;
+ var newLeft = Math.sin(angle) * radius + centerX;
- /**
- * 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',
+ this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
+ this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
- /**
- * 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...');
- }
+ // 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;
+
+ // 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 + ')';
}
- }, {
- key: '_setColor',
+ }]);
- /**
- * set the color, place the picker
- * @param rgba
- * @param setInitial
- * @private
- */
- value: function _setColor(rgba) {
- var setInitial = arguments[1] === undefined ? true : arguments[1];
+ return ColorPicker;
+ })();
- // store the initial color
- if (setInitial === true) {
- this.initialColor = util.extend({}, rgba);
- }
+ exports['default'] = ColorPicker;
+ module.exports = exports['default'];
- this.color = rgba;
- var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
+/***/ },
+/* 82 */
+/***/ function(module, exports, __webpack_require__) {
- 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);
+ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
+ /**
+ * Created by Alex on 11/6/2014.
+ */
- this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px';
- this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px';
+ // https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
+ // if the module has no dependencies, the above pattern can be simplified to
+ (function (root, factory) {
+ if (true) {
+ // AMD. Register as an anonymous module.
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports === 'object') {
+ // Node. Does not work with strict CommonJS, but
+ // only CommonJS-like environments that support module.exports,
+ // like Node.
+ module.exports = factory();
+ } else {
+ // Browser globals (root is window)
+ root.keycharm = factory();
+ }
+ }(this, function () {
- this._updatePicker(rgba);
- }
- }, {
- key: '_setOpacity',
+ function keycharm(options) {
+ var preventDefault = options && options.preventDefault || false;
- /**
- * bound to opacity control
- * @param value
- * @private
- */
- value: function _setOpacity(value) {
- this.color.a = value / 100;
- this._updatePicker(this.color);
- }
- }, {
- key: '_setBrightness',
+ var container = options && options.container || window;
+ var _exportFunctions = {};
+ var _bound = {keydown:{}, keyup:{}};
+ var _keys = {};
+ var i;
- /**
- * 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',
+ // a - z
+ for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
+ // A - Z
+ for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
+ // 0 - 9
+ for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
+ // F1 - F12
+ for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
+ // num0 - num9
+ for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
- /**
- * 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];
+ // numpad misc
+ _keys['num*'] = {code:106, shift: false};
+ _keys['num+'] = {code:107, shift: false};
+ _keys['num-'] = {code:109, shift: false};
+ _keys['num/'] = {code:111, shift: false};
+ _keys['num.'] = {code:110, shift: false};
+ // arrows
+ _keys['left'] = {code:37, shift: false};
+ _keys['up'] = {code:38, shift: false};
+ _keys['right'] = {code:39, shift: false};
+ _keys['down'] = {code:40, shift: false};
+ // extra keys
+ _keys['space'] = {code:32, shift: false};
+ _keys['enter'] = {code:13, shift: false};
+ _keys['shift'] = {code:16, shift: undefined};
+ _keys['esc'] = {code:27, shift: false};
+ _keys['backspace'] = {code:8, shift: false};
+ _keys['tab'] = {code:9, shift: false};
+ _keys['ctrl'] = {code:17, shift: false};
+ _keys['alt'] = {code:18, shift: false};
+ _keys['delete'] = {code:46, shift: false};
+ _keys['pageup'] = {code:33, shift: false};
+ _keys['pagedown'] = {code:34, shift: false};
+ // symbols
+ _keys['='] = {code:187, shift: false};
+ _keys['-'] = {code:189, shift: false};
+ _keys[']'] = {code:221, shift: false};
+ _keys['['] = {code:219, shift: false};
- 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);
+
+
+ var down = function(event) {handleEvent(event,'keydown');};
+ var up = function(event) {handleEvent(event,'keyup');};
+
+ // handle the actualy bound key with the event
+ var handleEvent = function(event,type) {
+ if (_bound[type][event.keyCode] !== undefined) {
+ var bound = _bound[type][event.keyCode];
+ for (var i = 0; i < bound.length; i++) {
+ if (bound[i].shift === undefined) {
+ bound[i].fn(event);
+ }
+ else if (bound[i].shift == true && event.shiftKey == true) {
+ bound[i].fn(event);
+ }
+ else if (bound[i].shift == false && event.shiftKey == false) {
+ bound[i].fn(event);
+ }
+ }
+
+ if (preventDefault == true) {
+ event.preventDefault();
+ }
}
- 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);
+ // bind a key to a callback
+ _exportFunctions.bind = function(key, callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ if (_keys[key] === undefined) {
+ throw new Error("unsupported key: " + key);
+ }
+ if (_bound[type][_keys[key].code] === undefined) {
+ _bound[type][_keys[key].code] = [];
+ }
+ _bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
+ };
- 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;
+ // bind all keys to a call back (demo purposes)
+ _exportFunctions.bindAll = function(callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ for (var key in _keys) {
+ if (_keys.hasOwnProperty(key)) {
+ _exportFunctions.bind(key,callback,type);
+ }
+ }
+ };
- 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 + ')';
+ // get the key label from an event
+ _exportFunctions.getKey = function(event) {
+ for (var key in _keys) {
+ if (_keys.hasOwnProperty(key)) {
+ if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
+ return key;
+ }
+ else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
+ return key;
+ }
+ else if (event.keyCode == _keys[key].code && key == 'shift') {
+ return key;
+ }
+ }
+ }
+ return "unknown key, currently not supported";
+ };
+
+ // unbind either a specific callback from a key or all of them (by leaving callback undefined)
+ _exportFunctions.unbind = function(key, callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ if (_keys[key] === undefined) {
+ throw new Error("unsupported key: " + key);
+ }
+ if (callback !== undefined) {
+ var newBindings = [];
+ var bound = _bound[type][_keys[key].code];
+ if (bound !== undefined) {
+ for (var i = 0; i < bound.length; i++) {
+ if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
+ newBindings.push(_bound[type][_keys[key].code][i]);
+ }
+ }
+ }
+ _bound[type][_keys[key].code] = newBindings;
+ }
+ else {
+ _bound[type][_keys[key].code] = [];
+ }
+ };
+
+ // reset all bound variables.
+ _exportFunctions.reset = function() {
+ _bound = {keydown:{}, keyup:{}};
+ };
+
+ // unbind all listeners and reset all variables.
+ _exportFunctions.destroy = function() {
+ _bound = {keydown:{}, keyup:{}};
+ container.removeEventListener('keydown', down, true);
+ container.removeEventListener('keyup', up, true);
+ };
+
+ // create listeners.
+ container.addEventListener('keydown',down,true);
+ container.addEventListener('keyup',up,true);
+
+ // return the public functions.
+ return _exportFunctions;
+ }
+
+ return keycharm;
+ }));
+
+
+
+
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
+
+ function webpackContext(req) {
+ throw new Error("Cannot find module '" + req + "'.");
+ }
+ webpackContext.keys = function() { return []; };
+ webpackContext.resolve = webpackContext;
+ module.exports = webpackContext;
+ webpackContext.id = 83;
+
+
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
+
+ module.exports = function(module) {
+ if(!module.webpackPolyfill) {
+ module.deprecate = function() {};
+ module.paths = [];
+ // module.parent = undefined by default
+ module.children = [];
+ module.webpackPolyfill = 1;
+ }
+ return module;
+ }
+
+
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, {}))
+
+/***/ },
+/* 86 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+
+ var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ var _inherits = function (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; };
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _NodeBase2 = __webpack_require__(103);
+
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+
+ 'use strict';
+
+ var Box = (function (_NodeBase) {
+ function Box(options, body, labelModule) {
+ _classCallCheck(this, Box);
+
+ _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(Box, _NodeBase);
+
+ _createClass(Box, [{
+ key: 'resize',
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
+ }
}
}, {
- key: '_setSize',
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize(ctx, selected);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- /**
- * used by create to set the size of the canvas.
- * @private
- */
- value: function _setSize() {
- this.colorPickerCanvas.style.width = '100%';
- this.colorPickerCanvas.style.height = '100%';
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
- this.colorPickerCanvas.width = 289 * this.pixelRatio;
- this.colorPickerCanvas.height = 289 * this.pixelRatio;
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+ ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth /= this.body.view.scale;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+
+ ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
+
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
+
+ this.labelModule.draw(ctx, x, y, selected);
}
}, {
- key: '_create',
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
+ }
+ }]);
- /**
- * create all dom elements
- * TODO: cleanup, lots of similar dom elements
- * @private
- */
- value: function _create() {
- this.frame = document.createElement('div');
- this.frame.className = 'vis-color-picker';
+ return Box;
+ })(_NodeBase3['default']);
- this.colorPickerDiv = document.createElement('div');
- this.colorPickerSelector = document.createElement('div');
- this.colorPickerSelector.className = 'vis-selector';
- this.colorPickerDiv.appendChild(this.colorPickerSelector);
+ exports['default'] = Box;
+ module.exports = exports['default'];
- this.colorPickerCanvas = document.createElement('canvas');
- this.colorPickerDiv.appendChild(this.colorPickerCanvas);
+/***/ },
+/* 87 */
+/***/ function(module, exports, __webpack_require__) {
- 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);
+ 'use strict';
- this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
- }
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
- this.colorPickerDiv.className = 'vis-color';
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- this.opacityDiv = document.createElement('div');
- this.opacityDiv.className = 'vis-opacity';
+ 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; }; })();
- this.brightnessDiv = document.createElement('div');
- this.brightnessDiv.className = 'vis-brightness';
+ var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ var _inherits = function (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; };
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _CircleImageBase2 = __webpack_require__(104);
+
+ var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2);
+
+ 'use strict';
+
+ var Circle = (function (_CircleImageBase) {
+ function Circle(options, body, labelModule) {
+ _classCallCheck(this, Circle);
+
+ _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(Circle, _CircleImageBase);
+
+ _createClass(Circle, [{
+ key: 'resize',
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+ this.options.size = diameter / 2;
- this.arrowDiv = document.createElement('div');
- this.arrowDiv.className = 'vis-arrow';
+ this.width = diameter;
+ this.height = diameter;
+ }
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize(ctx, selected);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- this.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._drawRawCircle(ctx, x, y, selected, hover, this.options.size);
- 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.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
- this.opacityDiv.appendChild(this.opacityRange);
- this.brightnessDiv.appendChild(this.brightnessRange);
+ this.labelModule.draw(ctx, x, y, selected);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
+ }
+ }]);
- 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);
- };
+ return Circle;
+ })(_CircleImageBase3['default']);
- this.brightnessLabel = document.createElement('div');
- this.brightnessLabel.className = 'vis-label vis-brightness';
- this.brightnessLabel.innerHTML = 'brightness:';
+ exports['default'] = Circle;
+ module.exports = exports['default'];
- this.opacityLabel = document.createElement('div');
- this.opacityLabel.className = 'vis-label vis-opacity';
- this.opacityLabel.innerHTML = 'opacity:';
+/***/ },
+/* 88 */
+/***/ function(module, exports, __webpack_require__) {
- this.newColorDiv = document.createElement('div');
- this.newColorDiv.className = 'vis-new-color';
- this.newColorDiv.innerHTML = 'new';
+ 'use strict';
- this.initialColorDiv = document.createElement('div');
- this.initialColorDiv.className = 'vis-initial-color';
- this.initialColorDiv.innerHTML = 'initial';
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
- this.cancelButton = document.createElement('div');
- this.cancelButton.className = 'vis-button vis-cancel';
- this.cancelButton.innerHTML = 'cancel';
- this.cancelButton.onclick = this._hide.bind(this, false);
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- this.applyButton = document.createElement('div');
- this.applyButton.className = 'vis-button vis-apply';
- this.applyButton.innerHTML = 'apply';
- this.applyButton.onclick = this._apply.bind(this);
+ 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; }; })();
- this.saveButton = document.createElement('div');
- this.saveButton.className = 'vis-button vis-save';
- this.saveButton.innerHTML = 'save';
- this.saveButton.onclick = this._save.bind(this);
+ var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
- this.loadButton = document.createElement('div');
- this.loadButton.className = 'vis-button vis-load';
- this.loadButton.innerHTML = 'load last';
- this.loadButton.onclick = this._loadLast.bind(this);
+ var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
- this.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);
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
- this.frame.appendChild(this.cancelButton);
- this.frame.appendChild(this.applyButton);
- this.frame.appendChild(this.saveButton);
- this.frame.appendChild(this.loadButton);
- }
- }, {
- key: '_bindHammer',
+ var _CircleImageBase2 = __webpack_require__(104);
- /**
- * bind hammer to the color picker
- * @private
- */
- value: function _bindHammer() {
- var _this = this;
+ var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2);
- 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',
+ var CircularImage = (function (_CircleImageBase) {
+ function CircularImage(options, body, labelModule, imageObj) {
+ _classCallCheck(this, CircularImage);
- /**
- * 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);
+ _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.imageObj = imageObj;
+ this._swapToImageResizeWhenImageLoaded = true;
+ }
- // clear the canvas
- var w = this.colorPickerCanvas.clientWidth;
- var h = this.colorPickerCanvas.clientHeight;
- ctx.clearRect(0, 0, w, h);
+ _inherits(CircularImage, _CircleImageBase);
- // 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);
- }
+ _createClass(CircularImage, [{
+ key: 'resize',
+ value: function resize() {
+ if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) {
+ if (!this.width) {
+ var diameter = this.options.size * 2;
+ this.width = diameter;
+ this.height = diameter;
+ this._swapToImageResizeWhenImageLoaded = true;
}
- 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);
+ } else {
+ if (this._swapToImageResizeWhenImageLoaded) {
+ this.width = undefined;
+ this.height = undefined;
+ this._swapToImageResizeWhenImageLoaded = false;
+ }
+ this._resizeImage();
}
- 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;
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize();
- var angle = Math.atan2(x, y);
- var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- var newTop = Math.cos(angle) * radius + centerY;
- var newLeft = Math.sin(angle) * radius + centerX;
+ var size = Math.min(0.5 * this.height, 0.5 * this.width);
+ this._drawRawCircle(ctx, x, y, selected, hover, size);
- this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
- this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
+ ctx.save();
+ ctx.circle(x, y, size);
+ ctx.stroke();
+ ctx.clip();
- // 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;
+ this._drawImageAtPosition(ctx);
- // 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 + ')';
+ ctx.restore();
+
+ this.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
+
+ this._drawImageLabel(ctx, x, y, selected);
+
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ return this._distanceToBorder(angle);
}
}]);
- return ColorPicker;
- })();
+ return CircularImage;
+ })(_CircleImageBase3['default']);
- exports['default'] = ColorPicker;
+ exports['default'] = CircularImage;
module.exports = exports['default'];
/***/ },
-/* 84 */
+/* 89 */
/***/ function(module, exports, __webpack_require__) {
- var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
- /**
- * Created by Alex on 11/6/2014.
- */
+ 'use strict';
- // https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
- // if the module has no dependencies, the above pattern can be simplified to
- (function (root, factory) {
- if (true) {
- // AMD. Register as an anonymous module.
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
- } else if (typeof exports === 'object') {
- // Node. Does not work with strict CommonJS, but
- // only CommonJS-like environments that support module.exports,
- // like Node.
- module.exports = factory();
- } else {
- // Browser globals (root is window)
- root.keycharm = factory();
- }
- }(this, function () {
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
- function keycharm(options) {
- var preventDefault = options && options.preventDefault || false;
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- var container = options && options.container || window;
- var _exportFunctions = {};
- var _bound = {keydown:{}, keyup:{}};
- var _keys = {};
- var i;
+ 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; }; })();
- // a - z
- for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
- // A - Z
- for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
- // 0 - 9
- for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
- // F1 - F12
- for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
- // num0 - num9
- for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
+ var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
- // numpad misc
- _keys['num*'] = {code:106, shift: false};
- _keys['num+'] = {code:107, shift: false};
- _keys['num-'] = {code:109, shift: false};
- _keys['num/'] = {code:111, shift: false};
- _keys['num.'] = {code:110, shift: false};
- // arrows
- _keys['left'] = {code:37, shift: false};
- _keys['up'] = {code:38, shift: false};
- _keys['right'] = {code:39, shift: false};
- _keys['down'] = {code:40, shift: false};
- // extra keys
- _keys['space'] = {code:32, shift: false};
- _keys['enter'] = {code:13, shift: false};
- _keys['shift'] = {code:16, shift: undefined};
- _keys['esc'] = {code:27, shift: false};
- _keys['backspace'] = {code:8, shift: false};
- _keys['tab'] = {code:9, shift: false};
- _keys['ctrl'] = {code:17, shift: false};
- _keys['alt'] = {code:18, shift: false};
- _keys['delete'] = {code:46, shift: false};
- _keys['pageup'] = {code:33, shift: false};
- _keys['pagedown'] = {code:34, shift: false};
- // symbols
- _keys['='] = {code:187, shift: false};
- _keys['-'] = {code:189, shift: false};
- _keys[']'] = {code:221, shift: false};
- _keys['['] = {code:219, shift: false};
+ var _inherits = function (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; };
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ var _NodeBase2 = __webpack_require__(103);
- var down = function(event) {handleEvent(event,'keydown');};
- var up = function(event) {handleEvent(event,'keyup');};
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
- // handle the actualy bound key with the event
- var handleEvent = function(event,type) {
- if (_bound[type][event.keyCode] !== undefined) {
- var bound = _bound[type][event.keyCode];
- for (var i = 0; i < bound.length; i++) {
- if (bound[i].shift === undefined) {
- bound[i].fn(event);
- }
- else if (bound[i].shift == true && event.shiftKey == true) {
- bound[i].fn(event);
- }
- else if (bound[i].shift == false && event.shiftKey == false) {
- bound[i].fn(event);
- }
- }
+ 'use strict';
- if (preventDefault == true) {
- event.preventDefault();
- }
- }
- };
+ var Database = (function (_NodeBase) {
+ function Database(options, body, labelModule) {
+ _classCallCheck(this, Database);
- // bind a key to a callback
- _exportFunctions.bind = function(key, callback, type) {
- if (type === undefined) {
- type = 'keydown';
- }
- if (_keys[key] === undefined) {
- throw new Error("unsupported key: " + key);
- }
- if (_bound[type][_keys[key].code] === undefined) {
- _bound[type][_keys[key].code] = [];
- }
- _bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
- };
+ _get(Object.getPrototypeOf(Database.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+ _inherits(Database, _NodeBase);
- // bind all keys to a call back (demo purposes)
- _exportFunctions.bindAll = function(callback, type) {
- if (type === undefined) {
- type = 'keydown';
- }
- for (var key in _keys) {
- if (_keys.hasOwnProperty(key)) {
- _exportFunctions.bind(key,callback,type);
- }
+ _createClass(Database, [{
+ key: 'resize',
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ var size = textSize.width + 2 * margin;
+ this.width = size;
+ this.height = size;
}
- };
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize(ctx, selected);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- // get the key label from an event
- _exportFunctions.getKey = function(event) {
- for (var key in _keys) {
- if (_keys.hasOwnProperty(key)) {
- if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
- return key;
- }
- else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
- return key;
- }
- else if (event.keyCode == _keys[key].code && key == 'shift') {
- return key;
- }
- }
- }
- return "unknown key, currently not supported";
- };
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
- // unbind either a specific callback from a key or all of them (by leaving callback undefined)
- _exportFunctions.unbind = function(key, callback, type) {
- if (type === undefined) {
- type = 'keydown';
- }
- if (_keys[key] === undefined) {
- throw new Error("unsupported key: " + key);
- }
- if (callback !== undefined) {
- var newBindings = [];
- var bound = _bound[type][_keys[key].code];
- if (bound !== undefined) {
- for (var i = 0; i < bound.length; i++) {
- if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
- newBindings.push(_bound[type][_keys[key].code][i]);
- }
- }
- }
- _bound[type][_keys[key].code] = newBindings;
- }
- else {
- _bound[type][_keys[key].code] = [];
- }
- };
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+ ctx.lineWidth = this.selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth *= this.networkScaleInv;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
+
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
+
+ this.labelModule.draw(ctx, x, y, selected);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
+ }
+ }]);
+
+ return Database;
+ })(_NodeBase3['default']);
+
+ exports['default'] = Database;
+ module.exports = exports['default'];
- // reset all bound variables.
- _exportFunctions.reset = function() {
- _bound = {keydown:{}, keyup:{}};
- };
+/***/ },
+/* 90 */
+/***/ function(module, exports, __webpack_require__) {
- // unbind all listeners and reset all variables.
- _exportFunctions.destroy = function() {
- _bound = {keydown:{}, keyup:{}};
- container.removeEventListener('keydown', down, true);
- container.removeEventListener('keyup', up, true);
- };
+ 'use strict';
- // create listeners.
- container.addEventListener('keydown',down,true);
- container.addEventListener('keyup',up,true);
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
- // return the public functions.
- return _exportFunctions;
+ var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ var _inherits = function (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; };
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _ShapeBase2 = __webpack_require__(105);
+
+ var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
+
+ 'use strict';
+
+ var Diamond = (function (_ShapeBase) {
+ function Diamond(options, body, labelModule) {
+ _classCallCheck(this, Diamond);
+
+ _get(Object.getPrototypeOf(Diamond.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- return keycharm;
- }));
+ _inherits(Diamond, _ShapeBase);
+ _createClass(Diamond, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ this._resizeShape();
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ return this._distanceToBorder(angle);
+ }
+ }]);
+ return Diamond;
+ })(_ShapeBase3['default']);
+ exports['default'] = Diamond;
+ module.exports = exports['default'];
/***/ },
-/* 85 */
+/* 91 */
/***/ function(module, exports, __webpack_require__) {
- function webpackContext(req) {
- throw new Error("Cannot find module '" + req + "'.");
- }
- webpackContext.keys = function() { return []; };
- webpackContext.resolve = webpackContext;
- module.exports = webpackContext;
- webpackContext.id = 85;
+ 'use strict';
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-/***/ },
-/* 86 */
-/***/ function(module, exports, __webpack_require__) {
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- module.children = [];
- module.webpackPolyfill = 1;
- }
- return module;
- }
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-/***/ },
-/* 87 */
-/***/ function(module, exports, __webpack_require__) {
+ var _inherits = function (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; };
- /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
- /* WEBPACK VAR INJECTION */}.call(exports, {}))
+ var _ShapeBase2 = __webpack_require__(105);
+
+ var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
+
+ 'use strict';
+
+ var Dot = (function (_ShapeBase) {
+ function Dot(options, body, labelModule) {
+ _classCallCheck(this, Dot);
+
+ _get(Object.getPrototypeOf(Dot.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(Dot, _ShapeBase);
+
+ _createClass(Dot, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ this._resizeShape();
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this._drawShape(ctx, 'circle', 2, x, y, selected, hover);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ return this.options.size + this.options.borderWidth;
+ }
+ }]);
+
+ return Dot;
+ })(_ShapeBase3['default']);
+
+ exports['default'] = Dot;
+ module.exports = exports['default'];
/***/ },
-/* 88 */
+/* 92 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -36869,29 +36970,32 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NodeBase2 = __webpack_require__(105);
+ var _NodeBase2 = __webpack_require__(103);
var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
'use strict';
- var Box = (function (_NodeBase) {
- function Box(options, body, labelModule) {
- _classCallCheck(this, Box);
+ var Ellipse = (function (_NodeBase) {
+ function Ellipse(options, body, labelModule) {
+ _classCallCheck(this, Ellipse);
- _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Ellipse.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Box, _NodeBase);
+ _inherits(Ellipse, _NodeBase);
- _createClass(Box, [{
+ _createClass(Ellipse, [{
key: 'resize',
value: function resize(ctx, selected) {
if (this.width === undefined) {
- var margin = 5;
var textSize = this.labelModule.getTextSize(ctx, selected);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
+
+ this.width = textSize.width * 1.5;
+ this.height = textSize.height * 2;
+ if (this.width < this.height) {
+ this.width = this.height;
+ }
}
}
}, {
@@ -36905,50 +37009,158 @@ return /******/ (function(modules) { // webpackBootstrap
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+
ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
ctx.lineWidth /= this.body.view.scale;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx.ellipse(this.left, this.top, this.width, this.height);
- ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
+
+ this.boundingBox.left = this.left;
+ this.boundingBox.top = this.top;
+ this.boundingBox.bottom = this.top + this.height;
+ this.boundingBox.right = this.left + this.width;
+
+ this.labelModule.draw(ctx, x, y, selected);
+ }
+ }, {
+ key: 'distanceToBorder',
+ value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = Math.sin(angle) * a;
+ var h = Math.cos(angle) * b;
+ return a * b / Math.sqrt(w * w + h * h);
+ }
+ }]);
+
+ return Ellipse;
+ })(_NodeBase3['default']);
+
+ exports['default'] = Ellipse;
+ module.exports = exports['default'];
+
+/***/ },
+/* 93 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+
+ var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+ var _inherits = function (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; };
+
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+
+ var _NodeBase2 = __webpack_require__(103);
+
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+
+ 'use strict';
+
+ var Icon = (function (_NodeBase) {
+ function Icon(options, body, labelModule) {
+ _classCallCheck(this, Icon);
+
+ _get(Object.getPrototypeOf(Icon.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(Icon, _NodeBase);
+
+ _createClass(Icon, [{
+ key: 'resize',
+ value: function resize(ctx) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var iconSize = {
+ width: Number(this.options.icon.size),
+ height: Number(this.options.icon.size)
+ };
+ this.width = iconSize.width + 2 * margin;
+ this.height = iconSize.height + 2 * margin;
+ }
+ }
+ }, {
+ key: 'draw',
+ value: function draw(ctx, x, y, selected, hover) {
+ this.resize(ctx);
+ this.options.icon.size = this.options.icon.size || 50;
+
+ this.left = x - this.width * 0.5;
+ this.top = y - this.height * 0.5;
+ this._icon(ctx, x, y, selected);
+
+ this.boundingBox.top = y - this.options.icon.size * 0.5;
+ this.boundingBox.left = x - this.options.icon.size * 0.5;
+ this.boundingBox.right = x + this.options.icon.size * 0.5;
+ this.boundingBox.bottom = y + this.options.icon.size * 0.5;
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
+ if (this.options.label !== undefined) {
+ var iconTextSpacing = 5;
+ this.labelModule.draw(ctx, x, y + this.height * 0.5 + iconTextSpacing, selected);
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ }
+ }
+ }, {
+ key: '_icon',
+ value: function _icon(ctx, x, y, selected) {
+ var iconSize = Number(this.options.icon.size);
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ if (this.options.icon.code !== undefined) {
+ ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face;
- ctx.stroke();
+ // draw icon
+ ctx.fillStyle = this.options.icon.color || 'black';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
- this.boundingBox.top = this.top;
- this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
- this.boundingBox.bottom = this.top + this.height;
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fillText(this.options.icon.code, x, y);
- this.labelModule.draw(ctx, x, y, selected);
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ } else {
+ console.error('When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally.');
+ }
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
+ this._distanceToBorder(angle);
}
}]);
- return Box;
+ return Icon;
})(_NodeBase3['default']);
- exports['default'] = Box;
+ exports['default'] = Icon;
module.exports = exports['default'];
/***/ },
-/* 89 */
+/* 94 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -36967,49 +37179,45 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _CircleImageBase2 = __webpack_require__(106);
+ var _CircleImageBase2 = __webpack_require__(104);
var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2);
'use strict';
- var Circle = (function (_CircleImageBase) {
- function Circle(options, body, labelModule) {
- _classCallCheck(this, Circle);
+ var Image = (function (_CircleImageBase) {
+ function Image(options, body, labelModule, imageObj) {
+ _classCallCheck(this, Image);
- _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Image.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.imageObj = imageObj;
}
- _inherits(Circle, _CircleImageBase);
+ _inherits(Image, _CircleImageBase);
- _createClass(Circle, [{
+ _createClass(Image, [{
key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
- this.options.size = diameter / 2;
-
- this.width = diameter;
- this.height = diameter;
- }
+ value: function resize() {
+ this._resizeImage();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
+ this.resize();
this.left = x - this.width / 2;
this.top = y - this.height / 2;
- this._drawRawCircle(ctx, x, y, selected, hover, this.options.size);
+ this._drawImageAtPosition(ctx);
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
- this.labelModule.draw(ctx, x, y, selected);
+ this._drawImageLabel(ctx, x, y, selected || hover);
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
}
}, {
key: 'distanceToBorder',
@@ -37023,14 +37231,14 @@ return /******/ (function(modules) { // webpackBootstrap
}
}]);
- return Circle;
+ return Image;
})(_CircleImageBase3['default']);
- exports['default'] = Circle;
+ exports['default'] = Image;
module.exports = exports['default'];
/***/ },
-/* 90 */
+/* 95 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37049,72 +37257,30 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _CircleImageBase2 = __webpack_require__(106);
+ var _ShapeBase2 = __webpack_require__(105);
- var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2);
+ var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
'use strict';
- var CircularImage = (function (_CircleImageBase) {
- function CircularImage(options, body, labelModule, imageObj) {
- _classCallCheck(this, CircularImage);
+ var Square = (function (_ShapeBase) {
+ function Square(options, body, labelModule) {
+ _classCallCheck(this, Square);
- _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule);
- this.imageObj = imageObj;
- this._swapToImageResizeWhenImageLoaded = true;
+ _get(Object.getPrototypeOf(Square.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(CircularImage, _CircleImageBase);
+ _inherits(Square, _ShapeBase);
- _createClass(CircularImage, [{
+ _createClass(Square, [{
key: 'resize',
value: function resize() {
- if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) {
- if (!this.width) {
- var diameter = this.options.size * 2;
- this.width = diameter;
- this.height = diameter;
- this._swapToImageResizeWhenImageLoaded = true;
- }
- } else {
- if (this._swapToImageResizeWhenImageLoaded) {
- this.width = undefined;
- this.height = undefined;
- this._swapToImageResizeWhenImageLoaded = false;
- }
- this._resizeImage();
- }
+ this._resizeShape();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize();
-
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- var size = Math.min(0.5 * this.height, 0.5 * this.width);
- this._drawRawCircle(ctx, x, y, selected, hover, size);
-
- ctx.save();
- ctx.circle(x, y, size);
- ctx.stroke();
- ctx.clip();
-
- this._drawImageAtPosition(ctx);
-
- ctx.restore();
-
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
-
- this._drawImageLabel(ctx, x, y, selected);
-
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ this._drawShape(ctx, 'square', 2, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
@@ -37124,14 +37290,14 @@ return /******/ (function(modules) { // webpackBootstrap
}
}]);
- return CircularImage;
- })(_CircleImageBase3['default']);
+ return Square;
+ })(_ShapeBase3['default']);
- exports['default'] = CircularImage;
+ exports['default'] = Square;
module.exports = exports['default'];
/***/ },
-/* 91 */
+/* 96 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37150,86 +37316,46 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NodeBase2 = __webpack_require__(105);
+ var _ShapeBase2 = __webpack_require__(105);
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
'use strict';
- var Database = (function (_NodeBase) {
- function Database(options, body, labelModule) {
- _classCallCheck(this, Database);
+ var Star = (function (_ShapeBase) {
+ function Star(options, body, labelModule) {
+ _classCallCheck(this, Star);
- _get(Object.getPrototypeOf(Database.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Star.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Database, _NodeBase);
+ _inherits(Star, _ShapeBase);
- _createClass(Database, [{
+ _createClass(Star, [{
key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- var size = textSize.width + 2 * margin;
- this.width = size;
- this.height = size;
- }
+ value: function resize(ctx) {
+ this._resizeShape();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
-
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
- ctx.lineWidth = this.selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
-
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
-
- ctx.stroke();
-
- this.boundingBox.top = this.top;
- this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
- this.boundingBox.bottom = this.top + this.height;
-
- this.labelModule.draw(ctx, x, y, selected);
+ this._drawShape(ctx, 'star', 4, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
+ return this._distanceToBorder(angle);
}
}]);
- return Database;
- })(_NodeBase3['default']);
+ return Star;
+ })(_ShapeBase3['default']);
- exports['default'] = Database;
+ exports['default'] = Star;
module.exports = exports['default'];
/***/ },
-/* 92 */
+/* 97 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37248,46 +37374,66 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _ShapeBase2 = __webpack_require__(107);
+ var _NodeBase2 = __webpack_require__(103);
- var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
'use strict';
- var Diamond = (function (_ShapeBase) {
- function Diamond(options, body, labelModule) {
- _classCallCheck(this, Diamond);
+ var Text = (function (_NodeBase) {
+ function Text(options, body, labelModule) {
+ _classCallCheck(this, Text);
- _get(Object.getPrototypeOf(Diamond.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Text.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Diamond, _ShapeBase);
+ _inherits(Text, _NodeBase);
- _createClass(Diamond, [{
+ _createClass(Text, [{
key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
+ value: function resize(ctx, selected) {
+ if (this.width === undefined) {
+ var margin = 5;
+ var textSize = this.labelModule.getTextSize(ctx, selected);
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
+ }
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'diamond', 4, x, y, selected, hover);
+ this.resize(ctx, selected || hover);
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ this.labelModule.draw(ctx, x, y, selected || hover);
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ this.boundingBox.top = this.top;
+ this.boundingBox.left = this.left;
+ this.boundingBox.right = this.left + this.width;
+ this.boundingBox.bottom = this.top + this.height;
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
+ this.resize(ctx);
return this._distanceToBorder(angle);
}
}]);
- return Diamond;
- })(_ShapeBase3['default']);
+ return Text;
+ })(_NodeBase3['default']);
- exports['default'] = Diamond;
+ exports['default'] = Text;
module.exports = exports['default'];
/***/ },
-/* 93 */
+/* 98 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37306,22 +37452,22 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _ShapeBase2 = __webpack_require__(107);
+ var _ShapeBase2 = __webpack_require__(105);
var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
'use strict';
- var Dot = (function (_ShapeBase) {
- function Dot(options, body, labelModule) {
- _classCallCheck(this, Dot);
+ var Triangle = (function (_ShapeBase) {
+ function Triangle(options, body, labelModule) {
+ _classCallCheck(this, Triangle);
- _get(Object.getPrototypeOf(Dot.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(Triangle.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Dot, _ShapeBase);
+ _inherits(Triangle, _ShapeBase);
- _createClass(Dot, [{
+ _createClass(Triangle, [{
key: 'resize',
value: function resize(ctx) {
this._resizeShape();
@@ -37329,23 +37475,23 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'circle', 2, x, y, selected, hover);
+ this._drawShape(ctx, 'triangle', 3, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- return this.options.size + this.options.borderWidth;
+ return this._distanceToBorder(angle);
}
}]);
- return Dot;
+ return Triangle;
})(_ShapeBase3['default']);
- exports['default'] = Dot;
+ exports['default'] = Triangle;
module.exports = exports['default'];
/***/ },
-/* 94 */
+/* 99 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37364,89 +37510,46 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NodeBase2 = __webpack_require__(105);
+ var _ShapeBase2 = __webpack_require__(105);
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
'use strict';
- var Ellipse = (function (_NodeBase) {
- function Ellipse(options, body, labelModule) {
- _classCallCheck(this, Ellipse);
+ var TriangleDown = (function (_ShapeBase) {
+ function TriangleDown(options, body, labelModule) {
+ _classCallCheck(this, TriangleDown);
- _get(Object.getPrototypeOf(Ellipse.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(TriangleDown.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Ellipse, _NodeBase);
+ _inherits(TriangleDown, _ShapeBase);
- _createClass(Ellipse, [{
+ _createClass(TriangleDown, [{
key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var textSize = this.labelModule.getTextSize(ctx, selected);
-
- this.width = textSize.width * 1.5;
- this.height = textSize.height * 2;
- if (this.width < this.height) {
- this.width = this.height;
- }
- }
+ value: function resize(ctx) {
+ this._resizeShape();
}
}, {
key: 'draw',
value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
-
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
-
- ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth /= this.body.view.scale;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx.ellipse(this.left, this.top, this.width, this.height);
-
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
-
- ctx.stroke();
-
- this.boundingBox.left = this.left;
- this.boundingBox.top = this.top;
- this.boundingBox.bottom = this.top + this.height;
- this.boundingBox.right = this.left + this.width;
-
- this.labelModule.draw(ctx, x, y, selected);
+ this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover);
}
}, {
key: 'distanceToBorder',
value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
+ return this._distanceToBorder(angle);
}
}]);
- return Ellipse;
- })(_NodeBase3['default']);
+ return TriangleDown;
+ })(_ShapeBase3['default']);
- exports['default'] = Ellipse;
+ exports['default'] = TriangleDown;
module.exports = exports['default'];
/***/ },
-/* 95 */
+/* 100 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37465,96 +37568,144 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NodeBase2 = __webpack_require__(105);
-
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ var _BezierEdgeBase2 = __webpack_require__(106);
- 'use strict';
+ var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2);
- var Icon = (function (_NodeBase) {
- function Icon(options, body, labelModule) {
- _classCallCheck(this, Icon);
+ var BezierEdgeDynamic = (function (_BezierEdgeBase) {
+ function BezierEdgeDynamic(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeDynamic);
- _get(Object.getPrototypeOf(Icon.prototype), 'constructor', this).call(this, options, body, labelModule);
+ //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
+ _get(Object.getPrototypeOf(BezierEdgeDynamic.prototype), 'constructor', this).call(this, options, body, labelModule); // --> this calls the setOptions below
}
- _inherits(Icon, _NodeBase);
+ _inherits(BezierEdgeDynamic, _BezierEdgeBase);
- _createClass(Icon, [{
- key: 'resize',
- value: function resize(ctx) {
- if (this.width === undefined) {
- var margin = 5;
- var iconSize = {
- width: Number(this.options.icon.size),
- height: Number(this.options.icon.size)
- };
- this.width = iconSize.width + 2 * margin;
- this.height = iconSize.height + 2 * margin;
+ _createClass(BezierEdgeDynamic, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ this.options = options;
+ this.from = this.body.nodes[this.options.from];
+ this.to = this.body.nodes[this.options.to];
+ this.id = this.options.id;
+ this.setupSupportNode();
+
+ // fix weird behaviour
+ if (this.from.id === this.to.id) {
+ this.via.setOptions({ physics: false });
+ } else {
+ this.via.setOptions({ physics: true });
}
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx);
- this.options.icon.size = this.options.icon.size || 50;
-
- this.left = x - this.width * 0.5;
- this.top = y - this.height * 0.5;
- this._icon(ctx, x, y, selected);
-
- this.boundingBox.top = y - this.options.icon.size * 0.5;
- this.boundingBox.left = x - this.options.icon.size * 0.5;
- this.boundingBox.right = x + this.options.icon.size * 0.5;
- this.boundingBox.bottom = y + this.options.icon.size * 0.5;
-
- if (this.options.label !== undefined) {
- var iconTextSpacing = 5;
- this.labelModule.draw(ctx, x, y + this.height * 0.5 + iconTextSpacing, selected);
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ key: 'cleanup',
+ value: function cleanup() {
+ if (this.via !== undefined) {
+ delete this.body.nodes[this.via.id];
+ this.via = undefined;
+ return true;
}
+ return false;
}
}, {
- key: '_icon',
- value: function _icon(ctx, x, y, selected) {
- var iconSize = Number(this.options.icon.size);
+ key: 'togglePhysics',
+ value: function togglePhysics(status) {
+ this.via.setOptions({ physics: status });
+ }
+ }, {
+ key: 'setupSupportNode',
- if (this.options.icon.code !== undefined) {
- ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face;
+ /**
+ * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
+ * are used for the force calculation.
+ *
+ * The changed data is not called, if needed, it is returned by the main edge constructor.
+ * @private
+ */
+ value: function setupSupportNode() {
+ if (this.via === undefined) {
+ var nodeId = 'edgeId:' + this.id;
+ var node = this.body.functions.createNode({
+ id: nodeId,
+ shape: 'circle',
+ physics: true,
+ hidden: true
+ });
+ this.body.nodes[nodeId] = node;
+ this.via = node;
+ this.via.parentEdgeId = this.id;
+ this.positionBezierNode();
+ }
+ }
+ }, {
+ key: 'positionBezierNode',
+ value: function positionBezierNode() {
+ if (this.via !== undefined && this.from !== undefined && this.to !== undefined) {
+ this.via.x = 0.5 * (this.from.x + this.to.x);
+ this.via.y = 0.5 * (this.from.y + this.to.y);
+ } else if (this.via !== undefined) {
+ this.via.x = 0;
+ this.via.y = 0;
+ }
+ }
+ }, {
+ key: '_line',
- // draw icon
- ctx.fillStyle = this.options.icon.color || 'black';
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.stroke();
+ this.disableShadow(ctx);
+ return this.via;
+ }
+ }, {
+ key: 'getPoint',
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fillText(this.options.icon.code, x, y);
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ var t = percentage;
+ var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * this.via.x + Math.pow(t, 2) * this.to.x;
+ var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * this.via.y + Math.pow(t, 2) * this.to.y;
- // disable shadows for other elements.
- this.disableShadow(ctx);
- } else {
- console.error('When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally.');
- }
+ return { x: x, y: y };
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- this._distanceToBorder(angle);
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ return this._findBorderPositionBezier(nearNode, ctx, this.via);
+ }
+ }, {
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ // x3,y3 is the point
+ return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
}
}]);
- return Icon;
- })(_NodeBase3['default']);
+ return BezierEdgeDynamic;
+ })(_BezierEdgeBase3['default']);
- exports['default'] = Icon;
+ exports['default'] = BezierEdgeDynamic;
module.exports = exports['default'];
/***/ },
-/* 96 */
+/* 101 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37573,183 +37724,252 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _CircleImageBase2 = __webpack_require__(106);
-
- var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2);
+ var _BezierEdgeBase2 = __webpack_require__(106);
- 'use strict';
+ var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2);
- var Image = (function (_CircleImageBase) {
- function Image(options, body, labelModule, imageObj) {
- _classCallCheck(this, Image);
+ var BezierEdgeStatic = (function (_BezierEdgeBase) {
+ function BezierEdgeStatic(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeStatic);
- _get(Object.getPrototypeOf(Image.prototype), 'constructor', this).call(this, options, body, labelModule);
- this.imageObj = imageObj;
+ _get(Object.getPrototypeOf(BezierEdgeStatic.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Image, _CircleImageBase);
+ _inherits(BezierEdgeStatic, _BezierEdgeBase);
- _createClass(Image, [{
- key: 'resize',
- value: function resize() {
- this._resizeImage();
+ _createClass(BezierEdgeStatic, [{
+ key: 'cleanup',
+ value: function cleanup() {
+ return false;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize();
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ key: '_line',
- this._drawImageAtPosition(ctx);
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ var via = this._getViaCoordinates();
+ var returnValue = via;
- this.boundingBox.top = this.top;
- this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
- this.boundingBox.bottom = this.top + this.height;
+ // fallback to normal straight edges
+ if (via.x === undefined) {
+ ctx.lineTo(this.to.x, this.to.y);
+ returnValue = undefined;
+ } else {
+ ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
+ }
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.stroke();
+ this.disableShadow(ctx);
+ return returnValue;
+ }
+ }, {
+ key: '_getViaCoordinates',
+ value: function _getViaCoordinates() {
+ var xVia = undefined;
+ var yVia = undefined;
+ var factor = this.options.smooth.roundness;
+ var type = this.options.smooth.type;
+ var dx = Math.abs(this.from.x - this.to.x);
+ var dy = Math.abs(this.from.y - this.to.y);
+ if (type === 'discrete' || type === 'diagonalCross') {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ }
+ } else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ }
+ }
+ if (type === 'discrete') {
+ xVia = dx < factor * dy ? this.from.x : xVia;
+ }
+ } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ }
+ } else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ }
+ }
+ if (type === 'discrete') {
+ yVia = dy < factor * dx ? this.from.y : yVia;
+ }
+ }
+ } else if (type === 'straightCross') {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ // up - down
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1 - factor) * dy;
+ } else {
+ yVia = this.to.y + (1 - factor) * dy;
+ }
+ } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ // left - right
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1 - factor) * dx;
+ } else {
+ xVia = this.to.x + (1 - factor) * dx;
+ }
+ yVia = this.from.y;
+ }
+ } else if (type === 'horizontal') {
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1 - factor) * dx;
+ } else {
+ xVia = this.to.x + (1 - factor) * dx;
+ }
+ yVia = this.from.y;
+ } else if (type === 'vertical') {
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1 - factor) * dy;
+ } else {
+ yVia = this.to.y + (1 - factor) * dy;
+ }
+ } else if (type === 'curvedCW') {
+ dx = this.to.x - this.from.x;
+ dy = this.from.y - this.to.y;
+ var radius = Math.sqrt(dx * dx + dy * dy);
+ var pi = Math.PI;
- this._drawImageLabel(ctx, x, y, selected || hover);
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ var originalAngle = Math.atan2(dy, dx);
+ var myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
+
+ xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
+ yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
+ } else if (type === 'curvedCCW') {
+ dx = this.to.x - this.from.x;
+ dy = this.from.y - this.to.y;
+ var radius = Math.sqrt(dx * dx + dy * dy);
+ var pi = Math.PI;
+
+ var originalAngle = Math.atan2(dy, dx);
+ var myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
+
+ xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
+ yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
+ } else {
+ // continuous
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x > xVia ? this.to.x : xVia;
+ }
+ } else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x > xVia ? this.to.x : xVia;
+ }
+ }
+ } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ }
+ } else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ } else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ }
+ }
+ }
+ return { x: xVia, y: yVia };
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- var a = this.width / 2;
- var b = this.height / 2;
- var w = Math.sin(angle) * a;
- var h = Math.cos(angle) * b;
- return a * b / Math.sqrt(w * w + h * h);
- }
- }]);
-
- return Image;
- })(_CircleImageBase3['default']);
-
- exports['default'] = Image;
- module.exports = exports['default'];
-
-/***/ },
-/* 97 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
- var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
- var _inherits = function (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; };
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _ShapeBase2 = __webpack_require__(107);
-
- var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
-
- 'use strict';
-
- var Square = (function (_ShapeBase) {
- function Square(options, body, labelModule) {
- _classCallCheck(this, Square);
-
- _get(Object.getPrototypeOf(Square.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
-
- _inherits(Square, _ShapeBase);
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ var options = arguments[2] === undefined ? {} : arguments[2];
- _createClass(Square, [{
- key: 'resize',
- value: function resize() {
- this._resizeShape();
+ return this._findBorderPositionBezier(nearNode, ctx, options.via);
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'square', 2, x, y, selected, hover);
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ var via = arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
+ // x3,y3 is the point
+ return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via);
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- return this._distanceToBorder(angle);
- }
- }]);
-
- return Square;
- })(_ShapeBase3['default']);
-
- exports['default'] = Square;
- module.exports = exports['default'];
-
-/***/ },
-/* 98 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
- var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
- var _inherits = function (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; };
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _ShapeBase2 = __webpack_require__(107);
-
- var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
-
- 'use strict';
-
- var Star = (function (_ShapeBase) {
- function Star(options, body, labelModule) {
- _classCallCheck(this, Star);
+ key: 'getPoint',
- _get(Object.getPrototypeOf(Star.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ var via = arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
- _inherits(Star, _ShapeBase);
+ var t = percentage;
+ var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * this.to.x;
+ var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * this.to.y;
- _createClass(Star, [{
- key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
- }
- }, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'star', 4, x, y, selected, hover);
- }
- }, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ return { x: x, y: y };
}
}]);
- return Star;
- })(_ShapeBase3['default']);
+ return BezierEdgeStatic;
+ })(_BezierEdgeBase3['default']);
- exports['default'] = Star;
+ exports['default'] = BezierEdgeStatic;
module.exports = exports['default'];
/***/ },
-/* 99 */
+/* 102 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37768,182 +37988,164 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _NodeBase2 = __webpack_require__(105);
-
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ var _EdgeBase2 = __webpack_require__(107);
- 'use strict';
+ var _EdgeBase3 = _interopRequireWildcard(_EdgeBase2);
- var Text = (function (_NodeBase) {
- function Text(options, body, labelModule) {
- _classCallCheck(this, Text);
+ var StraightEdge = (function (_EdgeBase) {
+ function StraightEdge(options, body, labelModule) {
+ _classCallCheck(this, StraightEdge);
- _get(Object.getPrototypeOf(Text.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(StraightEdge.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(Text, _NodeBase);
+ _inherits(StraightEdge, _EdgeBase);
- _createClass(Text, [{
- key: 'resize',
- value: function resize(ctx, selected) {
- if (this.width === undefined) {
- var margin = 5;
- var textSize = this.labelModule.getTextSize(ctx, selected);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
- }
+ _createClass(StraightEdge, [{
+ key: 'cleanup',
+ value: function cleanup() {
+ return false;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this.resize(ctx, selected || hover);
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
+ key: '_line',
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function _line(ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
// draw shadow if enabled
this.enableShadow(ctx);
- this.labelModule.draw(ctx, x, y, selected || hover);
-
- // disable shadows for other elements.
+ ctx.stroke();
this.disableShadow(ctx);
-
- this.boundingBox.top = this.top;
- this.boundingBox.left = this.left;
- this.boundingBox.right = this.left + this.width;
- this.boundingBox.bottom = this.top + this.height;
+ return undefined;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- this.resize(ctx);
- return this._distanceToBorder(angle);
- }
- }]);
-
- return Text;
- })(_NodeBase3['default']);
-
- exports['default'] = Text;
- module.exports = exports['default'];
-
-/***/ },
-/* 100 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
- var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
- var _inherits = function (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; };
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _ShapeBase2 = __webpack_require__(107);
-
- var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
-
- 'use strict';
+ key: 'getPoint',
- var Triangle = (function (_ShapeBase) {
- function Triangle(options, body, labelModule) {
- _classCallCheck(this, Triangle);
+ /**
+ * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
+ * @param percentage
+ * @param via
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ value: function getPoint(percentage) {
+ return {
+ x: (1 - percentage) * this.from.x + percentage * this.to.x,
+ y: (1 - percentage) * this.from.y + percentage * this.to.y
+ };
+ }
+ }, {
+ key: '_findBorderPosition',
+ value: function _findBorderPosition(nearNode, ctx) {
+ var node1 = this.to;
+ var node2 = this.from;
+ if (nearNode.id === this.from.id) {
+ node1 = this.from;
+ node2 = this.to;
+ }
- _get(Object.getPrototypeOf(Triangle.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ var angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
+ var dx = node1.x - node2.x;
+ var dy = node1.y - node2.y;
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ var toBorderDist = nearNode.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
- _inherits(Triangle, _ShapeBase);
+ var borderPos = {};
+ borderPos.x = (1 - toBorderPoint) * node2.x + toBorderPoint * node1.x;
+ borderPos.y = (1 - toBorderPoint) * node2.y + toBorderPoint * node1.y;
- _createClass(Triangle, [{
- key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
- }
- }, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'triangle', 3, x, y, selected, hover);
+ return borderPos;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ key: '_getDistanceToEdge',
+ value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ // x3,y3 is the point
+ return this._getDistanceToLine(x1, y1, x2, y2, x3, y3);
}
}]);
- return Triangle;
- })(_ShapeBase3['default']);
+ return StraightEdge;
+ })(_EdgeBase3['default']);
- exports['default'] = Triangle;
+ exports['default'] = StraightEdge;
module.exports = exports['default'];
/***/ },
-/* 101 */
+/* 103 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
- var _inherits = function (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; };
-
Object.defineProperty(exports, '__esModule', {
value: true
});
- var _ShapeBase2 = __webpack_require__(107);
-
- var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2);
-
- 'use strict';
-
- var TriangleDown = (function (_ShapeBase) {
- function TriangleDown(options, body, labelModule) {
- _classCallCheck(this, TriangleDown);
+ var NodeBase = (function () {
+ function NodeBase(options, body, labelModule) {
+ _classCallCheck(this, NodeBase);
- _get(Object.getPrototypeOf(TriangleDown.prototype), 'constructor', this).call(this, options, body, labelModule);
+ this.body = body;
+ this.labelModule = labelModule;
+ this.setOptions(options);
+ this.top = undefined;
+ this.left = undefined;
+ this.height = undefined;
+ this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 };
}
- _inherits(TriangleDown, _ShapeBase);
-
- _createClass(TriangleDown, [{
- key: 'resize',
- value: function resize(ctx) {
- this._resizeShape();
+ _createClass(NodeBase, [{
+ key: 'setOptions',
+ value: function setOptions(options) {
+ this.options = options;
}
}, {
- key: 'draw',
- value: function draw(ctx, x, y, selected, hover) {
- this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover);
+ key: '_distanceToBorder',
+ value: function _distanceToBorder(angle) {
+ var borderWidth = 1;
+ return Math.min(Math.abs(this.width / 2 / Math.cos(angle)), Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
}
}, {
- key: 'distanceToBorder',
- value: function distanceToBorder(ctx, angle) {
- return this._distanceToBorder(angle);
+ 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 TriangleDown;
- })(_ShapeBase3['default']);
+ return NodeBase;
+ })();
- exports['default'] = TriangleDown;
+ exports['default'] = NodeBase;
module.exports = exports['default'];
/***/ },
-/* 102 */
+/* 104 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -37962,144 +38164,109 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _BezierEdgeBase2 = __webpack_require__(108);
+ var _NodeBase2 = __webpack_require__(103);
- var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2);
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
- var BezierEdgeDynamic = (function (_BezierEdgeBase) {
- function BezierEdgeDynamic(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeDynamic);
+ var CircleImageBase = (function (_NodeBase) {
+ function CircleImageBase(options, body, labelModule) {
+ _classCallCheck(this, CircleImageBase);
- //this.via = undefined; // Here for completeness but not allowed to defined before super() is invoked.
- _get(Object.getPrototypeOf(BezierEdgeDynamic.prototype), 'constructor', this).call(this, options, body, labelModule); // --> this calls the setOptions below
+ _get(Object.getPrototypeOf(CircleImageBase.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(BezierEdgeDynamic, _BezierEdgeBase);
-
- _createClass(BezierEdgeDynamic, [{
- key: 'setOptions',
- value: function setOptions(options) {
- this.options = options;
- this.from = this.body.nodes[this.options.from];
- this.to = this.body.nodes[this.options.to];
- this.id = this.options.id;
- this.setupSupportNode();
-
- // fix weird behaviour
- if (this.from.id === this.to.id) {
- this.via.setOptions({ physics: false });
- } else {
- this.via.setOptions({ physics: true });
- }
- }
- }, {
- key: 'cleanup',
- value: function cleanup() {
- if (this.via !== undefined) {
- delete this.body.nodes[this.via.id];
- this.via = undefined;
- return true;
- }
- return false;
- }
- }, {
- key: 'togglePhysics',
- value: function togglePhysics(status) {
- this.via.setOptions({ physics: status });
- }
- }, {
- key: 'setupSupportNode',
+ _inherits(CircleImageBase, _NodeBase);
- /**
- * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
- * are used for the force calculation.
- *
- * The changed data is not called, if needed, it is returned by the main edge constructor.
- * @private
- */
- value: function setupSupportNode() {
- if (this.via === undefined) {
- var nodeId = 'edgeId:' + this.id;
- var node = this.body.functions.createNode({
- id: nodeId,
- shape: 'circle',
- physics: true,
- hidden: true
- });
- this.body.nodes[nodeId] = node;
- this.via = node;
- this.via.parentEdgeId = this.id;
- this.positionBezierNode();
- }
- }
- }, {
- key: 'positionBezierNode',
- value: function positionBezierNode() {
- if (this.via !== undefined && this.from !== undefined && this.to !== undefined) {
- this.via.x = 0.5 * (this.from.x + this.to.x);
- this.via.y = 0.5 * (this.from.y + this.to.y);
- } else if (this.via !== undefined) {
- this.via.x = 0;
- this.via.y = 0;
+ _createClass(CircleImageBase, [{
+ key: '_resizeImage',
+ value: function _resizeImage() {
+ if (!this.width || !this.height) {
+ // undefined or 0
+ var width, height, ratio;
+ if (this.imageObj.width && this.imageObj.height) {
+ // not undefined or 0
+ width = 0;
+ height = 0;
+ }
+ if (this.imageObj.width > this.imageObj.height) {
+ ratio = this.imageObj.width / this.imageObj.height;
+ width = this.options.size * 2 * ratio || this.imageObj.width;
+ height = this.options.size * 2 || this.imageObj.height;
+ } else {
+ ratio = this.imageObj.height / this.imageObj.width;
+ width = this.options.size * 2 || this.imageObj.width;
+ height = this.options.size * 2 * ratio || this.imageObj.height;
+ }
+ this.width = width;
+ this.height = height;
}
}
}, {
- key: '_line',
+ key: '_drawRawCircle',
+ value: function _drawRawCircle(ctx, x, y, selected, hover, size) {
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
- /**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.stroke();
- this.disableShadow(ctx);
- return this.via;
- }
- }, {
- key: 'getPoint',
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- var t = percentage;
- var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * this.via.x + Math.pow(t, 2) * this.to.x;
- var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * this.via.y + Math.pow(t, 2) * this.to.y;
+ ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth *= this.networkScaleInv;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
- return { x: x, y: y };
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx.circle(x, y, size);
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
}
}, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- return this._findBorderPositionBezier(nearNode, ctx, this.via);
+ key: '_drawImageAtPosition',
+ value: function _drawImageAtPosition(ctx) {
+ if (this.imageObj.width != 0) {
+ // draw the image
+ ctx.globalAlpha = 1;
+
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ }
}
}, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
- // x3,y3 is the point
- return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
+ key: '_drawImageLabel',
+ value: function _drawImageLabel(ctx, x, y, selected) {
+ var yLabel;
+ var offset = 0;
+
+ if (this.height !== undefined) {
+ offset = this.height * 0.5;
+ var labelDimensions = this.labelModule.getTextSize(ctx);
+ if (labelDimensions.lineCount >= 1) {
+ offset += labelDimensions.height / 2;
+ }
+ }
+
+ yLabel = y + offset;
+ this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
}
}]);
- return BezierEdgeDynamic;
- })(_BezierEdgeBase3['default']);
+ return CircleImageBase;
+ })(_NodeBase3['default']);
- exports['default'] = BezierEdgeDynamic;
+ exports['default'] = CircleImageBase;
module.exports = exports['default'];
/***/ },
-/* 103 */
+/* 105 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -38116,254 +38283,80 @@ return /******/ (function(modules) { // webpackBootstrap
Object.defineProperty(exports, '__esModule', {
value: true
- });
-
- var _BezierEdgeBase2 = __webpack_require__(108);
-
- var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2);
-
- var BezierEdgeStatic = (function (_BezierEdgeBase) {
- function BezierEdgeStatic(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeStatic);
-
- _get(Object.getPrototypeOf(BezierEdgeStatic.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
-
- _inherits(BezierEdgeStatic, _BezierEdgeBase);
-
- _createClass(BezierEdgeStatic, [{
- key: 'cleanup',
- value: function cleanup() {
- return false;
- }
- }, {
- key: '_line',
-
- /**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- var via = this._getViaCoordinates();
- var returnValue = via;
-
- // fallback to normal straight edges
- if (via.x === undefined) {
- ctx.lineTo(this.to.x, this.to.y);
- returnValue = undefined;
- } else {
- ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
- }
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.stroke();
- this.disableShadow(ctx);
- return returnValue;
- }
- }, {
- key: '_getViaCoordinates',
- value: function _getViaCoordinates() {
- var xVia = undefined;
- var yVia = undefined;
- var factor = this.options.smooth.roundness;
- var type = this.options.smooth.type;
- var dx = Math.abs(this.from.x - this.to.x);
- var dy = Math.abs(this.from.y - this.to.y);
- if (type === 'discrete' || type === 'diagonalCross') {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- }
- } else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- }
- }
- if (type === 'discrete') {
- xVia = dx < factor * dy ? this.from.x : xVia;
- }
- } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- }
- } else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- }
- }
- if (type === 'discrete') {
- yVia = dy < factor * dx ? this.from.y : yVia;
- }
- }
- } else if (type === 'straightCross') {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- // up - down
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1 - factor) * dy;
- } else {
- yVia = this.to.y + (1 - factor) * dy;
- }
- } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- // left - right
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1 - factor) * dx;
- } else {
- xVia = this.to.x + (1 - factor) * dx;
- }
- yVia = this.from.y;
- }
- } else if (type === 'horizontal') {
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1 - factor) * dx;
- } else {
- xVia = this.to.x + (1 - factor) * dx;
- }
- yVia = this.from.y;
- } else if (type === 'vertical') {
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1 - factor) * dy;
- } else {
- yVia = this.to.y + (1 - factor) * dy;
- }
- } else if (type === 'curvedCW') {
- dx = this.to.x - this.from.x;
- dy = this.from.y - this.to.y;
- var radius = Math.sqrt(dx * dx + dy * dy);
- var pi = Math.PI;
-
- var originalAngle = Math.atan2(dy, dx);
- var myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
-
- xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
- yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
- } else if (type === 'curvedCCW') {
- dx = this.to.x - this.from.x;
- dy = this.from.y - this.to.y;
- var radius = Math.sqrt(dx * dx + dy * dy);
- var pi = Math.PI;
-
- var originalAngle = Math.atan2(dy, dx);
- var myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
-
- xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
- yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
- } else {
- // continuous
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x > xVia ? this.to.x : xVia;
- }
- } else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x > xVia ? this.to.x : xVia;
- }
- }
- } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- }
- } else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- } else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- }
- }
- }
+ });
+
+ var _NodeBase2 = __webpack_require__(103);
+
+ var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+
+ var ShapeBase = (function (_NodeBase) {
+ function ShapeBase(options, body, labelModule) {
+ _classCallCheck(this, ShapeBase);
+
+ _get(Object.getPrototypeOf(ShapeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
+ }
+
+ _inherits(ShapeBase, _NodeBase);
+
+ _createClass(ShapeBase, [{
+ key: '_resizeShape',
+ value: function _resizeShape() {
+ if (this.width === undefined) {
+ var size = 2 * this.options.size;
+ this.width = size;
+ this.height = size;
}
- return { x: xVia, y: yVia };
}
}, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- var options = arguments[2] === undefined ? {} : arguments[2];
+ key: '_drawShape',
+ value: function _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover) {
+ this._resizeShape();
- return this._findBorderPositionBezier(nearNode, ctx, options.via);
- }
- }, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
- var via = arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
- // x3,y3 is the point
- return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via);
- }
- }, {
- key: 'getPoint',
+ this.left = x - this.width / 2;
+ this.top = y - this.height / 2;
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- var via = arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
+ var borderWidth = this.options.borderWidth;
+ var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
- var t = percentage;
- var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * this.to.x;
- var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * this.to.y;
+ ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+ ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
+ ctx.lineWidth /= this.body.view.scale;
+ ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+ ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+ ctx[shape](x, y, this.options.size);
- return { x: x, y: y };
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
+
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+
+ ctx.stroke();
+
+ this.boundingBox.top = y - this.options.size;
+ this.boundingBox.left = x - this.options.size;
+ this.boundingBox.right = x + this.options.size;
+ this.boundingBox.bottom = y + this.options.size;
+
+ if (this.options.label !== undefined) {
+ var yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node.
+ this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
+ this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
+ this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
+ this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+ }
}
}]);
- return BezierEdgeStatic;
- })(_BezierEdgeBase3['default']);
+ return ShapeBase;
+ })(_NodeBase3['default']);
- exports['default'] = BezierEdgeStatic;
+ exports['default'] = ShapeBase;
module.exports = exports['default'];
/***/ },
-/* 104 */
+/* 106 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -38382,102 +38375,141 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _EdgeBase2 = __webpack_require__(109);
+ var _EdgeBase2 = __webpack_require__(107);
var _EdgeBase3 = _interopRequireWildcard(_EdgeBase2);
- var StraightEdge = (function (_EdgeBase) {
- function StraightEdge(options, body, labelModule) {
- _classCallCheck(this, StraightEdge);
+ var BezierEdgeBase = (function (_EdgeBase) {
+ function BezierEdgeBase(options, body, labelModule) {
+ _classCallCheck(this, BezierEdgeBase);
- _get(Object.getPrototypeOf(StraightEdge.prototype), 'constructor', this).call(this, options, body, labelModule);
+ _get(Object.getPrototypeOf(BezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
}
- _inherits(StraightEdge, _EdgeBase);
+ _inherits(BezierEdgeBase, _EdgeBase);
- _createClass(StraightEdge, [{
- key: 'cleanup',
- value: function cleanup() {
- return false;
- }
- }, {
- key: '_line',
+ _createClass(BezierEdgeBase, [{
+ key: '_findBorderPositionBezier',
/**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
+ *
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
+ * @param nearNode
+ * @param ctx
+ * @param viaNode
*/
- value: function _line(ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.stroke();
- this.disableShadow(ctx);
- return undefined;
- }
- }, {
- key: 'getPoint',
+ value: function _findBorderPositionBezier(nearNode, ctx) {
+ var viaNode = arguments[2] === undefined ? this._getViaCoordinates() : arguments[2];
- /**
- * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
- * @param percentage
- * @param via
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function getPoint(percentage) {
- return {
- x: (1 - percentage) * this.from.x + percentage * this.to.x,
- y: (1 - percentage) * this.from.y + percentage * this.to.y
- };
- }
- }, {
- key: '_findBorderPosition',
- value: function _findBorderPosition(nearNode, ctx) {
- var node1 = this.to;
- var node2 = this.from;
+ var maxIterations = 10;
+ var iteration = 0;
+ var low = 0;
+ var high = 1;
+ var pos, angle, distanceToBorder, distanceToPoint, difference;
+ var threshold = 0.2;
+ var node = this.to;
+ var from = false;
if (nearNode.id === this.from.id) {
- node1 = this.from;
- node2 = this.to;
+ node = this.from;
+ from = true;
}
- var angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
- var dx = node1.x - node2.x;
- var dy = node1.y - node2.y;
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- var toBorderDist = nearNode.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+ while (low <= high && iteration < maxIterations) {
+ var middle = (low + high) * 0.5;
- var borderPos = {};
- borderPos.x = (1 - toBorderPoint) * node2.x + toBorderPoint * node1.x;
- borderPos.y = (1 - toBorderPoint) * node2.y + toBorderPoint * node1.y;
+ pos = this.getPoint(middle, viaNode);
+ angle = Math.atan2(node.y - pos.y, node.x - pos.x);
+ distanceToBorder = node.distanceToBorder(ctx, angle);
+ distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
+ difference = distanceToBorder - distanceToPoint;
+ if (Math.abs(difference) < threshold) {
+ break; // found
+ } else if (difference < 0) {
+ // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
+ if (from === false) {
+ low = middle;
+ } else {
+ high = middle;
+ }
+ } else {
+ if (from === false) {
+ high = middle;
+ } else {
+ low = middle;
+ }
+ }
- return borderPos;
+ iteration++;
+ }
+ pos.t = middle;
+
+ return pos;
}
}, {
- key: '_getDistanceToEdge',
- value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
+ key: '_getDistanceToBezierEdge',
+
+ /**
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @private
+ */
+ value: function _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via) {
// x3,y3 is the point
- return this._getDistanceToLine(x1, y1, x2, y2, x3, y3);
+ var xVia = undefined,
+ yVia = undefined;
+ xVia = via.x;
+ yVia = via.y;
+ var minDistance = 1000000000;
+ var distance = undefined;
+ var i = undefined,
+ t = undefined,
+ x = undefined,
+ y = undefined;
+ var lastX = x1;
+ var lastY = y1;
+ for (i = 1; i < 10; i++) {
+ t = 0.1 * i;
+ x = Math.pow(1 - t, 2) * x1 + 2 * t * (1 - t) * xVia + Math.pow(t, 2) * x2;
+ y = Math.pow(1 - t, 2) * y1 + 2 * t * (1 - t) * yVia + Math.pow(t, 2) * y2;
+ if (i > 0) {
+ distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3);
+ minDistance = distance < minDistance ? distance : minDistance;
+ }
+ lastX = x;
+ lastY = y;
+ }
+
+ return minDistance;
}
}]);
- return StraightEdge;
+ return BezierEdgeBase;
})(_EdgeBase3['default']);
- exports['default'] = StraightEdge;
+ exports['default'] = BezierEdgeBase;
module.exports = exports['default'];
/***/ },
-/* 105 */
+/* 107 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
+ var _slicedToArray = function (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'); } };
+
var _classCallCheck = function (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; }; })();
@@ -38485,425 +38517,583 @@ return /******/ (function(modules) { // webpackBootstrap
Object.defineProperty(exports, '__esModule', {
value: true
});
+ var util = __webpack_require__(1);
- var NodeBase = (function () {
- function NodeBase(options, body, labelModule) {
- _classCallCheck(this, NodeBase);
+ var EdgeBase = (function () {
+ function EdgeBase(options, body, labelModule) {
+ _classCallCheck(this, EdgeBase);
this.body = body;
this.labelModule = labelModule;
this.setOptions(options);
- this.top = undefined;
- this.left = undefined;
- this.height = undefined;
- this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 };
+ this.colorDirty = true;
+ this.color = {};
+ this.selectionWidth = 2;
+ this.hoverWidth = 1.5;
}
- _createClass(NodeBase, [{
+ _createClass(EdgeBase, [{
key: 'setOptions',
value: function setOptions(options) {
this.options = options;
+ this.from = this.body.nodes[this.options.from];
+ this.to = this.body.nodes[this.options.to];
+ this.id = this.options.id;
}
}, {
- key: '_distanceToBorder',
- value: function _distanceToBorder(angle) {
- var borderWidth = 1;
- return Math.min(Math.abs(this.width / 2 / Math.cos(angle)), Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
- }
+ key: 'togglePhysics',
+
+ /**
+ * overloadable if the shape has to toggle the via node to disabled
+ * @param status
+ */
+ value: function togglePhysics(status) {}
}, {
- 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: 'drawLine',
+
+ /**
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ value: function drawLine(ctx, selected, hover) {
+ // set style
+ ctx.strokeStyle = this.getColor(ctx);
+ ctx.lineWidth = this.getLineWidth(selected, hover);
+ var via = undefined;
+ if (this.options.dashes !== false) {
+ via = this._drawDashedLine(ctx);
+ } else {
+ via = this._drawLine(ctx);
}
+ return via;
}
}, {
- key: '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;
- }
- }
- }]);
+ key: '_drawLine',
+ value: function _drawLine(ctx) {
+ var via = undefined;
+ if (this.from != this.to) {
+ // draw line
+ via = this._line(ctx);
+ } else {
+ var _getCircleData = this._getCircleData(ctx);
- return NodeBase;
- })();
+ var _getCircleData2 = _slicedToArray(_getCircleData, 3);
- exports['default'] = NodeBase;
- module.exports = exports['default'];
+ var x = _getCircleData2[0];
+ var y = _getCircleData2[1];
+ var radius = _getCircleData2[2];
-/***/ },
-/* 106 */
-/***/ function(module, exports, __webpack_require__) {
+ this._circle(ctx, x, y, radius);
+ }
+ return via;
+ }
+ }, {
+ key: '_drawDashedLine',
+ value: function _drawDashedLine(ctx) {
+ var via = undefined;
+ ctx.lineCap = 'round';
+ var pattern = [5, 5];
+ if (Array.isArray(this.options.dashes) === true) {
+ pattern = this.options.dashes;
+ }
- 'use strict';
+ // only firefox and chrome support this method, else we use the legacy one.
+ if (ctx.setLineDash !== undefined) {
+ ctx.save();
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ // set dash settings for chrome or firefox
+ ctx.setLineDash(pattern);
+ ctx.lineDashOffset = 0;
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ // draw the line
+ if (this.from != this.to) {
+ // draw line
+ via = this._line(ctx);
+ } else {
+ var _getCircleData3 = this._getCircleData(ctx);
- 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 _getCircleData32 = _slicedToArray(_getCircleData3, 3);
- var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+ var x = _getCircleData32[0];
+ var y = _getCircleData32[1];
+ var radius = _getCircleData32[2];
- var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
+ this._circle(ctx, x, y, radius);
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ // restore the dash settings.
+ ctx.setLineDash([0]);
+ ctx.lineDashOffset = 0;
+ ctx.restore();
+ } else {
+ // unsupporting smooth lines
- var _NodeBase2 = __webpack_require__(105);
+ if (this.from != this.to) {
+ // draw line
+ ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
+ } else {
+ var _getCircleData4 = this._getCircleData(ctx);
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ var _getCircleData42 = _slicedToArray(_getCircleData4, 3);
- var CircleImageBase = (function (_NodeBase) {
- function CircleImageBase(options, body, labelModule) {
- _classCallCheck(this, CircleImageBase);
+ var x = _getCircleData42[0];
+ var y = _getCircleData42[1];
+ var radius = _getCircleData42[2];
- _get(Object.getPrototypeOf(CircleImageBase.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ this._circle(ctx, x, y, radius);
+ }
+ // draw shadow if enabled
+ this.enableShadow(ctx);
- _inherits(CircleImageBase, _NodeBase);
+ ctx.stroke();
- _createClass(CircleImageBase, [{
- key: '_resizeImage',
- value: function _resizeImage() {
- if (!this.width || !this.height) {
- // undefined or 0
- var width, height, ratio;
- if (this.imageObj.width && this.imageObj.height) {
- // not undefined or 0
- width = 0;
- height = 0;
- }
- if (this.imageObj.width > this.imageObj.height) {
- ratio = this.imageObj.width / this.imageObj.height;
- width = this.options.size * 2 * ratio || this.imageObj.width;
- height = this.options.size * 2 || this.imageObj.height;
- } else {
- ratio = this.imageObj.height / this.imageObj.width;
- width = this.options.size * 2 || this.imageObj.width;
- height = this.options.size * 2 * ratio || this.imageObj.height;
- }
- this.width = width;
- this.height = height;
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
}
+ return via;
}
}, {
- key: '_drawRawCircle',
- value: function _drawRawCircle(ctx, x, y, selected, hover, size) {
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
+ key: 'findBorderPosition',
+ value: function findBorderPosition(nearNode, ctx, options) {
+ if (this.from != this.to) {
+ return this._findBorderPosition(nearNode, ctx, options);
+ } else {
+ return this._findBorderPositionCircle(nearNode, ctx, options);
+ }
+ }
+ }, {
+ key: 'findBorderPositions',
+ value: function findBorderPositions(ctx) {
+ var from = {};
+ var to = {};
+ if (this.from != this.to) {
+ from = this._findBorderPosition(this.from, ctx);
+ to = this._findBorderPosition(this.to, ctx);
+ } else {
+ var _getCircleData5 = this._getCircleData(ctx);
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+ var _getCircleData52 = _slicedToArray(_getCircleData5, 3);
- ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
+ var x = _getCircleData52[0];
+ var y = _getCircleData52[1];
+ var radius = _getCircleData52[2];
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx.circle(x, y, size);
+ from = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
+ to = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.6, high: 0.8, direction: 1 });
+ }
+ return { from: from, to: to };
+ }
+ }, {
+ key: '_getCircleData',
+ value: function _getCircleData(ctx) {
+ var x = undefined,
+ y = undefined;
+ var node = this.from;
+ var radius = this.options.selfReferenceSize;
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.fill();
+ if (ctx !== undefined) {
+ if (node.shape.width === undefined) {
+ node.shape.resize(ctx);
+ }
+ }
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ // get circle coordinates
+ if (node.shape.width > node.shape.height) {
+ x = node.x + node.shape.width * 0.5;
+ y = node.y - radius;
+ } else {
+ x = node.x + radius;
+ y = node.y - node.shape.height * 0.5;
+ }
+ return [x, y, radius];
+ }
+ }, {
+ key: '_pointOnCircle',
- ctx.stroke();
+ /**
+ * 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: '_drawImageAtPosition',
- value: function _drawImageAtPosition(ctx) {
- if (this.imageObj.width != 0) {
- // draw the image
- ctx.globalAlpha = 1;
+ key: '_findBorderPositionCircle',
- // draw shadow if enabled
- this.enableShadow(ctx);
- ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+ /**
+ * This function uses binary search to look for the point where the circle crosses the border of the node.
+ * @param node
+ * @param ctx
+ * @param options
+ * @returns {*}
+ * @private
+ */
+ value: function _findBorderPositionCircle(node, ctx, options) {
+ var x = options.x;
+ var y = options.y;
+ var low = options.low;
+ var high = options.high;
+ var direction = options.direction;
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ var maxIterations = 10;
+ var iteration = 0;
+ var radius = this.options.selfReferenceSize;
+ var pos = undefined,
+ angle = undefined,
+ distanceToBorder = undefined,
+ distanceToPoint = undefined,
+ difference = undefined;
+ var threshold = 0.05;
+ var middle = (low + high) * 0.5;
+
+ while (low <= high && iteration < maxIterations) {
+ middle = (low + high) * 0.5;
+
+ pos = this._pointOnCircle(x, y, radius, middle);
+ angle = Math.atan2(node.y - pos.y, node.x - pos.x);
+ distanceToBorder = node.distanceToBorder(ctx, angle);
+ distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
+ difference = distanceToBorder - distanceToPoint;
+ if (Math.abs(difference) < threshold) {
+ break; // found
+ } else if (difference > 0) {
+ // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
+ if (direction > 0) {
+ low = middle;
+ } else {
+ high = middle;
+ }
+ } else {
+ if (direction > 0) {
+ high = middle;
+ } else {
+ low = middle;
+ }
+ }
+ iteration++;
}
+ pos.t = middle;
+
+ return pos;
}
}, {
- key: '_drawImageLabel',
- value: function _drawImageLabel(ctx, x, y, selected) {
- var yLabel;
- var offset = 0;
+ key: 'getLineWidth',
- if (this.height !== undefined) {
- offset = this.height * 0.5;
- var labelDimensions = this.labelModule.getTextSize(ctx);
- if (labelDimensions.lineCount >= 1) {
- offset += labelDimensions.height / 2;
+ /**
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
+ */
+ value: function getLineWidth(selected, hover) {
+ if (selected === true) {
+ return Math.max(this.selectionWidth, 0.3 / this.body.view.scale);
+ } else {
+ if (hover === true) {
+ return Math.max(this.hoverWidth, 0.3 / this.body.view.scale);
+ } else {
+ return Math.max(this.options.width, 0.3 / this.body.view.scale);
}
}
-
- yLabel = y + offset;
- this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
}
- }]);
-
- return CircleImageBase;
- })(_NodeBase3['default']);
-
- exports['default'] = CircleImageBase;
- module.exports = exports['default'];
-
-/***/ },
-/* 107 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
- var _classCallCheck = function (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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
- var _inherits = function (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; };
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ }, {
+ key: 'getColor',
+ value: function getColor(ctx) {
+ var colorOptions = this.options.color;
- var _NodeBase2 = __webpack_require__(105);
+ if (colorOptions.inherit !== false) {
+ // when this is a loop edge, just use the 'from' method
+ if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {
+ var grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
+ var fromColor = undefined,
+ toColor = undefined;
+ fromColor = this.from.options.color.highlight.border;
+ toColor = this.to.options.color.highlight.border;
- var _NodeBase3 = _interopRequireWildcard(_NodeBase2);
+ if (this.from.selected === false && this.to.selected === false) {
+ fromColor = util.overrideOpacity(this.from.options.color.border, this.options.color.opacity);
+ toColor = util.overrideOpacity(this.to.options.color.border, this.options.color.opacity);
+ } else if (this.from.selected === true && this.to.selected === false) {
+ toColor = this.to.options.color.border;
+ } else if (this.from.selected === false && this.to.selected === true) {
+ fromColor = this.from.options.color.border;
+ }
+ grd.addColorStop(0, fromColor);
+ grd.addColorStop(1, toColor);
- var ShapeBase = (function (_NodeBase) {
- function ShapeBase(options, body, labelModule) {
- _classCallCheck(this, ShapeBase);
+ // -------------------- this returns -------------------- //
+ return grd;
+ }
- _get(Object.getPrototypeOf(ShapeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ if (this.colorDirty === true) {
+ if (colorOptions.inherit === 'to') {
+ this.color.highlight = this.to.options.color.highlight.border;
+ this.color.hover = this.to.options.color.hover.border;
+ this.color.color = util.overrideOpacity(this.to.options.color.border, colorOptions.opacity);
+ } else {
+ // (this.options.color.inherit.source === "from") {
+ this.color.highlight = this.from.options.color.highlight.border;
+ this.color.hover = this.from.options.color.hover.border;
+ this.color.color = util.overrideOpacity(this.from.options.color.border, colorOptions.opacity);
+ }
+ }
+ } else if (this.colorDirty === true) {
+ this.color.highlight = colorOptions.highlight;
+ this.color.hover = colorOptions.hover;
+ this.color.color = util.overrideOpacity(colorOptions.color, colorOptions.opacity);
+ }
- _inherits(ShapeBase, _NodeBase);
+ // if color inherit is on and gradients are used, the function has already returned by now.
+ this.colorDirty = false;
- _createClass(ShapeBase, [{
- key: '_resizeShape',
- value: function _resizeShape() {
- if (this.width === undefined) {
- var size = 2 * this.options.size;
- this.width = size;
- this.height = size;
+ if (this.selected === true) {
+ return this.color.highlight;
+ } else if (this.hover === true) {
+ return this.color.hover;
+ } else {
+ return this.color.color;
}
}
}, {
- key: '_drawShape',
- value: function _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover) {
- this._resizeShape();
-
- this.left = x - this.width / 2;
- this.top = y - this.height / 2;
-
- var borderWidth = this.options.borderWidth;
- var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
-
- ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
- ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
- ctx.lineWidth /= this.body.view.scale;
- ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
- ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
- ctx[shape](x, y, this.options.size);
+ 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);
- ctx.fill();
-
- // disable shadows for other elements.
- this.disableShadow(ctx);
+ // draw a circle
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.stroke();
- this.boundingBox.top = y - this.options.size;
- this.boundingBox.left = x - this.options.size;
- this.boundingBox.right = x + this.options.size;
- this.boundingBox.bottom = y + this.options.size;
-
- if (this.options.label !== undefined) {
- var yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node.
- this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
- this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
- this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
- this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
- }
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
}
- }]);
-
- return ShapeBase;
- })(_NodeBase3['default']);
-
- exports['default'] = ShapeBase;
- module.exports = exports['default'];
-
-/***/ },
-/* 108 */
-/***/ function(module, exports, __webpack_require__) {
-
- 'use strict';
-
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
-
- var _classCallCheck = function (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; }; })();
+ }, {
+ key: 'getDistanceToEdge',
- var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+ /**
+ * 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 _inherits = function (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 _getCircleData62 = _slicedToArray(_getCircleData6, 3);
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ var x = _getCircleData62[0];
+ var y = _getCircleData62[1];
+ var radius = _getCircleData62[2];
- var _EdgeBase2 = __webpack_require__(109);
+ var dx = x - x3;
+ var dy = y - y3;
+ returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
+ }
- var _EdgeBase3 = _interopRequireWildcard(_EdgeBase2);
+ 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;
- var BezierEdgeBase = (function (_EdgeBase) {
- function BezierEdgeBase(options, body, labelModule) {
- _classCallCheck(this, BezierEdgeBase);
+ if (u > 1) {
+ u = 1;
+ } else if (u < 0) {
+ u = 0;
+ }
- _get(Object.getPrototypeOf(BezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
- }
+ var x = x1 + u * px;
+ var y = y1 + u * py;
+ var dx = x - x3;
+ var dy = y - y3;
- _inherits(BezierEdgeBase, _EdgeBase);
+ //# 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
- _createClass(BezierEdgeBase, [{
- key: '_findBorderPositionBezier',
+ return Math.sqrt(dx * dx + dy * dy);
+ }
+ }, {
+ key: 'drawArrowHead',
/**
- * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
*
- * @param nearNode
- * @param ctx
- * @param viaNode
- * @param nearNode
- * @param ctx
- * @param viaNode
- * @param nearNode
* @param ctx
+ * @param position
* @param viaNode
*/
- value: function _findBorderPositionBezier(nearNode, ctx) {
- var viaNode = arguments[2] === undefined ? this._getViaCoordinates() : arguments[2];
+ value: function drawArrowHead(ctx, position, viaNode, selected, hover) {
+ // set style
+ ctx.strokeStyle = this.getColor(ctx);
+ ctx.fillStyle = ctx.strokeStyle;
+ ctx.lineWidth = this.getLineWidth(selected, hover);
- var maxIterations = 10;
- var iteration = 0;
- var low = 0;
- var high = 1;
- var pos, angle, distanceToBorder, distanceToPoint, difference;
- var threshold = 0.2;
- var node = this.to;
- var from = false;
- if (nearNode.id === this.from.id) {
- node = this.from;
- from = true;
- }
+ // set lets
+ var angle = undefined;
+ var length = undefined;
+ var arrowPos = undefined;
+ var node1 = undefined;
+ var node2 = undefined;
+ var guideOffset = undefined;
+ var scaleFactor = undefined;
- while (low <= high && iteration < maxIterations) {
- var middle = (low + high) * 0.5;
+ 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;
+ }
- pos = this.getPoint(middle, viaNode);
- angle = Math.atan2(node.y - pos.y, node.x - pos.x);
- distanceToBorder = node.distanceToBorder(ctx, angle);
- distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
- difference = distanceToBorder - distanceToPoint;
- if (Math.abs(difference) < threshold) {
- break; // found
- } else if (difference < 0) {
- // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
- if (from === false) {
- low = middle;
+ // 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 {
- high = middle;
+ angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
+ arrowPos = this.findBorderPosition(node1, ctx);
}
} else {
- if (from === false) {
- high = middle;
- } else {
- low = middle;
- }
+ 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);
- iteration++;
- }
- pos.t = middle;
+ // draw shadow if enabled
+ this.enableShadow(ctx);
+ ctx.fill();
- return pos;
- }
- }, {
- key: '_getDistanceToBezierEdge',
+ // disable shadows for other elements.
+ this.disableShadow(ctx);
+ ctx.stroke();
+ } else {
+ // draw circle
+ var _angle = undefined,
+ point = undefined;
- /**
- * Calculate the distance between a point (x3,y3) and a line segment from
- * (x1,y1) to (x2,y2).
- * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @param {number} x3
- * @param {number} y3
- * @private
- */
- value: function _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via) {
- // x3,y3 is the point
- var xVia = undefined,
- yVia = undefined;
- xVia = via.x;
- yVia = via.y;
- var minDistance = 1000000000;
- var distance = undefined;
- var i = undefined,
- t = undefined,
- x = undefined,
- y = undefined;
- var lastX = x1;
- var lastY = y1;
- for (i = 1; i < 10; i++) {
- t = 0.1 * i;
- x = Math.pow(1 - t, 2) * x1 + 2 * t * (1 - t) * xVia + Math.pow(t, 2) * x2;
- y = Math.pow(1 - t, 2) * y1 + 2 * t * (1 - t) * yVia + Math.pow(t, 2) * y2;
- if (i > 0) {
- distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3);
- minDistance = distance < minDistance ? distance : minDistance;
+ 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;
}
- lastX = x;
- lastY = y;
- }
- return minDistance;
+ // 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 BezierEdgeBase;
- })(_EdgeBase3['default']);
+ return EdgeBase;
+ })();
- exports['default'] = BezierEdgeBase;
+ exports['default'] = EdgeBase;
module.exports = exports['default'];
/***/ },
-/* 109 */
+/* 108 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
- var _slicedToArray = function (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'); } };
-
var _classCallCheck = function (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; }; })();
@@ -38912,576 +39102,383 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
var util = __webpack_require__(1);
+ var Hammer = __webpack_require__(41);
+ var hammerUtil = __webpack_require__(45);
+ var keycharm = __webpack_require__(82);
- var EdgeBase = (function () {
- function EdgeBase(options, body, labelModule) {
- _classCallCheck(this, EdgeBase);
+ var NavigationHandler = (function () {
+ function NavigationHandler(body, canvas) {
+ var _this = this;
+
+ _classCallCheck(this, NavigationHandler);
this.body = body;
- this.labelModule = labelModule;
- this.setOptions(options);
- this.colorDirty = true;
- this.color = {};
- this.selectionWidth = 2;
- this.hoverWidth = 1.5;
+ this.canvas = canvas;
+
+ this.iconsCreated = false;
+ this.navigationHammers = [];
+ this.boundFunctions = {};
+ this.touchTime = 0;
+ this.activated = false;
+
+ this.body.emitter.on('release', this._stopMovement.bind(this));
+ this.body.emitter.on('activate', function () {
+ _this.activated = true;_this.configureKeyboardBindings();
+ });
+ this.body.emitter.on('deactivate', function () {
+ _this.activated = false;_this.configureKeyboardBindings();
+ });
+ this.body.emitter.on('destroy', function () {
+ if (_this.keycharm !== undefined) {
+ _this.keycharm.destroy();
+ }
+ });
+
+ this.options = {};
}
- _createClass(EdgeBase, [{
+ _createClass(NavigationHandler, [{
key: 'setOptions',
value: function setOptions(options) {
- this.options = options;
- this.from = this.body.nodes[this.options.from];
- this.to = this.body.nodes[this.options.to];
- this.id = this.options.id;
- }
- }, {
- key: 'togglePhysics',
-
- /**
- * overloadable if the shape has to toggle the via node to disabled
- * @param status
- */
- value: function togglePhysics(status) {}
- }, {
- key: 'drawLine',
-
- /**
- * Redraw a edge as a line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function drawLine(ctx, selected, hover) {
- // set style
- ctx.strokeStyle = this.getColor(ctx);
- ctx.lineWidth = this.getLineWidth(selected, hover);
- var via = undefined;
- if (this.options.dashes.enabled === true) {
- via = this._drawDashedLine(ctx);
- } else {
- via = this._drawLine(ctx);
+ if (options !== undefined) {
+ this.options = options;
+ this.create();
}
- return via;
}
}, {
- key: '_drawLine',
- value: function _drawLine(ctx) {
- var via = undefined;
- if (this.from != this.to) {
- // draw line
- via = this._line(ctx);
- } else {
- var _getCircleData = this._getCircleData(ctx);
-
- var _getCircleData2 = _slicedToArray(_getCircleData, 3);
-
- var x = _getCircleData2[0];
- var y = _getCircleData2[1];
- var radius = _getCircleData2[2];
-
- this._circle(ctx, x, y, radius);
+ key: 'create',
+ value: function create() {
+ if (this.options.navigationButtons === true) {
+ if (this.iconsCreated === false) {
+ this.loadNavigationElements();
+ }
+ } else if (this.iconsCreated === true) {
+ this.cleanNavigation();
}
- return via;
+
+ this.configureKeyboardBindings();
}
}, {
- key: '_drawDashedLine',
- value: function _drawDashedLine(ctx) {
- var via = undefined;
- ctx.lineCap = 'round';
- var pattern = [5, 5];
- if (this.options.dashes.pattern !== undefined) {
- if (Array.isArray(this.options.dashes.pattern) === true) {
- pattern = this.options.dashes.pattern;
+ key: 'cleanNavigation',
+ value: function cleanNavigation() {
+ // clean hammer bindings
+ if (this.navigationHammers.length != 0) {
+ for (var i = 0; i < this.navigationHammers.length; i++) {
+ this.navigationHammers[i].destroy();
}
+ this.navigationHammers = [];
}
- // only firefox and chrome support this method, else we use the legacy one.
- if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) {
- ctx.save();
+ this._navigationReleaseOverload = function () {};
- // set dash settings for chrome or firefox
- ctx.setLineDash(pattern);
- ctx.lineDashOffset = 0;
+ // clean up previous navigation items
+ if (this.navigationDOM && this.navigationDOM.wrapper && this.navigationDOM.wrapper.parentNode) {
+ this.navigationDOM.wrapper.parentNode.removeChild(this.navigationDOM.wrapper);
+ }
- // draw the line
- if (this.from != this.to) {
- // draw line
- via = this._line(ctx);
- } else {
- var _getCircleData3 = this._getCircleData(ctx);
+ this.iconsCreated = false;
+ }
+ }, {
+ key: 'loadNavigationElements',
- var _getCircleData32 = _slicedToArray(_getCircleData3, 3);
+ /**
+ * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
+ * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
+ * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
+ * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
+ *
+ * @private
+ */
+ value: function loadNavigationElements() {
+ this.cleanNavigation();
- var x = _getCircleData32[0];
- var y = _getCircleData32[1];
- var radius = _getCircleData32[2];
+ this.navigationDOM = {};
+ var navigationDivs = ['up', 'down', 'left', 'right', 'zoomIn', 'zoomOut', 'zoomExtends'];
+ var navigationDivActions = ['_moveUp', '_moveDown', '_moveLeft', '_moveRight', '_zoomIn', '_zoomOut', '_fit'];
- this._circle(ctx, x, y, radius);
- }
+ this.navigationDOM.wrapper = document.createElement('div');
+ this.navigationDOM.wrapper.className = 'vis-navigation';
+ this.canvas.frame.appendChild(this.navigationDOM.wrapper);
- // restore the dash settings.
- ctx.setLineDash([0]);
- ctx.lineDashOffset = 0;
- ctx.restore();
- } else {
- // unsupporting smooth lines
+ for (var i = 0; i < navigationDivs.length; i++) {
+ this.navigationDOM[navigationDivs[i]] = document.createElement('div');
+ this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
+ this.navigationDOM.wrapper.appendChild(this.navigationDOM[navigationDivs[i]]);
- if (this.from != this.to) {
- // draw line
- ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
+ var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
+ if (navigationDivActions[i] === '_fit') {
+ hammerUtil.onTouch(hammer, this._fit.bind(this));
} else {
- var _getCircleData4 = this._getCircleData(ctx);
-
- var _getCircleData42 = _slicedToArray(_getCircleData4, 3);
-
- var x = _getCircleData42[0];
- var y = _getCircleData42[1];
- var radius = _getCircleData42[2];
-
- this._circle(ctx, x, y, radius);
+ hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this, navigationDivActions[i]));
}
- // draw shadow if enabled
- this.enableShadow(ctx);
-
- ctx.stroke();
- // disable shadows for other elements.
- this.disableShadow(ctx);
- }
- return via;
- }
- }, {
- key: 'findBorderPosition',
- value: function findBorderPosition(nearNode, ctx, options) {
- if (this.from != this.to) {
- return this._findBorderPosition(nearNode, ctx, options);
- } else {
- return this._findBorderPositionCircle(nearNode, ctx, options);
+ this.navigationHammers.push(hammer);
}
- }
- }, {
- key: 'findBorderPositions',
- value: function findBorderPositions(ctx) {
- var from = {};
- var to = {};
- if (this.from != this.to) {
- from = this._findBorderPosition(this.from, ctx);
- to = this._findBorderPosition(this.to, ctx);
- } else {
- var _getCircleData5 = this._getCircleData(ctx);
-
- var _getCircleData52 = _slicedToArray(_getCircleData5, 3);
-
- var x = _getCircleData52[0];
- var y = _getCircleData52[1];
- var radius = _getCircleData52[2];
- from = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 });
- to = this._findBorderPositionCircle(this.from, ctx, { x: x, y: y, low: 0.6, high: 0.8, direction: 1 });
- }
- return { from: from, to: to };
+ this.iconsCreated = true;
}
}, {
- key: '_getCircleData',
- value: function _getCircleData(ctx) {
- var x = undefined,
- y = undefined;
- var node = this.from;
- var radius = this.options.selfReferenceSize;
-
- if (ctx !== undefined) {
- if (node.shape.width === undefined) {
- node.shape.resize(ctx);
- }
- }
-
- // get circle coordinates
- if (node.shape.width > node.shape.height) {
- x = node.x + node.shape.width * 0.5;
- y = node.y - radius;
- } else {
- x = node.x + radius;
- y = node.y - node.shape.height * 0.5;
+ key: 'bindToRedraw',
+ value: function bindToRedraw(action) {
+ if (this.boundFunctions[action] === undefined) {
+ this.boundFunctions[action] = this[action].bind(this);
+ this.body.emitter.on('initRedraw', this.boundFunctions[action]);
+ this.body.emitter.emit('_startRendering');
}
- return [x, y, radius];
}
}, {
- key: '_pointOnCircle',
-
- /**
- * Get a point on a circle
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
- */
- value: function _pointOnCircle(x, y, radius, percentage) {
- var angle = percentage * 2 * Math.PI;
- return {
- x: x + radius * Math.cos(angle),
- y: y - radius * Math.sin(angle)
- };
+ key: 'unbindFromRedraw',
+ value: function unbindFromRedraw(action) {
+ if (this.boundFunctions[action] !== undefined) {
+ this.body.emitter.off('initRedraw', this.boundFunctions[action]);
+ this.body.emitter.emit('_stopRendering');
+ delete this.boundFunctions[action];
+ }
}
}, {
- key: '_findBorderPositionCircle',
+ key: '_fit',
/**
- * This function uses binary search to look for the point where the circle crosses the border of the node.
- * @param node
- * @param ctx
- * @param options
- * @returns {*}
+ * this stops all movement induced by the navigation buttons
+ *
* @private
*/
- value: function _findBorderPositionCircle(node, ctx, options) {
- var x = options.x;
- var y = options.y;
- var low = options.low;
- var high = options.high;
- var direction = options.direction;
-
- var maxIterations = 10;
- var iteration = 0;
- var radius = this.options.selfReferenceSize;
- var pos = undefined,
- angle = undefined,
- distanceToBorder = undefined,
- distanceToPoint = undefined,
- difference = undefined;
- var threshold = 0.05;
- var middle = (low + high) * 0.5;
-
- while (low <= high && iteration < maxIterations) {
- middle = (low + high) * 0.5;
-
- pos = this._pointOnCircle(x, y, radius, middle);
- angle = Math.atan2(node.y - pos.y, node.x - pos.x);
- distanceToBorder = node.distanceToBorder(ctx, angle);
- distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
- difference = distanceToBorder - distanceToPoint;
- if (Math.abs(difference) < threshold) {
- break; // found
- } else if (difference > 0) {
- // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
- if (direction > 0) {
- low = middle;
- } else {
- high = middle;
- }
- } else {
- if (direction > 0) {
- high = middle;
- } else {
- low = middle;
- }
- }
- iteration++;
+ value: function _fit() {
+ if (new Date().valueOf() - this.touchTime > 700) {
+ // TODO: fix ugly hack to avoid hammer's double fireing of event (because we use release?)
+ this.body.emitter.emit('fit', { duration: 700 });
+ this.touchTime = new Date().valueOf();
}
- pos.t = middle;
-
- return pos;
}
}, {
- key: 'getLineWidth',
+ key: '_stopMovement',
/**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
+ * this stops all movement induced by the navigation buttons
+ *
* @private
*/
- value: function getLineWidth(selected, hover) {
- if (selected === true) {
- return Math.max(this.selectionWidth, 0.3 / this.body.view.scale);
- } else {
- if (hover === true) {
- return Math.max(this.hoverWidth, 0.3 / this.body.view.scale);
- } else {
- return Math.max(this.options.width, 0.3 / this.body.view.scale);
+ value: function _stopMovement() {
+ for (var boundAction in this.boundFunctions) {
+ if (this.boundFunctions.hasOwnProperty(boundAction)) {
+ this.body.emitter.off('initRedraw', this.boundFunctions[boundAction]);
+ this.body.emitter.emit('_stopRendering');
}
}
+ this.boundFunctions = {};
}
}, {
- key: 'getColor',
- value: function getColor(ctx) {
- var colorOptions = this.options.color;
+ key: '_moveUp',
+ value: function _moveUp() {
+ this.body.view.translation.y += this.options.keyboard.speed.y;
+ }
+ }, {
+ key: '_moveDown',
+ value: function _moveDown() {
+ this.body.view.translation.y -= this.options.keyboard.speed.y;
+ }
+ }, {
+ key: '_moveLeft',
+ value: function _moveLeft() {
+ this.body.view.translation.x += this.options.keyboard.speed.x;
+ }
+ }, {
+ key: '_moveRight',
+ value: function _moveRight() {
+ this.body.view.translation.x -= this.options.keyboard.speed.x;
+ }
+ }, {
+ key: '_zoomIn',
+ value: function _zoomIn() {
+ this.body.view.scale *= 1 + this.options.keyboard.speed.zoom;
+ }
+ }, {
+ key: '_zoomOut',
+ value: function _zoomOut() {
+ this.body.view.scale /= 1 + this.options.keyboard.speed.zoom;
+ }
+ }, {
+ key: 'configureKeyboardBindings',
- if (colorOptions.inherit !== false) {
- // when this is a loop edge, just use the 'from' method
- if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {
- var grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
- var fromColor = undefined,
- toColor = undefined;
- fromColor = this.from.options.color.highlight.border;
- toColor = this.to.options.color.highlight.border;
+ /**
+ * bind all keys using keycharm.
+ */
+ value: function configureKeyboardBindings() {
+ if (this.keycharm !== undefined) {
+ this.keycharm.destroy();
+ }
- if (this.from.selected === false && this.to.selected === false) {
- fromColor = util.overrideOpacity(this.from.options.color.border, this.options.color.opacity);
- toColor = util.overrideOpacity(this.to.options.color.border, this.options.color.opacity);
- } else if (this.from.selected === true && this.to.selected === false) {
- toColor = this.to.options.color.border;
- } else if (this.from.selected === false && this.to.selected === true) {
- fromColor = this.from.options.color.border;
- }
- grd.addColorStop(0, fromColor);
- grd.addColorStop(1, toColor);
+ if (this.options.keyboard.enabled === true) {
- // -------------------- this returns -------------------- //
- return grd;
+ if (this.options.keyboard.bindToWindow === true) {
+ this.keycharm = keycharm({ container: window, preventDefault: false });
+ } else {
+ this.keycharm = keycharm({ container: this.canvas.frame, preventDefault: false });
}
- if (this.colorDirty === true) {
- if (colorOptions.inherit === 'to') {
- this.color.highlight = this.to.options.color.highlight.border;
- this.color.hover = this.to.options.color.hover.border;
- this.color.color = util.overrideOpacity(this.to.options.color.border, colorOptions.opacity);
- } else {
- // (this.options.color.inherit.source === "from") {
- this.color.highlight = this.from.options.color.highlight.border;
- this.color.hover = this.from.options.color.hover.border;
- this.color.color = util.overrideOpacity(this.from.options.color.border, colorOptions.opacity);
- }
- }
- } else if (this.colorDirty === true) {
- this.color.highlight = colorOptions.highlight;
- this.color.hover = colorOptions.hover;
- this.color.color = util.overrideOpacity(colorOptions.color, colorOptions.opacity);
- }
+ this.keycharm.reset();
- // if color inherit is on and gradients are used, the function has already returned by now.
- this.colorDirty = false;
+ if (this.activated === true) {
+ this.keycharm.bind('up', this.bindToRedraw.bind(this, '_moveUp'), 'keydown');
+ this.keycharm.bind('down', this.bindToRedraw.bind(this, '_moveDown'), 'keydown');
+ this.keycharm.bind('left', this.bindToRedraw.bind(this, '_moveLeft'), 'keydown');
+ this.keycharm.bind('right', this.bindToRedraw.bind(this, '_moveRight'), 'keydown');
+ this.keycharm.bind('=', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
+ this.keycharm.bind('num+', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
+ this.keycharm.bind('num-', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
+ this.keycharm.bind('-', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
+ this.keycharm.bind('[', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
+ this.keycharm.bind(']', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
+ this.keycharm.bind('pageup', this.bindToRedraw.bind(this, '_zoomIn'), 'keydown');
+ this.keycharm.bind('pagedown', this.bindToRedraw.bind(this, '_zoomOut'), 'keydown');
- if (this.selected === true) {
- return this.color.highlight;
- } else if (this.hover === true) {
- return this.color.hover;
- } else {
- return this.color.color;
+ this.keycharm.bind('up', this.unbindFromRedraw.bind(this, '_moveUp'), 'keyup');
+ this.keycharm.bind('down', this.unbindFromRedraw.bind(this, '_moveDown'), 'keyup');
+ this.keycharm.bind('left', this.unbindFromRedraw.bind(this, '_moveLeft'), 'keyup');
+ this.keycharm.bind('right', this.unbindFromRedraw.bind(this, '_moveRight'), 'keyup');
+ this.keycharm.bind('=', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
+ this.keycharm.bind('num+', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
+ this.keycharm.bind('num-', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
+ this.keycharm.bind('-', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
+ this.keycharm.bind('[', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
+ this.keycharm.bind(']', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
+ this.keycharm.bind('pageup', this.unbindFromRedraw.bind(this, '_zoomIn'), 'keyup');
+ this.keycharm.bind('pagedown', this.unbindFromRedraw.bind(this, '_zoomOut'), 'keyup');
+ }
}
}
- }, {
- 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);
+ return NavigationHandler;
+ })();
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ exports['default'] = NavigationHandler;
+ module.exports = exports['default'];
- // disable shadows for other elements.
- this.disableShadow(ctx);
- }
- }, {
- key: 'getDistanceToEdge',
+/***/ },
+/* 109 */
+/***/ function(module, exports, __webpack_require__) {
- /**
- * 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();
+ 'use strict';
- var _getCircleData62 = _slicedToArray(_getCircleData6, 3);
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- var x = _getCircleData62[0];
- var y = _getCircleData62[1];
- var radius = _getCircleData62[2];
+ 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 dx = x - x3;
- var dy = y - y3;
- returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
- }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ /**
+ * Popup is a class to create a popup window with some text
+ * @param {Element} container The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @param {String} [text]
+ * @param {Object} [style] An object containing borderColor,
+ * backgroundColor, etc.
+ */
- 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;
+ var Popup = (function () {
+ function Popup(container) {
+ _classCallCheck(this, Popup);
- if (u > 1) {
- u = 1;
- } else if (u < 0) {
- u = 0;
- }
+ this.container = container;
- var x = x1 + u * px;
- var y = y1 + u * py;
- var dx = x - x3;
- var dy = y - y3;
+ this.x = 0;
+ this.y = 0;
+ this.padding = 5;
+ this.hidden = false;
- //# 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
+ // create the frame
+ this.frame = document.createElement('div');
+ this.frame.className = 'vis-network-tooltip';
+ this.container.appendChild(this.frame);
+ }
- return Math.sqrt(dx * dx + dy * dy);
+ _createClass(Popup, [{
+ key: 'setPosition',
+
+ /**
+ * @param {number} x Horizontal position of the popup window
+ * @param {number} y Vertical position of the popup window
+ */
+ value: function setPosition(x, y) {
+ this.x = parseInt(x);
+ this.y = parseInt(y);
}
}, {
- key: 'drawArrowHead',
+ key: 'setText',
/**
- *
- * @param ctx
- * @param position
- * @param viaNode
+ * Set the content for the popup window. This can be HTML code or text.
+ * @param {string | Element} content
*/
- value: function drawArrowHead(ctx, position, viaNode, selected, hover) {
- // set style
- ctx.strokeStyle = this.getColor(ctx);
- ctx.fillStyle = ctx.strokeStyle;
- ctx.lineWidth = this.getLineWidth(selected, hover);
-
- // set lets
- var angle = undefined;
- var length = undefined;
- var arrowPos = undefined;
- var node1 = undefined;
- var node2 = undefined;
- var guideOffset = undefined;
- var scaleFactor = undefined;
-
- if (position === 'from') {
- node1 = this.from;
- node2 = this.to;
- guideOffset = 0.1;
- scaleFactor = this.options.arrows.from.scaleFactor;
- } else if (position === 'to') {
- node1 = this.to;
- node2 = this.from;
- guideOffset = -0.1;
- scaleFactor = this.options.arrows.to.scaleFactor;
+ value: function setText(content) {
+ if (content instanceof Element) {
+ this.frame.innerHTML = '';
+ this.frame.appendChild(content);
} else {
- node1 = this.to;
- node2 = this.from;
- scaleFactor = this.options.arrows.middle.scaleFactor;
+ this.frame.innerHTML = content; // string containing text or HTML
}
+ }
+ }, {
+ key: 'show',
- // 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);
+ /**
+ * Show the popup window
+ * @param {boolean} [doShow] Show or hide the window
+ */
+ value: function show(doShow) {
+ if (doShow === undefined) {
+ doShow = true;
+ }
- var x = _getCircleData72[0];
- var y = _getCircleData72[1];
- var radius = _getCircleData72[2];
+ if (doShow === true) {
+ var height = this.frame.clientHeight;
+ var width = this.frame.clientWidth;
+ var maxHeight = this.frame.parentNode.clientHeight;
+ var maxWidth = this.frame.parentNode.clientWidth;
- 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;
+ var top = this.y - height;
+ if (top + height + this.padding > maxHeight) {
+ top = maxHeight - height - this.padding;
+ }
+ if (top < this.padding) {
+ top = this.padding;
}
- // 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();
+ var left = this.x;
+ if (left + width + this.padding > maxWidth) {
+ left = maxWidth - width - this.padding;
+ }
+ if (left < this.padding) {
+ left = this.padding;
+ }
- // 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.frame.style.left = left + 'px';
+ this.frame.style.top = top + 'px';
+ this.frame.style.visibility = 'visible';
+ this.hidden = false;
+ } else {
+ this.hide();
}
}
}, {
- 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;
- }
+ key: 'hide',
+
+ /**
+ * Hide the popup window
+ */
+ value: function hide() {
+ this.hidden = true;
+ this.frame.style.visibility = 'hidden';
}
}]);
- return EdgeBase;
+ return Popup;
})();
- exports['default'] = EdgeBase;
+ exports['default'] = Popup;
module.exports = exports['default'];
/***/ }
diff --git a/docs/network/edges.html b/docs/network/edges.html
index 30de970c..16eee67f 100644
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@@ -115,10 +115,7 @@ var options = {
inherit: 'from',
opacity:1.0
},
- dashes:{
- enabled: false,
- pattern:[5,5]
- },
+ dashes: false,
font: {
color: '#343434',
size: 14, // px
@@ -182,7 +179,6 @@ var options = {
edges:{
arrows: 'to, from',
color: 'red',
- dashes: true,
font: '12px arial #ff0000',
scaling:{
label: true,
@@ -301,28 +297,14 @@ network.setOptions(options);
impact is not too big.
-
- | dashes |
- Object or Boolean |
- Object |
- When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an object.
- When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth.
- |
-
-
- | dashes.enabled |
- Boolean |
+
+ | dashes |
+ Array or Boolean |
false |
- Toggle the dash drawing style on or off. This option is optional, if undefined and the scaleFactor
- property is set, enabled will be set to true.
- |
-
-
- | dashes.pattern |
- Array |
- [5,5] |
- Array of numbers repeating gap length, dash length, gap length, dash length, ... etc. The array is
+ | When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array.
+ Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
repeated until the distance is filled.
+ When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth.
|
diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js
index fd51a345..1013bbff 100644
--- a/lib/network/modules/EdgesHandler.js
+++ b/lib/network/modules/EdgesHandler.js
@@ -34,10 +34,7 @@ class EdgesHandler {
inherit: 'from',
opacity:1.0
},
- dashes:{
- enabled: false,
- pattern:[5,5]
- },
+ dashes: false,
font: {
color: '#343434',
size: 14, // px
diff --git a/lib/network/modules/components/AllOptions.js b/lib/network/modules/components/AllOptions.js
index daf6ecda..296e896e 100644
--- a/lib/network/modules/components/AllOptions.js
+++ b/lib/network/modules/components/AllOptions.js
@@ -49,11 +49,7 @@ let allOptions = {
opacity: {number},
__type__: {object, string}
},
- dashes: {
- enabled: {boolean},
- pattern: {array},
- __type__: {boolean,object}
- },
+ dashes: {boolean,array},
font: {
color: {string},
size: {number}, // px
diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js
index b96c5e2f..8dc20723 100644
--- a/lib/network/modules/components/Edge.js
+++ b/lib/network/modules/components/Edge.js
@@ -111,9 +111,16 @@ class Edge {
util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
util.mergeOptions(parentOptions, newOptions, 'smooth');
- util.mergeOptions(parentOptions, newOptions, 'dashes');
util.mergeOptions(parentOptions, newOptions, 'shadow');
+ if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
+ parentOptions.dashes = newOptions.dashes;
+ }
+ else if (allowDeletion === true) {
+ 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;}
diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js
index 470c6dc3..6425b5b1 100644
--- a/lib/network/modules/components/edges/util/EdgeBase.js
+++ b/lib/network/modules/components/edges/util/EdgeBase.js
@@ -36,7 +36,7 @@ class EdgeBase {
ctx.strokeStyle = this.getColor(ctx);
ctx.lineWidth = this.getLineWidth(selected, hover);
let via = undefined;
- if (this.options.dashes.enabled === true) {
+ if (this.options.dashes !== false) {
via = this._drawDashedLine(ctx);
}
else {
@@ -63,14 +63,12 @@ class EdgeBase {
let via = undefined;
ctx.lineCap = 'round';
let pattern = [5,5];
- if (this.options.dashes.pattern !== undefined) {
- if (Array.isArray(this.options.dashes.pattern) === true) {
- pattern = this.options.dashes.pattern;
- }
+ if (Array.isArray(this.options.dashes) === true) {
+ pattern = this.options.dashes;
}
// only firefox and chrome support this method, else we use the legacy one.
- if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) {
+ if (ctx.setLineDash !== undefined) {
ctx.save();
// set dash settings for chrome or firefox