Browse Source

- Renamed storePosition to storePositions. Added deprication message and old name still works.

- Worked around hammer.js bug with multiple release listeners.
- Improved cleaning up after manipulation toolbar.
- Added getPositions() method to get the position of all nodes.
- Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.
v3_develop
Alex de Mulder 9 years ago
parent
commit
939f8f85da
9 changed files with 25268 additions and 25602 deletions
  1. +9
    -0
      HISTORY.md
  2. +25181
    -25386
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +23
    -12
      docs/network.html
  5. +0
    -184
      examples/network/ex.html
  6. +34
    -3
      lib/network/Network.js
  7. +9
    -4
      lib/network/mixins/ManipulationMixin.js
  8. +5
    -9
      lib/network/mixins/NavigationMixin.js
  9. +6
    -3
      lib/network/mixins/SelectionMixin.js

+ 9
- 0
HISTORY.md View File

@ -1,6 +1,15 @@
# vis.js history
http://visjs.org
## 2014-10-16, version 3.5.1 SNAPSHOT, not yet released
### Network
- Renamed storePosition to storePositions. Added deprication message and old name still works.
- Worked around hammer.js bug with multiple release listeners.
- Improved cleaning up after manipulation toolbar.
- Added getPositions() method to get the position of all nodes.
- Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.
## 2014-10-16, version 3.5.0

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


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


+ 23
- 12
docs/network.html View File

