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] },