added shadow option to nodes and edges

examples/network/01_basic_usage.html

@@ -44,8 +44,10 @@
     edges: edges
   };
   var options = {
-//    nodes:{shape:'dot'}
-//      configure: 'nodes',
+//    edges:{
+//      shadow:true,
+//      shape:'dot'
+//    },
 //      physics:{stabilization:true}
   }
   var network = new vis.Network(container, data, options);

lib/network/modules/ConfigurationSystem.js

@@ -2,7 +2,16 @@ var util = require('../../util');
 
 import  ColorPicker from './components/ColorPicker'
 
-
+/**
+ * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
+ * Boolean options are recognised as Boolean
+ * Number options should be written as array: [default value, min value, max value, stepsize]
+ * Colors should be written as array: ['color', '#ffffff']
+ * Strings with should be written as array: [option1, option2, option3, ..]
+ *
+ * The options are matched with their counterparts in each of the modules and the values used in the configuration are
+ *
+ */
 class ConfigurationSystem {
   constructor(network) {
     this.network = network;
@@ -57,6 +66,12 @@ class ConfigurationSystem {
             drawThreshold: [3, 0, 20, 1]
           }
         },
+        shadow:{
+          enabled: false,
+          size:[10, 0, 20, 1],
+          x:[5, -30, 30, 1],
+          y:[5, -30, 30, 1]
+        },
         shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
         size: [25, 0, 200, 1]
       },
@@ -107,6 +122,12 @@ class ConfigurationSystem {
           }
         },
         selfReferenceSize: [20, 0, 200, 1],
+        shadow:{
+          enabled: false,
+          size:[10, 0, 20, 1],
+          x:[5, -30, 30, 1],
+          y:[5, -30, 30, 1]
+        },
         smooth: {
           enabled: true,
           dynamic: true,

lib/network/modules/EdgesHandler.js

@@ -80,6 +80,12 @@ class EdgesHandler {
         }
       },
       selfReferenceSize:20,
+      shadow:{
+        enabled: false,
+        size:10,
+        x:5,
+        y:5
+      },
       smooth: {
         enabled: true,
         dynamic: true,

lib/network/modules/NodesHandler.js

@@ -85,6 +85,12 @@ class NodesHandler {
           }
         }
       },
+      shadow:{
+        enabled: false,
+        size:10,
+        x:5,
+        y:5
+      },
       shape: 'ellipse',
       size: 25,
       title: undefined,

lib/network/modules/components/Edge.js

@@ -108,6 +108,7 @@ class Edge {
 
     util.mergeOptions(parentOptions, newOptions, 'smooth');
     util.mergeOptions(parentOptions, newOptions, 'dashes');
+    util.mergeOptions(parentOptions, newOptions, 'shadow');
 
     // set the scaling newOptions
     if (newOptions.scaling !== undefined) {

lib/network/modules/components/Node.js

@@ -178,6 +178,9 @@ class Node {
     ];
     util.selectiveDeepExtend(fields, parentOptions, newOptions);
 
+    // merge the shadow options into the parent.
+    util.mergeOptions(parentOptions, newOptions, 'shadow');
+
     // individual shape newOptions
     if (newOptions.color !== undefined) {
       let parsedColor = util.parseColor(newOptions.color);

lib/network/modules/components/edges/BezierEdgeDynamic.js

@@ -69,7 +69,10 @@ class BezierEdgeDynamic extends BezierEdgeBase {
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
     ctx.quadraticCurveTo(this.via.x, this.via.y, this.to.x, this.to.y);
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.stroke();
+    this.disableShadow(ctx);
     return this.via;
   }
 

lib/network/modules/components/edges/BezierEdgeStatic.js

@@ -17,19 +17,22 @@ class BezierEdgeStatic extends BezierEdgeBase {
     // draw a straight line
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
-    var via = this._getViaCoordinates();
+    let via = this._getViaCoordinates();
+    let returnValue = via;
 
     // fallback to normal straight edges
     if (via.x === undefined) {
       ctx.lineTo(this.to.x, this.to.y);
-      ctx.stroke();
-      return undefined;
+      returnValue = undefined;
     }
     else {
       ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
-      ctx.stroke();
-      return via;
     }
+    // draw shadow if enabled
+    this.enableShadow(ctx);
+    ctx.stroke();
+    this.disableShadow(ctx);
+    return returnValue;
   }
 
   _getViaCoordinates() {

lib/network/modules/components/edges/StraightEdge.js

@@ -18,7 +18,10 @@ class StraightEdge extends EdgeBase {
     ctx.beginPath();
     ctx.moveTo(this.from.x, this.from.y);
     ctx.lineTo(this.to.x, this.to.y);
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.stroke();
+    this.disableShadow(ctx);
     return undefined;
   }
 

lib/network/modules/components/edges/util/EdgeBase.js

@@ -91,7 +91,13 @@ class EdgeBase {
         ctx.moveTo(this.from.x, this.from.y);
         ctx.lineTo(this.to.x, this.to.y);
       }
+      // draw shadow if enabled
+      this.enableShadow(ctx);
+
       ctx.stroke();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
     return via;
   }
@@ -310,10 +316,16 @@ class EdgeBase {
    * @private
    */
   _circle(ctx, x, y, radius) {
+    // draw shadow if enabled
+    this.enableShadow(ctx);
+
     // draw a circle
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
     ctx.stroke();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
   }
 
 
@@ -439,7 +451,13 @@ class EdgeBase {
       // draw arrow at the end of the line
       length = (10 + 5 * this.options.width) * scaleFactor;
       ctx.arrow(arrowPos.x, arrowPos.y, angle, length);
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fill();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
       ctx.stroke();
     }
     else {
@@ -463,11 +481,35 @@ class EdgeBase {
       // draw the arrowhead
       let length = (10 + 5 * this.options.width) * scaleFactor;
       ctx.arrow(point.x, point.y, angle, length);
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fill();
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
       ctx.stroke();
     }
   }
 
+
+  enableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0.5)';
+      ctx.shadowBlur = this.options.shadow.size;
+      ctx.shadowOffsetX = this.options.shadow.x;
+      ctx.shadowOffsetY = this.options.shadow.y;
+    }
+  }
+
+  disableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0)';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+  }
 }
 
 export default EdgeBase;

