Browse Source

added images with borders and updated the manipulation css

webworkersNetwork
Alex de Mulder 9 years ago
parent
commit
11318647fe
10 changed files with 241 additions and 139 deletions
  1. +9
    -8
      dist/vis.css
  2. +36
    -2
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +13
    -2
      docs/network/nodes.html
  5. +105
    -0
      examples/network/nodeStyles/imagesWithBorders.html
  6. +9
    -8
      lib/network/css/network-manipulation.css
  7. +2
    -1
      lib/network/modules/NodesHandler.js
  8. +35
    -0
      lib/network/modules/components/nodes/shapes/Image.js
  9. +1
    -0
      lib/network/options.js
  10. +30
    -117
      test/networkTest.html

+ 9
- 8
dist/vis.css View File

@ -903,17 +903,18 @@ div.vis-network div.vis-manipulation {
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
padding-top:4px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 30px;
height: 28px;
} }
div.vis-network div.vis-edit-mode { div.vis-network div.vis-edit-mode {
position:absolute; position:absolute;
left: 0; left: 0;
top: 15px;
top: 5px;
height: 30px; height: 30px;
} }
@ -944,8 +945,7 @@ div.vis-network div.vis-close:hover {
div.vis-network div.vis-manipulation div.vis-button, div.vis-network div.vis-manipulation div.vis-button,
div.vis-network div.vis-edit-mode div.vis-button { div.vis-network div.vis-edit-mode div.vis-button {
position:relative;
top:-7px;
float:left;
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
@ -954,8 +954,8 @@ div.vis-network div.vis-edit-mode div.vis-button {
background-position: 0px 0px; background-position: 0px 0px;
background-repeat:no-repeat; background-repeat:no-repeat;
height:24px; height:24px;
margin: 0px 0px 0px 10px;
vertical-align:middle;
margin-left: 10px;
/*vertical-align:middle;*/
cursor: pointer; cursor: pointer;
padding: 0px 8px 0px 8px; padding: 0px 8px 0px 8px;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -1021,11 +1021,12 @@ div.vis-network div.vis-edit-mode div.vis-label {
line-height: 25px; line-height: 25px;
} }
div.vis-network div.vis-manipulation div.vis-separator-line { div.vis-network div.vis-manipulation div.vis-separator-line {
float:left;
display:inline-block; display:inline-block;
width:1px; width:1px;
height:20px;
height:21px;
background-color: #bdbdbd; background-color: #bdbdbd;
margin: 5px 7px 0 15px;
margin: 0px 7px 0 15px; /*top right bottom left*/
} }
/* TODO: is this redundant? /* TODO: is this redundant?

+ 36
- 2
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 4.8.3-SNAPSHOT * @version 4.8.3-SNAPSHOT
* @date 2015-09-18
* @date 2015-09-21
* *
* @license * @license
* Copyright (C) 2011-2015 Almende B.V, http://almende.com * Copyright (C) 2011-2015 Almende B.V, http://almende.com
@ -27792,7 +27792,8 @@ return /******/ (function(modules) { // webpackBootstrap
shapeProperties: { shapeProperties: {
borderDashes: false, // only for borders borderDashes: false, // only for borders
borderRadius: 6, // only for box shape borderRadius: 6, // only for box shape
useImageSize: false // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false // only for image shape
}, },
size: 25, size: 25,
title: undefined, title: undefined,
@ -30205,6 +30206,38 @@ return /******/ (function(modules) { // webpackBootstrap
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 2; this.top = y - this.height / 2;
if (this.options.shapeProperties.useBorderWithImage === true) {
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.beginPath();
// setup the line properties.
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
ctx.lineWidth /= this.body.view.scale;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
// set a fillstyle
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
// draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
ctx.rect(this.left - 0.5 * ctx.lineWidth, this.top - 0.5 * ctx.lineWidth, this.width + ctx.lineWidth, this.height + ctx.lineWidth);
ctx.fill();
//draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save();
this.enableBorderDashes(ctx);
//draw the border
ctx.stroke();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
ctx.restore();
ctx.closePath();
}
this._drawImageAtPosition(ctx); this._drawImageAtPosition(ctx);
this._drawImageLabel(ctx, x, y, selected || hover); this._drawImageLabel(ctx, x, y, selected || hover);
@ -41188,6 +41221,7 @@ return /******/ (function(modules) { // webpackBootstrap
borderDashes: { boolean: boolean, array: array }, borderDashes: { boolean: boolean, array: array },
borderRadius: { number: number }, borderRadius: { number: number },
useImageSize: { boolean: boolean }, useImageSize: { boolean: boolean },
useBorderWithImage: { boolean: boolean },
__type__: { object: object } __type__: { object: object }
}, },
size: { number: number }, size: { number: number },

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


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

@ -177,8 +177,10 @@ var options = {
}, },
shape: 'ellipse', shape: 'ellipse',
shapeProperties: { shapeProperties: {
borderDashes: false, // only for shapes with a border
borderRadius: 6 // only for box shape
borderDashes: false, // only for borders
borderRadius: 6, // only for box shape
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false // only for image shape
} }
size: 25, size: 25,
title: undefined, title: undefined,
@ -644,6 +646,15 @@ mySize = minSize + diff * scale;
if this is set to true, the image cannot be scaled with the value option!</i> if this is set to true, the image cannot be scaled with the value option!</i>
</td> </td>
</tr> </tr>
<tr parent="shapeProperties" class="hidden">
<td class="indent">shapeProperties.useBorderWithImage</td>
<td>Boolean</td>
<td><code>false</code></td>
<td>This property only applies to the <code>image</code> shape.
When true, the color object is used. A rectangle with the background color is
drawn behind it and it has a border. This means all border options are taken into account.
</td>
</tr>
<tr> <tr>
<td>size</td> <td>size</td>
<td>Number</td> <td>Number</td>

+ 105
- 0
examples/network/nodeStyles/imagesWithBorders.html View File

@ -0,0 +1,105 @@
<!doctype html>
<html>
<head>
<title>Network | Images With Borders</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: 'image', image: DIR + '1.png'},
{id: 2, shape: 'image', image: DIR + '2.png'},
{id: 3, shape: 'image', image: DIR + '3.png'},
{id: 4, shape: 'image', image: DIR + '4.png', label:"pictures by this guy!"},
{id: 5, shape: 'image', image: DIR + '5.png'},
{id: 6, shape: 'image', image: DIR + '6.png'},
{id: 7, shape: 'image', image: DIR + '7.png'},
{id: 8, shape: 'image', image: DIR + '8.png'},
{id: 9, shape: 'image', image: DIR + '9.png'},
{id: 10, shape: 'image', image: DIR + '10.png'},
{id: 11, shape: 'image', image: DIR + '11.png'},
{id: 12, shape: 'image', image: DIR + '12.png'},
{id: 13, shape: 'image', image: DIR + '13.png'},
{id: 14, shape: 'image', image: DIR + '14.png'},
{id: 15, shape: 'image', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
{id: 16, shape: 'image', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
];
// 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},
{from: 9, to: 16}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:4,
size:30,
color: {
border: '#406897',
background: '#6AAFFF'
},
font:{color:'#eeeeee'},
shapeProperties: {
useBorderWithImage:true
}
},
edges: {
color: 'lightgray'
}
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>

+ 9
- 8
lib/network/css/network-manipulation.css View File

@ -12,17 +12,18 @@ div.vis-network div.vis-manipulation {
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
padding-top:4px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 30px;
height: 28px;
} }
div.vis-network div.vis-edit-mode { div.vis-network div.vis-edit-mode {
position:absolute; position:absolute;
left: 0; left: 0;
top: 15px;
top: 5px;
height: 30px; height: 30px;
} }
@ -53,8 +54,7 @@ div.vis-network div.vis-close:hover {
div.vis-network div.vis-manipulation div.vis-button, div.vis-network div.vis-manipulation div.vis-button,
div.vis-network div.vis-edit-mode div.vis-button { div.vis-network div.vis-edit-mode div.vis-button {
position:relative;
top:-7px;
float:left;
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
@ -63,8 +63,8 @@ div.vis-network div.vis-edit-mode div.vis-button {
background-position: 0px 0px; background-position: 0px 0px;
background-repeat:no-repeat; background-repeat:no-repeat;
height:24px; height:24px;
margin: 0px 0px 0px 10px;
vertical-align:middle;
margin-left: 10px;
/*vertical-align:middle;*/
cursor: pointer; cursor: pointer;
padding: 0px 8px 0px 8px; padding: 0px 8px 0px 8px;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -130,11 +130,12 @@ div.vis-network div.vis-edit-mode div.vis-label {
line-height: 25px; line-height: 25px;
} }
div.vis-network div.vis-manipulation div.vis-separator-line { div.vis-network div.vis-manipulation div.vis-separator-line {
float:left;
display:inline-block; display:inline-block;
width:1px; width:1px;
height:20px;
height:21px;
background-color: #bdbdbd; background-color: #bdbdbd;
margin: 5px 7px 0 15px;
margin: 0px 7px 0 15px; /*top right bottom left*/
} }
/* TODO: is this redundant? /* TODO: is this redundant?

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

@ -95,7 +95,8 @@ class NodesHandler {
shapeProperties: { shapeProperties: {
borderDashes: false, // only for borders borderDashes: false, // only for borders
borderRadius: 6, // only for box shape borderRadius: 6, // only for box shape
useImageSize: false // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false // only for image shape
}, },
size: 25, size: 25,
title: undefined, title: undefined,

+ 35
- 0
lib/network/modules/components/nodes/shapes/Image.js View File

@ -17,6 +17,41 @@ class Image extends CircleImageBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 2; this.top = y - this.height / 2;
if (this.options.shapeProperties.useBorderWithImage === true) {
let borderWidth = this.options.borderWidth;
let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.beginPath();
// setup the line properties.
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
ctx.lineWidth = (selected ? selectionLineWidth : borderWidth);
ctx.lineWidth /= this.body.view.scale;
ctx.lineWidth = Math.min(this.width, ctx.lineWidth);
// set a fillstyle
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
// draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
ctx.rect(this.left - 0.5 * ctx.lineWidth,
this.top - 0.5 * ctx.lineWidth,
this.width + ctx.lineWidth,
this.height + ctx.lineWidth);
ctx.fill();
//draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save();
this.enableBorderDashes(ctx);
//draw the border
ctx.stroke();
//disable dashed border for other elements
this.disableBorderDashes(ctx);
ctx.restore();
ctx.closePath();
}
this._drawImageAtPosition(ctx); this._drawImageAtPosition(ctx);
this._drawImageLabel(ctx, x, y, selected || hover); this._drawImageLabel(ctx, x, y, selected || hover);

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

@ -214,6 +214,7 @@ let allOptions = {
borderDashes: { boolean, array }, borderDashes: { boolean, array },
borderRadius: { number }, borderRadius: { number },
useImageSize: { boolean }, useImageSize: { boolean },
useBorderWithImage: { boolean },
__type__: { object } __type__: { object }
}, },
size: { number }, size: { number },

+ 30
- 117
test/networkTest.html View File

@ -19,129 +19,42 @@
<p> <p>
Create a simple network with some nodes and edges. Create a simple network with some nodes and edges.
</p> </p>
<div id="tools"><button onclick="addNodeFunc();">Add node</button></div>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var network = null;
var nodes = null;
var edges = null;
var _counter = 0;
var initTest = function() {
console.log('initialized...');
var test = document.getElementById('mynetwork');
nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
var data = {
nodes: nodes,
edges: edges
};
var config = {
locale: 'pl',
edges: {
labelHighlightBold: false,
smooth: {type: 'horizontal'},
arrows: {
to: {enabled: true, scaleFactor: 0.5}
},
font: {
color: 'black',
strokeColor: 'white',
size: 11,
face: 'tahoma',
strokeWidth: 2,
align: 'top'
},
color: {
highlight: '#EDB100'
}
},
nodes: {
borderWidth: 1,
shape: 'box',
shapeProperties: {borderRadius: 3},
color: {
border: '#C10600',
background: '#600300',
highlight: {
border: '#EDB100',
background: '#A57400'
}
},
font: '11px tahoma white',
scaling: {
min: 2,
max: 1,
label: {enabled: false}
}
},
manipulation: {
enabled: false,
initiallyActive: false,
deleteEdge: false,
controlNodeStyle: {
fixed: true,
color: {
border: '#000C7C',
background: '#7280FF'
}
}
},
interaction: {
zoomView: false,
selectConnectedEdges: false
},
physics: {
enabled: false, //propably this is problem, on true is ok o.o
adaptiveTimestep: false,
stabilization: {
enabled: true,
updateInterval: 10
},
barnesHut: {
gravitationalConstant: -20000,
centralGravity: 0.25,
springLength: 50
}
}
};
network = new vis.Network(test, data, config);
_nodes = new vis.DataSet();
_triples = new vis.DataSet();
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
}; };
var addNodeFunc = function() {
var pos = network.getViewPosition();
console.log(pos);
nodes.add(
{
x: pos.x,
y: pos.y
});
};
initTest()
var options = {manipulation:{
initiallyActive:true,
addNode: false,
// addEdge: false
// editNode: true
}};
var network = new vis.Network(container, data, options);
</script> </script>
<script src="../googleAnalytics.js"></script>
</body> </body>
</html> </html>

Loading…
Cancel
Save