Browse Source

added zoomable and moveable

css_transitions
Alex de Mulder 10 years ago
parent
commit
904e7cfb0d
3 changed files with 62 additions and 41 deletions
  1. +2
    -3
      HISTORY.md
  2. +16
    -0
      docs/graph.html
  3. +44
    -38
      src/graph/Graph.js

+ 2
- 3
HISTORY.md View File

@ -1,11 +1,10 @@
# vis.js history # vis.js history
http://visjs.org http://visjs.org
## 2014-05-09, version 1.0.2
## 2014-05-22, version 1.0.2
### Graph ### Graph
- added zoomable and moveable options.
- changes setOptions to avoid resetting view. - changes setOptions to avoid resetting view.

+ 16
- 0
docs/graph.html View File

@ -798,6 +798,14 @@ var options = {
Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options. Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
</td> </td>
</tr> </tr>
<tr>
<td>moveable</td>
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the graph can be dragged. This will not affect the dragging of nodes.
</td>
</tr>
<tr> <tr>
<td><a href="#Navigation_controls">navigation</a></td> <td><a href="#Navigation_controls">navigation</a></td>
@ -854,6 +862,14 @@ var options = {
<td>"400px"</td> <td>"400px"</td>
<td>The width of the graph in pixels or as a percentage.</td> <td>The width of the graph in pixels or as a percentage.</td>
</tr> </tr>
<tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the graph can be zoomed.
</td>
</tr>
</table> </table>

+ 44
- 38
src/graph/Graph.js View File

@ -179,7 +179,9 @@ function Graph (container, data, options) {
border: '#666', border: '#666',
background: '#FFFFC6' background: '#FFFFC6'
} }
}
},
moveable: true,
zoomable: true
}; };
this.editMode = this.constants.dataManipulation.initiallyVisible; this.editMode = this.constants.dataManipulation.initiallyVisible;
@ -519,7 +521,8 @@ Graph.prototype.setOptions = function (options) {
if (options.freezeForStabilization !== undefined) {this.constants.freezeForStabilization = options.freezeForStabilization;} if (options.freezeForStabilization !== undefined) {this.constants.freezeForStabilization = options.freezeForStabilization;}
if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;} if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;}
if (options.moveable !== undefined) {this.constants.moveable = options.moveable;}
if (options.zoomable !== undefined) {this.constants.zoomable = options.zoomable;}
if (options.labels !== undefined) { if (options.labels !== undefined) {
@ -968,16 +971,18 @@ Graph.prototype._handleOnDrag = function(event) {
} }
} }
else { else {
// move the graph
var diffX = pointer.x - this.drag.pointer.x;
var diffY = pointer.y - this.drag.pointer.y;
this._setTranslation(
this.drag.translation.x + diffX,
this.drag.translation.y + diffY);
this._redraw();
this.moving = true;
this.start();
if (this.constants.moveable == true) {
// move the graph
var diffX = pointer.x - this.drag.pointer.x;
var diffY = pointer.y - this.drag.pointer.y;
this._setTranslation(
this.drag.translation.x + diffX,
this.drag.translation.y + diffY);
this._redraw();
this.moving = true;
this.start();
}
} }
}; };
@ -1065,37 +1070,38 @@ Graph.prototype._onPinch = function (event) {
* @private * @private
*/ */
Graph.prototype._zoom = function(scale, pointer) { Graph.prototype._zoom = function(scale, pointer) {
var scaleOld = this._getScale();
if (scale < 0.00001) {
scale = 0.00001;
}
if (scale > 10) {
scale = 10;
}
// + this.frame.canvas.clientHeight / 2
var translation = this._getTranslation();
var scaleFrac = scale / scaleOld;
var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
if (this.constants.zoomable == true) {
var scaleOld = this._getScale();
if (scale < 0.00001) {
scale = 0.00001;
}
if (scale > 10) {
scale = 10;
}
// + this.frame.canvas.clientHeight / 2
var translation = this._getTranslation();
this.areaCenter = {"x" : this._canvasToX(pointer.x),
"y" : this._canvasToY(pointer.y)};
var scaleFrac = scale / scaleOld;
var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
this._setScale(scale);
this._setTranslation(tx, ty);
this.updateClustersDefault();
this._redraw();
this.areaCenter = {"x" : this._canvasToX(pointer.x),
"y" : this._canvasToY(pointer.y)};
if (scaleOld < scale) {
this.emit("zoom", {direction:"+"});
}
else {
this.emit("zoom", {direction:"-"});
}
this._setScale(scale);
this._setTranslation(tx, ty);
this.updateClustersDefault();
this._redraw();
if (scaleOld < scale) {
this.emit("zoom", {direction:"+"});
}
else {
this.emit("zoom", {direction:"-"});
}
return scale;
return scale;
}
}; };

Loading…
Cancel
Save