Browse Source

Corrected the shapeProperties.borderDashes property type description

Changed shapeProperties.borderDashes type description from "Object or Boolean" to Array or Boolean".
Merged circularImageWithDashedBorder example into shapesWithDashedBorders example.
Added enableBorderDashes and disableBorderDashes function calls to Database.js, Ellipse.js and Box.js, to enable/disable dashed borders.
flowchartTest
Zuko Mgwili 9 years ago
parent
commit
27a875a690
9 changed files with 79 additions and 141 deletions
  1. +45
    -9
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +9
    -9
      dist/vis.min.js
  4. +1
    -1
      docs/network/nodes.html
  5. +0
    -99
      examples/network/nodeStyles/circularImageWithDashedBorder.html
  6. +11
    -22
      examples/network/nodeStyles/shapesWithDashedBorders.html
  7. +4
    -0
      lib/network/modules/components/nodes/shapes/Box.js
  8. +4
    -0
      lib/network/modules/components/nodes/shapes/Database.js
  9. +4
    -0
      lib/network/modules/components/nodes/shapes/Ellipse.js

+ 45
- 9
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 4.4.1-SNAPSHOT * @version 4.4.1-SNAPSHOT
* @date 2015-07-07
* @date 2015-07-08
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -27082,7 +27082,6 @@ return /******/ (function(modules) { // webpackBootstrap
x: false, x: false,
y: false y: false
}, },
dashes: false,
font: { font: {
color: '#343434', color: '#343434',
size: 14, // px size: 14, // px
@ -27132,6 +27131,9 @@ return /******/ (function(modules) { // webpackBootstrap
y: 5 y: 5
}, },
shape: 'ellipse', shape: 'ellipse',
shapeProperties: {
borderDashes: false
},
size: 25, size: 25,
title: undefined, title: undefined,
value: undefined, value: undefined,
@ -28387,10 +28389,14 @@ return /******/ (function(modules) { // webpackBootstrap
var borderRadius = 6; var borderRadius = 6;
ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius); ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);
@ -28488,6 +28494,20 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.shadowOffsetY = 0; ctx.shadowOffsetY = 0;
} }
} }
}, {
key: 'enableBorderDashes',
value: function enableBorderDashes(ctx) {
if (this.options.shapeProperties.borderDashes !== false) {
ctx.setLineDash(this.options.shapeProperties.borderDashes);
}
}
}, {
key: 'disableBorderDashes',
value: function disableBorderDashes(ctx) {
if (this.options.shapeProperties.borderDashes == false) {
ctx.setLineDash([0]);
}
}
}]); }]);
return NodeBase; return NodeBase;
@ -28678,18 +28698,17 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.lineWidth = selected ? selectionLineWidth : borderWidth; ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth); ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
if (this.options.dashes) {
ctx.setLineDash(this.options.dashes);
} else {
ctx.setLineDash([0]);
}
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;
ctx.circle(x, y, size); ctx.circle(x, y, size);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);
@ -28907,10 +28926,14 @@ 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;
ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height); ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);
@ -29068,10 +29091,14 @@ 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;
ctx[shape](x, y, this.options.size); ctx[shape](x, y, this.options.size);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);
@ -29228,10 +29255,14 @@ 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;
ctx.ellipse(this.left, this.top, this.width, this.height); ctx.ellipse(this.left, this.top, this.width, this.height);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);
@ -39656,7 +39687,6 @@ return /******/ (function(modules) { // webpackBootstrap
y: { boolean: boolean }, y: { boolean: boolean },
__type__: { object: object, boolean: boolean } __type__: { object: object, boolean: boolean }
}, },
dashes: { boolean: boolean, array: array },
font: { font: {
color: { string: string }, color: { string: string },
size: { number: number }, // px size: { number: number }, // px
@ -39704,6 +39734,10 @@ return /******/ (function(modules) { // webpackBootstrap
__type__: { object: object, boolean: boolean } __type__: { object: object, boolean: boolean }
}, },
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: {
borderDashes: { boolean: boolean, array: array },
__type__: { object: object }
},
size: { number: number }, size: { number: number },
title: { string: string, 'undefined': 'undefined' }, title: { string: string, 'undefined': 'undefined' },
value: { number: number, 'undefined': 'undefined' }, value: { number: number, 'undefined': 'undefined' },
@ -39798,7 +39832,6 @@ return /******/ (function(modules) { // webpackBootstrap
x: false, x: false,
y: false y: false
}, },
dashes: false,
font: { font: {
color: ['color', '#343434'], color: ['color', '#343434'],
size: [14, 0, 100, 1], // px size: [14, 0, 100, 1], // px
@ -39836,6 +39869,9 @@ return /******/ (function(modules) { // webpackBootstrap
y: [5, -30, 30, 1] y: [5, -30, 30, 1]
}, },
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: {
borderDashes: false
},
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },
edges: { edges: {

+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 9
- 9
dist/vis.min.js
File diff suppressed because it is too large
View File


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

@ -600,7 +600,7 @@ mySize = minSize + diff * scale;
</tr> </tr>
<tr parent="shapeProperties" class="hidden"> <tr parent="shapeProperties" class="hidden">
<td class="indent">shapeProperties.borderDashes</td> <td class="indent">shapeProperties.borderDashes</td>
<td>Object 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].

+ 0
- 99
examples/network/nodeStyles/circularImageWithDashedBorder.html View File

@ -1,99 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Circular images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
background-color:#333333;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = '../img/indonesia/';
nodes = [
{id: 1, shape: 'circularImage', image: DIR + '1.png'},
{id: 2, shape: 'circularImage', image: DIR + '2.png'},
{id: 3, shape: 'circularImage', image: DIR + '3.png'},
{id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!", shapeProperties: {
borderDashes:[15,5]
}},
{id: 5, shape: 'circularImage', image: DIR + '5.png'},
{id: 6, shape: 'circularImage', image: DIR + '6.png'},
{id: 7, shape: 'circularImage', image: DIR + '7.png'},
{id: 8, shape: 'circularImage', image: DIR + '8.png'},
{id: 9, shape: 'circularImage', image: DIR + '9.png'},
{id: 10, shape: 'circularImage', image: DIR + '10.png'},
{id: 11, shape: 'circularImage', image: DIR + '11.png'},
{id: 12, shape: 'circularImage', image: DIR + '12.png'},
{id: 13, shape: 'circularImage', image: DIR + '13.png'},
{id: 14, shape: 'circularImage', image: DIR + '14.png'},
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 4, to: 5},
{from: 4, to: 10},
{from: 4, to: 6},
{from: 6, to: 7},
{from: 7, to: 8},
{from: 8, to: 9},
{from: 8, to: 10},
{from: 10, to: 11},
{from: 11, to: 12},
{from: 12, to: 13},
{from: 13, to: 14}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:4,
size:30,
color: {
border: '#222222',
background: '#666666'
},
font:{color:'#eeeeee'}
},
edges: {
color: 'lightgray'
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>

+ 11
- 22
examples/network/nodeStyles/shapesWithDashedBorders.html View File

@ -21,28 +21,17 @@
function draw() { function draw() {
nodes = [ nodes = [
{id: 1, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
{id: 2, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
{id: 3, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
{id: 4, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
{id: 5, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
{id: 6, label: 'dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
{id: 7, label: 'square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
{id: 8, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
{id: 9, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
{id: 10, label: 'text', shape: 'text'},
{id: 11, label: 'star', shape: 'star', shapeProperties:{borderDashes:[5,5]}},
{id: 21, font:{size:30}, label: 'big circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
{id: 22, font:{size:30}, label: 'big ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
{id: 23, font:{size:30}, label: 'big database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
{id: 24, font:{size:30}, label: 'big box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
{id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
{id: 26, font:{size:30}, size:40, label: 'big dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
{id: 27, font:{size:30}, size:40, label: 'big square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
{id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
{id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
{id: 30, font:{size:30}, label: 'big text', shape: 'text'},
{id: 31, font:{size:30}, size:40, label: 'big star', shape: 'star', shapeProperties:{borderDashes:[5,5]}}
{id: 1, font:{size:30}, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
{id: 2, font:{size:30}, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
{id: 3, font:{size:30}, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
{id: 4, font:{size:30}, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
{id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
{id: 6, font:{size:30}, size:40, label: 'dot', shape: 'dot', 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: 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: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
]; ];
edges = [ edges = [

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

@ -35,10 +35,14 @@ class Box extends NodeBase {
let borderRadius = 6; let borderRadius = 6;
ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius); ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);

+ 4
- 0
lib/network/modules/components/nodes/shapes/Database.js View File

@ -34,10 +34,14 @@ class Database 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;
ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height); ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);

+ 4
- 0
lib/network/modules/components/nodes/shapes/Ellipse.js View File

@ -37,10 +37,14 @@ class Ellipse 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;
ctx.ellipse(this.left, this.top, this.width, this.height); ctx.ellipse(this.left, this.top, this.width, this.height);
//draw dashed border if enabled
this.enableBorderDashes(ctx);
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
ctx.fill(); ctx.fill();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
// disable shadows for other elements. // disable shadows for other elements.
this.disableShadow(ctx); this.disableShadow(ctx);

Loading…
Cancel
Save