lib/network/modules/components/nodes/shapes/Box.js

@@ -7,17 +7,17 @@ class Box extends NodeBase {
     super(options,body,labelModule);
   }
 
-  resize(ctx) {
+  resize(ctx, selected) {
     if (this.width === undefined) {
       var margin = 5;
-      var textSize = this.labelModule.getTextSize(ctx,this.selected);
+      var textSize = this.labelModule.getTextSize(ctx,selected);
       this.width = textSize.width + 2 * margin;
       this.height = textSize.height + 2 * margin;
     }
   }
 
   draw(ctx, x, y, selected, hover) {
-    this.resize(ctx);
+    this.resize(ctx, selected);
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
@@ -32,7 +32,14 @@ class Box extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
     ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = this.top;

lib/network/modules/components/nodes/shapes/Database.js

@@ -32,7 +32,14 @@ class Database extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = this.top;

lib/network/modules/components/nodes/shapes/Ellipse.js

@@ -35,7 +35,14 @@ class Ellipse extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.ellipse(this.left, this.top, this.width, this.height);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.left = this.left;
@@ -44,7 +51,9 @@ class Ellipse extends NodeBase {
     this.boundingBox.right = this.left + this.width;
 
 
+
     this.labelModule.draw(ctx, x, y, selected);
+
   }
 
   distanceToBorder(ctx, angle) {

lib/network/modules/components/nodes/shapes/Icon.js

@@ -53,7 +53,14 @@ class Icon extends NodeBase {
       ctx.fillStyle = this.options.icon.color || "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
+
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.fillText(this.options.icon.code, x, y);
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
   }
 

lib/network/modules/components/nodes/shapes/Text.js

@@ -21,8 +21,13 @@ class Text extends NodeBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     this.labelModule.draw(ctx, x, y, selected || hover);
 
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     this.boundingBox.top = this.top;
     this.boundingBox.left = this.left;
     this.boundingBox.right = this.left + this.width;

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -39,7 +39,14 @@ class CircleImageBase extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.circle(x, y, size);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
   }
 
@@ -47,7 +54,13 @@ class CircleImageBase extends NodeBase {
     if (this.imageObj.width != 0) {
       // draw the image
       ctx.globalAlpha = 1.0;
+
+      // draw shadow if enabled
+      this.enableShadow(ctx);
       ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+
+      // disable shadows for other elements.
+      this.disableShadow(ctx);
     }
   }
 

lib/network/modules/components/nodes/util/NodeBase.js

@@ -19,6 +19,24 @@ class NodeBase {
         Math.abs(this.width / 2 / Math.cos(angle)),
         Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
   }
+
+  enableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0.5)';
+      ctx.shadowBlur = this.options.shadow.size;
+      ctx.shadowOffsetX = this.options.shadow.x;
+      ctx.shadowOffsetY = this.options.shadow.y;
+    }
+  }
+
+  disableShadow(ctx) {
+    if (this.options.shadow.enabled === true) {
+      ctx.shadowColor = 'rgba(0,0,0,0)';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+  }
 }
 
 export default NodeBase;

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -28,7 +28,14 @@ class ShapeBase extends NodeBase {
     ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx[shape](x, y, this.options.size);
+
+    // draw shadow if enabled
+    this.enableShadow(ctx);
     ctx.fill();
+
+    // disable shadows for other elements.
+    this.disableShadow(ctx);
+
     ctx.stroke();
 
     this.boundingBox.top = y - this.options.size;