Browse Source

- added locked to focusOnNode

v3_develop
Alex de Mulder 9 years ago
parent
commit
9df59e87ca
5 changed files with 2888 additions and 2780 deletions
  1. +1
    -0
      HISTORY.md
  2. +2823
    -2774
      dist/vis.js
  3. +7
    -0
      docs/network.html
  4. +4
    -2
      examples/network/02_random_nodes.html
  5. +53
    -4
      lib/network/Network.js

+ 1
- 0
HISTORY.md View File

@ -8,6 +8,7 @@ http://visjs.org
- Changed timings for zoomExtent animation.
- Fixed possible cause of freezing graph when animating.
- Added locked to focusOnNode and releaseNode().
## 2014-10-11, version 3.4.1

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


+ 7
- 0
docs/network.html View File

@ -2158,6 +2158,7 @@ var options: {
The options that can be defined are:<br />
<b><code>scale:Number</code></b><br /> - to zoom to that scale,<br />
<b><code>offset:{x:Number, y:Number}</code></b><br /> - to offset the position from the center of the canvas (in DOM units),<br />
<b><code>locked: boolean</code></b><br /> - if true, the view remains locked on this node until either another focusOnNode, moveTo, releaseNode or drag is done <br />
<b><code>animation: Object || Boolean</code></b><br /> - to define the specifics of the animation. True is animated with default settings, false is not animated.<br />
<br />
The animation object can consist of:<br />
@ -2168,6 +2169,12 @@ var options: {
easeInQuint, easeOutQuint, easeInOutQuint </code> <br /><br />
</td>
</tr>
<tr>
<td>releaseNode()</td>
<td>none</td>
<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>

+ 4
- 2
examples/network/02_random_nodes.html View File

@ -76,7 +76,7 @@
nodes: nodes,
edges: edges
};
var options = {edges:{widthSelectionMultiplier:1}};
var options = {stabilize:false};
network = new vis.Network(container, data, options);
// add event listeners
@ -86,10 +86,12 @@
});
network.on('stabilized', function (params) {
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
doFocus = false;
});
}
network.focusOnNode(0,{animation:false, locked: true});
}
</script>
</head>

+ 53
- 4
lib/network/Network.js View File

@ -228,6 +228,8 @@ function Network (container, data, options) {
this.targetScale = 0;
this.sourceTranslation = 0;
this.targetTranslation = 0;
this.lockedOnNodeId = null;
this.lockedOnNodeOffset = null;
// Node variables
var network = this;
@ -896,6 +898,8 @@ Network.prototype._handleOnDrag = function(event) {
return;
}
this.releaseNode();
var pointer = this._getPointer(event.gesture.center);
var me = this;
@ -2273,6 +2277,7 @@ Network.prototype.focusOnNode = function (nodeId, options) {
}
var nodePosition = {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
options.position = nodePosition;
options.lockedOnNode = nodeId;
this.moveTo(options)
}
@ -2324,6 +2329,13 @@ Network.prototype.animateView = function (options) {
return;
}
// release if something focussed on the node
this.releaseNode();
if (options.locked == true) {
this.lockedOnNodeId = options.lockedOnNode;
this.lockedOnNodeOffset = options.offset;
}
// forcefully complete the old animation if it was still running
if (this.easingTime != 0) {
this._transitionRedraw(1); // by setting easingtime to 1, we finish the animation.
@ -2348,9 +2360,15 @@ Network.prototype.animateView = function (options) {
// if the time is set to 0, don't do an animation
if (options.animation.duration == 0) {
this._setScale(this.targetScale);
this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
this._redraw();
if (this.lockedOnNodeId != null) {
this._classicRedraw = this._redraw;
this._redraw = this._lockedRedraw;
}
else {
this._setScale(this.targetScale);
this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
this._redraw();
}
}
else {
this.animationSpeed = 1 / (this.renderRefreshRate * options.animation.duration * 0.001) || 1 / this.renderRefreshRate;
@ -2364,6 +2382,31 @@ Network.prototype.animateView = function (options) {
};
Network.prototype._lockedRedraw = function () {
var nodePosition = {x: this.nodes[this.lockedOnNodeId].x, y: this.nodes[this.lockedOnNodeId].y};
var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
x: viewCenter.x - nodePosition.x,
y: viewCenter.y - nodePosition.y
};
var sourceTranslation = this._getTranslation();
var targetTranslation = {
x: sourceTranslation.x + distanceFromCenter.x * this.scale + this.lockedOnNodeOffset.x,
y: sourceTranslation.y + distanceFromCenter.y * this.scale + this.lockedOnNodeOffset.y
};
this._setTranslation(targetTranslation.x,targetTranslation.y);
this._classicRedraw();
}
Network.prototype.releaseNode = function () {
if (this.lockedOnNodeId != null) {
this._redraw = this._classicRedraw;
this.lockedOnNodeId = null;
this.lockedOnNodeOffset = null;
}
}
/**
*
* @param easingTime
@ -2383,10 +2426,16 @@ Network.prototype._transitionRedraw = function (easingTime) {
this._classicRedraw();
this.moving = true;
// cleanup
if (this.easingTime >= 1.0) {
this.easingTime = 0;
this._redraw = this._classicRedraw;
if (this.lockedOnNodeId != null) {
this._redraw = this._lockedRedraw;
}
else {
this._redraw = this._classicRedraw;
}
this.emit("animationFinished");
}
};

Loading…
Cancel
Save