From 7ecae915c06e79645965f5648d11cc988e53bac5 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Thu, 19 Mar 2020 14:40:06 +0200
Subject: [PATCH 01/21] Fix: https://github.com/visjs/vis-network/issues/226

---
 lib/network/modules/CanvasRenderer.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js
index 20f47f9178..7f0a97ce34 100644
--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@@ -343,6 +343,7 @@ class CanvasRenderer {
     let nodeIndices = this.body.nodeIndices;
     let node;
     let selected = [];
+    let hovered = [];
     let margin = 20;
     let topLeft = this.canvas.DOMtoCanvas({x:-margin,y:-margin});
     let bottomRight = this.canvas.DOMtoCanvas({
@@ -354,8 +355,10 @@ class CanvasRenderer {
     // draw unselected nodes;
     for (let i = 0; i < nodeIndices.length; i++) {
       node = nodes[nodeIndices[i]];
-      // set selected nodes aside
-      if (node.isSelected()) {
+      // set selected and hovered nodes aside
+      if (node.hovered) {
+        hovered.push(nodeIndices[i]);
+      } else if (node.isSelected()) {
         selected.push(nodeIndices[i]);
       }
       else {
@@ -371,11 +374,22 @@ class CanvasRenderer {
       }
     }
 
+    let i;
+    const selectedLength = selected.length;
+    const hoveredLength = hovered.length;
+
     // draw the selected nodes on top
-    for (let i = 0; i < selected.length; i++) {
+    for (i = 0; i < selectedLength; i++) {
+      node = nodes[selected[i]];
+      node.draw(ctx);
+    }
+
+    // draw hovered nodes above everything else: fixes https://github.com/visjs/vis-network/issues/226
+    for (i = 0; i < hoveredLength; i++) {
       node = nodes[selected[i]];
       node.draw(ctx);
     }
+
   }
 
 

From c6d446d2faed9a3c7a8a86ea2693a044d9736c66 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Thu, 19 Mar 2020 14:40:19 +0200
Subject: [PATCH 02/21] Add opacity option to nodes

---
 lib/network/modules/NodesHandler.js           |  1 +
 lib/network/modules/components/Node.js        | 11 +++-
 .../modules/components/nodes/shapes/Image.js  |  5 +-
 .../components/nodes/util/CircleImageBase.js  |  2 +-
 .../modules/components/shared/Color.ts        | 61 +++++++++++++++++++
 lib/network/options.js                        |  2 +
 6 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 lib/network/modules/components/shared/Color.ts

diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index 70b9a5d88f..9086a8c592 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -43,6 +43,7 @@ class NodesHandler {
           background: '#D2E5FF'
         }
       },
+      opacity: 1, // number between 0 and 1
       fixed: {
         x: false,
         y: false
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index cd1822a954..c5339f554a 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -18,6 +18,7 @@ import Text from './nodes/shapes/Text';
 import Triangle from './nodes/shapes/Triangle';
 import TriangleDown from './nodes/shapes/TriangleDown';
 import { printStyle } from "../../../shared/Validator";
+import { setColorOptionsWithOpacity } from './shared/Color';
 
 
 /**
@@ -45,7 +46,7 @@ class Node {
    *                                    for parameter `globalOptions`.
    */
   constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions) {
-    this.options = util.bridgeObject(globalOptions);
+    this.options = {...defaultOptions, ...globalOptions, ...options};
     this.globalOptions = globalOptions;
     this.defaultOptions = defaultOptions;
     this.body = body;
@@ -102,6 +103,7 @@ class Node {
    * @returns {null|boolean}
    */
   setOptions(options) {
+
     let currentShape = this.options.shape;
     if (!options) {
       return;  // Note that the return value will be 'undefined'! This is OK.
@@ -218,6 +220,7 @@ class Node {
     if (!hasGroup) return;  // current node has no group, no need to merge
 
     var groupObj = groupList.get(group);
+    groupObj.opacity = newOptions.opacity || parentOptions.opacity || 1;
 
     // Skip merging of group font options into parent; these are required to be distinct for labels
     // Also skip mergin of color IF it is already defined in the node itself. This is to avoid the color of the
@@ -245,15 +248,16 @@ class Node {
    * @static
    */
   static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}, groupList) {
-
     var fields = [
       'color',
+      'opacity',
       'fixed',
       'shadow'
     ];
     util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
 
     Node.checkMass(newOptions);
+    parentOptions.opacity = newOptions.opacity || parentOptions.opacity || 1;
 
     // merge the shadow options into the parent.
     util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions);
@@ -303,6 +307,7 @@ class Node {
   getFormattingValues() {
     let values = {
       color: this.options.color.background,
+      opacity: this.options.opacity,
       borderWidth: this.options.borderWidth,
       borderColor: this.options.color.border,
       size: this.options.size,
@@ -340,7 +345,7 @@ class Node {
     } else {
       values.shadow = this.options.shadow.enabled;
     }
-    return values;
+    return setColorOptionsWithOpacity(values);
   }
 
 
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index 1aa2a9580d..349ce13cb3 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'
+import { setColorOpacity } from '../../shared/Color';
 
 
 /**
@@ -69,10 +70,10 @@ class Image extends CircleImageBase {
       ctx.beginPath();
 
       // setup the line properties.
-      ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+      ctx.strokeStyle = setColorOpacity(selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border, values.opacity || 1);
 
       // set a fillstyle
-      ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+      ctx.fillStyle = setColorOpacity(selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background, values.opacity || 1);
 
       // draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
       ctx.rect(this.left - 0.5 * ctx.lineWidth,
diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js
index 1c0f4c82d7..cd7ba4d97c 100644
--- a/lib/network/modules/components/nodes/util/CircleImageBase.js
+++ b/lib/network/modules/components/nodes/util/CircleImageBase.js
@@ -170,7 +170,7 @@ class CircleImageBase extends NodeBase {
   _drawImageAtPosition(ctx, values) {
     if (this.imageObj.width != 0) {
       // draw the image
-      ctx.globalAlpha = 1.0;
+      ctx.globalAlpha = values.opacity;
 
       // draw shadow if enabled
       this.enableShadow(ctx, values);
diff --git a/lib/network/modules/components/shared/Color.ts b/lib/network/modules/components/shared/Color.ts
new file mode 100644
index 0000000000..8ded4ff689
--- /dev/null
+++ b/lib/network/modules/components/shared/Color.ts
@@ -0,0 +1,61 @@
+export function setColorOptionsWithOpacity (values: any) {
+  const opacity = values.opacity || 1;
+  if (values.color) {
+    values.color = setColorOpacity(values.color, opacity);
+  }
+  if (values.borderColor) {
+    values.borderColor = setColorOpacity(values.borderColor, opacity);
+  }
+  if (values.shadowColor) {
+    values.shadowColor = setColorOpacity(values.shadowColor, opacity);
+  }
+
+  return values
+}
+
+
+/**
+ * opacity must be between 0 and 1
+ */
+
+export function setColorOpacity (color: string, opacity: number) {
+  // Make sure opacity is rounded to 2 decimal places
+  opacity = Math.round(opacity * 100) * 0.01; 
+
+  if (color.startsWith('rgba')) {
+    return setRgbaOpacity(color, opacity);
+  } else if (color.startsWith('#')) {
+    return setHexOpacity(color, opacity);
+  } else if (color.startsWith('rgb')) {
+    return setRgbOpacity(color, opacity);
+  }
+}
+
+function setRgbaOpacity(rgba: string, opacity: number) {
+  return rgba.replace(/\d*.\d/, opacity + '');
+}
+
+function setHexOpacity(hex: string, opacity: number) {
+  const {r, g, b } = hexToRgb(hex)!;
+  return `rgb(${r},${g},${b},${opacity})`;
+}
+
+function setRgbOpacity(rgb: string, opacity: number) {
+  return rgb.replace(')', `,${opacity})`).replace('rgb', 'rgba');
+}
+
+
+function hexToRgb(hex: string) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
\ No newline at end of file
diff --git a/lib/network/options.js b/lib/network/options.js
index 14451c3750..abb66f7d3e 100644
--- a/lib/network/options.js
+++ b/lib/network/options.js
@@ -272,6 +272,7 @@ let allOptions = {
       },
       __type__: { object, string }
     },
+    opacity: { number, 'undefined': 'undefined' },
     fixed: {
       x: { boolean: bool },
       y: { boolean: bool },
@@ -520,6 +521,7 @@ let configureOptions = {
         background: ['color', '#D2E5FF']
       }
     },
+    opacity: 1,
     fixed: {
       x: false,
       y: false

From a783f87e31eaaa434c567aa86b2c48a3b4916bf8 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Thu, 19 Mar 2020 15:31:07 +0200
Subject: [PATCH 03/21] Fix shadow color being mangled

---
 lib/network/modules/components/shared/Color.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/network/modules/components/shared/Color.ts b/lib/network/modules/components/shared/Color.ts
index 8ded4ff689..7ce0558a8c 100644
--- a/lib/network/modules/components/shared/Color.ts
+++ b/lib/network/modules/components/shared/Color.ts
@@ -7,6 +7,7 @@ export function setColorOptionsWithOpacity (values: any) {
     values.borderColor = setColorOpacity(values.borderColor, opacity);
   }
   if (values.shadowColor) {
+    console.log(values.shadowColor);
     values.shadowColor = setColorOpacity(values.shadowColor, opacity);
   }
 
@@ -32,7 +33,7 @@ export function setColorOpacity (color: string, opacity: number) {
 }
 
 function setRgbaOpacity(rgba: string, opacity: number) {
-  return rgba.replace(/\d*.\d/, opacity + '');
+  return rgba.replace(/\d*.\d\)/, opacity + ')');
 }
 
 function setHexOpacity(hex: string, opacity: number) {

From 24e251f76e2e2584744aeec08e93137ff0a846f5 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Thu, 19 Mar 2020 15:33:43 +0200
Subject: [PATCH 04/21] Remove console.log

---
 lib/network/modules/components/shared/Color.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/network/modules/components/shared/Color.ts b/lib/network/modules/components/shared/Color.ts
index 7ce0558a8c..32f8d90043 100644
--- a/lib/network/modules/components/shared/Color.ts
+++ b/lib/network/modules/components/shared/Color.ts
@@ -7,7 +7,6 @@ export function setColorOptionsWithOpacity (values: any) {
     values.borderColor = setColorOpacity(values.borderColor, opacity);
   }
   if (values.shadowColor) {
-    console.log(values.shadowColor);
     values.shadowColor = setColorOpacity(values.shadowColor, opacity);
   }
 

From c8b1a9ac0581437c04313ea6c31e4fd41e6f6fa5 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Thu, 19 Mar 2020 16:13:31 +0200
Subject: [PATCH 05/21] Change to use util version of overrideOpacity

---
 lib/network/modules/components/Node.js        | 12 +++-
 .../modules/components/nodes/shapes/Image.js  | 13 ++--
 .../modules/components/shared/Color.ts        | 61 -------------------
 lib/network/options.js                        |  2 +-
 4 files changed, 19 insertions(+), 69 deletions(-)
 delete mode 100644 lib/network/modules/components/shared/Color.ts

diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index c5339f554a..c38850b4a2 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -18,7 +18,6 @@ import Text from './nodes/shapes/Text';
 import Triangle from './nodes/shapes/Triangle';
 import TriangleDown from './nodes/shapes/TriangleDown';
 import { printStyle } from "../../../shared/Validator";
-import { setColorOptionsWithOpacity } from './shared/Color';
 
 
 /**
@@ -46,7 +45,7 @@ class Node {
    *                                    for parameter `globalOptions`.
    */
   constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions) {
-    this.options = {...defaultOptions, ...globalOptions, ...options};
+    this.options = util.bridgeObject(globalOptions);
     this.globalOptions = globalOptions;
     this.defaultOptions = defaultOptions;
     this.body = body;
@@ -345,7 +344,14 @@ class Node {
     } else {
       values.shadow = this.options.shadow.enabled;
     }
-    return setColorOptionsWithOpacity(values);
+    if (this.options.opacity) {
+      const opacity = this.options.opacity;
+      values.borderColor = util.overrideOpacity(values.borderColor, opacity);
+      values.color = util.overrideOpacity(values.color, opacity);
+      values.shadowColor = util.overrideOpacity(values.shadowColor, opacity);
+    }
+
+    return values;
   }
 
 
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index 349ce13cb3..c03d1bd601 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -1,8 +1,7 @@
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'
-import { setColorOpacity } from '../../shared/Color';
-
+import * as util from 'vis-util/esnext';
 
 /**
  * An image-based replacement for the default Node shape.
@@ -68,12 +67,18 @@ class Image extends CircleImageBase {
       ctx.lineWidth = Math.min(this.width, borderWidth);
 
       ctx.beginPath();
+      let strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+      let fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
+      if (values.opacity) {
+        strokeStyle = util.overrideOpacity(strokeStyle, values.opacity);
+        fillStyle = util.overrideOpacity(fillStyle, values.opacity);
+      }
       // setup the line properties.
-      ctx.strokeStyle = setColorOpacity(selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border, values.opacity || 1);
+      ctx.strokeStyle = strokeStyle;
 
       // set a fillstyle
-      ctx.fillStyle = setColorOpacity(selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background, values.opacity || 1);
+      ctx.fillStyle = fillStyle;
 
       // draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
       ctx.rect(this.left - 0.5 * ctx.lineWidth,
diff --git a/lib/network/modules/components/shared/Color.ts b/lib/network/modules/components/shared/Color.ts
deleted file mode 100644
index 32f8d90043..0000000000
--- a/lib/network/modules/components/shared/Color.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-export function setColorOptionsWithOpacity (values: any) {
-  const opacity = values.opacity || 1;
-  if (values.color) {
-    values.color = setColorOpacity(values.color, opacity);
-  }
-  if (values.borderColor) {
-    values.borderColor = setColorOpacity(values.borderColor, opacity);
-  }
-  if (values.shadowColor) {
-    values.shadowColor = setColorOpacity(values.shadowColor, opacity);
-  }
-
-  return values
-}
-
-
-/**
- * opacity must be between 0 and 1
- */
-
-export function setColorOpacity (color: string, opacity: number) {
-  // Make sure opacity is rounded to 2 decimal places
-  opacity = Math.round(opacity * 100) * 0.01; 
-
-  if (color.startsWith('rgba')) {
-    return setRgbaOpacity(color, opacity);
-  } else if (color.startsWith('#')) {
-    return setHexOpacity(color, opacity);
-  } else if (color.startsWith('rgb')) {
-    return setRgbOpacity(color, opacity);
-  }
-}
-
-function setRgbaOpacity(rgba: string, opacity: number) {
-  return rgba.replace(/\d*.\d\)/, opacity + ')');
-}
-
-function setHexOpacity(hex: string, opacity: number) {
-  const {r, g, b } = hexToRgb(hex)!;
-  return `rgb(${r},${g},${b},${opacity})`;
-}
-
-function setRgbOpacity(rgb: string, opacity: number) {
-  return rgb.replace(')', `,${opacity})`).replace('rgb', 'rgba');
-}
-
-
-function hexToRgb(hex: string) {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
-
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
\ No newline at end of file
diff --git a/lib/network/options.js b/lib/network/options.js
index abb66f7d3e..46e788f473 100644
--- a/lib/network/options.js
+++ b/lib/network/options.js
@@ -521,7 +521,7 @@ let configureOptions = {
         background: ['color', '#D2E5FF']
       }
     },
-    opacity: 1,
+    opacity: [0, 0, 1, 0.1],
     fixed: {
       x: false,
       y: false

From 1e06b9c32197b160ef70e2659a0cc8f9f9cefbad Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 00:55:19 +0200
Subject: [PATCH 06/21] Fix updating groups instead of node

Change import to only import overrideOpacity
---
 lib/network/modules/NodesHandler.js                  | 6 +++++-
 lib/network/modules/components/Node.js               | 6 +++---
 lib/network/modules/components/nodes/shapes/Image.js | 6 +++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index 9086a8c592..4b40b47852 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -43,7 +43,7 @@ class NodesHandler {
           background: '#D2E5FF'
         }
       },
-      opacity: 1, // number between 0 and 1
+      opacity: undefined, // number between 0 and 1
       fixed: {
         x: false,
         y: false
@@ -179,6 +179,10 @@ class NodesHandler {
   setOptions(options) {
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
+      
+      if (options.opacity) {
+        this.options.opacity = options.opacity;
+      }
 
       // update the shape in all nodes
       if (options.shape !== undefined) {
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index c38850b4a2..ecfd0f1685 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -102,7 +102,6 @@ class Node {
    * @returns {null|boolean}
    */
   setOptions(options) {
-
     let currentShape = this.options.shape;
     if (!options) {
       return;  // Note that the return value will be 'undefined'! This is OK.
@@ -219,7 +218,6 @@ class Node {
     if (!hasGroup) return;  // current node has no group, no need to merge
 
     var groupObj = groupList.get(group);
-    groupObj.opacity = newOptions.opacity || parentOptions.opacity || 1;
 
     // Skip merging of group font options into parent; these are required to be distinct for labels
     // Also skip mergin of color IF it is already defined in the node itself. This is to avoid the color of the
@@ -256,7 +254,9 @@ class Node {
     util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
 
     Node.checkMass(newOptions);
-    parentOptions.opacity = newOptions.opacity || parentOptions.opacity || 1;
+    if (globalOptions.opacity) {
+      newOptions.opacity = globalOptions.opacity;
+    }
 
     // merge the shadow options into the parent.
     util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions);
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index c03d1bd601..d58efca33c 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'
-import * as util from 'vis-util/esnext';
+import { overrideOpacity } from 'vis-util/esnext';
 
 /**
  * An image-based replacement for the default Node shape.
@@ -71,8 +71,8 @@ class Image extends CircleImageBase {
       let fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
       if (values.opacity) {
-        strokeStyle = util.overrideOpacity(strokeStyle, values.opacity);
-        fillStyle = util.overrideOpacity(fillStyle, values.opacity);
+        strokeStyle = overrideOpacity(strokeStyle, values.opacity);
+        fillStyle = overrideOpacity(fillStyle, values.opacity);
       }
       // setup the line properties.
       ctx.strokeStyle = strokeStyle;

From 9614ea894cf35f3efed171d604407f391028453e Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 01:07:30 +0200
Subject: [PATCH 07/21] Fix local opacity not being applied

---
 .../network/nodeStyles/imagesWithOpacity.html | 85 +++++++++++++++++++
 lib/network/modules/components/Node.js        |  6 +-
 2 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 examples/network/nodeStyles/imagesWithOpacity.html

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
new file mode 100644
index 0000000000..f9afd15a5a
--- /dev/null
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+<head>
+  <title>Vis Network | Node Styles | Images</title>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../standalone/umd/vis-network.min.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    var DIR = '../img/refresh-cl/';
+    var EDGE_LENGTH_MAIN = 150;
+    var EDGE_LENGTH_SUB = 50;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // Create a data table with nodes.
+      nodes = [];
+
+      // Create a data table with links.
+      edges = [];
+
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 0.6});
+      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
+      edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
+
+      for (var i = 4; i <= 7; i++) {
+        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
+        edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
+      }
+
+      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
+      edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
+      edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});
+
+      for (var i = 200; i <= 201; i++ ) {
+        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
+        edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
+      }
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          opacity: 0.2
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  
+
+<body onload="draw()">
+
+<p>
+  Display nodes as images.
+</p>
+<div id="mynetwork"></div>
+
+</body>
+</html>
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index ecfd0f1685..9fd0c5de54 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -140,6 +140,10 @@ class Node {
     // this transforms all shorthands into fully defined options
     Node.parseOptions(this.options, options, true, this.globalOptions, this.grouplist);
 
+    if (options.opacity !== undefined) {
+      this.options.opacity = options.opacity;
+    }
+
     let pile = [options, this.options, this.defaultOptions];
     this.chooser = ComponentUtil.choosify('node', pile);
 
@@ -254,7 +258,7 @@ class Node {
     util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
 
     Node.checkMass(newOptions);
-    if (globalOptions.opacity) {
+    if (globalOptions.opacity && newOptions.opacity === undefined) {
       newOptions.opacity = globalOptions.opacity;
     }
 

From b85caaa58e3f2bddd3d1fbafd5aa8d99e979e6fa Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 10:54:58 +0200
Subject: [PATCH 08/21] Fix wrong property name

---
 lib/network/modules/CanvasRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js
index 7f0a97ce34..7663e47b1f 100644
--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@@ -356,7 +356,7 @@ class CanvasRenderer {
     for (let i = 0; i < nodeIndices.length; i++) {
       node = nodes[nodeIndices[i]];
       // set selected and hovered nodes aside
-      if (node.hovered) {
+      if (node.hover) {
         hovered.push(nodeIndices[i]);
       } else if (node.isSelected()) {
         selected.push(nodeIndices[i]);

From a685dd2652a2ea5c035624389734d04c0d0b369f Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 10:55:49 +0200
Subject: [PATCH 09/21] Fix drawing selected instead of hovered

---
 lib/network/modules/CanvasRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js
index 7663e47b1f..802f31e396 100644
--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@@ -386,7 +386,7 @@ class CanvasRenderer {
 
     // draw hovered nodes above everything else: fixes https://github.com/visjs/vis-network/issues/226
     for (i = 0; i < hoveredLength; i++) {
-      node = nodes[selected[i]];
+      node = nodes[hovered[i]];
       node.draw(ctx);
     }
 

From fcc0956fe2df06268323fde08b3577d7dd88edcf Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 10:57:49 +0200
Subject: [PATCH 10/21] Update example

---
 examples/network/nodeStyles/imagesWithOpacity.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index f9afd15a5a..a7b6e0da91 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Vis Network | Node Styles | Images</title>
+  <title>Vis Network | Node Styles | Images with Opacity</title>
 
   <style type="text/css">
     #mynetwork {

From e67ff7cacda0275af642bf45d62b80531fa84469 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 11:02:21 +0200
Subject: [PATCH 11/21] Update example

---
 examples/network/nodeStyles/imagesWithOpacity.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index a7b6e0da91..e371eacea1 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -33,8 +33,10 @@
       nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 0.6});
       nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 22, label: 'Normal'});
       edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
       edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
+      edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});
 
       for (var i = 4; i <= 7; i++) {
         nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
@@ -66,7 +68,7 @@
       };
       var options = {
         nodes: {
-          opacity: 0.2
+          opacity: 0.5
         }
       };
       network = new vis.Network(container, data, options);

From b3d588f89841603ca52e3a901ac4a75bacf59243 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 12:00:04 +0200
Subject: [PATCH 12/21] Fix opacity of 0 wouldn't pass

---
 lib/network/modules/NodesHandler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index 4b40b47852..c9abeb0db7 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -180,7 +180,7 @@ class NodesHandler {
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
       
-      if (options.opacity) {
+      if (options.opacity !== undefined) {
         this.options.opacity = options.opacity;
       }
 

From 125913d132e16804a131545bcaf77057d408bb18 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 22:43:05 +0200
Subject: [PATCH 13/21] Fix checks for truthiness instead of nullness

Add groups to example
---
 examples/network/nodeStyles/imagesWithOpacity.html       | 9 +++++++--
 lib/network/modules/components/Node.js                   | 4 ++--
 lib/network/modules/components/nodes/shapes/Image.js     | 2 +-
 .../modules/components/nodes/util/CircleImageBase.js     | 2 +-
 types/network/Network.d.ts                               | 2 ++
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index e371eacea1..59c9802c14 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -30,7 +30,7 @@
       // Create a data table with links.
       edges = [];
 
-      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 0.6});
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 1});
       nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 22, label: 'Normal'});
@@ -39,7 +39,7 @@
       edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});
 
       for (var i = 4; i <= 7; i++) {
-        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
+        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image', group: 'computer'});
         edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
       }
 
@@ -69,6 +69,11 @@
       var options = {
         nodes: {
           opacity: 0.5
+        },
+        groups: {
+          computer: {
+            opacity: 1
+          }
         }
       };
       network = new vis.Network(container, data, options);
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index 9fd0c5de54..6acd6662ba 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -258,7 +258,7 @@ class Node {
     util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
 
     Node.checkMass(newOptions);
-    if (globalOptions.opacity && newOptions.opacity === undefined) {
+    if (globalOptions.opacity !== undefined && newOptions.opacity === undefined) {
       newOptions.opacity = globalOptions.opacity;
     }
 
@@ -348,7 +348,7 @@ class Node {
     } else {
       values.shadow = this.options.shadow.enabled;
     }
-    if (this.options.opacity) {
+    if (this.options.opacity !== undefined) {
       const opacity = this.options.opacity;
       values.borderColor = util.overrideOpacity(values.borderColor, opacity);
       values.color = util.overrideOpacity(values.color, opacity);
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index d58efca33c..cde3ac4e8a 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -70,7 +70,7 @@ class Image extends CircleImageBase {
       let strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
       let fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
-      if (values.opacity) {
+      if (values.opacity !== undefined) {
         strokeStyle = overrideOpacity(strokeStyle, values.opacity);
         fillStyle = overrideOpacity(fillStyle, values.opacity);
       }
diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js
index cd7ba4d97c..d5077c48f7 100644
--- a/lib/network/modules/components/nodes/util/CircleImageBase.js
+++ b/lib/network/modules/components/nodes/util/CircleImageBase.js
@@ -170,7 +170,7 @@ class CircleImageBase extends NodeBase {
   _drawImageAtPosition(ctx, values) {
     if (this.imageObj.width != 0) {
       // draw the image
-      ctx.globalAlpha = values.opacity;
+      ctx.globalAlpha = values.opacity !== undefined ? values.opacity : 1;
 
       // draw shadow if enabled
       this.enableShadow(ctx, values);
diff --git a/types/network/Network.d.ts b/types/network/Network.d.ts
index 1338b3eb15..eb80ae8727 100644
--- a/types/network/Network.d.ts
+++ b/types/network/Network.d.ts
@@ -826,6 +826,8 @@ export interface NodeOptions {
 
   color?: string | Color;
 
+  opacity?: number;
+
   fixed?: boolean | {
     x?: boolean,
     y?: boolean,

From 9e9a3b0ff63ff1de51ea2356399ca9a913d7013a Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Fri, 20 Mar 2020 22:49:49 +0200
Subject: [PATCH 14/21] Added to docs

KR Docs todo
---
 docs-kr/network/nodes.html | 8 ++++++++
 docs/network/nodes.html    | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/docs-kr/network/nodes.html b/docs-kr/network/nodes.html
index becde518fd..263862c5e1 100644
--- a/docs-kr/network/nodes.html
+++ b/docs-kr/network/nodes.html
@@ -413,6 +413,14 @@ <h3>옵션</h3>
             <td> 마우스로 이리저리 이동하는 Node의 배경의 색상 <i>(상호작용 모듈안에서 호버가 활성화 되어있다고 가정)</i>.</td>
             
         </tr>
+        <tr>
+            <td>opacity</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>
+                <!-- TODO -->
+            </td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);">
             <td><span parent="fixed" class="right-caret"></span> fixed</td>
             <td>Object or Boolean</td>
diff --git a/docs/network/nodes.html b/docs/network/nodes.html
index 216940266b..bd2ebfc9c2 100644
--- a/docs/network/nodes.html
+++ b/docs/network/nodes.html
@@ -110,6 +110,7 @@ <h3>Options</h3>
         background: '#D2E5FF'
       }
     },
+    opacity: 1,
     fixed: {
       x:false,
       y:false
@@ -417,6 +418,12 @@ <h3>Options</h3>
                 the interaction module)</i>.
             </td>
         </tr>
+        <tr>
+            <td>opacity</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>Overall opacity of a node <i>(overrides any opacity on border, background, image, and shadow)</i></td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);">
             <td><span parent="fixed" class="right-caret"></span> fixed</td>
             <td>Object or Boolean</td>

From 1ea800d042d38c85aef5dbf62dc77678dbdf1f53 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Sun, 22 Mar 2020 21:20:13 +0200
Subject: [PATCH 15/21] Update example

Fix problems with values invalid for opacity
---
 examples/network/nodeStyles/imagesWithOpacity.html | 6 +++---
 lib/network/modules/NodesHandler.js                | 7 ++++++-
 lib/network/modules/components/Node.js             | 1 -
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index 59c9802c14..15bacbe5d0 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -30,7 +30,7 @@
       // Create a data table with links.
       edges = [];
 
-      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 1});
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 0.2});
       nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 22, label: 'Normal'});
@@ -72,7 +72,7 @@
         },
         groups: {
           computer: {
-            opacity: 1
+            opacity: .7
           }
         }
       };
@@ -84,7 +84,7 @@
 <body onload="draw()">
 
 <p>
-  Display nodes as images.
+  Display nodes with global opacity, individual opacity, and opacity in a group.
 </p>
 <div id="mynetwork"></div>
 
diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index c9abeb0db7..45c7eacb6b 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -181,7 +181,12 @@ class NodesHandler {
       Node.parseOptions(this.options, options);
       
       if (options.opacity !== undefined) {
-        this.options.opacity = options.opacity;
+        if (isNaN(options.opacity) || !isFinite(options.opacity) || options.opacity < 0 || options.opacity > 1) {
+          console.error("Invalid option for node opacity. Value must be between 0 and 1");
+        }
+        else {
+          this.options.opacity = options.opacity;
+        }
       }
 
       // update the shape in all nodes
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index 6acd6662ba..b864a34095 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -354,7 +354,6 @@ class Node {
       values.color = util.overrideOpacity(values.color, opacity);
       values.shadowColor = util.overrideOpacity(values.shadowColor, opacity);
     }
-
     return values;
   }
 

From 7176cb8d4bc7dd9d9e78d48a11944262065e6a0e Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Tue, 24 Mar 2020 22:37:59 +0200
Subject: [PATCH 16/21] Update example

Fix error logging for invalid node opacity options
---
 .../network/nodeStyles/imagesWithOpacity.html |  6 ++---
 lib/network/modules/NodesHandler.js           |  5 ++--
 lib/network/modules/components/Node.js        | 27 ++++++++++++++++---
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index 15bacbe5d0..d20989d38f 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -30,7 +30,7 @@
       // Create a data table with links.
       edges = [];
 
-      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: 0.2});
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: .7});
       nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 22, label: 'Normal'});
@@ -68,11 +68,11 @@
       };
       var options = {
         nodes: {
-          opacity: 0.5
+          opacity: .5
         },
         groups: {
           computer: {
-            opacity: .7
+            opacity: .3
           }
         }
       };
diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index 45c7eacb6b..a6214bcf46 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -180,9 +180,10 @@ class NodesHandler {
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
       
+      // Need to set opacity here because parseOptions-parentOptions can't be overridden incase of node being in a group
       if (options.opacity !== undefined) {
-        if (isNaN(options.opacity) || !isFinite(options.opacity) || options.opacity < 0 || options.opacity > 1) {
-          console.error("Invalid option for node opacity. Value must be between 0 and 1");
+        if (Number.isNaN(options.opacity) || !Number.isFinite(options.opacity) || options.opacity < 0 || options.opacity > 1) {
+          console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + options.opacity);
         }
         else {
           this.options.opacity = options.opacity;
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index b864a34095..5d2a2a6103 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -218,11 +218,20 @@ class Node {
       throw new Error("updateGroupOptions: group values in options don't match.");
     }
 
+    
     var hasGroup = (typeof group === 'number' || (typeof group === 'string' && group != ''));
     if (!hasGroup) return;  // current node has no group, no need to merge
-
+    
+    
     var groupObj = groupList.get(group);
 
+    if (groupObj.opacity !== undefined && newOptions.opacity === undefined) {
+      if (Number.isNaN(groupObj.opacity) || !Number.isFinite(groupObj.opacity) || groupObj.opacity < 0 || groupObj.opacity > 1) {
+        console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + groupObj.opacity);
+        groupObj.opacity = undefined;
+      }
+    }
+
     // Skip merging of group font options into parent; these are required to be distinct for labels
     // Also skip mergin of color IF it is already defined in the node itself. This is to avoid the color of the
     // group overriding the color set at the node level
@@ -258,8 +267,20 @@ class Node {
     util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
 
     Node.checkMass(newOptions);
-    if (globalOptions.opacity !== undefined && newOptions.opacity === undefined) {
-      newOptions.opacity = globalOptions.opacity;
+
+    
+    if (parentOptions.opacity !== undefined) {
+      if (Number.isNaN(parentOptions.opacity) || !Number.isFinite(parentOptions.opacity) || parentOptions.opacity < 0 || parentOptions.opacity > 1) {
+        console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + parentOptions.opacity);
+        parentOptions.opacity = undefined;
+      }
+    }
+
+    if (newOptions.opacity !== undefined) {
+      if (Number.isNaN(newOptions.opacity) || !Number.isFinite(newOptions.opacity) || newOptions.opacity < 0 || newOptions.opacity > 1) {
+        console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + newOptions.opacity);
+        newOptions.opacity = undefined;
+      }
     }
 
     // merge the shadow options into the parent.

From fcfcbade91700904d49ed8cd42ab674a4116fd07 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Sat, 28 Mar 2020 20:16:07 +0200
Subject: [PATCH 17/21] Create function to check opacity

Clear up comment on opacity option
---
 lib/network/modules/NodesHandler.js    |  3 ++-
 lib/network/modules/components/Node.js | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index a6214bcf46..21e1a8f7ec 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -180,7 +180,8 @@ class NodesHandler {
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
       
-      // Need to set opacity here because parseOptions-parentOptions can't be overridden incase of node being in a group
+      // Need to set opacity here because Node.parseOptions is also used for groups,
+      // if you set opacity in Node.parseOptions it overwrites group opacity.
       if (options.opacity !== undefined) {
         if (Number.isNaN(options.opacity) || !Number.isFinite(options.opacity) || options.opacity < 0 || options.opacity > 1) {
           console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + options.opacity);
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index 5d2a2a6103..f12aa66734 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -194,6 +194,16 @@ class Node {
       }
     }
   }
+  
+  /**
+   * Check that opacity is only between 0 and 1
+   * 
+   * @param {Number} opacity 
+   * @returns {boolean}
+   */
+  static checkOpacity (opacity) {
+    return 0 <= opacity && opacity <= 1;
+  }
 
 
   /**
@@ -226,7 +236,7 @@ class Node {
     var groupObj = groupList.get(group);
 
     if (groupObj.opacity !== undefined && newOptions.opacity === undefined) {
-      if (Number.isNaN(groupObj.opacity) || !Number.isFinite(groupObj.opacity) || groupObj.opacity < 0 || groupObj.opacity > 1) {
+      if (!Node.checkOpacity(groupObj.opacity)) {
         console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + groupObj.opacity);
         groupObj.opacity = undefined;
       }
@@ -270,14 +280,14 @@ class Node {
 
     
     if (parentOptions.opacity !== undefined) {
-      if (Number.isNaN(parentOptions.opacity) || !Number.isFinite(parentOptions.opacity) || parentOptions.opacity < 0 || parentOptions.opacity > 1) {
+      if (!Node.checkOpacity(parentOptions.opacity)) {
         console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + parentOptions.opacity);
         parentOptions.opacity = undefined;
       }
     }
 
     if (newOptions.opacity !== undefined) {
-      if (Number.isNaN(newOptions.opacity) || !Number.isFinite(newOptions.opacity) || newOptions.opacity < 0 || newOptions.opacity > 1) {
+      if (!Node.checkOpacity(newOptions.opacity)) {
         console.error("Invalid option for node opacity. Value must be between 0 and 1, found: " + newOptions.opacity);
         newOptions.opacity = undefined;
       }

From 1096463cc8e0a6f62bf1c6a285c8e42eb30e1d27 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Mon, 30 Mar 2020 15:00:51 +0200
Subject: [PATCH 18/21] Fix image opacity transferring to shapes

---
 examples/network/nodeStyles/imagesWithOpacity.html    | 8 ++++----
 lib/network/modules/components/nodes/shapes/Image.js  | 2 ++
 lib/network/modules/components/nodes/util/NodeBase.js | 6 +++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index d20989d38f..b9147aeae9 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -33,7 +33,7 @@
       nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: .7});
       nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
       nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
-      nodes.push({id: 22, label: 'Normal'});
+      nodes.push({id: 22, label: 'Normal', opacity: 1})
       edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
       edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
       edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});
@@ -67,9 +67,9 @@
         edges: edges
       };
       var options = {
-        nodes: {
-          opacity: .5
-        },
+        // nodes: {
+        //   opacity: .5
+        // },
         groups: {
           computer: {
             opacity: .3
diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
index cde3ac4e8a..ce84f275a4 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -55,6 +55,7 @@ class Image extends CircleImageBase {
    * @param {ArrowOptions} values
    */
   draw(ctx, x, y, selected, hover, values) {
+    ctx.save();
     this.switchImages(selected);
     this.resize();
     this.left = x - this.width / 2;
@@ -97,6 +98,7 @@ class Image extends CircleImageBase {
     this._drawImageLabel(ctx, x, y, selected, hover);
 
     this.updateBoundingBox(x,y);
+    ctx.restore();
   }
 
   /**
diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js
index 2ac9234724..99cc08cd7d 100644
--- a/lib/network/modules/components/nodes/util/NodeBase.js
+++ b/lib/network/modules/components/nodes/util/NodeBase.js
@@ -196,13 +196,17 @@ class NodeBase {
    * @param {ArrowOptions} values
    */
   performFill(ctx, values) {
+    ctx.save();
+    console.log(values);
+    ctx.fillStyle = values.color;
     // draw shadow if enabled
     this.enableShadow(ctx, values);
     // draw the background
     ctx.fill();
     // disable shadows for other elements.
     this.disableShadow(ctx, values);
-
+    
+    ctx.restore();
     this.performStroke(ctx, values);
   }
 

From 088756d231c26e6a372b0a1501f689ce73692ed2 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Mon, 30 Mar 2020 15:11:42 +0200
Subject: [PATCH 19/21] Remove console.log

---
 lib/network/modules/components/nodes/util/NodeBase.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js
index 99cc08cd7d..ab1ba64f03 100644
--- a/lib/network/modules/components/nodes/util/NodeBase.js
+++ b/lib/network/modules/components/nodes/util/NodeBase.js
@@ -197,7 +197,6 @@ class NodeBase {
    */
   performFill(ctx, values) {
     ctx.save();
-    console.log(values);
     ctx.fillStyle = values.color;
     // draw shadow if enabled
     this.enableShadow(ctx, values);

From 42af3b9fe2a579bee07d01ceb03e74abeba9f1b4 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Mon, 30 Mar 2020 19:36:27 +0200
Subject: [PATCH 20/21] WIP: Fix group opacity overriding node opacity

---
 .../network/nodeStyles/imagesWithOpacity.html |  2 +-
 lib/network/modules/components/Node.js        | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
index b9147aeae9..43a2631807 100644
--- a/examples/network/nodeStyles/imagesWithOpacity.html
+++ b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -39,7 +39,7 @@
       edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});
 
       for (var i = 4; i <= 7; i++) {
-        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image', group: 'computer'});
+        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image', group: 'computer', opacity: 1});
         edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
       }
 
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index f12aa66734..ab1daeb488 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -103,6 +103,7 @@ class Node {
    */
   setOptions(options) {
     let currentShape = this.options.shape;
+    
     if (!options) {
       return;  // Note that the return value will be 'undefined'! This is OK.
     }
@@ -139,10 +140,18 @@ class Node {
 
     // this transforms all shorthands into fully defined options
     Node.parseOptions(this.options, options, true, this.globalOptions, this.grouplist);
-
-    if (options.opacity !== undefined) {
+    
+    
+    if (options.opacity !== undefined && Node.checkOpacity(options.opacity)) {
+      if (this.id >= 4 && this.id <= 7) {
+        console.log(options.opacity);
+      }
+      // FIXME: This doesn't work if a group has already set this option
       this.options.opacity = options.opacity;
     }
+    if (this.id >= 4 && this.id <= 7) {
+      console.log(this.options, options.opacity, Node.checkOpacity(options.opacity));
+    }
 
     let pile = [options, this.options, this.defaultOptions];
     this.chooser = ComponentUtil.choosify('node', pile);
@@ -219,6 +228,9 @@ class Node {
    * @param {Object} groupList
    */
   static updateGroupOptions(parentOptions, newOptions, groupList) {
+    if (this.id >= 4 && this.id <= 7) {
+      console.log(newOptions, parentOptions)
+    }
     if (groupList === undefined) return;  // No groups, nothing to do
 
     var group = parentOptions.group;
@@ -270,7 +282,6 @@ class Node {
   static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}, groupList) {
     var fields = [
       'color',
-      'opacity',
       'fixed',
       'shadow'
     ];
@@ -616,6 +627,9 @@ class Node {
    */
   draw(ctx) {
     let values = this.getFormattingValues();
+    if (this.id >= 4 && this.id <= 7) {
+      console.log(values);
+    }
     this.shape.draw(ctx, this.x, this.y, this.selected, this.hover, values);
   }
 

From aeb4c8816c13721d89b74be493bdf8e05a66c669 Mon Sep 17 00:00:00 2001
From: Tyler Maclachlan <tyler.maclachlan@mwrinfosecurity.com>
Date: Mon, 30 Mar 2020 21:39:56 +0200
Subject: [PATCH 21/21] Fix group options overriding local options

---
 lib/network/modules/components/Node.js | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index ab1daeb488..f076212af7 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -141,23 +141,19 @@ class Node {
     // this transforms all shorthands into fully defined options
     Node.parseOptions(this.options, options, true, this.globalOptions, this.grouplist);
     
-    
-    if (options.opacity !== undefined && Node.checkOpacity(options.opacity)) {
-      if (this.id >= 4 && this.id <= 7) {
-        console.log(options.opacity);
-      }
-      // FIXME: This doesn't work if a group has already set this option
-      this.options.opacity = options.opacity;
-    }
-    if (this.id >= 4 && this.id <= 7) {
-      console.log(this.options, options.opacity, Node.checkOpacity(options.opacity));
-    }
-
     let pile = [options, this.options, this.defaultOptions];
     this.chooser = ComponentUtil.choosify('node', pile);
 
+    
+
     this._load_images();
     this.updateLabelModule(options);
+
+    // Need to set local opacity after `this.updateLabelModule(options);` because `this.updateLabelModule(options);` overrites local opacity with group opacity
+    if (options.opacity !== undefined && Node.checkOpacity(options.opacity)) {
+      this.options.opacity = options.opacity;
+    }
+
     this.updateShape(currentShape);
 
     return (options.hidden !== undefined || options.physics !== undefined);
@@ -228,9 +224,6 @@ class Node {
    * @param {Object} groupList
    */
   static updateGroupOptions(parentOptions, newOptions, groupList) {
-    if (this.id >= 4 && this.id <= 7) {
-      console.log(newOptions, parentOptions)
-    }
     if (groupList === undefined) return;  // No groups, nothing to do
 
     var group = parentOptions.group;
@@ -627,9 +620,6 @@ class Node {
    */
   draw(ctx) {
     let values = this.getFormattingValues();
-    if (this.id >= 4 && this.id <= 7) {
-      console.log(values);
-    }
     this.shape.draw(ctx, this.x, this.y, this.selected, this.hover, values);
   }