Browse Source

fixed images, groups, circular images, repeating events

flowchartTest
Alex de Mulder 9 years ago
parent
commit
9cd6c4ae06
13 changed files with 5573 additions and 5639 deletions
  1. +5490
    -5518
      dist/vis.js
  2. +10
    -17
      examples/network/06_groups.html
  3. +3
    -2
      examples/network/34_circular_images.html
  4. +4
    -10
      lib/network/Images.js
  5. +9
    -57
      lib/network/Network.js
  6. +9
    -5
      lib/network/modules/EdgesHandler.js
  7. +11
    -7
      lib/network/modules/NodesHandler.js
  8. +17
    -18
      lib/network/modules/View.js
  9. +0
    -2
      lib/network/modules/components/Node.js
  10. +1
    -1
      lib/network/modules/components/nodes/shapes/circularImage.js
  11. +0
    -1
      lib/network/modules/components/nodes/util/drawUtil.js
  12. +1
    -1
      lib/network/modules/components/unified/label.js
  13. +18
    -0
      lib/util.js

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


+ 10
- 17
examples/network/06_groups.html View File

@ -5,17 +5,18 @@
<style> <style>
body { body {
font: 10pt arial;
color:#ffffff;
font: 10pt arial;
background-color:#222222;
} }
#mynetwork { #mynetwork {
width: 1900px;
height: 900px;
width: 600px;
height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
background-color:#222222; background-color:#222222;
} }
</style> </style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
@ -25,11 +26,6 @@
var network = null; var network = null;
var nodesData = null; var nodesData = null;
google.load('visualization', '1');
// Set callback to run when API is loaded
google.setOnLoadCallback(draw);
function destroy() { function destroy() {
if (network !== null) { if (network !== null) {
network.destroy(); network.destroy();
@ -37,7 +33,6 @@
} }
} }
// Called when the Visualization API is loaded.
function draw() { function draw() {
destroy(); destroy();
@ -140,14 +135,12 @@
edges: edges edges: edges
}; };
var options = { var options = {
stabilize: true,
nodes: { nodes: {
shape: 'dot',
shape: 'dot',
radius:30, radius:30,
fontColor:'#ffffff',
font:{color:'#ffffff'},
borderWidth:2 borderWidth:2
},
physics: {barnesHut:{springLength: 100}}
}
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
@ -158,9 +151,9 @@
<body onload="draw()"> <body onload="draw()">
<form onsubmit= "javascript: draw(); return false;"> <form onsubmit= "javascript: draw(); return false;">
Number of groups: Number of groups:
<input type="text" value="20" id="groupCount" style="width: 50px;">
<input type="text" value="10" id="groupCount" style="width: 50px;">
Number of nodes per group: Number of nodes per group:
<input type="text" value="1" id="nodeCount" style="width: 50px;">
<input type="text" value="3" id="nodeCount" style="width: 50px;">
<input type="submit" value="Go"> <input type="submit" value="Go">
</form> </form>
<br> <br>

+ 3
- 2
examples/network/34_circular_images.html View File

@ -65,7 +65,7 @@
{from: 11, to: 12}, {from: 11, to: 12},
{from: 12, to: 13}, {from: 12, to: 13},
{from: 13, to: 14}, {from: 13, to: 14},
{from: 14, to: 15}
// {from: 14, to: 15}
]; ];
// create a network // create a network
@ -77,11 +77,12 @@
var options = { var options = {
nodes: { nodes: {
borderWidth:4, borderWidth:4,
size:30,
color: { color: {
border: '#222222', border: '#222222',
background: '#666666' background: '#666666'
}, },
fontColor:'#eeeeee'
font:{color:'#eeeeee'}
}, },
edges: { edges: {
color: 'lightgray' color: 'lightgray'

+ 4
- 10
lib/network/Images.js View File

@ -45,16 +45,10 @@ Images.prototype.load = function(url, brokenUrl) {
} }
else { else {
if (me.imageBroken[url] === true) { if (me.imageBroken[url] === true) {
if (this.src == brokenUrl) {
console.error("Could not load brokenImage:", brokenUrl);
delete this.src;
if (me.callback) {
me.callback(this);
}
}
else {
console.error("Could not load image:", url);
this.src = brokenUrl;
console.error("Could not load brokenImage:", brokenUrl);
delete this.src;
if (me.callback) {
me.callback(this);
} }
} }
else { else {

+ 9
- 57
lib/network/Network.js View File

@ -118,8 +118,6 @@ function Network (container, data, options) {
this.nodesHandler = new NodesHandler(this.body, images, groups, this.layoutEngine); // Handle adding, deleting and updating of nodes as well as global options this.nodesHandler = new NodesHandler(this.body, images, groups, this.layoutEngine); // Handle adding, deleting and updating of nodes as well as global options
this.edgesHandler = new EdgesHandler(this.body, images, groups); // Handle adding, deleting and updating of edges as well as global options this.edgesHandler = new EdgesHandler(this.body, images, groups); // Handle adding, deleting and updating of edges as well as global options
// this event will trigger a rebuilding of the cache everything. Used when nodes or edges have been added or removed. // this event will trigger a rebuilding of the cache everything. Used when nodes or edges have been added or removed.
this.body.emitter.on("_dataChanged", (params) => { this.body.emitter.on("_dataChanged", (params) => {
var t0 = new Date().valueOf(); var t0 = new Date().valueOf();
@ -238,10 +236,13 @@ Network.prototype.setData = function(data) {
} }
} }
else { else {
this.nodesHandler.setData(data && data.nodes);
this.edgesHandler.setData(data && data.edges);
this.nodesHandler.setData(data && data.nodes, true);
this.edgesHandler.setData(data && data.edges, true);
} }
// emit change in data
this.body.emitter.emit("_dataChanged");
// find a stable position or start animating to a stable position // find a stable position or start animating to a stable position
this.body.emitter.emit("initPhysics"); this.body.emitter.emit("initPhysics");
}; };
@ -347,7 +348,7 @@ Network.prototype.destroy = function() {
this.body.emitter.off(); this.body.emitter.off();
// remove the container and everything inside it recursively // remove the container and everything inside it recursively
this.util.recursiveDOMDelete(this.body.container);
util.recursiveDOMDelete(this.body.container);
}; };
@ -549,49 +550,13 @@ Network.prototype._updateValueRange = function(obj) {
}; };
/**
* Set the translation of the network
* @param {Number} offsetX Horizontal offset
* @param {Number} offsetY Vertical offset
* @private
*/
Network.prototype._setTranslation = function(offsetX, offsetY) {
if (this.translation === undefined) {
this.translation = {
x: 0,
y: 0
};
}
if (offsetX !== undefined) {
this.translation.x = offsetX;
}
if (offsetY !== undefined) {
this.translation.y = offsetY;
}
this.emit('viewChanged');
};
/**
* Get the translation of the network
* @return {Object} translation An object with parameters x and y, both a number
* @private
*/
Network.prototype._getTranslation = function() {
return {
x: this.translation.x,
y: this.translation.y
};
};
/** /**
* Scale the network * Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled * @param {Number} scale Scaling factor 1.0 is unscaled
* @private * @private
*/ */
Network.prototype._setScale = function(scale) { Network.prototype._setScale = function(scale) {
this.scale = scale;
this.body.view.scale = scale;
}; };
/** /**
@ -600,21 +565,7 @@ Network.prototype._setScale = function(scale) {
* @private * @private
*/ */
Network.prototype._getScale = function() { Network.prototype._getScale = function() {
return this.scale;
};
/**
* load the functions that load the mixins into the prototype.
*
* @private
*/
Network.prototype._initializeMixinLoaders = function () {
for (var mixin in MixinLoader) {
if (MixinLoader.hasOwnProperty(mixin)) {
Network.prototype[mixin] = MixinLoader[mixin];
}
}
return this.body.view.scale;
}; };
@ -622,6 +573,7 @@ Network.prototype._initializeMixinLoaders = function () {
* Load the XY positions of the nodes into the dataset. * Load the XY positions of the nodes into the dataset.
*/ */
Network.prototype.storePositions = function() { Network.prototype.storePositions = function() {
// todo: incorporate fixed instead of allowedtomove, add support for clusters and hierarchical.
var dataArray = []; var dataArray = [];
for (var nodeId in this.body.nodes) { for (var nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) { if (this.body.nodes.hasOwnProperty(nodeId)) {

+ 9
- 5
lib/network/modules/EdgesHandler.js View File

@ -119,7 +119,7 @@ class EdgesHandler {
* @private * @private
* @private * @private
*/ */
setData(edges) {
setData(edges, doNotEmit = false) {
var oldEdgesData = this.body.data.edges; var oldEdgesData = this.body.data.edges;
if (edges instanceof DataSet || edges instanceof DataView) { if (edges instanceof DataSet || edges instanceof DataView) {
@ -152,10 +152,12 @@ class EdgesHandler {
// draw all new nodes // draw all new nodes
var ids = this.body.data.edges.getIds(); var ids = this.body.data.edges.getIds();
this.add(ids);
this.add(ids, true);
} }
this.body.emitter.emit("_dataChanged");
if (doNotEmit === false) {
this.body.emitter.emit("_dataChanged");
}
} }
@ -164,7 +166,7 @@ class EdgesHandler {
* @param {Number[] | String[]} ids * @param {Number[] | String[]} ids
* @private * @private
*/ */
add(ids) {
add(ids, doNotEmit = false) {
var edges = this.body.edges; var edges = this.body.edges;
var edgesData = this.body.data.edges; var edgesData = this.body.data.edges;
@ -180,7 +182,9 @@ class EdgesHandler {
edges[id] = this.create(data); edges[id] = this.create(data);
} }
this.body.emitter.emit("_dataChanged");
if (doNotEmit === false) {
this.body.emitter.emit("_dataChanged");
}
} }

+ 11
- 7
lib/network/modules/NodesHandler.js View File

@ -87,12 +87,11 @@ class NodesHandler {
} }
}, },
shape: 'ellipse', shape: 'ellipse',
size: 10,
size: 25,
value: 1 value: 1
}; };
util.extend(this.options, this.defaultOptions); util.extend(this.options, this.defaultOptions);
this.setOptions(options);
} }
setOptions(options) { setOptions(options) {
@ -110,7 +109,7 @@ class NodesHandler {
* @param {Array | DataSet | DataView} nodes The data containing the nodes. * @param {Array | DataSet | DataView} nodes The data containing the nodes.
* @private * @private
*/ */
setData(nodes) {
setData(nodes, doNotEmit = false) {
var oldNodesData = this.body.data.nodes; var oldNodesData = this.body.data.nodes;
if (nodes instanceof DataSet || nodes instanceof DataView) { if (nodes instanceof DataSet || nodes instanceof DataView) {
@ -146,9 +145,12 @@ class NodesHandler {
// draw all new nodes // draw all new nodes
var ids = this.body.data.nodes.getIds(); var ids = this.body.data.nodes.getIds();
this.add(ids);
this.add(ids, true);
}
if (doNotEmit === false) {
this.body.emitter.emit("_dataChanged");
} }
this.body.emitter.emit("_dataChanged");
} }
@ -157,7 +159,7 @@ class NodesHandler {
* @param {Number[] | String[]} ids * @param {Number[] | String[]} ids
* @private * @private
*/ */
add(ids) {
add(ids, doNotEmit = false) {
var id; var id;
var newNodes = []; var newNodes = [];
for (var i = 0; i < ids.length; i++) { for (var i = 0; i < ids.length; i++) {
@ -170,7 +172,9 @@ class NodesHandler {
this.layoutEngine.positionInitially(newNodes); this.layoutEngine.positionInitially(newNodes);
this.body.emitter.emit("_dataChanged");
if (doNotEmit === false) {
this.body.emitter.emit("_dataChanged");
}
} }
/** /**

+ 17
- 18
lib/network/modules/View.js View File

@ -43,17 +43,17 @@ class View {
if (specificNodes.length > 0) { if (specificNodes.length > 0) {
for (var i = 0; i < specificNodes.length; i++) { for (var i = 0; i < specificNodes.length; i++) {
node = this.body.nodes[specificNodes[i]]; node = this.body.nodes[specificNodes[i]];
if (minX > (node.boundingBox.left)) {
minX = node.boundingBox.left;
if (minX > (node.shape.boundingBox.left)) {
minX = node.shape.boundingBox.left;
} }
if (maxX < (node.boundingBox.right)) {
maxX = node.boundingBox.right;
if (maxX < (node.shape.boundingBox.right)) {
maxX = node.shape.boundingBox.right;
} }
if (minY > (node.boundingBox.bottom)) {
minY = node.boundingBox.top;
if (minY > (node.shape.boundingBox.bottom)) {
minY = node.shape.boundingBox.top;
} // top is negative, bottom is positive } // top is negative, bottom is positive
if (maxY < (node.boundingBox.top)) {
maxY = node.boundingBox.bottom;
if (maxY < (node.shape.boundingBox.top)) {
maxY = node.shape.boundingBox.bottom;
} // top is negative, bottom is positive } // top is negative, bottom is positive
} }
} }
@ -61,17 +61,17 @@ class View {
for (var nodeId in this.body.nodes) { for (var nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) { if (this.body.nodes.hasOwnProperty(nodeId)) {
node = this.body.nodes[nodeId]; node = this.body.nodes[nodeId];
if (minX > (node.boundingBox.left)) {
minX = node.boundingBox.left;
if (minX > (node.shape.boundingBox.left)) {
minX = node.shape.boundingBox.left;
} }
if (maxX < (node.boundingBox.right)) {
maxX = node.boundingBox.right;
if (maxX < (node.shape.boundingBox.right)) {
maxX = node.shape.boundingBox.right;
} }
if (minY > (node.boundingBox.bottom)) {
minY = node.boundingBox.top;
if (minY > (node.shape.boundingBox.bottom)) {
minY = node.shape.boundingBox.top;
} // top is negative, bottom is positive } // top is negative, bottom is positive
if (maxY < (node.boundingBox.top)) {
maxY = node.boundingBox.bottom;
if (maxY < (node.shape.boundingBox.top)) {
maxY = node.shape.boundingBox.bottom;
} // top is negative, bottom is positive } // top is negative, bottom is positive
} }
} }
@ -105,7 +105,7 @@ class View {
var range; var range;
var zoomLevel; var zoomLevel;
if (initialZoom == true) {
if (initialZoom === true) {
// check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation. // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
var positionDefined = 0; var positionDefined = 0;
for (var nodeId in this.body.nodes) { for (var nodeId in this.body.nodes) {
@ -145,7 +145,6 @@ class View {
zoomLevel = 1.0; zoomLevel = 1.0;
} }
var center = this._findCenter(range); var center = this._findCenter(range);
var animationOptions = {position: center, scale: zoomLevel, animation: options}; var animationOptions = {position: center, scale: zoomLevel, animation: options};
this.moveTo(animationOptions); this.moveTo(animationOptions);

+ 0
- 2
lib/network/modules/components/Node.js View File

@ -50,8 +50,6 @@ class Node {
// set defaults for the options // set defaults for the options
this.id = undefined; this.id = undefined;
this.boundingBox = {top: 0, left: 0, right: 0, bottom: 0};
this.imagelist = imagelist; this.imagelist = imagelist;
this.grouplist = grouplist; this.grouplist = grouplist;

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

@ -54,7 +54,7 @@ class CircularImage extends drawUtil {
this.boundingBox.right = x + this.options.size; this.boundingBox.right = x + this.options.size;
this.boundingBox.bottom = y + this.options.size; this.boundingBox.bottom = y + this.options.size;
this._drawImageLabel(ctx);
this._drawImageLabel(ctx, x, y, selected);
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left); this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width); this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);

+ 0
- 1
lib/network/modules/components/nodes/util/drawUtil.js View File

@ -47,7 +47,6 @@ class drawUtil extends BaseNode {
} }
yLabel = y + offset; yLabel = y + offset;
this.labelModule.draw(ctx, x, yLabel, selected, 'hanging'); this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
} }
} }

+ 1
- 1
lib/network/modules/components/unified/label.js View File

@ -37,7 +37,7 @@ class Label {
this.fontOptions.color = optionsArray[2]; this.fontOptions.color = optionsArray[2];
} }
else if (typeof options.font == 'object') { else if (typeof options.font == 'object') {
util.extend(this.fontOptions, options.font);
util.protoExtend(this.fontOptions, options.font);
} }
this.fontOptions.size = Number(this.fontOptions.size); this.fontOptions.size = Number(this.fontOptions.size);
} }

+ 18
- 0
lib/util.js View File

@ -121,6 +121,24 @@ exports.assignAllKeys = function (obj, value) {
} }
} }
/**
* Extend object a with the properties of object b or a series of objects
* Only properties with defined values are copied
* @param {Object} a
* @param {... Object} b
* @return {Object} a
*/
exports.protoExtend = function (a, b) {
for (var i = 1; i < arguments.length; i++) {
var other = arguments[i];
for (var prop in other) {
a[prop] = other[prop];
}
}
return a;
};
/** /**
* Extend object a with the properties of object b or a series of objects * Extend object a with the properties of object b or a series of objects
* Only properties with defined values are copied * Only properties with defined values are copied

Loading…
Cancel
Save