visjs · mojoaxel · Feb 3, 2017 · Jan 17, 2017 · Feb 3, 2017 · mojoaxel
diff --git a/docs/network/nodes.html b/docs/network/nodes.html
@@ -734,14 +734,28 @@ <h3>Options</h3>
             <td><code>undefined</code></td>
             <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
         </tr>
-        <tr>
-            <td>image</td>
-            <td>String</td>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','image', this);">
+            <td><span parent="image" class="right-caret"></span> image</td>
+            <td>Object or String</td>
             <td><code>undefined</code></td>
             <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL
                 to an image. If the image cannot be found, the brokenImage option can be used.
             </td>
         </tr>
+        <tr parent="image" class="hidden">
+            <td class="indent">image.unselected</td>
+            <td>String</td>
+            <td><code>undefined</code></td>
+            <td>Unselected (default) image URL.
+            </td>
+        </tr>
+        <tr parent="image" class="hidden">
+            <td class="indent">image.selected</td>
+            <td>String</td>
+            <td><code>undefined</code></td>
+            <td>Selected image URL.
+            </td>
+        </tr>
         <tr>
             <td>label</td>
             <td>String</td>

diff --git a/examples/network/imageSelected/broken-image.png b/examples/network/imageSelected/broken-image.png
diff --git a/examples/network/imageSelected/imageSelected.html b/examples/network/imageSelected/imageSelected.html
@@ -0,0 +1,82 @@
+<html>
+<head>
+  <title>Network | Selected/Unselected Image</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+
+<body>
+<div id="mynetwork"></div>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([{
+    id: 1,
+    shape: 'image',
+    size: 20,
+    label: 'No select image',
+    image: './unselected.svg',
+  }, {
+    id: 2,
+    shape: 'image',
+    size: 20,
+    label: 'Select image broken',
+    image: {
+      unselected: './unselected.svg',
+      selected: './BROKEN_LINK/selected.svg',
+    },
+  }, {
+    id: 3,
+    shape: 'image',
+    size: 20,
+    label: 'Select works!',
+    image: {
+      unselected: './unselected.svg',
+      selected: './selected.svg',
+    },
+    shapeProperties: {
+      borderDashes: [15, 5],
+      interpolation: false,
+    }
+  }]);
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 2},
+    {from: 2, to: 3},
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+
+  // provide the data in the vis format
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+
+  var options = {
+    layout:{
+      randomSeed: 5
+    },
+    nodes: {
+      brokenImage: './broken-image.png',
+    }
+  };
+  // initialize!
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>
diff --git a/examples/network/imageSelected/selected.svg b/examples/network/imageSelected/selected.svg
diff --git a/examples/network/imageSelected/unselected.svg b/examples/network/imageSelected/unselected.svg
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
@@ -107,14 +107,14 @@ class Node {
     if (!options) {
       return;
     }
+
     // basic options
     if (options.id !== undefined)    {this.id = options.id;}
 
     if (this.id === undefined) {
       throw "Node must have an id";
     }
 
-
     // set these options locally
     // clear x and y positions
     if (options.x !== undefined) {
@@ -144,7 +144,12 @@ class Node {
     // load the images
     if (this.options.image !== undefined) {
       if (this.imagelist) {
-        this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id);
+        if (typeof this.options.image === 'string') {
+          this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id);
+        } else {
+          this.imageObj = this.imagelist.load(this.options.image.unselected, this.options.brokenImage, this.id);
+          this.imageObjAlt = this.imagelist.load(this.options.image.selected, this.options.brokenImage, this.id);
+        }
       }
       else {
         throw "No imagelist provided";
@@ -295,7 +300,7 @@ class Node {
 
   updateShape(currentShape) {
     if (currentShape === this.options.shape && this.shape) {
-      this.shape.setOptions(this.options, this.imageObj);
+      this.shape.setOptions(this.options, this.imageObj, this.imageObjAlt);
     }
     else {
       // choose draw method depending on the shape
@@ -307,7 +312,7 @@ class Node {
           this.shape = new Circle(this.options, this.body, this.labelModule);
           break;
         case 'circularImage':
-          this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj);
+          this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj, this.imageObjAlt);
           break;
         case 'database':
           this.shape = new Database(this.options, this.body, this.labelModule);
@@ -325,7 +330,7 @@ class Node {
           this.shape = new Icon(this.options, this.body, this.labelModule);
           break;
         case 'image':
-          this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
+          this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj, this.imageObjAlt);
           break;
         case 'square':
           this.shape = new Square(this.options, this.body, this.labelModule);

diff --git a/lib/network/modules/components/nodes/shapes/CircularImage.js b/lib/network/modules/components/nodes/shapes/CircularImage.js
@@ -1,12 +1,13 @@
 'use strict';
 
-
 import CircleImageBase from '../util/CircleImageBase'
 
 class CircularImage extends CircleImageBase {
-  constructor (options, body, labelModule, imageObj) {
+  constructor (options, body, labelModule, imageObj, imageObjAlt) {
     super(options, body, labelModule);
-    this.imageObj = imageObj;
+
+    this.setImages(imageObj, imageObjAlt);
+
     this._swapToImageResizeWhenImageLoaded = true;
   }
 
@@ -31,6 +32,11 @@ class CircularImage extends CircleImageBase {
   }
 
   draw(ctx, x, y, selected, hover, values) {
+    // switch images depending on 'selected' if imageObjAlt exists
+    if (this.imageObjAlt) {
+      this.switchImages(selected);
+    }
+
     this.resize();
 
     this.left = x - this.width / 2;

diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js
@@ -3,16 +3,24 @@
 import CircleImageBase from '../util/CircleImageBase'
 
 class Image extends CircleImageBase {
-  constructor (options, body, labelModule, imageObj) {
+  constructor (options, body, labelModule, imageObj, imageObjAlt) {
     super(options, body, labelModule);
-    this.imageObj = imageObj;
+
+    this.setImages(imageObj, imageObjAlt);
   }
 
   resize() {
     this._resizeImage();
   }
 
   draw(ctx, x, y, selected, hover, values) {
+    // switch images depending on 'selected' if imageObjAlt exists
+    if (this.imageObjAlt) {
+      this.switchImages(selected);
+    }
+
+    this.selected = selected;
+
     this.resize();
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;

diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js
@@ -5,13 +5,36 @@ class CircleImageBase extends NodeBase {
     super(options, body, labelModule);
     this.labelOffset = 0;
     this.imageLoaded = false;
+    this.selected = false;
   }
 
-  setOptions(options, imageObj) {
+  setOptions(options, imageObj, imageObjAlt) {
     this.options = options;
+    this.setImages(imageObj, imageObjAlt);
+  }
+
+  setImages(imageObj, imageObjAlt) {
     if (imageObj) {
       this.imageObj = imageObj;
+
+      if (imageObjAlt) {
+        this.imageObjAlt = imageObjAlt;
+      }
+    }
+  }
+
+  /**
+   * Switch between the base and the selected image.
+   */
+  switchImages(selected) {
+    if ((selected && !this.selected) || (!selected && this.selected)) {
+      let imageTmp = this.imageObj;
+      this.imageObj = this.imageObjAlt;
+      this.imageObjAlt = imageTmp;
     }
+
+    // keep current state in memory
+    this.selected = selected;
   }
 
   /**

diff --git a/lib/network/options.js b/lib/network/options.js
@@ -280,7 +280,11 @@ let allOptions = {
       __type__: { object }
     },
     id: { string, number },
-    image: { string, 'undefined': 'undefined' }, // --> URL
+    image: {
+      selected: { string, 'undefined': 'undefined' }, // --> URL
+      unselected: { string, 'undefined': 'undefined' }, // --> URL
+      __type__: { object, string }
+    },
     label: { string, 'undefined': 'undefined' },
     labelHighlightBold: { boolean: bool },
     level: { number, 'undefined': 'undefined' },