- Added #931, borderRadius in shapeProperties for the box shape.

HISTORY.md

@@ -16,6 +16,7 @@ http://visjs.org
 
 - Fixed #1111, check if edges exist was not correct on update.
 - Fixed #1112, network now works in firefox on unix again.
+- Added #931, borderRadius in shapeProperties for the box shape.
 
 ## 2015-07-20, version 4.5.1
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.5.2-SNAPSHOT
- * @date    2015-07-21
+ * @date    2015-07-22
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -27243,7 +27243,8 @@ return /******/ (function(modules) { // webpackBootstrap
         },
         shape: 'ellipse',
         shapeProperties: {
-          borderDashes: false
+          borderDashes: false,
+          borderRadius: 6
         },
         size: 25,
         title: undefined,
@@ -28511,7 +28512,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
-        var borderRadius = 6;
+        var borderRadius = this.options.shapeProperties.borderRadius;
         ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
         // draw shadow if enabled
@@ -28627,7 +28628,11 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function enableBorderDashes(ctx) {
         if (this.options.shapeProperties.borderDashes !== false) {
           if (ctx.setLineDash !== undefined) {
-            ctx.setLineDash(this.options.shapeProperties.borderDashes);
+            var dashes = this.options.shapeProperties.borderDashes;
+            if (dashes === true) {
+              dashes = [5, 15];
+            }
+            ctx.setLineDash(dashes);
           } else {
             console.warn('setLineDash is not supported in this browser. The dashed borders cannot be used.');
             this.options.shapeProperties.borderDashes = false;
@@ -39901,6 +39906,7 @@ return /******/ (function(modules) { // webpackBootstrap
       shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] },
       shapeProperties: {
         borderDashes: { boolean: boolean, array: array },
+        borderRadius: { number: number },
         __type__: { object: object }
       },
       size: { number: number },
@@ -40035,7 +40041,8 @@ return /******/ (function(modules) { // webpackBootstrap
       },
       shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
       shapeProperties: {
-        borderDashes: false
+        //borderDashes: false,
+        borderRadius: 6
       },
       size: [25, 0, 200, 1]
     },

docs/network/nodes.html

@@ -176,6 +176,10 @@ var options = {
       y:5
     },
     shape: 'ellipse',
+    shapeProperties: {
+      borderDashes: false, // only for shapes with a border
+      borderRadius: 6 // only for box shape
+    }
     size: 25,
     title: undefined,
     value: undefined,
@@ -619,7 +623,15 @@ mySize = minSize + diff * scale;
             <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]. 
+                You set the dashes by supplying an Array. Array formart: [dash length, gap length].
+                You can also use a Boolean, false is disable and true is default [5,15].
+            </td>
+        </tr>
+        <tr parent="shapeProperties" class="hidden">
+            <td class="indent">shapeProperties.borderRadius</td>
+            <td>Number</td>
+            <td><code>6</code></td>
+            <td>This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape.
             </td>
         </tr>
         <tr>

examples/network/nodeStyles/shapesWithDashedBorders.html

@@ -30,7 +30,7 @@
         {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: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
         {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
       ];
 

lib/network/modules/NodesHandler.js

@@ -93,7 +93,8 @@ class NodesHandler {
       },
       shape: 'ellipse',
       shapeProperties: {
-        borderDashes: false
+        borderDashes: false,
+        borderRadius: 6
       },
       size: 25,
       title: undefined,

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

@@ -32,7 +32,7 @@ class Box extends NodeBase {
 
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
 
-    let borderRadius = 6;
+    let borderRadius = this.options.shapeProperties.borderRadius;
     ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
     // draw shadow if enabled

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

@@ -43,7 +43,11 @@ class NodeBase {
   enableBorderDashes(ctx) {
     if (this.options.shapeProperties.borderDashes !== false) {
       if (ctx.setLineDash !== undefined) {
-        ctx.setLineDash(this.options.shapeProperties.borderDashes);
+        let dashes = this.options.shapeProperties.borderDashes;
+        if (dashes === true) {
+          dashes = [5,15]
+        }
+        ctx.setLineDash(dashes);
       }
       else {
         console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");

lib/network/options.js

@@ -210,6 +210,7 @@ let allOptions = {
     shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] },
     shapeProperties: {
       borderDashes: { boolean, array },
+      borderRadius: { number },
       __type__: { object }
     },
     size: { number },
@@ -345,7 +346,8 @@ let configureOptions = {
     },
     shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
     shapeProperties: {
-      borderDashes: false
+      //borderDashes: false,
+      borderRadius: 6,
     },
     size: [25, 0, 200, 1]
   },