visjs · Thomaash · Mar 31, 2020 · Mar 19, 2020 · Mar 19, 2020 · Mar 19, 2020
diff --git 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
@@ -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>

diff --git a/examples/network/nodeStyles/imagesWithOpacity.html b/examples/network/nodeStyles/imagesWithOpacity.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html>
+<head>
+  <title>Vis Network | Node Styles | Images with Opacity</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: .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'});
+      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', group: 'computer'});
+        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: .5
+        },
+        groups: {
+          computer: {
+            opacity: .3
+          }
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+
+
+<body onload="draw()">
+
+<p>
+  Display nodes with global opacity, individual opacity, and opacity in a group.
+</p>
+<div id="mynetwork"></div>
+
+</body>
+</html>
diff --git 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.hover) {
+        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[hovered[i]];
+      node.draw(ctx);
+    }
+
   }
 
 

diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
@@ -43,6 +43,7 @@ class NodesHandler {
           background: '#D2E5FF'
         }
       },
+      opacity: undefined, // number between 0 and 1
       fixed: {
         x: false,
         y: false
@@ -178,6 +179,17 @@ class NodesHandler {
   setOptions(options) {
     if (options !== undefined) {
       Node.parseOptions(this.options, options);
+
+      // 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);
+        }
+        else {
+          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
@@ -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);
 
@@ -190,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;
+  }
 
 
   /**
@@ -214,11 +228,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 (!Node.checkOpacity(groupObj.opacity)) {
+        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
@@ -245,16 +268,31 @@ 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);
 
+
+    if (parentOptions.opacity !== undefined) {
+      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 (!Node.checkOpacity(newOptions.opacity)) {
+        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.
     util.mergeOptions(parentOptions, newOptions, 'shadow', globalOptions);
 
@@ -303,6 +341,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,6 +379,12 @@ class Node {
     } else {
       values.shadow = this.options.shadow.enabled;
     }
+    if (this.options.opacity !== undefined) {
+      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
@@ -1,7 +1,7 @@
 'use strict';
 
 import CircleImageBase from '../util/CircleImageBase'
-
+import { overrideOpacity } from 'vis-util/esnext';
 
 /**
  * An image-based replacement for the default Node shape.
@@ -67,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 !== undefined) {
+        strokeStyle = overrideOpacity(strokeStyle, values.opacity);
+        fillStyle = overrideOpacity(fillStyle, values.opacity);
+      }
       // setup the line properties.
-      ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
+      ctx.strokeStyle = strokeStyle;
 
       // set a fillstyle
-      ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
+      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/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 !== undefined ? values.opacity : 1;
 
       // draw shadow if enabled
       this.enableShadow(ctx, values);

diff --git 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: [0, 0, 1, 0.1],
     fixed: {
       x: false,
       y: false

diff --git 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,