@ -648,8 +648,8 @@ var options = {
<td>Boolean</td>
<td>false</td>
<td>
With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
With the advent of the storePositions() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
to speed up the initialization of the network by using storePositions() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
</td>
</tr>
@ -2139,6 +2139,12 @@ var options: {
Zooming in is > 1.0, zooming out is < 0. Scale cannot be smaller or equal to 0.
</td>
</tr>
<tr>
<td>getCenterCoordinates()</td>
<td>Number</td>
<td>Returns the x and y coodinates of the center of the screen (in canvas space).
</td>
</tr>
<tr>
<td>getSelection()</td>
<td>Array of ids</td>
@ -2171,13 +2177,6 @@ var options: {
<td>When locked on to a node, this function releases it again. If the view is not locked onto a node due to the focusOnNode locked option, nothing happens.
</td>
</tr>
<tr>
<td>storePosition()</td>
<td>none</td>
<td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
</td>
</tr>
<tr>
<td>DOMtoCanvas(pos)</td>
<td>object</td>
@ -2285,7 +2284,19 @@ var options: {
containing a new size for the visualization. Size can be provided in pixels
or in percentages.</td>
</tr>
<tr>
<td>getPositions()</td>
<td>none</td>
<td>This will return an object of all nodes' positions. Data can be accessed with object[nodeId].x and .y.
</td>
</tr>
<tr>
<td>storePositions()</td>
<td>none</td>
<td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
</td>
</tr>
<tr>
<td>zoomExtent([options])</td>
<td>none</td>
@ -2439,7 +2450,7 @@ network.off('select', onSelect);
</tr>
<tr>
<td>stabilized</td>
<td>Fired every time the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. Fired with an object having the following properties:</td>
<td>Fired every time the network has been stabilized. This event can be used to trigger the .storePositions() function after stabilization. Fired with an object having the following properties:</td>
<td>
<ul>
<li><code>iterations</code>: number of iterations used to stabilize</li>
@ -2455,7 +2466,7 @@ network.off('select', onSelect);
</tr>
<tr>
<td>zoom</td>
<td>Fired when the network has zoomed. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>Fired when the network has zoomed. This event can be used to trigger the .storePositions() function after stabilization.</td>
<td>
<ul>
<li><code>direction: </code> "+" or "-" </li>

+ 0
- 184
examples/network/ex.html View File

@ -1,184 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</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 nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = new vis.DataSet([{
id: '1001',
value: '1'
}, {
id: '1009',
value: '2'
}, {
id: '1061',
value: '3'
}, {
id: '1226',
value: '4'
}]);
edges = new vis.DataSet([{
id: '1001_1061',
from: '1001',
to: '1061',
value: '1'
}, {
id: '1001_1226',
from: '1001',
to: '1226',
value: '1'
}, {
id: '1009_1061',
from: '1009',
to: '1061',
value: '2'
}, {
id: '1009_1226',
from: '1009',
to: '1226',
value: '1'
}, {
id: '1061_1226',
from: '1061',
to: '1226',
value: '1'
}]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var nodeNormalColor = { // For 'normal' nodes
background: '#92bbc7',
border: '#5d93a6',
borderWidth: 2,
highlight: {
background: '#5d93a6',
border: '#537286'
}
};
var nodeBlurColor = { // For 'blurred' nodes
background: '#f0f0f0',
border: '#f0f0f0'
};
var edgeNormalColor = {
color: '#5d93a6',
highlight: '#28132b'
};
var edgeBlurColor = {
color: '#f0f0f0',
highlight: '#f0f0f0'
};
var options = {
nodes: {
shape: 'dot',
color: nodeNormalColor
},
edges: {
inheritColor: false,
color: edgeNormalColor,
widthSelectionMultiplier: 1
},
physics: {
'barnesHut': {
centralGravity: 0.5,
springLength: 150,
springConstant: 0.03,
damping: 0.2
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
console.log(params.edges);
var nodesData = {};
var edgesData = {};
var nodeResetQuery = [];
var edgeResetQuery = [];
var allEdges = edges.get();
var allNodes = nodes.get();
for (var i = 0; i < allNodes.length; i++) {
nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor};
nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor});
}
for (var i = 0; i < allEdges.length; i++) {
edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor};
edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor});
}
// deselect
if (params.nodes.length == 0 && params.edges.length == 0) {
nodes.update(nodeResetQuery);
edges.update(edgeResetQuery);
return;
}
// paint nodes and edges.
for (var i = 0; i < params.nodes.length; i++) {
nodesData[params.nodes[i]].color = nodeNormalColor;
}
for (var i = 0; i < params.edges.length; i++) {
edgesData[params.edges[i]].color = edgeNormalColor;
var selEdge = edges.get(params.edges[i]);
nodesData[selEdge.to].color = nodeNormalColor;
nodesData[selEdge.from].color = nodeNormalColor;
}
var nodeUpdateQuery = [];
var edgeUpdateQuery = [];
for (var nodeId in nodesData) {
if (nodesData.hasOwnProperty(nodeId)) {
nodeUpdateQuery.push(nodesData[nodeId]);
}
}
for (var edgeId in edgesData) {
if (edgesData.hasOwnProperty(edgeId)) {
edgeUpdateQuery.push(edgesData[edgeId]);
}
}
nodes.update(nodeUpdateQuery);
edges.update(edgeUpdateQuery);
// nodes.update(nodeResetQuery);
// edges.update(edgeResetQuery);
// nodes.update(nodeUpdateQuery);
// edges.update(edgeUpdateQuery);
});}
</script>
</head>
<body onload="draw();">
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 34
- 3
lib/network/Network.js View File

