Browse Source

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

flowchartTest
Alex de Mulder 8 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 #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

+ 12
- 5
dist/vis.js View File

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

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

@ -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>

+ 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: 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]}},
];

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

@ -93,7 +93,8 @@ class NodesHandler {
},
shape: 'ellipse',
shapeProperties: {
borderDashes: false
borderDashes: false,
borderRadius: 6
},
size: 25,
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;
let borderRadius = 6;
let borderRadius = this.options.shapeProperties.borderRadius;
ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
// draw shadow if enabled

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

@ -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.");

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

Loading…
Cancel
Save