Browse Source

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

flowchartTest
Alex de Mulder 9 years ago
parent
commit
469b3b9ee2
8 changed files with 38 additions and 11 deletions
  1. +1
    -0
      HISTORY.md
  2. +12
    -5
      dist/vis.js
  3. +13
    -1
      docs/network/nodes.html
  4. +1
    -1
      examples/network/nodeStyles/shapesWithDashedBorders.html
  5. +2
    -1
      lib/network/modules/NodesHandler.js
  6. +1
    -1
      lib/network/modules/components/nodes/shapes/Box.js
  7. +5
    -1
      lib/network/modules/components/nodes/util/NodeBase.js
  8. +3
    -1
      lib/network/options.js

+ 1
- 0
HISTORY.md View File

@ -16,6 +16,7 @@ http://visjs.org
- Fixed #1111, check if edges exist was not correct on update. - Fixed #1111, check if edges exist was not correct on update.
- Fixed #1112, network now works in firefox on unix again. - 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 ## 2015-07-20, version 4.5.1

+ 12
- 5
dist/vis.js View File

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

+ 13
- 1
docs/network/nodes.html View File

@ -176,6 +176,10 @@ var options = {
y:5 y:5
}, },
shape: 'ellipse', shape: 'ellipse',
shapeProperties: {
borderDashes: false, // only for shapes with a border
borderRadius: 6 // only for box shape
}
size: 25, size: 25,
title: undefined, title: undefined,
value: undefined, value: undefined,
@ -619,7 +623,15 @@ mySize = minSize + diff * scale;
<td>Array or Boolean</td> <td>Array or Boolean</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>This property applies to all shapes that have borders. <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> </td>
</tr> </tr>
<tr> <tr>

+ 1
- 1
examples/network/nodeStyles/shapesWithDashedBorders.html View File

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

+ 2
- 1
lib/network/modules/NodesHandler.js View File

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

+ 1
- 1
lib/network/modules/components/nodes/shapes/Box.js View File

@ -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; 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); ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
// draw shadow if enabled // draw shadow if enabled

+ 5
- 1
lib/network/modules/components/nodes/util/NodeBase.js View File

@ -43,7 +43,11 @@ class NodeBase {
enableBorderDashes(ctx) { enableBorderDashes(ctx) {
if (this.options.shapeProperties.borderDashes !== false) { if (this.options.shapeProperties.borderDashes !== false) {
if (ctx.setLineDash !== undefined) { 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 { else {
console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used."); console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");

+ 3
- 1
lib/network/options.js View File

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

Loading…
Cancel
Save