diff --git a/dist/vis.js b/dist/vis.js index 14c24487..cdbade7f 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -20202,7 +20202,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Cluster = __webpack_require__(106); + var _Cluster = __webpack_require__(76); var _Cluster2 = _interopRequireWildcard(_Cluster); @@ -21904,11 +21904,11 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NavigationHandler = __webpack_require__(76); + var _NavigationHandler = __webpack_require__(105); var _NavigationHandler2 = _interopRequireWildcard(_NavigationHandler); - var _Popup = __webpack_require__(77); + var _Popup = __webpack_require__(106); var _Popup2 = _interopRequireWildcard(_Popup); @@ -22768,7 +22768,6 @@ return /******/ (function(modules) { // webpackBootstrap // we first check if this is an navigation controls element var positionObject = this._pointerToPositionObject(pointer); var overlappingNodes = this._getAllNodesOverlappingWith(positionObject); - // if there are overlapping nodes, select the last one, this is the // one which is drawn on top of the others if (overlappingNodes.length > 0) { @@ -23738,7 +23737,7 @@ return /******/ (function(modules) { // webpackBootstrap var util = __webpack_require__(1); var Hammer = __webpack_require__(41); var hammerUtil = __webpack_require__(44); - var locales = __webpack_require__(78); + var locales = __webpack_require__(77); /** * clears the toolbar div element of children @@ -23793,7 +23792,7 @@ return /******/ (function(modules) { // webpackBootstrap controlNodeStyle: { shape: 'dot', size: 6, - color: { background: '#ff0000', border: '#3c3c3c', highlight: { background: '#07f968' } }, + color: { background: '#ff0000', border: '#3c3c3c', highlight: { background: '#07f968', border: '#3c3c3c' } }, borderWidth: 2, borderWidthSelected: 2 } @@ -23950,14 +23949,14 @@ return /******/ (function(modules) { // webpackBootstrap this._temporaryBindEvent('click', this._performAddNode.bind(this)); } }, { - key: 'editNode', + key: 'editNodeMode', /** * call the bound function to handle the editing of the node. The node has to be selected. * * @private */ - value: function editNode() { + value: function editNodeMode() { var _this = this; if (typeof this.options.handlerFunctions.editNode === 'function') { @@ -24008,6 +24007,10 @@ return /******/ (function(modules) { // webpackBootstrap // temporarily overload functions this._temporaryBindUI('onTouch', this._handleConnect.bind(this)); this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this)); + this._temporaryBindUI('onDrag', this._dragControlNode.bind(this)); + this._temporaryBindUI('onRelease', this._finishConnect.bind(this)); + + this._temporaryBindUI('onDragStart', function () {}); this._temporaryBindUI('onHold', function () {}); } }, { @@ -24339,9 +24342,9 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: '_createEditNodeButton', value: function _createEditNodeButton(locale) { - var button = this._createButton('editNode', 'vis-button vis-edit', locale.editNode); + var button = this._createButton('editNodeMode', 'vis-button vis-edit', locale.editNodeMode); this.manipulationDiv.appendChild(button); - this._bindHammerToDiv(button, this.editNode.bind(this)); + this._bindHammerToDiv(button, this.editNodeMode.bind(this)); } }, { key: '_createEditEdgeButton', @@ -24411,7 +24414,7 @@ return /******/ (function(modules) { // webpackBootstrap this.temporaryUIFunctions[UIfunctionName] = this.body.eventListeners[UIfunctionName]; this.body.eventListeners[UIfunctionName] = newFunction; } else { - throw new Error('This UI function does not exist. Typo? You tried: "' + UIfunctionName + '" possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners))); + throw new Error('This UI function does not exist. Typo? You tried: ' + UIfunctionName + ' possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners))); } } }, { @@ -24499,6 +24502,7 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _controlNodeTouch(event) { + this.selectionHandler.unselectAll(); this.lastTouch = this.body.functions.getPointer(event.center); this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object } @@ -24608,58 +24612,59 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _handleConnect(event) { - var _this3 = this; - // check to avoid double fireing of this function. if (new Date().valueOf() - this.touchTime > 100) { - var pointer = this.body.functions.getPointer(event.center); + this.lastTouch = this.body.functions.getPointer(event.center); + this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object + + var pointer = this.lastTouch; var node = this.selectionHandler.getNodeAt(pointer); if (node !== undefined) { if (node.isCluster === true) { alert(this.options.locales[this.options.locale].createEdgeError); } else { - (function () { - // create a node the temporary line can look at - var targetNode = _this3._getNewTargetNode(node.x, node.y); - var targetNodeId = targetNode.id; - _this3.body.nodes[targetNode.id] = targetNode; - _this3.body.nodeIndices.push(targetNode.id); - - // create a temporary edge - var connectionEdge = _this3.body.functions.createEdge({ - id: 'connectionEdge' + util.randomUUID(), - from: node.id, - to: targetNode.id, - physics: false, - smooth: { - enabled: true, - dynamic: false, - type: 'continuous', - roundness: 0.5 - } - }); - _this3.body.edges[connectionEdge.id] = connectionEdge; - _this3.body.edgeIndices.push(connectionEdge.id); - - _this3.temporaryIds.nodes.push(targetNode.id); - _this3.temporaryIds.edges.push(connectionEdge.id); - - _this3.temporaryUIFunctions.onDrag = _this3.body.eventListeners.onDrag; - _this3.body.eventListeners.onDrag = function (event) { - var pointer = _this3.body.functions.getPointer(event.center); - var targetNode = _this3.body.nodes[targetNodeId]; - targetNode.x = _this3.canvas._XconvertDOMtoCanvas(pointer.x); - targetNode.y = _this3.canvas._YconvertDOMtoCanvas(pointer.y); - _this3.body.emitter.emit('_redraw'); - }; - })(); + // create a node the temporary line can look at + var targetNode = this._getNewTargetNode(node.x, node.y); + this.body.nodes[targetNode.id] = targetNode; + this.body.nodeIndices.push(targetNode.id); + + // create a temporary edge + var connectionEdge = this.body.functions.createEdge({ + id: 'connectionEdge' + util.randomUUID(), + from: node.id, + to: targetNode.id, + physics: false, + smooth: { + enabled: true, + dynamic: false, + type: 'continuous', + roundness: 0.5 + } + }); + this.body.edges[connectionEdge.id] = connectionEdge; + this.body.edgeIndices.push(connectionEdge.id); + + this.temporaryIds.nodes.push(targetNode.id); + this.temporaryIds.edges.push(connectionEdge.id); } } this.touchTime = new Date().valueOf(); - - // do the original touch events - this.temporaryUIFunctions.onTouch(event); + } + } + }, { + key: '_dragControlNode', + value: function _dragControlNode(event) { + var pointer = this.body.functions.getPointer(event.center); + if (this.temporaryIds.nodes[0] !== undefined) { + var targetNode = this.body.nodes[this.temporaryIds.nodes[0]]; // there is only one temp node in the add edge mode. + targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x); + targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y); + this.body.emitter.emit('_redraw'); + } else { + var diffX = pointer.x - this.lastTouch.x; + var diffY = pointer.y - this.lastTouch.y; + this.body.view.translation = { x: this.lastTouch.translation.x + diffX, y: this.lastTouch.translation.y + diffY }; } } }, { @@ -24671,6 +24676,7 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _finishConnect(event) { + console.log('finishd'); var pointer = this.body.functions.getPointer(event.center); var pointerObj = this.selectionHandler._pointerToPositionObject(pointer); @@ -24680,17 +24686,12 @@ return /******/ (function(modules) { // webpackBootstrap connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId; } - //restore the drag function - if (this.temporaryUIFunctions.onDrag !== undefined) { - this.body.eventListeners.onDrag = this.temporaryUIFunctions.onDrag; - delete this.temporaryUIFunctions.onDrag; - } - // get the overlapping node but NOT the temporary node; var overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj); var node = undefined; for (var i = overlappingNodeIds.length - 1; i >= 0; i--) { - if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) !== -1) { + // if the node id is NOT a temporary node, accept the node. + if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) { node = this.body.nodes[overlappingNodeIds[i]]; break; } @@ -24722,7 +24723,7 @@ return /******/ (function(modules) { // webpackBootstrap * Adds a node on the specified location */ value: function _performAddNode(clickData) { - var _this4 = this; + var _this3 = this; var defaultData = { id: util.randomUUID(), @@ -24734,8 +24735,8 @@ return /******/ (function(modules) { // webpackBootstrap if (typeof this.options.handlerFunctions.addNode === 'function') { if (this.options.handlerFunctions.addNode.length === 2) { this.options.handlerFunctions.addNode(defaultData, function (finalizedData) { - _this4.body.data.nodes.add(finalizedData); - _this4.showManipulatorToolbar(); + _this3.body.data.nodes.add(finalizedData); + _this3.showManipulatorToolbar(); }); } else { throw new Error('The function for add does not support two arguments (data,callback)'); @@ -24755,15 +24756,16 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _performCreateEdge(sourceNodeId, targetNodeId) { - var _this5 = this; + var _this4 = this; + console.log('sou', sourceNodeId, targetNodeId); var defaultData = { from: sourceNodeId, to: targetNodeId }; if (this.options.handlerFunctions.addEdge) { if (this.options.handlerFunctions.addEdge.length === 2) { this.options.handlerFunctions.addEdge(defaultData, function (finalizedData) { - _this5.body.data.edges.add(finalizedData); - _this5.selectionHandler.unselectAll(); - _this5.showManipulatorToolbar(); + _this4.body.data.edges.add(finalizedData); + _this4.selectionHandler.unselectAll(); + _this4.showManipulatorToolbar(); }); } else { throw new Error('The function for connect does not support two arguments (data,callback)'); @@ -24783,15 +24785,15 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _performEditEdge(sourceNodeId, targetNodeId) { - var _this6 = this; + var _this5 = this; var defaultData = { id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId }; if (this.options.handlerFunctions.editEdge) { if (this.options.handlerFunctions.editEdge.length === 2) { this.options.handlerFunctions.editEdge(defaultData, function (finalizedData) { - _this6.body.data.edges.update(finalizedData); - _this6.selectionHandler.unselectAll(); - _this6.showManipulatorToolbar(); + _this5.body.data.edges.update(finalizedData); + _this5.selectionHandler.unselectAll(); + _this5.showManipulatorToolbar(); }); } else { throw new Error('The function for edit does not support two arguments (data, callback)'); @@ -24826,7 +24828,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ColorPicker = __webpack_require__(79); + var _ColorPicker = __webpack_require__(78); var _ColorPicker2 = _interopRequireWildcard(_ColorPicker); @@ -25887,7 +25889,7 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; - var keycharm = __webpack_require__(80); + var keycharm = __webpack_require__(79); var Emitter = __webpack_require__(42); var Hammer = __webpack_require__(41); var util = __webpack_require__(1); @@ -29121,7 +29123,7 @@ return /******/ (function(modules) { // webpackBootstrap return _moment; })); - /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(82)(module))) + /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(81)(module))) /***/ }, /* 65 */ @@ -29162,7 +29164,9 @@ return /******/ (function(modules) { // webpackBootstrap * * @param {Hammer.Manager} hammer An hammer instance. * @param {Object} [options] Available options: - * - `preventDefault: boolean` (false by default) + * - `preventDefault: true | 'mouse' | 'touch' | 'pen'`. + * Enforce preventing the default browser behavior. + * Cannot be set to `false`. * @return {Hammer.Manager} Returns the same hammer instance with extended * functionality */ @@ -29206,7 +29210,7 @@ return /******/ (function(modules) { // webpackBootstrap // register an event to catch the start of a gesture and store the // target in a singleton hammer._on('hammer.input', function (event) { - if (_options.preventDefault) { + if (_options.preventDefault === true || (_options.preventDefault === event.pointerType)) { event.preventDefault(); } if (event.isFirst) { @@ -29307,12 +29311,16 @@ return /******/ (function(modules) { // webpackBootstrap function propagatedHandler(event) { // let only a single hammer instance handle this event if (event.type !== 'hammer.input') { - if (event.srcEvent._handled && event.srcEvent._handled[event.type]) { + // it is possible that the same srcEvent is used with multiple hammer events, + // we keep track on which events are handled in an object _handled + if (!event.srcEvent._handled) { + event.srcEvent._handled = {}; + } + + if (event.srcEvent._handled[event.type]) { return; } else { - // it is possible that the same srcEvent is used with multiple hammer events - event.srcEvent._handled = {}; event.srcEvent._handled[event.type] = true; } } @@ -31801,7 +31809,7 @@ return /******/ (function(modules) { // webpackBootstrap prefixed: prefixed }); - if ("function" == TYPE_FUNCTION && __webpack_require__(83)) { + if ("function" == TYPE_FUNCTION && __webpack_require__(82)) { !(__WEBPACK_AMD_DEFINE_RESULT__ = function() { return Hammer; }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); @@ -31834,59 +31842,59 @@ return /******/ (function(modules) { // webpackBootstrap var _Label2 = _interopRequireWildcard(_Label); - var _Box = __webpack_require__(84); + var _Box = __webpack_require__(83); var _Box2 = _interopRequireWildcard(_Box); - var _Circle = __webpack_require__(85); + var _Circle = __webpack_require__(84); var _Circle2 = _interopRequireWildcard(_Circle); - var _CircularImage = __webpack_require__(86); + var _CircularImage = __webpack_require__(85); var _CircularImage2 = _interopRequireWildcard(_CircularImage); - var _Database = __webpack_require__(87); + var _Database = __webpack_require__(86); var _Database2 = _interopRequireWildcard(_Database); - var _Diamond = __webpack_require__(88); + var _Diamond = __webpack_require__(87); var _Diamond2 = _interopRequireWildcard(_Diamond); - var _Dot = __webpack_require__(89); + var _Dot = __webpack_require__(88); var _Dot2 = _interopRequireWildcard(_Dot); - var _Ellipse = __webpack_require__(90); + var _Ellipse = __webpack_require__(89); var _Ellipse2 = _interopRequireWildcard(_Ellipse); - var _Icon = __webpack_require__(91); + var _Icon = __webpack_require__(90); var _Icon2 = _interopRequireWildcard(_Icon); - var _Image = __webpack_require__(92); + var _Image = __webpack_require__(91); var _Image2 = _interopRequireWildcard(_Image); - var _Square = __webpack_require__(93); + var _Square = __webpack_require__(92); var _Square2 = _interopRequireWildcard(_Square); - var _Star = __webpack_require__(94); + var _Star = __webpack_require__(93); var _Star2 = _interopRequireWildcard(_Star); - var _Text = __webpack_require__(95); + var _Text = __webpack_require__(94); var _Text2 = _interopRequireWildcard(_Text); - var _Triangle = __webpack_require__(96); + var _Triangle = __webpack_require__(95); var _Triangle2 = _interopRequireWildcard(_Triangle); - var _TriangleDown = __webpack_require__(97); + var _TriangleDown = __webpack_require__(96); var _TriangleDown2 = _interopRequireWildcard(_TriangleDown); @@ -32613,15 +32621,15 @@ return /******/ (function(modules) { // webpackBootstrap var _Label2 = _interopRequireWildcard(_Label); - var _BezierEdgeDynamic = __webpack_require__(98); + var _BezierEdgeDynamic = __webpack_require__(97); var _BezierEdgeDynamic2 = _interopRequireWildcard(_BezierEdgeDynamic); - var _BezierEdgeStatic = __webpack_require__(99); + var _BezierEdgeStatic = __webpack_require__(98); var _BezierEdgeStatic2 = _interopRequireWildcard(_BezierEdgeStatic); - var _StraightEdge = __webpack_require__(100); + var _StraightEdge = __webpack_require__(99); var _StraightEdge2 = _interopRequireWildcard(_StraightEdge); @@ -33808,7 +33816,7 @@ return /******/ (function(modules) { // webpackBootstrap // forces caused by the edges, modelled as springs for (var i = 0; i < edgeIndices.length; i++) { edge = edges[edgeIndices[i]]; - if (edge.connected === true) { + if (edge.connected === true && edge.toId !== edge.fromId) { // only calculate forces if nodes are in the same sector if (this.body.nodes[edge.toId] !== undefined && this.body.nodes[edge.fromId] !== undefined) { if (edge.edgeType.via !== undefined) { @@ -34059,494 +34067,146 @@ return /******/ (function(modules) { // webpackBootstrap '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 util = __webpack_require__(1); - var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); - var keycharm = __webpack_require__(80); - var NavigationHandler = (function () { - function NavigationHandler(body, canvas) { - var _this = this; + var _Node2 = __webpack_require__(67); - _classCallCheck(this, NavigationHandler); + var _Node3 = _interopRequireWildcard(_Node2); - this.body = body; - this.canvas = canvas; + /** + * + */ - this.iconsCreated = false; - this.navigationHammers = []; - this.boundFunctions = {}; - this.touchTime = 0; - this.activated = false; + var Cluster = (function (_Node) { + function Cluster(options, body, imagelist, grouplist, globalOptions) { + _classCallCheck(this, Cluster); - 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(); - } - }); + _get(Object.getPrototypeOf(Cluster.prototype), 'constructor', this).call(this, options, body, imagelist, grouplist, globalOptions); - this.options = {}; + this.isCluster = true; + this.containedNodes = {}; + this.containedEdges = {}; } - _createClass(NavigationHandler, [{ - key: 'setOptions', - value: function setOptions(options) { - if (options !== undefined) { - this.options = options; - this.create(); - } - } - }, { - key: 'create', - value: function create() { - if (this.options.navigationButtons === true) { - if (this.iconsCreated === false) { - this.loadNavigationElements(); - } - } else if (this.iconsCreated === true) { - this.cleanNavigation(); - } + _inherits(Cluster, _Node); - this.configureKeyboardBindings(); - } - }, { - 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 = []; - } + return Cluster; + })(_Node3['default']); - this._navigationReleaseOverload = function () {}; + exports['default'] = Cluster; + module.exports = exports['default']; - // clean up previous navigation items - if (this.navigationDOM && this.navigationDOM.wrapper && this.navigationDOM.wrapper.parentNode) { - this.navigationDOM.wrapper.parentNode.removeChild(this.navigationDOM.wrapper); - } +/***/ }, +/* 77 */ +/***/ function(module, exports, __webpack_require__) { - this.iconsCreated = false; - } - }, { - key: 'loadNavigationElements', + // English + 'use strict'; - /** - * 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(); + 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.navigationDOM = {}; - var navigationDivs = ['up', 'down', 'left', 'right', 'zoomIn', 'zoomOut', 'zoomExtends']; - var navigationDivActions = ['_moveUp', '_moveDown', '_moveLeft', '_moveRight', '_zoomIn', '_zoomOut', '_zoomExtent']; + // 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.navigationDOM.wrapper = document.createElement('div'); - this.navigationDOM.wrapper.className = 'vis-navigation'; - this.canvas.frame.appendChild(this.navigationDOM.wrapper); +/***/ }, +/* 78 */ +/***/ function(module, exports, __webpack_require__) { - 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]]); + 'use strict'; - var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]); - if (navigationDivActions[i] === '_zoomExtent') { - hammerUtil.onTouch(hammer, this._zoomExtent.bind(this)); - } else { - hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this, navigationDivActions[i])); - } + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }; - this.navigationHammers.push(hammer); - } + 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.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'); + Object.defineProperty(exports, '__esModule', { + value: true + }); + var Hammer = __webpack_require__(41); + var hammerUtil = __webpack_require__(44); + var util = __webpack_require__(1); + + var ColorPicker = (function () { + function ColorPicker() { + var pixelRatio = arguments[0] === undefined ? 1 : arguments[0]; + + _classCallCheck(this, ColorPicker); + + this.pixelRatio = pixelRatio; + this.generated = false; + this.centerCoordinates = { x: 289 / 2, y: 289 / 2 }; + this.r = 289 * 0.49; + this.color = { r: 255, g: 255, b: 255, a: 1 }; + this.hueCircle = undefined; + this.initialColor = { r: 255, g: 255, b: 255, a: 1 }; + this.previousColor = undefined; + this.applied = false; + + // bound by + this.updateCallback = function () {}; + + // create all DOM elements + this._create(); + } + + _createClass(ColorPicker, [{ + key: 'insertTo', + + /** + * this inserts the colorPicker into a div from the DOM + * @param container + */ + value: function insertTo(container) { + if (this.hammer !== undefined) { + this.hammer.destroy(); + this.hammer = undefined; } - } - }, { - 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: '_zoomExtent', - - /** - * this stops all movement induced by the navigation buttons - * - * @private - */ - value: function _zoomExtent() { - 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('zoomExtent', { duration: 700 }); - this.touchTime = new Date().valueOf(); - } - } - }, { - key: '_stopMovement', - - /** - * this stops all movement induced by the navigation buttons - * - * @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'); - } - } - 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; - } - }, { - 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', - - /** - * bind all keys using keycharm. - */ - 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'); - } - } - } - }]); - - return NavigationHandler; - })(); - - exports['default'] = NavigationHandler; - module.exports = exports['default']; - -/***/ }, -/* 77 */ -/***/ 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; }; })(); - - 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. - */ - - var Popup = (function () { - function Popup(container) { - _classCallCheck(this, Popup); - - this.container = container; - - this.x = 0; - this.y = 0; - this.padding = 5; - this.hidden = false; - - // create the frame - this.frame = document.createElement('div'); - this.frame.className = 'vis-network-tooltip'; - this.container.appendChild(this.frame); - } - - _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: 'setText', - - /** - * Set the content for the popup window. This can be HTML code or text. - * @param {string | Element} content - */ - 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 - } - } - }, { - key: 'show', - - /** - * Show the popup window - * @param {boolean} [doShow] Show or hide the window - */ - value: function show(doShow) { - if (doShow === undefined) { - doShow = true; - } - - 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 top = this.y - height; - if (top + height + this.padding > maxHeight) { - top = maxHeight - height - this.padding; - } - if (top < this.padding) { - top = this.padding; - } - - var left = this.x; - if (left + width + this.padding > maxWidth) { - left = maxWidth - width - this.padding; - } - if (left < this.padding) { - left = this.padding; - } - - this.frame.style.left = left + 'px'; - this.frame.style.top = top + 'px'; - this.frame.style.visibility = 'visible'; - this.hidden = false; - } else { - this.hide(); - } - } - }, { - key: 'hide', - - /** - * Hide the popup window - */ - value: function hide() { - this.hidden = true; - this.frame.style.visibility = 'hidden'; - } - }]); - - return Popup; - })(); - - exports['default'] = Popup; - module.exports = exports['default']; - -/***/ }, -/* 78 */ -/***/ 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; - -/***/ }, -/* 79 */ -/***/ 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; }; })(); - - Object.defineProperty(exports, '__esModule', { - value: true - }); - var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); - var util = __webpack_require__(1); - - var ColorPicker = (function () { - function ColorPicker() { - var pixelRatio = arguments[0] === undefined ? 1 : arguments[0]; - - _classCallCheck(this, ColorPicker); - - this.pixelRatio = pixelRatio; - this.generated = false; - this.centerCoordinates = { x: 289 / 2, y: 289 / 2 }; - this.r = 289 * 0.49; - this.color = { r: 255, g: 255, b: 255, a: 1 }; - this.hueCircle = undefined; - this.initialColor = { r: 255, g: 255, b: 255, a: 1 }; - this.previousColor = undefined; - this.applied = false; - - // bound by - this.updateCallback = function () {}; - - // create all DOM elements - this._create(); - } - - _createClass(ColorPicker, [{ - key: 'insertTo', - - /** - * this inserts the colorPicker into a div from the DOM - * @param container - */ - value: function insertTo(container) { - if (this.hammer !== undefined) { - this.hammer.destroy(); - this.hammer = undefined; - } - this.container = container; - this.container.appendChild(this.frame); - this._bindHammer(); - - this._setSize(); + this.container = container; + this.container.appendChild(this.frame); + this._bindHammer(); + + this._setSize(); } }, { key: 'setCallback', @@ -35070,7 +34730,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 80 */ +/* 79 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict"; @@ -35268,7 +34928,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 81 */ +/* 80 */ /***/ function(module, exports, __webpack_require__) { function webpackContext(req) { @@ -35277,11 +34937,11 @@ return /******/ (function(modules) { // webpackBootstrap webpackContext.keys = function() { return []; }; webpackContext.resolve = webpackContext; module.exports = webpackContext; - webpackContext.id = 81; + webpackContext.id = 80; /***/ }, -/* 82 */ +/* 81 */ /***/ function(module, exports, __webpack_require__) { module.exports = function(module) { @@ -35297,7 +34957,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 83 */ +/* 82 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__; @@ -35305,7 +34965,7 @@ return /******/ (function(modules) { // webpackBootstrap /* WEBPACK VAR INJECTION */}.call(exports, {})) /***/ }, -/* 84 */ +/* 83 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35324,7 +34984,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -35403,7 +35063,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 85 */ +/* 84 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35422,7 +35082,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _CircleImageBase2 = __webpack_require__(102); + var _CircleImageBase2 = __webpack_require__(101); var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); @@ -35485,7 +35145,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 86 */ +/* 85 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35504,7 +35164,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _CircleImageBase2 = __webpack_require__(102); + var _CircleImageBase2 = __webpack_require__(101); var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); @@ -35586,7 +35246,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 87 */ +/* 86 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35605,7 +35265,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -35684,7 +35344,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 88 */ +/* 87 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35703,7 +35363,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -35742,7 +35402,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 89 */ +/* 88 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35761,7 +35421,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -35800,7 +35460,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 90 */ +/* 89 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35819,7 +35479,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -35901,7 +35561,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 91 */ +/* 90 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35920,7 +35580,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -36009,7 +35669,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 92 */ +/* 91 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36028,7 +35688,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _CircleImageBase2 = __webpack_require__(102); + var _CircleImageBase2 = __webpack_require__(101); var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); @@ -36087,7 +35747,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 93 */ +/* 92 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36106,7 +35766,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -36146,7 +35806,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 94 */ +/* 93 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36165,7 +35825,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -36204,7 +35864,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 95 */ +/* 94 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36223,7 +35883,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -36282,7 +35942,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 96 */ +/* 95 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36301,7 +35961,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -36340,7 +36000,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 97 */ +/* 96 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36359,7 +36019,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ShapeBase2 = __webpack_require__(103); + var _ShapeBase2 = __webpack_require__(102); var _ShapeBase3 = _interopRequireWildcard(_ShapeBase2); @@ -36398,7 +36058,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 98 */ +/* 97 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36417,7 +36077,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _BezierEdgeBase2 = __webpack_require__(104); + var _BezierEdgeBase2 = __webpack_require__(103); var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2); @@ -36439,6 +36099,13 @@ return /******/ (function(modules) { // webpackBootstrap 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', @@ -36544,7 +36211,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 99 */ +/* 98 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36563,7 +36230,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _BezierEdgeBase2 = __webpack_require__(104); + var _BezierEdgeBase2 = __webpack_require__(103); var _BezierEdgeBase3 = _interopRequireWildcard(_BezierEdgeBase2); @@ -36808,7 +36475,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 100 */ +/* 99 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36827,7 +36494,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _EdgeBase2 = __webpack_require__(105); + var _EdgeBase2 = __webpack_require__(104); var _EdgeBase3 = _interopRequireWildcard(_EdgeBase2); @@ -36918,7 +36585,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 101 */ +/* 100 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -36984,7 +36651,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 102 */ +/* 101 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -37003,7 +36670,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -37105,7 +36772,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 103 */ +/* 102 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -37124,7 +36791,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NodeBase2 = __webpack_require__(101); + var _NodeBase2 = __webpack_require__(100); var _NodeBase3 = _interopRequireWildcard(_NodeBase2); @@ -37195,7 +36862,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 104 */ +/* 103 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -37214,7 +36881,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _EdgeBase2 = __webpack_require__(105); + var _EdgeBase2 = __webpack_require__(104); var _EdgeBase3 = _interopRequireWildcard(_EdgeBase2); @@ -37342,7 +37009,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 105 */ +/* 104 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -37859,64 +37526,331 @@ return /******/ (function(modules) { // webpackBootstrap var _angle = undefined, point = undefined; - var _getCircleData7 = this._getCircleData(ctx); + var _getCircleData7 = this._getCircleData(ctx); + + var _getCircleData72 = _slicedToArray(_getCircleData7, 3); + + var x = _getCircleData72[0]; + var y = _getCircleData72[1]; + var radius = _getCircleData72[2]; + + if (position === 'from') { + point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.25, high: 0.6, direction: -1 }); + _angle = point.t * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI; + } else if (position === 'to') { + point = this.findBorderPosition(this.from, ctx, { x: x, y: y, low: 0.6, high: 1, direction: 1 }); + _angle = point.t * -2 * Math.PI + 1.5 * Math.PI - 1.1 * Math.PI; + } else { + point = this._pointOnCircle(x, y, radius, 0.175); + _angle = 3.9269908169872414; // === 0.175 * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI; + } + + // draw the arrowhead + var _length = (10 + 5 * this.options.width) * scaleFactor; + ctx.arrow(point.x, point.y, _angle, _length); + + // draw shadow if enabled + this.enableShadow(ctx); + ctx.fill(); + + // disable shadows for other elements. + this.disableShadow(ctx); + ctx.stroke(); + } + } + }, { + key: 'enableShadow', + value: function enableShadow(ctx) { + if (this.options.shadow.enabled === true) { + ctx.shadowColor = 'rgba(0,0,0,0.5)'; + ctx.shadowBlur = this.options.shadow.size; + ctx.shadowOffsetX = this.options.shadow.x; + ctx.shadowOffsetY = this.options.shadow.y; + } + } + }, { + key: 'disableShadow', + value: function disableShadow(ctx) { + if (this.options.shadow.enabled === true) { + ctx.shadowColor = 'rgba(0,0,0,0)'; + ctx.shadowBlur = 0; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + } + } + }]); + + return EdgeBase; + })(); + + exports['default'] = EdgeBase; + module.exports = exports['default']; + +/***/ }, +/* 105 */ +/***/ 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; }; })(); + + Object.defineProperty(exports, '__esModule', { + value: true + }); + var util = __webpack_require__(1); + var Hammer = __webpack_require__(41); + var hammerUtil = __webpack_require__(44); + var keycharm = __webpack_require__(79); + + var NavigationHandler = (function () { + function NavigationHandler(body, canvas) { + var _this = this; + + _classCallCheck(this, NavigationHandler); + + this.body = body; + 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(NavigationHandler, [{ + key: 'setOptions', + value: function setOptions(options) { + if (options !== undefined) { + this.options = options; + this.create(); + } + } + }, { + key: 'create', + value: function create() { + if (this.options.navigationButtons === true) { + if (this.iconsCreated === false) { + this.loadNavigationElements(); + } + } else if (this.iconsCreated === true) { + this.cleanNavigation(); + } + + this.configureKeyboardBindings(); + } + }, { + 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); + } + + this.iconsCreated = false; + } + }, { + key: 'loadNavigationElements', + + /** + * 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(); + + this.navigationDOM = {}; + var navigationDivs = ['up', 'down', 'left', 'right', 'zoomIn', 'zoomOut', 'zoomExtends']; + var navigationDivActions = ['_moveUp', '_moveDown', '_moveLeft', '_moveRight', '_zoomIn', '_zoomOut', '_zoomExtent']; + + this.navigationDOM.wrapper = document.createElement('div'); + this.navigationDOM.wrapper.className = 'vis-navigation'; + this.canvas.frame.appendChild(this.navigationDOM.wrapper); + + 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]]); + + var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]); + if (navigationDivActions[i] === '_zoomExtent') { + hammerUtil.onTouch(hammer, this._zoomExtent.bind(this)); + } else { + hammerUtil.onTouch(hammer, this.bindToRedraw.bind(this, navigationDivActions[i])); + } + + 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]; + } + } + }, { + key: '_zoomExtent', + + /** + * this stops all movement induced by the navigation buttons + * + * @private + */ + value: function _zoomExtent() { + 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('zoomExtent', { duration: 700 }); + this.touchTime = new Date().valueOf(); + } + } + }, { + key: '_stopMovement', + + /** + * this stops all movement induced by the navigation buttons + * + * @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'); + } + } + 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; + } + }, { + 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', - var _getCircleData72 = _slicedToArray(_getCircleData7, 3); + /** + * bind all keys using keycharm. + */ + value: function configureKeyboardBindings() { + if (this.keycharm !== undefined) { + this.keycharm.destroy(); + } - var x = _getCircleData72[0]; - var y = _getCircleData72[1]; - var radius = _getCircleData72[2]; + if (this.options.keyboard.enabled === true) { - 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; + if (this.options.keyboard.bindToWindow === true) { + this.keycharm = keycharm({ container: window, preventDefault: false }); } else { - point = this._pointOnCircle(x, y, radius, 0.175); - _angle = 3.9269908169872414; // === 0.175 * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI; + this.keycharm = keycharm({ container: this.canvas.frame, preventDefault: false }); } - // draw the arrowhead - var _length = (10 + 5 * this.options.width) * scaleFactor; - ctx.arrow(point.x, point.y, _angle, _length); + this.keycharm.reset(); - // draw shadow if enabled - this.enableShadow(ctx); - ctx.fill(); + 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'); - // 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; + 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'); + } } } }]); - return EdgeBase; + return NavigationHandler; })(); - exports['default'] = EdgeBase; + exports['default'] = NavigationHandler; module.exports = exports['default']; /***/ }, @@ -37925,43 +37859,124 @@ return /******/ (function(modules) { // webpackBootstrap '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 _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; }; + 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; }; })(); Object.defineProperty(exports, '__esModule', { value: true }); - - var _Node2 = __webpack_require__(67); - - var _Node3 = _interopRequireWildcard(_Node2); - /** - * + * 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. */ - var Cluster = (function (_Node) { - function Cluster(options, body, imagelist, grouplist, globalOptions) { - _classCallCheck(this, Cluster); + var Popup = (function () { + function Popup(container) { + _classCallCheck(this, Popup); - _get(Object.getPrototypeOf(Cluster.prototype), 'constructor', this).call(this, options, body, imagelist, grouplist, globalOptions); + this.container = container; - this.isCluster = true; - this.containedNodes = {}; - this.containedEdges = {}; + this.x = 0; + this.y = 0; + this.padding = 5; + this.hidden = false; + + // create the frame + this.frame = document.createElement('div'); + this.frame.className = 'vis-network-tooltip'; + this.container.appendChild(this.frame); } - _inherits(Cluster, _Node); + _createClass(Popup, [{ + key: 'setPosition', - return Cluster; - })(_Node3['default']); + /** + * @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: 'setText', - exports['default'] = Cluster; + /** + * Set the content for the popup window. This can be HTML code or text. + * @param {string | Element} content + */ + 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 + } + } + }, { + key: 'show', + + /** + * Show the popup window + * @param {boolean} [doShow] Show or hide the window + */ + value: function show(doShow) { + if (doShow === undefined) { + doShow = true; + } + + 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 top = this.y - height; + if (top + height + this.padding > maxHeight) { + top = maxHeight - height - this.padding; + } + if (top < this.padding) { + top = this.padding; + } + + var left = this.x; + if (left + width + this.padding > maxWidth) { + left = maxWidth - width - this.padding; + } + if (left < this.padding) { + left = this.padding; + } + + this.frame.style.left = left + 'px'; + this.frame.style.top = top + 'px'; + this.frame.style.visibility = 'visible'; + this.hidden = false; + } else { + this.hide(); + } + } + }, { + key: 'hide', + + /** + * Hide the popup window + */ + value: function hide() { + this.hidden = true; + this.frame.style.visibility = 'hidden'; + } + }]); + + return Popup; + })(); + + exports['default'] = Popup; module.exports = exports['default']; /***/ } diff --git a/dist/vis.min.css b/dist/vis.min.css index 8c0450b6..8b45e2b4 100644 --- a/dist/vis.min.css +++ b/dist/vis.min.css @@ -1 +1 @@ -.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis-foreground .vis-group,.vis-item.background,.vis-item.vis-range,.vis-itemset,.vis-labelset,.vis-labelset .vis-label,.vis-panel,.vis-timeline{box-sizing:border-box}div.vis-network div.vis-close,div.vis-network div.vis-navigation div.vis-button{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:no-repeat;-webkit-touch-callout:none;-webkit-user-select:none}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis-timeline{position:relative;border:1px solid #bfbfbf;padding:0;margin:0}.vis-panel{position:absolute;padding:0;margin:0}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset{position:relative}.vis-labelset .vis-label{position:relative;left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{position:relative;padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;overflow:hidden}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable .vis-item.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px}.vis-item.background{border:none;background-color:rgba(213,221,246,.4);padding:0;margin:0}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block;max-width:100%}.vis-item.background .vis-item-content{position:absolute;display:inline-block;max-width:100%;margin:5px}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png)top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;height:100%;top:0;right:-4px;cursor:e-resize}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-fill{fill-opacity:.1;stroke:none}.vis-bar{fill-opacity:.5;stroke-width:1px}.vis-point{stroke-width:2px;fill-opacity:1}.vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);position:absolute;left:0;top:0;width:100%;height:30px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:15px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-image:url(img/network/cross.png);cursor:pointer}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;cursor:pointer}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.vis-network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;font-color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2)}div.vis-network-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-network-configuration.vis-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-network-configuration.button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-network-configuration.button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-network-configuration.item{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-network-configuration.item.s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-network-configuration.item.s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-network-configuration.item.s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-network-configuration.header{font-size:18px;font-weight:700}div.vis-network-configuration.label{width:120px;height:25px;line-height:25px}div.vis-network-configuration.label.s3{width:110px}div.vis-network-configuration.label.s4{width:100px}div.vis-network-configuration.colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-network-configuration.checkbox{left:-5px}input.vis-network-configuration.rangeinput{position:relative;top:-5px;width:60px;height:13px;padding:1px;margin:0;pointer-events:none}input.vis-network-configuration.range{-webkit-appearance:none;border:0 solid #fff;background-color:transparent;width:300px;height:20px}input.vis-network-configuration.range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3876c2', endColorstr='#385380', GradientType=0);box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-network-configuration.range:focus{outline:0}input.vis-network-configuration.range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0)}input.vis-network-configuration.range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0);border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-network-configuration.range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-network-configuration.range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-network-configuration.range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-network-configuration.range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:focus::-ms-fill-lower{background:#888}input.vis-network-configuration.range:focus::-ms-fill-upper{background:#ccc}div.vis-color-picker{position:absolute;margin-top:-140px;margin-left:30px;width:293px;height:425px;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5)0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0)}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{top:380px;width:140px;height:20px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}div.vis-color-picker div.vis-new-color{position:absolute;left:159px;text-align:right;padding-right:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-initial-color{position:absolute;left:10px;text-align:left;padding-left:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px} \ No newline at end of file +.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis-foreground .vis-group,.vis-item.background,.vis-item.vis-range,.vis-itemset,.vis-labelset,.vis-labelset .vis-label,.vis-panel,.vis-timeline{box-sizing:border-box}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis-timeline{position:relative;border:1px solid #bfbfbf;padding:0;margin:0}.vis-panel{position:absolute;padding:0;margin:0}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset{position:relative}.vis-labelset .vis-label{position:relative;left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{position:relative;padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;overflow:hidden}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable .vis-item.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px}.vis-item.background{border:none;background-color:rgba(213,221,246,.4);padding:0;margin:0}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block;max-width:100%}.vis-item.background .vis-item-content{position:absolute;display:inline-block;max-width:100%;margin:5px}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png)top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;height:100%;top:0;right:-4px;cursor:e-resize}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-fill{fill-opacity:.1;stroke:none}.vis-bar{fill-opacity:.5;stroke-width:1px}.vis-point{stroke-width:2px;fill-opacity:1}.vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0 );position:absolute;left:0;top:0;width:100%;height:30px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:15px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.vis-network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;font-color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2)}div.vis-network-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-network-configuration.vis-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-network-configuration.button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-network-configuration.button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-network-configuration.item{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-network-configuration.item.s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-network-configuration.item.s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-network-configuration.item.s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-network-configuration.header{font-size:18px;font-weight:700}div.vis-network-configuration.label{width:120px;height:25px;line-height:25px}div.vis-network-configuration.label.s3{width:110px}div.vis-network-configuration.label.s4{width:100px}div.vis-network-configuration.colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-network-configuration.checkbox{left:-5px}input.vis-network-configuration.rangeinput{position:relative;top:-5px;width:60px;height:13px;padding:1px;margin:0;pointer-events:none}input.vis-network-configuration.range{-webkit-appearance:none;border:0 solid #fff;background-color:transparent;width:300px;height:20px}input.vis-network-configuration.range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380', GradientType=0 );box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-network-configuration.range:focus{outline:0}input.vis-network-configuration.range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0 )}input.vis-network-configuration.range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-network-configuration.range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-network-configuration.range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-network-configuration.range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-network-configuration.range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:focus::-ms-fill-lower{background:#888}input.vis-network-configuration.range:focus::-ms-fill-upper{background:#ccc}div.vis-color-picker{position:absolute;margin-top:-140px;margin-left:30px;width:293px;height:425px;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5)0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 )}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{top:380px;width:140px;height:20px;border-radius:5px;border:1px solid rgba(0,0,0,.1)}div.vis-color-picker div.vis-new-color{position:absolute;left:159px;text-align:right;padding-right:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-initial-color{position:absolute;left:10px;text-align:left;padding-left:2px;font-size:10px;color:rgba(0,0,0,.4);vertical-align:middle;line-height:20px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px} \ No newline at end of file diff --git a/examples/network/01_basic_usage.html b/examples/network/01_basic_usage.html index 1e851104..f051a1c0 100644 --- a/examples/network/01_basic_usage.html +++ b/examples/network/01_basic_usage.html @@ -29,7 +29,7 @@ // create an array with edges var edges = [ - {from: 1, to: 1}, + {from: 1, to: 1, id:'e1'}, {from: 1, to: 3, dashes:{pattern:[10,15,2,5]}}, {from: 1, to: 2}, {from: 2, to: 4}, @@ -44,10 +44,7 @@ edges: edges }; var options = { - configure:'edges', - edges:{ - dashes:true, - }, + manipulation:true // physics:{stabilization:true} } var network = new vis.Network(container, data, options); diff --git a/examples/network/21_data_manipulation.html b/examples/network/21_data_manipulation.html index 4e526a3e..c3fac9a6 100644 --- a/examples/network/21_data_manipulation.html +++ b/examples/network/21_data_manipulation.html @@ -115,46 +115,7 @@ }; var options = { stabilize: false, - dataManipulation: true, - onAdd: function(data,callback) { - var span = document.getElementById('operation'); - var idInput = document.getElementById('node-id'); - var labelInput = document.getElementById('node-label'); - var saveButton = document.getElementById('saveButton'); - var cancelButton = document.getElementById('cancelButton'); - var div = document.getElementById('network-popUp'); - span.innerHTML = "Add Node"; - idInput.value = data.id; - labelInput.value = data.label; - saveButton.onclick = saveData.bind(this,data,callback); - cancelButton.onclick = clearPopUp.bind(); - div.style.display = 'block'; - }, - onEdit: function(data,callback) { - var span = document.getElementById('operation'); - var idInput = document.getElementById('node-id'); - var labelInput = document.getElementById('node-label'); - var saveButton = document.getElementById('saveButton'); - var cancelButton = document.getElementById('cancelButton'); - var div = document.getElementById('network-popUp'); - span.innerHTML = "Edit Node"; - idInput.value = data.id; - labelInput.value = data.label; - saveButton.onclick = saveData.bind(this,data,callback); - cancelButton.onclick = clearPopUp.bind(); - div.style.display = 'block'; - }, - onConnect: function(data,callback) { - if (data.from == data.to) { - var r=confirm("Do you want to connect the node to itself?"); - if (r==true) { - callback(data); - } - } - else { - callback(data); - } - } + manipulation: true }; network = new vis.Network(container, data, options); diff --git a/examples/network/39_newClustering.html b/examples/network/39_newClustering.html index 4b6a8013..0aa41192 100644 --- a/examples/network/39_newClustering.html +++ b/examples/network/39_newClustering.html @@ -80,13 +80,13 @@ network.clustering.clusterOutliers({clusterNodeProperties: {shape:'database',borderWidth:3}}) // network.clusterByConnection(2, clusterOptions); -// network.clusterByConnection(9, { -// joinCondition:function(parentOptions,childOptions) {return true;}, -// processProperties:function (properties, childNodes, childEdges) { -// return properties; -// }, -// clusterNodeProperties: {id:'bla2', label:"bla2", borderWidth:8} -// }); + network.clusterByConnection(9, { + joinCondition:function(parentOptions,childOptions) {return true;}, + processProperties:function (properties, childNodes, childEdges) { + return properties; + }, + clusterNodeProperties: {id:'bla2', label:"bla2", borderWidth:8} + }); network.body.emitter.on("select", function(params) { console.log("here1234") if (params.nodes.length == 1) { diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index e3696182..90457e90 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/lib/network/modules/ManipulationSystem.js @@ -54,7 +54,7 @@ class ManipulationSystem { controlNodeStyle:{ shape:'dot', size:6, - color: {background: '#ff0000', border: '#3c3c3c', highlight: {background: '#07f968'}}, + color: {background: '#ff0000', border: '#3c3c3c', highlight: {background: '#07f968', border: '#3c3c3c'}}, borderWidth: 2, borderWidthSelected: 2 } @@ -96,16 +96,16 @@ class ManipulationSystem { let closeDiv = this.closeDiv; let editModeDiv = this.editModeDiv; if (this.editMode === true) { - toolbar.style.display = "block"; - closeDiv.style.display = "block"; - editModeDiv.style.display = "none"; + toolbar.style.display = 'block'; + closeDiv.style.display = 'block'; + editModeDiv.style.display = 'none'; this._bindHammerToDiv(closeDiv, this.toggleEditMode.bind(this)); this.showManipulatorToolbar(); } else { - toolbar.style.display = "none"; - closeDiv.style.display = "none"; - editModeDiv.style.display = "block"; + toolbar.style.display = 'none'; + closeDiv.style.display = 'none'; + editModeDiv.style.display = 'block'; this._createEditButton(); } } @@ -199,7 +199,7 @@ class ManipulationSystem { * * @private */ - editNode() { + editNodeMode() { if (typeof this.options.handlerFunctions.editNode === 'function') { let node = this.selectionHandler._getSelectedNode(); if (node.isCluster !== true) { @@ -218,7 +218,7 @@ class ManipulationSystem { } } else { - alert(this.options.locales[this.options.locale]["editClusterError"]); + alert(this.options.locales[this.options.locale]['editClusterError']); } } else { @@ -248,8 +248,12 @@ class ManipulationSystem { } // temporarily overload functions - this._temporaryBindUI('onTouch', this._handleConnect.bind(this)); - this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this)); + this._temporaryBindUI('onTouch', this._handleConnect.bind(this)); + this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this)); + this._temporaryBindUI('onDrag', this._dragControlNode.bind(this)); + this._temporaryBindUI('onRelease', this._finishConnect.bind(this)); + + this._temporaryBindUI('onDragStart', () => {}); this._temporaryBindUI('onHold', () => {}); } @@ -326,7 +330,7 @@ class ManipulationSystem { if (selectedNodes.length > 0) { for (let i = 0; i < selectedNodes.length; i++) { if (this.body.nodes[selectedNodes[i]].isCluster === true) { - alert(this.options.locales[this.options.locale]["deleteClusterError"]); + alert(this.options.locales[this.options.locale]['deleteClusterError']); return; } } @@ -347,7 +351,7 @@ class ManipulationSystem { deleteFunction(data, (finalizedData) => { this.body.data.edges.remove(finalizedData.edges); this.body.data.nodes.remove(finalizedData.nodes); - this.body.emitter.emit("startSimulation"); + this.body.emitter.emit('startSimulation'); }); } else { @@ -357,7 +361,7 @@ class ManipulationSystem { else { this.body.data.edges.remove(selectedEdges); this.body.data.nodes.remove(selectedNodes); - this.body.emitter.emit("startSimulation"); + this.body.emitter.emit('startSimulation'); } } @@ -402,10 +406,10 @@ class ManipulationSystem { this.manipulationDiv = document.createElement('div'); this.manipulationDiv.className = 'vis-manipulation'; if (this.editMode === true) { - this.manipulationDiv.style.display = "block"; + this.manipulationDiv.style.display = 'block'; } else { - this.manipulationDiv.style.display = "none"; + this.manipulationDiv.style.display = 'none'; } this.canvas.frame.appendChild(this.manipulationDiv); } @@ -415,10 +419,10 @@ class ManipulationSystem { this.editModeDiv = document.createElement('div'); this.editModeDiv.className = 'vis-edit-mode'; if (this.editMode === true) { - this.editModeDiv.style.display = "none"; + this.editModeDiv.style.display = 'none'; } else { - this.editModeDiv.style.display = "block"; + this.editModeDiv.style.display = 'block'; } this.canvas.frame.appendChild(this.editModeDiv); } @@ -501,7 +505,7 @@ class ManipulationSystem { this._unbindTemporaryEvents(); // restore the physics if required - this.body.emitter.emit("restorePhysics"); + this.body.emitter.emit('restorePhysics'); } @@ -571,9 +575,9 @@ class ManipulationSystem { } _createEditNodeButton(locale) { - let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode']); + let button = this._createButton('editNodeMode', 'vis-button vis-edit', locale['editNodeMode']); this.manipulationDiv.appendChild(button); - this._bindHammerToDiv(button, this.editNode.bind(this)); + this._bindHammerToDiv(button, this.editNodeMode.bind(this)); } _createEditEdgeButton(locale) { @@ -595,13 +599,13 @@ class ManipulationSystem { } _createButton(id, className, label, labelClassName = 'vis-label') { - this.manipulationDOM[id+"Div"] = document.createElement('div'); - this.manipulationDOM[id+"Div"].className = className; - this.manipulationDOM[id+"Label"] = document.createElement('div'); - this.manipulationDOM[id+"Label"].className = labelClassName; - this.manipulationDOM[id+"Label"].innerHTML = label; - this.manipulationDOM[id+"Div"].appendChild(this.manipulationDOM[id+'Label']); - return this.manipulationDOM[id+"Div"]; + this.manipulationDOM[id+'Div'] = document.createElement('div'); + this.manipulationDOM[id+'Div'].className = className; + this.manipulationDOM[id+'Label'] = document.createElement('div'); + this.manipulationDOM[id+'Label'].className = labelClassName; + this.manipulationDOM[id+'Label'].innerHTML = label; + this.manipulationDOM[id+'Div'].appendChild(this.manipulationDOM[id+'Label']); + return this.manipulationDOM[id+'Div']; } _createDescription(label) { @@ -635,7 +639,7 @@ class ManipulationSystem { this.body.eventListeners[UIfunctionName] = newFunction; } else { - throw new Error('This UI function does not exist. Typo? You tried: "' + UIfunctionName + '" possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners))); + throw new Error('This UI function does not exist. Typo? You tried: ' + UIfunctionName + ' possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners))); } } @@ -710,6 +714,7 @@ class ManipulationSystem { * @private */ _controlNodeTouch(event) { + this.selectionHandler.unselectAll(); this.lastTouch = this.body.functions.getPointer(event.center); this.lastTouch.translation = util.extend({},this.body.view.translation); // copy the object } @@ -740,7 +745,7 @@ class ManipulationSystem { edge.edgeType.to = to; } - this.body.emitter.emit("_redraw"); + this.body.emitter.emit('_redraw'); } /** @@ -749,7 +754,7 @@ class ManipulationSystem { * @private */ _controlNodeDrag(event) { - this.body.emitter.emit("disablePhysics"); + this.body.emitter.emit('disablePhysics'); let pointer = this.body.functions.getPointer(event.center); let pos = this.canvas.DOMtoCanvas(pointer); @@ -763,7 +768,7 @@ class ManipulationSystem { let diffY = pointer.y - this.lastTouch.y; this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY}; } - this.body.emitter.emit("_redraw"); + this.body.emitter.emit('_redraw'); } @@ -789,7 +794,7 @@ class ManipulationSystem { // perform the connection if (node !== undefined && this.selectedControlNode !== undefined) { if (node.isCluster === true) { - alert(this.options.locales[this.options.locale]["createEdgeError"]) + alert(this.options.locales[this.options.locale]['createEdgeError']) } else { let from = this.body.nodes[this.temporaryIds.nodes[0]]; @@ -803,9 +808,9 @@ class ManipulationSystem { } else { edge.updateEdgeType(); - this.body.emitter.emit("restorePhysics"); + this.body.emitter.emit('restorePhysics'); } - this.body.emitter.emit("_redraw"); + this.body.emitter.emit('_redraw'); } // ------------------------------------ END OF EDIT EDGE FUNCTIONS -----------------------------------------// @@ -822,7 +827,10 @@ class ManipulationSystem { _handleConnect(event) { // check to avoid double fireing of this function. if (new Date().valueOf() - this.touchTime > 100) { - let pointer = this.body.functions.getPointer(event.center); + this.lastTouch = this.body.functions.getPointer(event.center); + this.lastTouch.translation = util.extend({},this.body.view.translation); // copy the object + + let pointer = this.lastTouch; let node = this.selectionHandler.getNodeAt(pointer); if (node !== undefined) { @@ -832,20 +840,19 @@ class ManipulationSystem { else { // create a node the temporary line can look at let targetNode = this._getNewTargetNode(node.x,node.y); - let targetNodeId = targetNode.id; this.body.nodes[targetNode.id] = targetNode; this.body.nodeIndices.push(targetNode.id); // create a temporary edge let connectionEdge = this.body.functions.createEdge({ - id: "connectionEdge" + util.randomUUID(), + id: 'connectionEdge' + util.randomUUID(), from: node.id, to: targetNode.id, - physics:false, + physics: false, smooth: { enabled: true, dynamic: false, - type: "continuous", + type: 'continuous', roundness: 0.5 } }); @@ -854,30 +861,36 @@ class ManipulationSystem { this.temporaryIds.nodes.push(targetNode.id); this.temporaryIds.edges.push(connectionEdge.id); - - this.temporaryUIFunctions["onDrag"] = this.body.eventListeners.onDrag; - this.body.eventListeners.onDrag = (event) => { - let pointer = this.body.functions.getPointer(event.center); - let targetNode = this.body.nodes[targetNodeId]; - targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x); - targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y); - this.body.emitter.emit("_redraw"); - } } } this.touchTime = new Date().valueOf(); + } + } - // do the original touch events - this.temporaryUIFunctions["onTouch"](event); + _dragControlNode(event) { + let pointer = this.body.functions.getPointer(event.center); + if (this.temporaryIds.nodes[0] !== undefined) { + let targetNode = this.body.nodes[this.temporaryIds.nodes[0]]; // there is only one temp node in the add edge mode. + targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x); + targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y); + this.body.emitter.emit('_redraw'); } + else { + let diffX = pointer.x - this.lastTouch.x; + let diffY = pointer.y - this.lastTouch.y; + this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY}; + } + } + /** * Connect the new edge to the target if one exists, otherwise remove temp line * @param event * @private */ _finishConnect(event) { + console.log("finishd") let pointer = this.body.functions.getPointer(event.center); let pointerObj = this.selectionHandler._pointerToPositionObject(pointer); @@ -887,17 +900,12 @@ class ManipulationSystem { connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId; } - //restore the drag function - if (this.temporaryUIFunctions["onDrag"] !== undefined) { - this.body.eventListeners.onDrag = this.temporaryUIFunctions["onDrag"]; - delete this.temporaryUIFunctions["onDrag"]; - } - // get the overlapping node but NOT the temporary node; let overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj); let node = undefined; for (let i = overlappingNodeIds.length-1; i >= 0; i--) { - if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) !== -1) { + // if the node id is NOT a temporary node, accept the node. + if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) { node = this.body.nodes[overlappingNodeIds[i]]; break; } @@ -909,7 +917,7 @@ class ManipulationSystem { // perform the connection if (node !== undefined) { if (node.isCluster === true) { - alert(this.options.locales[this.options.locale]["createEdgeError"]); + alert(this.options.locales[this.options.locale]['createEdgeError']); } else { if (this.body.nodes[connectFromId] !== undefined && this.body.nodes[node.id] !== undefined) { @@ -917,7 +925,7 @@ class ManipulationSystem { } } } - this.body.emitter.emit("_redraw"); + this.body.emitter.emit('_redraw'); } // --------------------------------------- END OF ADD EDGE FUNCTIONS -------------------------------------// @@ -933,7 +941,7 @@ class ManipulationSystem { id: util.randomUUID(), x: clickData.pointer.canvas.x, y: clickData.pointer.canvas.y, - label: "new" + label: 'new' }; if (typeof this.options.handlerFunctions.addNode === 'function') { @@ -961,6 +969,7 @@ class ManipulationSystem { * @private */ _performCreateEdge(sourceNodeId, targetNodeId) { + console.log('sou',sourceNodeId, targetNodeId) let defaultData = {from: sourceNodeId, to: targetNodeId}; if (this.options.handlerFunctions.addEdge) { if (this.options.handlerFunctions.addEdge.length === 2) { diff --git a/lib/network/modules/SelectionHandler.js b/lib/network/modules/SelectionHandler.js index 390a1fb2..c978900b 100644 --- a/lib/network/modules/SelectionHandler.js +++ b/lib/network/modules/SelectionHandler.js @@ -150,7 +150,6 @@ class SelectionHandler { // we first check if this is an navigation controls element let positionObject = this._pointerToPositionObject(pointer); let overlappingNodes = this._getAllNodesOverlappingWith(positionObject); - // if there are overlapping nodes, select the last one, this is the // one which is drawn on top of the others if (overlappingNodes.length > 0) { diff --git a/lib/network/modules/components/edges/BezierEdgeDynamic.js b/lib/network/modules/components/edges/BezierEdgeDynamic.js index 4a953d4f..a132bb14 100644 --- a/lib/network/modules/components/edges/BezierEdgeDynamic.js +++ b/lib/network/modules/components/edges/BezierEdgeDynamic.js @@ -12,6 +12,14 @@ class BezierEdgeDynamic extends BezierEdgeBase { 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}) + } } cleanup() { diff --git a/lib/network/modules/components/physics/SpringSolver.js b/lib/network/modules/components/physics/SpringSolver.js index 80855c5f..d8e549a9 100644 --- a/lib/network/modules/components/physics/SpringSolver.js +++ b/lib/network/modules/components/physics/SpringSolver.js @@ -22,7 +22,7 @@ class SpringSolver { // forces caused by the edges, modelled as springs for (let i = 0; i < edgeIndices.length; i++) { edge = edges[edgeIndices[i]]; - if (edge.connected === true) { + if (edge.connected === true && edge.toId !== edge.fromId) { // only calculate forces if nodes are in the same sector if (this.body.nodes[edge.toId] !== undefined && this.body.nodes[edge.fromId] !== undefined) { if (edge.edgeType.via !== undefined) { @@ -31,7 +31,6 @@ class SpringSolver { var node2 = edge.edgeType.via; var node3 = edge.from; - this._calculateSpringForce(node1, node2, 0.5 * edgeLength); this._calculateSpringForce(node2, node3, 0.5 * edgeLength); }