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.
-
-
image
-
String
+
+
image
+
Object or String
undefined
When the shape is set to image or circularImage, this option should be the URL
to an image. If the image cannot be found, the brokenImage option can be used.
+
+
image.unselected
+
String
+
undefined
+
Unselected (default) image URL.
+
+
+
+
image.selected
+
String
+
undefined
+
Selected image URL.
+
+
label
String
diff --git a/examples/network/imageSelected/broken-image.png b/examples/network/imageSelected/broken-image.png
new file mode 100644
index 00000000..c9107195
Binary files /dev/null and b/examples/network/imageSelected/broken-image.png differ
diff --git a/examples/network/imageSelected/imageSelected.html b/examples/network/imageSelected/imageSelected.html
new file mode 100644
index 00000000..ea6f70dd
--- /dev/null
+++ b/examples/network/imageSelected/imageSelected.html
@@ -0,0 +1,82 @@
+
+
+ Network | Selected/Unselected Image
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/network/imageSelected/selected.svg b/examples/network/imageSelected/selected.svg
new file mode 100644
index 00000000..a15c04af
--- /dev/null
+++ b/examples/network/imageSelected/selected.svg
@@ -0,0 +1,53 @@
+
+
+
+
diff --git a/examples/network/imageSelected/unselected.svg b/examples/network/imageSelected/unselected.svg
new file mode 100644
index 00000000..538cb255
--- /dev/null
+++ b/examples/network/imageSelected/unselected.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
index d2f0879e..996d3229 100644
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@@ -107,6 +107,7 @@ class Node {
if (!options) {
return;
}
+
// basic options
if (options.id !== undefined) {this.id = options.id;}
@@ -114,7 +115,6 @@ class Node {
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
index 8fa39b7f..0eefe7bc 100644
--- 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
index 431f6915..5b22f9f2 100644
--- a/lib/network/modules/components/nodes/shapes/Image.js
+++ b/lib/network/modules/components/nodes/shapes/Image.js
@@ -3,9 +3,10 @@
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() {
@@ -13,6 +14,13 @@ class Image extends CircleImageBase {
}
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
index 7e5c38db..7630236f 100644
--- 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
index 921c819a..66f123ca 100644
--- 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' },