From 386082e443c9a4db7e69a1ab7ffe1c7619cfc245 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Sun, 21 Feb 2016 14:11:11 +0100 Subject: [PATCH] Fixed #1677: updating groups through manipulation now works as it should. --- HISTORY.md | 1 + dist/vis.js | 4 +- examples/network/nodeStyles/customGroups.html | 8 +- lib/network/modules/ManipulationSystem.js | 2 +- test/networkTest.html | 292 +++++++++++++----- 5 files changed, 214 insertions(+), 93 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 75c77209..ec0cc1bb 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -23,6 +23,7 @@ http://visjs.org - Fixed #1644, #1631: overlapping nodes in hierarchical layout should no longer occur. - Added parentCentralization option for hierarchical layout. - Fixed #1575: fixed selection events +- Fixed #1677: updating groups through manipulation now works as it should. ## 2016-02-04, version 4.14.0 diff --git a/dist/vis.js b/dist/vis.js index 3dbe3015..4172875f 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 4.14.0 - * @date 2016-02-13 + * @date 2016-02-21 * * @license * Copyright (C) 2011-2016 Almende B.V, http://almende.com @@ -41792,7 +41792,7 @@ return /******/ (function(modules) { // webpackBootstrap this.inMode = 'editNode'; if (typeof this.options.editNode === 'function') { if (node.isCluster !== true) { - var data = util.deepExtend({}, node.options, true); + var data = util.deepExtend({}, node.options, false); data.x = node.x; data.y = node.y; diff --git a/examples/network/nodeStyles/customGroups.html b/examples/network/nodeStyles/customGroups.html index 04eb8e04..bf810bcc 100644 --- a/examples/network/nodeStyles/customGroups.html +++ b/examples/network/nodeStyles/customGroups.html @@ -26,12 +26,9 @@ - + We use an icon once in the DOM so the CSS for fontAwesome is loaded.
diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index a0ab16de..94b8b5f7 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/lib/network/modules/ManipulationSystem.js @@ -263,7 +263,7 @@ class ManipulationSystem { this.inMode = 'editNode'; if (typeof this.options.editNode === 'function') { if (node.isCluster !== true) { - let data = util.deepExtend({}, node.options, true); + let data = util.deepExtend({}, node.options, false); data.x = node.x; data.y = node.y; diff --git a/test/networkTest.html b/test/networkTest.html index 60fcb6e7..d4f3d0ef 100644 --- a/test/networkTest.html +++ b/test/networkTest.html @@ -18,106 +18,228 @@
+ showPath(); + showPath(); - - + function getNodeId(nodeLabels) { + var resultArray = []; + var unmatchedNodesLabel = []; + + for (var i = 0; i < nodeLabels.length; i++) { + for (var nodeId in allNodes) { + var matchflag = false; + + if (nodeLabels[i].toUpperCase() === allNodes[nodeId].label.toUpperCase()) { + resultArray.push(allNodes[nodeId].id); + matchflag = true; + break; + } + } + + if (!matchflag) { + console.log('An unmatched nodeLabel exists!' + nodeLabels[i]); + } + } + + return resultArray; + } + + function getLinkedEdge(fromNodeId, toNodeId) { + var result; + + if (fromNodeId) { + var allLinkedEdges = network.getConnectedEdges(fromNodeId); + + for (var i = 0; i < allLinkedEdges.length; i++) { + var linkedNodes = network.getConnectedNodes(allLinkedEdges[i]); + + for (var j = 0; j < linkedNodes.length; j++) { + if (toNodeId === linkedNodes[j]) { + result = allLinkedEdges[i]; + if (j == 0) { + if (allEdges[allLinkedEdges[i]].arrows === undefined) { + allEdges[allLinkedEdges[i]].arrows = 'from'; + } else { + allEdges[allLinkedEdges[i]].arrows = 'to;from'; + } + } else { + if (allEdges[allLinkedEdges[i]].arrows === undefined) { + allEdges[allLinkedEdges[i]].arrows = 'to'; + } else { + allEdges[allLinkedEdges[i]].arrows = 'to;from'; + } + } + break; + } + } + } + } + + return result; + } + + function updateNodesEdges() { + // update nodes and edges + var updateNodes = []; + var updateEdges = []; + + for (var nodeId in allNodes) { + if (allNodes.hasOwnProperty(nodeId)) { + updateNodes.push(allNodes[nodeId]); + } + } + + for (var edgeId in allEdges) { + if (allEdges.hasOwnProperty(edgeId)) { + updateEdges.push(allEdges[edgeId]); + } + } + + nodesDataset.update(updateNodes); + edgesDataset.update(updateEdges); + } + + function showPath() { + // Test values + var pathData = 'test1,test3,test4,test5'; + var nodesOrder = pathData.split(','); + + var orderedNodeId = getNodeId(nodesOrder); + + if (orderedNodeId.length > 0) { + pathActive = true; + + // mark all nodes as hard to read + for (var nodeId in allNodes) { + allNodes[nodeId].color = 'rgba(200,200,200,0.5)'; + } + + // mark all edges as hard to read + for (var edgeId in allEdges) { + allEdges[edgeId].color = 'rgba(200,200,200,0.5)'; + } + + // the selected nodes and edges get its own color and its label back. + for (var i = 0; i < orderedNodeId.length; i++) { + allNodes[orderedNodeId[i]].color = undefined; + + // linked edge + if (i < orderedNodeId.length) { + var linkedEdge = getLinkedEdge(orderedNodeId[i], orderedNodeId[i + 1]); + + if (linkedEdge) { + allEdges[linkedEdge].color = undefined; + } + } + } + + updateNodesEdges(); + } + + // reset all nodes + for (var nodeId in allNodes) { + allNodes[nodeId].color = undefined; + } + + // reset all edges <--- it does NOT work! although edge's color undfined! + for (var edgeId in allEdges) { + allEdges[edgeId].color = null; + allEdges[edgeId].arrows = null; + } + + updateNodesEdges(); + }