diff --git a/HISTORY.md b/HISTORY.md index ce69b0f9..940556f8 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,7 +1,6 @@ # vis.js history http://visjs.org - ## not yet released, version 1.0.2 ### Timeline @@ -9,11 +8,10 @@ http://visjs.org - Some tweaks in snapping dragged items to nice dates. - Fixed a bug in replacing the DataSet of groups via `Timeline.setGroups(groups)`. - ### Graph -- Changes setOptions to avoid resetting view. - +- added zoomable and moveable options. +- changes setOptions to avoid resetting view. ## 2014-05-09, version 1.0.1 diff --git a/docs/graph.html b/docs/graph.html index b2bcce53..08a186ed 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -798,6 +798,14 @@ var options = { Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section Keyboard navigation for an overview of the available options. + + moveable + Boolean + true + + Toggle if the graph can be dragged. This will not affect the dragging of nodes. + + navigation @@ -854,6 +862,14 @@ var options = { "400px" The width of the graph in pixels or as a percentage. + + zoomable + Boolean + true + + Toggle if the graph can be zoomed. + + diff --git a/src/graph/Graph.js b/src/graph/Graph.js index c61f863a..2b7aa22a 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -179,7 +179,9 @@ function Graph (container, data, options) { border: '#666', background: '#FFFFC6' } - } + }, + moveable: true, + zoomable: true }; 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.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} 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) { @@ -968,16 +971,18 @@ Graph.prototype._handleOnDrag = function(event) { } } 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 */ 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; + } };