@ -450,10 +450,10 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
zoomLevel *= factor;
}
else {
var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
@ -2254,6 +2254,14 @@ Network.prototype._initializeMixinLoaders = function () {
* Load the XY positions of the nodes into the dataset.
*/
Network.prototype.storePosition = function() {
console.log("storePosition is depricated: use .storePositions() from now on.")
storePositions();
};
/**
* Load the XY positions of the nodes into the dataset.
*/
Network.prototype.storePositions = function() {
var dataArray = [];
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
@ -2268,6 +2276,21 @@ Network.prototype.storePosition = function() {
this.nodesData.update(dataArray);
};
/**
* Load the XY positions of the nodes into the dataset.
*/
Network.prototype.getPositions = function() {
var dataArray = {};
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
var node = this.nodes[nodeId];
dataArray[nodeId] = {x:Math.round(node.x),y:Math.round(node.y)};
}
}
return dataArray;
};
/**
* Center a node in view.
@ -2476,5 +2499,13 @@ Network.prototype.getScale = function () {
};
/**
* Returns the scale
* @returns {Number}
*/
Network.prototype.getCenterCoordinates = function () {
return this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
};
module.exports = Network;

+ 9
- 4
lib/network/mixins/ManipulationMixin.js View File

@ -11,6 +11,11 @@ exports._clearManipulatorBar = function() {
while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
}
this._manipulationReleaseOverload = function () {};
delete this.sectors['support']['nodes']['targetNode'];
delete this.sectors['support']['nodes']['targetViaNode'];
this.controlNodesActive = false;
};
/**
@ -219,11 +224,11 @@ exports._createAddEdgeToolbar = function() {
// temporarily overload functions
this.cachedFunctions["_handleTouch"] = this._handleTouch;
this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
this._handleTouch = this._handleConnect;
this._handleOnRelease = function () {};
this._manipulationReleaseOverload = function () {};
this._handleDragStart = function () {};
this._handleDragEnd = this._finishConnect;
@ -263,7 +268,7 @@ exports._createEditEdgeToolbar = function() {
// temporarily overload functions
this.cachedFunctions["_handleTouch"] = this._handleTouch;
this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
this.cachedFunctions["_handleTap"] = this._handleTap;
this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
@ -271,7 +276,7 @@ exports._createEditEdgeToolbar = function() {
this._handleTap = function () {};
this._handleOnDrag = this._controlNodeDrag;
this._handleDragStart = function () {}
this._handleOnRelease = this._releaseControlNode;
this._manipulationReleaseOverload = this._releaseControlNode;
// redraw to show the unselect
this._redraw();

+ 5
- 9
lib/network/mixins/NavigationMixin.js View File

@ -10,6 +10,8 @@ exports._cleanNavigation = function() {
this.navigationHammers.existing = [];
}
this._navigationReleaseOverload = function () {};
// clean up previous navigation items
var wrapper = document.getElementById('network-navigation_wrapper');
if (wrapper && wrapper.parentNode) {
@ -47,9 +49,7 @@ exports._loadNavigationElements = function() {
this.navigationHammers.new.push(hammer);
}
var hammerDoc = Hammer(document, {prevent_default: false});
hammerDoc.on('release', this._stopMovement.bind(this));
this.navigationHammers.new.push(hammerDoc);
this._navigationReleaseOverload = this._stopMovement;
this.navigationHammers.existing = this.navigationHammers.new;
};
@ -61,12 +61,8 @@ exports._loadNavigationElements = function() {
* @private
*/
exports._zoomExtent = function(event) {
// FIXME: this is a workaround because the binding of Hammer on Document makes this fire twice
if (this._zoomExtentLastTime === undefined || new Date() - this._zoomExtentLastTime > 200) {
this._zoomExtentLastTime = new Date();
this.zoomExtent({duration:800});
event.stopPropagation();
}
this.zoomExtent({duration:800});
event.stopPropagation();
};
/**

+ 6
- 3
lib/network/mixins/SelectionMixin.js View File

@ -545,15 +545,18 @@ exports._handleOnHold = function(pointer) {
/**
* handle the onRelease event. These functions are here for the navigation controls module.
* handle the onRelease event. These functions are here for the navigation controls module
* and data manipulation module.
*
* @private
*/
exports._handleOnRelease = function(pointer) {
this._manipulationReleaseOverload(pointer);
this._navigationReleaseOverload(pointer);
};
exports._manipulationReleaseOverload = function (pointer) {};
exports._navigationReleaseOverload = function (pointer) {};
/**
*

Loading…
Cancel
Save