Corrected the shapeProperties.borderDashes property type description

Changed shapeProperties.borderDashes type description from "Object or Boolean" to Array or Boolean".
Merged circularImageWithDashedBorder example into shapesWithDashedBorders example.
Added enableBorderDashes and disableBorderDashes function calls to Database.js, Ellipse.js and Box.js, to enable/disable dashed borders.

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.4.1-SNAPSHOT
- * @date    2015-07-07
+ * @date    2015-07-08
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -27082,7 +27082,6 @@ return /******/ (function(modules) { // webpackBootstrap
           x: false,
           y: false
         },
-        dashes: false,
         font: {
           color: '#343434',
           size: 14, // px
@@ -27132,6 +27131,9 @@ return /******/ (function(modules) { // webpackBootstrap
           y: 5
         },
         shape: 'ellipse',
+        shapeProperties: {
+          borderDashes: false
+        },
         size: 25,
         title: undefined,
         value: undefined,
@@ -28387,10 +28389,14 @@ return /******/ (function(modules) { // webpackBootstrap
         var borderRadius = 6;
         ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
+        //draw dashed border if enabled
+        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
         ctx.fill();
 
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
@@ -28488,6 +28494,20 @@ return /******/ (function(modules) { // webpackBootstrap
           ctx.shadowOffsetY = 0;
         }
       }
+    }, {
+      key: 'enableBorderDashes',
+      value: function enableBorderDashes(ctx) {
+        if (this.options.shapeProperties.borderDashes !== false) {
+          ctx.setLineDash(this.options.shapeProperties.borderDashes);
+        }
+      }
+    }, {
+      key: 'disableBorderDashes',
+      value: function disableBorderDashes(ctx) {
+        if (this.options.shapeProperties.borderDashes == false) {
+          ctx.setLineDash([0]);
+        }
+      }
     }]);
 
     return NodeBase;
@@ -28678,18 +28698,17 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
         ctx.lineWidth *= this.networkScaleInv;
         ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
-        if (this.options.dashes) {
-          ctx.setLineDash(this.options.dashes);
-        } else {
-          ctx.setLineDash([0]);
-        }
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
         ctx.circle(x, y, size);
 
+        //draw dashed border if enabled
+        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
         ctx.fill();
 
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
@@ -28907,10 +28926,14 @@ return /******/ (function(modules) { // webpackBootstrap
         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 dashed border if enabled
+        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
         ctx.fill();
 
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
@@ -29068,10 +29091,14 @@ return /******/ (function(modules) { // webpackBootstrap
         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 dashed border if enabled
+        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
         ctx.fill();
 
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
@@ -29228,10 +29255,14 @@ return /******/ (function(modules) { // webpackBootstrap
         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 dashed border if enabled
+        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
         ctx.fill();
 
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
@@ -39656,7 +39687,6 @@ return /******/ (function(modules) { // webpackBootstrap
         y: { boolean: boolean },
         __type__: { object: object, boolean: boolean }
       },
-      dashes: { boolean: boolean, array: array },
       font: {
         color: { string: string },
         size: { number: number }, // px
@@ -39704,6 +39734,10 @@ return /******/ (function(modules) { // webpackBootstrap
         __type__: { object: object, boolean: boolean }
       },
       shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] },
+      shapeProperties: {
+        borderDashes: { boolean: boolean, array: array },
+        __type__: { object: object }
+      },
       size: { number: number },
       title: { string: string, 'undefined': 'undefined' },
       value: { number: number, 'undefined': 'undefined' },
@@ -39798,7 +39832,6 @@ return /******/ (function(modules) { // webpackBootstrap
         x: false,
         y: false
       },
-      dashes: false,
       font: {
         color: ['color', '#343434'],
         size: [14, 0, 100, 1], // px
@@ -39836,6 +39869,9 @@ return /******/ (function(modules) { // webpackBootstrap
         y: [5, -30, 30, 1]
       },
       shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
+      shapeProperties: {
+        borderDashes: false
+      },
       size: [25, 0, 200, 1]
     },
     edges: {

docs/network/nodes.html

@@ -600,7 +600,7 @@ mySize = minSize + diff * scale;
         </tr>
         <tr parent="shapeProperties" class="hidden">
             <td class="indent">shapeProperties.borderDashes</td>
-            <td>Object or Boolean</td>
+            <td>Array or Boolean</td>
             <td><code>false</code></td>
             <td>This property applies to all shapes that have borders.
                 You set the dashes by supplying an Array. Array formart: [dash length, gap length]. 

examples/network/nodeStyles/circularImageWithDashedBorder.html

@@ -1,99 +0,0 @@
-<!doctype html>
-<html>
-  
-  <head>
-    <title>Network | Circular images</title>
-    <style type="text/css">
-      body {
-        font: 10pt arial;
-      }
-      #mynetwork {
-        width: 800px;
-        height: 800px;
-        border: 1px solid lightgray;
-        background-color:#333333;
-      }
-    </style>
-    <script type="text/javascript" src="../../../dist/vis.js"></script>
-    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-    <script type="text/javascript">
-      var DIR = 'img/soft-scraps-icons/';
-  
-      var nodes = null;
-      var edges = null;
-      var network = null;
-  
-      // Called when the Visualization API is loaded.
-      function draw() {
-        // create people.
-        // value corresponds with the age of the person
-        var DIR = '../img/indonesia/';
-        nodes = [
-          {id: 1,  shape: 'circularImage', image: DIR + '1.png'},
-          {id: 2,  shape: 'circularImage', image: DIR + '2.png'},
-          {id: 3,  shape: 'circularImage', image: DIR + '3.png'},
-          {id: 4,  shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!", shapeProperties: {
-            borderDashes:[15,5]
-            }},
-          {id: 5,  shape: 'circularImage', image: DIR + '5.png'},
-          {id: 6,  shape: 'circularImage', image: DIR + '6.png'},
-          {id: 7,  shape: 'circularImage', image: DIR + '7.png'},
-          {id: 8,  shape: 'circularImage', image: DIR + '8.png'},
-          {id: 9,  shape: 'circularImage', image: DIR + '9.png'},
-          {id: 10, shape: 'circularImage', image: DIR + '10.png'},
-          {id: 11, shape: 'circularImage', image: DIR + '11.png'},
-          {id: 12, shape: 'circularImage', image: DIR + '12.png'},
-          {id: 13, shape: 'circularImage', image: DIR + '13.png'},
-          {id: 14, shape: 'circularImage', image: DIR + '14.png'},
-          {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
-        ];
-  
-        // create connections between people
-        // value corresponds with the amount of contact between two people
-        edges = [
-          {from: 1, to: 2},
-          {from: 2, to: 3},
-          {from: 2, to: 4},
-          {from: 4, to: 5},
-          {from: 4, to: 10},
-          {from: 4, to: 6},
-          {from: 6, to: 7},
-          {from: 7, to: 8},
-          {from: 8, to: 9},
-          {from: 8, to: 10},
-          {from: 10, to: 11},
-          {from: 11, to: 12},
-          {from: 12, to: 13},
-          {from: 13, to: 14}
-        ];
-  
-        // create a network
-        var container = document.getElementById('mynetwork');
-        var data = {
-          nodes: nodes,
-          edges: edges
-        };
-        var options = {
-          nodes: {
-            borderWidth:4,
-            size:30,
-  	      color: {
-              border: '#222222',
-              background: '#666666'
-            },
-            font:{color:'#eeeeee'}
-          },
-          edges: {
-            color: 'lightgray'
-          }
-        };
-        network = new vis.Network(container, data, options);
-      }
-    </script>
-  </head>
-  
-  <body onload="draw()">
-    <div id="mynetwork"></div>
-  </body>
-
-</html>

examples/network/nodeStyles/shapesWithDashedBorders.html

@@ -21,28 +21,17 @@
 
     function draw() {
       nodes = [
-        {id: 1,  label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
-        {id: 2,  label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
-        {id: 3,  label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
-        {id: 4,  label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
-        {id: 5,  label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
-        {id: 6,  label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
-        {id: 7,  label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
-        {id: 8,  label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
-        {id: 9,  label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
-        {id: 10, label: 'text',    shape: 'text'},
-        {id: 11, label: 'star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}},
-        {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
-        {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
-        {id: 23, font:{size:30},          label: 'big database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
-        {id: 24, font:{size:30},          label: 'big box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
-        {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
-        {id: 26, font:{size:30}, size:40, label: 'big dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
-        {id: 27, font:{size:30}, size:40, label: 'big square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
-        {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
-        {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
-        {id: 30, font:{size:30},          label: 'big text',    shape: 'text'},
-        {id: 31, font:{size:30}, size:40, label: 'big star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}}
+        {id: 1, font:{size:30},          label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
+        {id: 2, font:{size:30},          label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
+        {id: 3, font:{size:30},          label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
+        {id: 4, font:{size:30},          label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
+        {id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
+        {id: 6, font:{size:30}, size:40, label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
+        {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
+        {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
+        {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
+        {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}},
+        {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
       ];
 
       edges = [

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

@@ -35,10 +35,14 @@ class Box extends NodeBase {
     let borderRadius = 6;
     ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
+    //draw dashed border if enabled
+    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
     ctx.fill();
 
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 

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

@@ -34,10 +34,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 dashed border if enabled
+    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
     ctx.fill();
 
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 

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

@@ -37,10 +37,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 dashed border if enabled
+    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
     ctx.fill();
 
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);