-
+
diff --git a/examples/network/categories/rest/clustering.html b/examples/network/categories/rest/clustering.html new file mode 100644 index 00000000..0e304245 --- /dev/null +++ b/examples/network/categories/rest/clustering.html @@ -0,0 +1,141 @@ + + + +
+Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it. +
+ ++
+
+
+
+ + + + + + + diff --git a/examples/network/categories/rest/manipulation.html b/examples/network/categories/rest/manipulation.html new file mode 100644 index 00000000..e3b2c619 --- /dev/null +++ b/examples/network/categories/rest/manipulation.html @@ -0,0 +1,167 @@ + + + +
Editing the nodes and edges (localized)
++ The localization is only relevant to the manipulation buttons. +
+ ++ + +
+ +
+ node
+
+
+
+
++
| id | + |
| label | + |
+ + + + + diff --git a/examples/network/categories/20_navigation.html b/examples/network/categories/rest/navigation.html similarity index 79% rename from examples/network/categories/20_navigation.html rename to examples/network/categories/rest/navigation.html index 8244a0b0..f73d8a3d 100644 --- a/examples/network/categories/20_navigation.html +++ b/examples/network/categories/rest/navigation.html @@ -10,7 +10,6 @@ #mynetwork { width: 600px; height: 600px; - margin:100px; border: 1px solid lightgray; } table.legend_table { @@ -28,8 +27,9 @@ } - - + + + - + @@ -94,13 +94,13 @@
| Icons: | - |
-  |
-  |
-  |
-  |
-  |
-  |
+  |
+  |
+  |
+  |
+  |
+  |
+  |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Keyboard shortcuts: | diff --git a/lib/network/Network.js b/lib/network/Network.js index 78f96759..00adb0e6 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -163,7 +163,7 @@ Network.prototype.setOptions = function (options) { this.nodesHandler.setOptions(options.nodes); this.edgesHandler.setOptions(options.edges); this.physics.setOptions(options.physics); - this.manipulation.setOptions(options.manipulation,options); // manipulation uses the locales in the globals + this.manipulation.setOptions(options.manipulation, options, this.options); // manipulation uses the locales in the globals this.interactionHandler.setOptions(options.interaction); this.renderer.setOptions(options.interaction); // options for rendering are in interaction @@ -428,46 +428,46 @@ Network.prototype.isActive = function () { }; -Network.prototype.setSize = function() {this.canvas.setSize.apply(this.canvas,arguments);}; -Network.prototype.canvasToDOM = function() {this.canvas.canvasToDOM.apply(this.canvas,arguments);}; -Network.prototype.DOMtoCanvas = function() {this.canvas.setSize.DOMtoCanvas(this.canvas,arguments);}; -Network.prototype.findNode = function() {this.clustering.findNode.apply(this.clustering,arguments);}; -Network.prototype.isCluster = function() {this.clustering.isCluster.apply(this.clustering,arguments);}; -Network.prototype.openCluster = function() {this.clustering.openCluster.apply(this.clustering,arguments);}; -Network.prototype.cluster = function() {this.clustering.cluster.apply(this.clustering,arguments);}; -Network.prototype.clusterByConnection = function() {this.clustering.clusterByConnection.apply(this.clustering,arguments);}; -Network.prototype.clusterByHubsize = function() {this.clustering.clusterByHubsize.apply(this.clustering,arguments);}; -Network.prototype.clusterOutliers = function() {this.clustering.clusterOutliers.apply(this.clustering,arguments);}; -Network.prototype.getSeed = function() {this.layoutEngine.getSeed.apply(this.layoutEngine,arguments);}; -Network.prototype.enableEditMode = function() {this.manipulation.enableEditMode.apply(this.manipulation,arguments);}; -Network.prototype.disableEditMode = function() {this.manipulation.disableEditMode.apply(this.manipulation,arguments);}; -Network.prototype.addNodeMode = function() {this.manipulation.addNodeMode.apply(this.manipulation,arguments);}; -Network.prototype.editNodeMode = function() {this.manipulation.editNodeMode.apply(this.manipulation,arguments);}; -Network.prototype.addEdgeMode = function() {this.manipulation.addEdgeMode.apply(this.manipulation,arguments);}; -Network.prototype.editEdgeMode = function() {this.manipulation.editEdgeMode.apply(this.manipulation,arguments);}; -Network.prototype.deleteSelected = function() {this.manipulation.deleteSelected.apply(this.manipulation,arguments);}; -Network.prototype.getPositions = function() {this.nodesHandler.getPositions.apply(this.nodesHandler,arguments);}; -Network.prototype.storePositions = function() {this.nodesHandler.storePositions.apply(this.nodesHandler,arguments);}; -Network.prototype.getBoundingBox = function() {this.nodesHandler.getBoundingBox.apply(this.nodesHandler,arguments);}; -Network.prototype.getConnectedNodes = function() {this.nodesHandler.getConnectedNodes.apply(this.nodesHandler,arguments);}; -Network.prototype.getEdges = function() {this.nodesHandler.getEdges.apply(this.nodesHandler,arguments);}; -Network.prototype.startSimulation = function() {this.physics.startSimulation.apply(this.physics,arguments);}; -Network.prototype.stopSimulation = function() {this.physics.stopSimulation.apply(this.physics,arguments);}; -Network.prototype.stabilize = function() {this.physics.stabilize.apply(this.physics,arguments);}; -Network.prototype.getSelection = function() {this.selectionHandler.getSelection.apply(this.selectionHandler,arguments);}; -Network.prototype.getSelectedNodes = function() {this.selectionHandler.getSelectedNodes.apply(this.selectionHandler,arguments);}; -Network.prototype.getSelectedEdges = function() {this.selectionHandler.getSelectedEdges.apply(this.selectionHandler,arguments);}; -Network.prototype.getNodeAt = function() {this.selectionHandler.getNodeAt.apply(this.selectionHandler,arguments);}; -Network.prototype.getEdgeAt = function() {this.selectionHandler.getEdgeAt.apply(this.selectionHandler,arguments);}; -Network.prototype.selectNodes = function() {this.selectionHandler.selectNodes.apply(this.selectionHandler,arguments);}; -Network.prototype.selectEdges = function() {this.selectionHandler.selectEdges.apply(this.selectionHandler,arguments);}; -Network.prototype.unselectAll = function() {this.selectionHandler.unselectAll.apply(this.selectionHandler,arguments);}; -Network.prototype.redraw = function() {this.renderer.redraw.apply(this.renderer,arguments);}; -Network.prototype.getScale = function() {this.view.getScale.apply(this.view,arguments);}; -Network.prototype.getPosition = function() {this.view.getPosition.apply(this.view,arguments);}; -Network.prototype.fit = function() {this.view.fit.apply(this.view,arguments);}; -Network.prototype.moveTo = function() {this.view.moveTo.apply(this.view,arguments);}; -Network.prototype.focus = function() {this.view.focus.apply(this.view,arguments);}; -Network.prototype.releaseNode = function() {this.view.releaseNode.apply(this.view,arguments);}; +Network.prototype.setSize = function() {return this.canvas.setSize.apply(this.canvas,arguments);}; +Network.prototype.canvasToDOM = function() {return this.canvas.canvasToDOM.apply(this.canvas,arguments);}; +Network.prototype.DOMtoCanvas = function() {return this.canvas.setSize.DOMtoCanvas(this.canvas,arguments);}; +Network.prototype.findNode = function() {return this.clustering.findNode.apply(this.clustering,arguments);}; +Network.prototype.isCluster = function() {return this.clustering.isCluster.apply(this.clustering,arguments);}; +Network.prototype.openCluster = function() {return this.clustering.openCluster.apply(this.clustering,arguments);}; +Network.prototype.cluster = function() {return this.clustering.cluster.apply(this.clustering,arguments);}; +Network.prototype.clusterByConnection = function() {return this.clustering.clusterByConnection.apply(this.clustering,arguments);}; +Network.prototype.clusterByHubsize = function() {return this.clustering.clusterByHubsize.apply(this.clustering,arguments);}; +Network.prototype.clusterOutliers = function() {return this.clustering.clusterOutliers.apply(this.clustering,arguments);}; +Network.prototype.getSeed = function() {return this.layoutEngine.getSeed.apply(this.layoutEngine,arguments);}; +Network.prototype.enableEditMode = function() {return this.manipulation.enableEditMode.apply(this.manipulation,arguments);}; +Network.prototype.disableEditMode = function() {return this.manipulation.disableEditMode.apply(this.manipulation,arguments);}; +Network.prototype.addNodeMode = function() {return this.manipulation.addNodeMode.apply(this.manipulation,arguments);}; +Network.prototype.editNodeMode = function() {return this.manipulation.editNodeMode.apply(this.manipulation,arguments);}; +Network.prototype.addEdgeMode = function() {return this.manipulation.addEdgeMode.apply(this.manipulation,arguments);}; +Network.prototype.editEdgeMode = function() {return this.manipulation.editEdgeMode.apply(this.manipulation,arguments);}; +Network.prototype.deleteSelected = function() {return this.manipulation.deleteSelected.apply(this.manipulation,arguments);}; +Network.prototype.getPositions = function() {return this.nodesHandler.getPositions.apply(this.nodesHandler,arguments);}; +Network.prototype.storePositions = function() {return this.nodesHandler.storePositions.apply(this.nodesHandler,arguments);}; +Network.prototype.getBoundingBox = function() {return this.nodesHandler.getBoundingBox.apply(this.nodesHandler,arguments);}; +Network.prototype.getConnectedNodes = function() {return this.nodesHandler.getConnectedNodes.apply(this.nodesHandler,arguments);}; +Network.prototype.getEdges = function() {return this.nodesHandler.getEdges.apply(this.nodesHandler,arguments);}; +Network.prototype.startSimulation = function() {return this.physics.startSimulation.apply(this.physics,arguments);}; +Network.prototype.stopSimulation = function() {return this.physics.stopSimulation.apply(this.physics,arguments);}; +Network.prototype.stabilize = function() {return this.physics.stabilize.apply(this.physics,arguments);}; +Network.prototype.getSelection = function() {return this.selectionHandler.getSelection.apply(this.selectionHandler,arguments);}; +Network.prototype.getSelectedNodes = function() {return this.selectionHandler.getSelectedNodes.apply(this.selectionHandler,arguments);}; +Network.prototype.getSelectedEdges = function() {return this.selectionHandler.getSelectedEdges.apply(this.selectionHandler,arguments);}; +Network.prototype.getNodeAt = function() {return this.selectionHandler.getNodeAt.apply(this.selectionHandler,arguments);}; +Network.prototype.getEdgeAt = function() {return this.selectionHandler.getEdgeAt.apply(this.selectionHandler,arguments);}; +Network.prototype.selectNodes = function() {return this.selectionHandler.selectNodes.apply(this.selectionHandler,arguments);}; +Network.prototype.selectEdges = function() {return this.selectionHandler.selectEdges.apply(this.selectionHandler,arguments);}; +Network.prototype.unselectAll = function() {return this.selectionHandler.unselectAll.apply(this.selectionHandler,arguments);}; +Network.prototype.redraw = function() {return this.renderer.redraw.apply(this.renderer,arguments);}; +Network.prototype.getScale = function() {return this.view.getScale.apply(this.view,arguments);}; +Network.prototype.getPosition = function() {return this.view.getPosition.apply(this.view,arguments);}; +Network.prototype.fit = function() {return this.view.fit.apply(this.view,arguments);}; +Network.prototype.moveTo = function() {return this.view.moveTo.apply(this.view,arguments);}; +Network.prototype.focus = function() {return this.view.focus.apply(this.view,arguments);}; +Network.prototype.releaseNode = function() {return this.view.releaseNode.apply(this.view,arguments);}; module.exports = Network; \ No newline at end of file diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js index ac2b8ca4..a2ec76f4 100644 --- a/lib/network/modules/CanvasRenderer.js +++ b/lib/network/modules/CanvasRenderer.js @@ -160,14 +160,15 @@ class CanvasRenderer { let h = this.canvas.frame.canvas.clientHeight; ctx.clearRect(0, 0, w, h); - - this.body.emitter.emit("beforeDrawing", ctx); - // set scaling and translation ctx.save(); ctx.translate(this.body.view.translation.x, this.body.view.translation.y); ctx.scale(this.body.view.scale, this.body.view.scale); + ctx.beginPath(); + this.body.emitter.emit("beforeDrawing", ctx); + ctx.closePath(); + if (hidden === false) { if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) { this._drawEdges(ctx); @@ -182,10 +183,10 @@ class CanvasRenderer { this._drawControlNodes(ctx); } + ctx.beginPath(); //this.physics.nodesSolver._debug(ctx,"#F00F0F"); - this.body.emitter.emit("afterDrawing", ctx); - + ctx.closePath(); // restore original scaling and translation ctx.restore(); diff --git a/lib/network/modules/Clustering.js b/lib/network/modules/Clustering.js index fa6ef7cb..bc52d8ef 100644 --- a/lib/network/modules/Clustering.js +++ b/lib/network/modules/Clustering.js @@ -40,8 +40,7 @@ class ClusterEngine { } for (let i = 0; i < nodesToCluster.length; i++) { - let node = this.body.nodes[nodesToCluster[i]]; - this.clusterByConnection(node,options,false); + this.clusterByConnection(nodesToCluster[i],options,false); } this.body.emitter.emit('_dataChanged'); } @@ -64,9 +63,16 @@ class ClusterEngine { // collect the nodes that will be in the cluster for (let i = 0; i < this.body.nodeIndices.length; i++) { let nodeId = this.body.nodeIndices[i]; - let clonedOptions = this._cloneOptions(nodeId); + let node = this.body.nodes[nodeId]; + let clonedOptions = this._cloneOptions(node); if (options.joinCondition(clonedOptions) === true) { childNodesObj[nodeId] = this.body.nodes[nodeId]; + + // collect the nodes that will be in the cluster + for (let i = 0; i < node.edges.length; i++) { + let edge = node.edges[i]; + childEdgesObj[edge.id] = edge; + } } } @@ -89,20 +95,24 @@ class ClusterEngine { let childEdgesObj = {}; let nodeId = this.body.nodeIndices[i]; if (this.body.nodes[nodeId].edges.length === 1) { + // this is an outlier let edge = this.body.nodes[nodeId].edges[0]; let childNodeId = this._getConnectedId(edge, nodeId); - if (childNodeId != nodeId) { + if (childNodeId !== nodeId) { if (options.joinCondition === undefined) { + childEdgesObj[edge.id] = edge; childNodesObj[nodeId] = this.body.nodes[nodeId]; childNodesObj[childNodeId] = this.body.nodes[childNodeId]; } else { - let clonedOptions = this._cloneOptions(nodeId); + let clonedOptions = this._cloneOptions(this.body.nodes[nodeId]); if (options.joinCondition(clonedOptions) === true) { + childEdgesObj[edge.id] = edge; childNodesObj[nodeId] = this.body.nodes[nodeId]; } - clonedOptions = this._cloneOptions(childNodeId); + clonedOptions = this._cloneOptions(this.body.nodes[childNodeId]); if (options.joinCondition(clonedOptions) === true) { + childEdgesObj[edge.id] = edge; childNodesObj[childNodeId] = this.body.nodes[childNodeId]; } } @@ -145,7 +155,7 @@ class ClusterEngine { let childNodesObj = {}; let childEdgesObj = {}; let parentNodeId = node.id; - let parentClonedOptions = this._cloneOptions(parentNodeId); + let parentClonedOptions = this._cloneOptions(node); childNodesObj[parentNodeId] = node; // collect the nodes that will be in the cluster @@ -160,7 +170,7 @@ class ClusterEngine { } else { // clone the options and insert some additional parameters that could be interesting. - let childClonedOptions = this._cloneOptions(childNodeId); + let childClonedOptions = this._cloneOptions(this.body.nodes[childNodeId]); if (options.joinCondition(parentClonedOptions, childClonedOptions) === true) { childEdgesObj[edge.id] = edge; childNodesObj[childNodeId] = this.body.nodes[childNodeId]; @@ -183,16 +193,16 @@ class ClusterEngine { * @returns {{}} * @private */ - _cloneOptions(objId, type) { + _cloneOptions(item, type) { let clonedOptions = {}; if (type === undefined || type === 'node') { - util.deepExtend(clonedOptions, this.body.nodes[objId].options, true); - clonedOptions.x = this.body.nodes[objId].x; - clonedOptions.y = this.body.nodes[objId].y; - clonedOptions.amountOfConnections = this.body.nodes[objId].edges.length; + util.deepExtend(clonedOptions, item.options, true); + clonedOptions.x = item.x; + clonedOptions.y = item.y; + clonedOptions.amountOfConnections = item.edges.length; } else { - util.deepExtend(clonedOptions, this.body.edges[objId].options, true); + util.deepExtend(clonedOptions, item.options, true); } return clonedOptions; } @@ -207,41 +217,37 @@ class ClusterEngine { * @param options * @private */ - _createClusterEdges (childNodesObj, childEdgesObj, newEdges, options) { - let edge, childNodeId, childNode; + _createClusterEdges (childNodesObj, childEdgesObj, newEdges, clusterNodeProperties, clusterEdgeProperties) { + let edge, childNodeId, childNode, toId, fromId, otherNodeId; let childKeys = Object.keys(childNodesObj); for (let i = 0; i < childKeys.length; i++) { childNodeId = childKeys[i]; childNode = childNodesObj[childNodeId]; - // mark all edges for removal from global and construct new edges from the cluster to others + // construct new edges from the cluster to others for (let j = 0; j < childNode.edges.length; j++) { edge = childNode.edges[j]; childEdgesObj[edge.id] = edge; - let otherNodeId = edge.toId; - let otherOnTo = true; - if (edge.toId != childNodeId) { - otherNodeId = edge.toId; - otherOnTo = true; + // childNodeId position will be replaced by the cluster. + if (edge.toId == childNodeId) { // this is a double equals because ints and strings can be interchanged here. + toId = clusterNodeProperties.id; + fromId = edge.fromId; + otherNodeId = fromId; } - else if (edge.fromId != childNodeId) { - otherNodeId = edge.fromId; - otherOnTo = false; + else { + toId = edge.toId; + fromId = clusterNodeProperties.id; + otherNodeId = toId; } + // if the node connected to the cluster is also in the cluster we do not need a new edge. if (childNodesObj[otherNodeId] === undefined) { - let clonedOptions = this._cloneOptions(edge.id, 'edge'); - util.deepExtend(clonedOptions, options.clusterEdgeProperties); - if (otherOnTo === true) { - clonedOptions.from = options.clusterNodeProperties.id; - clonedOptions.to = otherNodeId; - } - else { - clonedOptions.from = otherNodeId; - clonedOptions.to = options.clusterNodeProperties.id; - } + let clonedOptions = this._cloneOptions(edge, 'edge'); + util.deepExtend(clonedOptions, clusterEdgeProperties); + clonedOptions.from = fromId; + clonedOptions.to = toId; clonedOptions.id = 'clusterEdge:' + util.randomUUID(); newEdges.push(this.body.functions.createEdge(clonedOptions)) } @@ -249,7 +255,6 @@ class ClusterEngine { } } - /** * This function checks the options that can be supplied to the different cluster functions * for certain fields and inserts defaults if needed @@ -276,32 +281,34 @@ class ClusterEngine { // kill condition: no children so cant cluster if (Object.keys(childNodesObj).length === 0) {return;} + let clusterNodeProperties = util.deepExtend({},options.clusterNodeProperties); + // check if we have an unique id; - if (options.clusterNodeProperties.id === undefined) {options.clusterNodeProperties.id = 'cluster:' + util.randomUUID();} - let clusterId = options.clusterNodeProperties.id; + if (clusterNodeProperties.id === undefined) {clusterNodeProperties.id = 'cluster:' + util.randomUUID();} + let clusterId = clusterNodeProperties.id; // construct the clusterNodeProperties - let clusterNodeProperties = options.clusterNodeProperties; if (options.processProperties !== undefined) { // get the childNode options let childNodesOptions = []; for (let nodeId in childNodesObj) { - let clonedOptions = this._cloneOptions(nodeId); + let clonedOptions = this._cloneOptions(childNodesObj[nodeId]); childNodesOptions.push(clonedOptions); } // get clusterproperties based on childNodes let childEdgesOptions = []; for (let edgeId in childEdgesObj) { - let clonedOptions = this._cloneOptions(edgeId, 'edge'); + let clonedOptions = this._cloneOptions(childEdgesObj[edgeId], 'edge'); childEdgesOptions.push(clonedOptions); } clusterNodeProperties = options.processProperties(clusterNodeProperties, childNodesOptions, childEdgesOptions); if (!clusterNodeProperties) { - throw new Error("The processClusterProperties function does not return properties!"); + throw new Error("The processProperties function does not return properties!"); } } + if (clusterNodeProperties.label === undefined) { clusterNodeProperties.label = 'cluster'; } @@ -320,25 +327,23 @@ class ClusterEngine { clusterNodeProperties.y = pos.y; } - // force the ID to remain the same clusterNodeProperties.id = clusterId; - // create the clusterNode let clusterNode = this.body.functions.createNode(clusterNodeProperties, Cluster); clusterNode.isCluster = true; clusterNode.containedNodes = childNodesObj; clusterNode.containedEdges = childEdgesObj; - + // cache a copy from the cluster edge properties if we have to reconnect others later on + clusterNode.clusterEdgeProperties = options.clusterEdgeProperties; // finally put the cluster node into global this.body.nodes[clusterNodeProperties.id] = clusterNode; // create the new edges that will connect to the cluster let newEdges = []; - this._createClusterEdges(childNodesObj, childEdgesObj, newEdges, options); - + this._createClusterEdges(childNodesObj, childEdgesObj, newEdges, clusterNodeProperties, options.clusterEdgeProperties); // disable the childEdges for (let edgeId in childEdgesObj) { @@ -360,7 +365,6 @@ class ClusterEngine { } } - // push new edges to global for (let i = 0; i < newEdges.length; i++) { this.body.edges[newEdges[i].id] = newEdges[i]; @@ -370,7 +374,6 @@ class ClusterEngine { // set ID to undefined so no duplicates arise clusterNodeProperties.id = undefined; - // wrap up if (refreshData === true) { this.body.emitter.emit('_dataChanged'); @@ -406,17 +409,20 @@ class ClusterEngine { let minY = childNodesObj[childKeys[0]].y; let maxY = childNodesObj[childKeys[0]].y; let node; - for (let i = 0; i < childKeys.lenght; i++) { - node = childNodesObj[childKeys[0]]; + for (let i = 1; i < childKeys.length; i++) { + node = childNodesObj[childKeys[i]]; minX = node.x < minX ? node.x : minX; maxX = node.x > maxX ? node.x : maxX; minY = node.y < minY ? node.y : minY; maxY = node.y > maxY ? node.y : maxY; } + + return {x: 0.5*(minX + maxX), y: 0.5*(minY + maxY)}; } + /** * Open a cluster by calling this function. * @param {String} clusterNodeId | the ID of the cluster node @@ -457,9 +463,46 @@ class ClusterEngine { // release edges for (let edgeId in containedEdges) { if (containedEdges.hasOwnProperty(edgeId)) { - let edge = this.body.edges[edgeId]; - edge.options.hidden = false; - edge.togglePhysics(true); + let edge = containedEdges[edgeId]; + // if this edge was a temporary edge and it's connected nodes do not exist anymore, we remove it from the data + if (this.body.nodes[edge.fromId] === undefined || this.body.nodes[edge.toId] === undefined) { + edge.edgeType.cleanup(); + // this removes the edge from node.edges, which is why edgeIds is formed + edge.disconnect(); + delete this.body.edges[edgeId]; + } + else { + // one of the nodes connected to this edge is in a cluster. We give the edge to that cluster and make a new temporary edge. + if (this.clusteredNodes[edge.fromId] !== undefined || this.clusteredNodes[edge.toId] !== undefined) { + let fromId, toId; + let clusteredNode = this.clusteredNodes[edge.fromId] || this.clusteredNodes[edge.toId]; + let clusterId = clusteredNode.clusterId; + let clusterNode = this.body.nodes[clusterId]; + clusterNode.containedEdges[edgeId] = edge; + + if (this.clusteredNodes[edge.fromId] !== undefined) { + fromId = clusterId; + toId = edge.toId; + } + else { + fromId = edge.fromId; + toId = clusterId; + } + + let clonedOptions = this._cloneOptions(edge, 'edge'); + let id = 'clusterEdge:' + util.randomUUID(); + util.deepExtend(clonedOptions, clusterNode.clusterEdgeProperties); + util.deepExtend(clonedOptions, {from:fromId, to:toId, hidden:false, physics:true, id: id}); + let newEdge = this.body.functions.createEdge(clonedOptions); + + this.body.edges[id] = newEdge; + this.body.edges[id].connect(); + } + else { + edge.options.hidden = false; + edge.togglePhysics(true); + } + } } } diff --git a/lib/network/modules/LayoutEngine.js b/lib/network/modules/LayoutEngine.js index 8039c2e8..121215ac 100644 --- a/lib/network/modules/LayoutEngine.js +++ b/lib/network/modules/LayoutEngine.js @@ -40,7 +40,7 @@ class LayoutEngine { util.mergeOptions(this.options, options, 'hierarchical'); if (options.randomSeed !== undefined) { - this.randomSeed = options.randomSeed; + this.initialRandomSeed = options.randomSeed; } if (this.options.hierarchical.enabled === true) { @@ -129,6 +129,7 @@ class LayoutEngine { positionInitially(nodesArray) { if (this.options.hierarchical.enabled !== true) { + this.randomSeed = this.initialRandomSeed; for (let i = 0; i < nodesArray.length; i++) { let node = nodesArray[i]; if ((!node.isFixed()) && (node.x === undefined || node.y === undefined)) { diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index 0fea0be1..2a86ba8b 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/lib/network/modules/ManipulationSystem.js @@ -74,10 +74,10 @@ class ManipulationSystem { * Set the Options * @param options */ - setOptions(options, allOptions) { + setOptions(options, allOptions, globalOptions) { if (allOptions !== undefined) { - if (allOptions.locale !== undefined) {this.options.locale = allOptions.locale}; - if (allOptions.locales !== undefined) {this.options.locales = allOptions.locales}; + if (allOptions.locale !== undefined) {this.options.locale = allOptions.locale} else {this.options.locale = globalOptions.locale;} + if (allOptions.locales !== undefined) {this.options.locales = allOptions.locales} else {this.options.locales = globalOptions.locales;} } if (options !== undefined) { @@ -439,6 +439,7 @@ class ManipulationSystem { this.body.data.edges.remove(finalizedData.edges); this.body.data.nodes.remove(finalizedData.nodes); this.body.emitter.emit('startSimulation'); + this.showManipulatorToolbar(); } }); } @@ -450,6 +451,7 @@ class ManipulationSystem { this.body.data.edges.remove(selectedEdges); this.body.data.nodes.remove(selectedNodes); this.body.emitter.emit('startSimulation'); + this.showManipulatorToolbar(); } } @@ -559,6 +561,7 @@ class ManipulationSystem { // empty the editModeDiv util.recursiveDOMDelete(this.editModeDiv); + // create the contents for the editMode button let locale = this.options.locales[this.options.locale]; let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit']); diff --git a/lib/network/modules/PhysicsEngine.js b/lib/network/modules/PhysicsEngine.js index b3f8f886..c3782497 100644 --- a/lib/network/modules/PhysicsEngine.js +++ b/lib/network/modules/PhysicsEngine.js @@ -23,6 +23,7 @@ class PhysicsEngine { this.renderTimer = undefined; this.stabilized = false; + this.startedStabilization = false; this.stabilizationIterations = 0; this.ready = false; // will be set to true if the stabilize @@ -229,12 +230,8 @@ class PhysicsEngine { // The event is triggered on the next tick, to prevent the case that // it is fired while initializing the Network, in which case you would not // be able to catch it - this.stabilizationIterations = 0; this.startedStabilization = false; - this._emitStabilized(); - } - else { - this.stabilizationIterations = 0; + //this._emitStabilized(); } this.stopSimulation(); } @@ -244,6 +241,7 @@ class PhysicsEngine { if (this.stabilizationIterations > 1) { setTimeout(() => { this.body.emitter.emit('stabilized', {iterations: this.stabilizationIterations}); + this.stabilizationIterations = 0; }, 0); } } @@ -495,8 +493,6 @@ class PhysicsEngine { // block redraw requests this.body.emitter.emit('_blockRedrawRequests'); - this.body.emitter.emit('startStabilizing'); - this.startedStabilization = true; this.targetIterations = iterations; // start the stabilization @@ -505,7 +501,7 @@ class PhysicsEngine { } this.stabilizationIterations = 0; - setTimeout(this._stabilizationBatch.bind(this),0); + setTimeout(() => this._stabilizationBatch(),0); } _stabilizationBatch() { @@ -538,6 +534,13 @@ class PhysicsEngine { this.body.emitter.emit('stabilizationIterationsDone'); this.body.emitter.emit('_requestRedraw'); + if (this.stabilized === true) { + this._emitStabilized(); + } + else { + this.startSimulation(); + } + this.ready = true; } diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index 76a0e760..9431e2ad 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -178,6 +178,11 @@ class Edge { parentOptions.color = undefined; delete parentOptions.color; } + + // handle the font settings + if (newOptions.font !== undefined) { + Label.parseOptions(parentOptions.font, newOptions); + } } diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index 2debfeea..6d7fd840 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -180,6 +180,7 @@ class Node { delete parentOptions.color; } + // handle the fixed options if (newOptions.fixed !== undefined && newOptions.fixed !== null) { if (typeof newOptions.fixed === 'boolean') { parentOptions.fixed.x = newOptions.fixed; @@ -195,10 +196,12 @@ class Node { } } + // handle the font options if (newOptions.font !== undefined) { Label.parseOptions(parentOptions.font, newOptions); } + // handle the scaling options, specifically the label part if (newOptions.scaling !== undefined) { util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label'); } diff --git a/lib/network/options.js b/lib/network/options.js index f9276c70..e1ae5bc1 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -165,7 +165,7 @@ let allOptions = { size: {number}, // px face: {string}, background: {string}, - stroke: {number}, // px + strokeWidth: {number}, // px strokeColor: {string}, __type__: {object,string} }, diff --git a/lib/network/shapes.js b/lib/network/shapes.js index fe27ced4..f2232bfc 100644 --- a/lib/network/shapes.js +++ b/lib/network/shapes.js @@ -9,6 +9,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { CanvasRenderingContext2D.prototype.circle = function (x, y, r) { this.beginPath(); this.arc(x, y, r, 0, 2 * Math.PI, false); + this.closePath(); }; /** @@ -20,6 +21,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { CanvasRenderingContext2D.prototype.square = function (x, y, r) { this.beginPath(); this.rect(x - r, y - r, r * 2, r * 2); + this.closePath(); }; /** @@ -142,6 +144,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false); this.lineTo(x, y + r); this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false); + this.closePath(); }; /** @@ -162,6 +165,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); + this.closePath(); }; @@ -210,7 +214,6 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { var yt = y - length * Math.sin(angle); // inner tail - // TODO: allow to customize different shapes var xi = x - length * 0.9 * Math.cos(angle); var yi = y - length * 0.9 * Math.sin(angle); diff --git a/lib/shared/Validator.js b/lib/shared/Validator.js index 5bbb2d5e..cd9d8339 100644 --- a/lib/shared/Validator.js +++ b/lib/shared/Validator.js @@ -195,16 +195,14 @@ class Validator { * @returns {{closestMatch: string, path: Array, distance: number}} */ static findInOptions(option, options, path, recursive = false) { - //console.log(option, options, path) let min = 1e9; let closestMatch = ''; let closestMatchPath = []; let lowerCaseOption = option.toLowerCase(); let indexMatch = undefined; for (let op in options) { - let type = Validator.getType(options[op]); let distance; - if (type === 'object' && recursive === true) { + if (options[op].__type__ !== undefined && recursive === true) { let result = Validator.findInOptions(option, options[op], util.copyAndExtendArray(path,op)); if (min > result.distance) { closestMatch = result.closestMatch; @@ -225,7 +223,7 @@ class Validator { } } } - return {closestMatch:closestMatch, path:closestMatchPath, distance:min, indexMatch: indexMatch} + return {closestMatch:closestMatch, path:closestMatchPath, distance:min, indexMatch: indexMatch}; } static printLocation(path, option, prefix = 'Problem value found at: \n') { diff --git a/lib/util.js b/lib/util.js index c8142dd9..7787d844 100644 --- a/lib/util.js +++ b/lib/util.js @@ -1218,11 +1218,13 @@ exports.mergeOptions = function (mergeTarget, options, option, allowDeletion = f } else { if (options[option] !== undefined) { - if (typeof options[option] == 'boolean') { + if (typeof options[option] === 'boolean') { mergeTarget[option].enabled = options[option]; } else { - mergeTarget[option].enabled = true; + if (options[option].enabled === undefined) { + mergeTarget[option].enabled = true; + } for (var prop in options[option]) { if (options[option].hasOwnProperty(prop)) { mergeTarget[option][prop] = options[option][prop];