- Fixed #1414: Fixed color references for nodes and edges.

HISTORY.md

@@ -17,6 +17,7 @@ http://visjs.org
 - Fixed #1398: Support nodes start with the correct positions.
 - Fixed #1324: Labels now scale again.
 - Fixed #1362: Layout of hierarchicaly systems no longer overlaps NODES.
+- Fixed #1414: Fixed color references for nodes and edges.
 
 ### Timeline
 

dist/vis.js

@@ -28756,6 +28756,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // individual shape newOptions
         if (newOptions.color !== undefined && newOptions.color !== null) {
+          // make a copy of the parent object in case this is referring to the global one (due to object create once, then update)
+          parentOptions.color = util.deepExtend({}, parentOptions.color, true);
           var parsedColor = util.parseColor(newOptions.color);
           util.fillIfDefined(parentOptions.color, parsedColor);
         } else if (allowDeletion === true && newOptions.color === null) {
@@ -31653,6 +31655,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // hanlde multiple input cases for color
         if (newOptions.color !== undefined && newOptions.color !== null) {
+          // make a copy of the parent object in case this is referring to the global one (due to object create once, then update)
+          parentOptions.color = util.deepExtend({}, parentOptions.color, true);
           if (util.isString(newOptions.color)) {
             parentOptions.color.color = newOptions.color;
             parentOptions.color.highlight = newOptions.color;

lib/network/modules/components/Edge.js

@@ -160,6 +160,8 @@ class Edge {
 
     // hanlde multiple input cases for color
     if (newOptions.color !== undefined && newOptions.color !== null) {
+      // make a copy of the parent object in case this is referring to the global one (due to object create once, then update)
+      parentOptions.color = util.deepExtend({}, parentOptions.color, true);
       if (util.isString(newOptions.color)) {
         parentOptions.color.color     = newOptions.color;
         parentOptions.color.highlight = newOptions.color;

lib/network/modules/components/Node.js

@@ -179,6 +179,8 @@ class Node {
 
     // individual shape newOptions
     if (newOptions.color !== undefined && newOptions.color !== null) {
+      // make a copy of the parent object in case this is referring to the global one (due to object create once, then update)
+      parentOptions.color = util.deepExtend({}, parentOptions.color, true);
       let parsedColor = util.parseColor(newOptions.color);
       util.fillIfDefined(parentOptions.color, parsedColor);
     }

test/networkTest.html

@@ -17,59 +17,27 @@
 <div id="mynetwork"></div>
 <script>
     function draw() {
-        nodes = [];
-        edges = [];
+        // create an array with nodes
+        nodes = new vis.DataSet([
+            {id: 1, label: 'N1', color:"#FF0000"},
+            {id: 2, label: 'N2'}
+        ]);
+
+        edges = new vis.DataSet([
+            {id: '1%2', from: 1, to: 2},
+            {id: '2%1',from: 2, to: 1}
+        ]);
 
-        // create a network
         var container = document.getElementById('mynetwork');
         var data = {
             nodes: nodes,
             edges: edges
         };
-
-
-        nodes.push({id: 0, label: 'Root'});
-        nodes.push({id: 1, label: 'Child 1'});
-        nodes.push({id: 2, label: 'Child 2'});
-        nodes.push({id: 3, label: 'Child 3'});
-        nodes.push({id: 4, label: 'Child 2.1'});
-        nodes.push({id: 5, label: 'Child 2.1.1'});
-        nodes.push({id: 6, label: 'Child 2.1.2'});
-        nodes.push({id: 7, label: 'Child 2.1.1.1'});
-
-        edges.push({from: 0, to: 1});
-        edges.push({from: 0, to: 2});
-        edges.push({from: 0, to: 3});
-        edges.push({from: 2, to: 4});
-        edges.push({from: 4, to: 5});
-        edges.push({from: 4, to: 6});
-        edges.push({from: 5, to: 7});
-
-        nodes[7].level = 0;
-        nodes[6].level = 1;
-        nodes[5].level = 1;
-        nodes[4].level = 2;
-        nodes[3].level = 3;
-        nodes[2].level = 3;
-        nodes[1].level = 3;
-        nodes[0].level = 4;
-
-        var options = {
-            edges: {
-                smooth: {
-                    type: 'cubicBezier',
-                    forceDirection: 'horizontal',
-                    roundness: 0.4
-                }
-            },
-            layout: {
-                hierarchical: {
-                    direction: 'LR'
-                }
-            }
-        };
-
+        var options = {edges:{arrows:'to'}};
         network = new vis.Network(container, data, options);
+
+        nodes.update({id: '1', color: null});
+        nodes.update({id: '1', color: "#FF00FF"});
     }
 
     var network, nodes, edges;