diff --git a/HISTORY.md b/HISTORY.md
index d43085ae..2d2918c3 100644
--- a/HISTORY.md
+++ b/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
diff --git a/dist/vis.js b/dist/vis.js
index eb6cc37d..42aa6738 100644
--- a/dist/vis.js
+++ b/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]
},
diff --git a/docs/network/nodes.html b/docs/network/nodes.html
index 79865bca..1b7a638c 100644
--- a/docs/network/nodes.html
+++ b/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;
Array or Boolean |
false |
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].
+ |
+
+
+ shapeProperties.borderRadius |
+ Number |
+ 6 |
+ This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape.
|
diff --git a/examples/network/nodeStyles/shapesWithDashedBorders.html b/examples/network/nodeStyles/shapesWithDashedBorders.html
index 2f0dfc8c..9ba68e86 100644
--- a/examples/network/nodeStyles/shapesWithDashedBorders.html
+++ b/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]}},
];
diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js
index d8e16a67..5d0899c9 100644
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@@ -93,7 +93,8 @@ class NodesHandler {
},
shape: 'ellipse',
shapeProperties: {
- borderDashes: false
+ borderDashes: false,
+ borderRadius: 6
},
size: 25,
title: undefined,
diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js
index 30326562..91d1392c 100644
--- a/lib/network/modules/components/nodes/shapes/Box.js
+++ b/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
diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js
index 8c86dd65..a5f74167 100644
--- a/lib/network/modules/components/nodes/util/NodeBase.js
+++ b/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.");
diff --git a/lib/network/options.js b/lib/network/options.js
index 3421f492..47e1e5aa 100644
--- a/lib/network/options.js
+++ b/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]
},