From 904e7cfb0da1cc598beab6a9d6f2467ba82244f9 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alexdemulder@gmail.com>
Date: Thu, 22 May 2014 10:48:26 +0200
Subject: [PATCH] added zoomable and moveable

---
 HISTORY.md         |  5 ++-
 docs/graph.html    | 16 +++++++++
 src/graph/Graph.js | 82 +++++++++++++++++++++++++---------------------
 3 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index c427513b..d2a68323 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,11 +1,10 @@
 # vis.js history
 http://visjs.org
 
-
-## 2014-05-09, version 1.0.2
+## 2014-05-22, version 1.0.2
 
 ### Graph
-
+- added zoomable and moveable options.
 - changes setOptions to avoid resetting view.
 
 
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 <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
     </td>
   </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>
     <td><a href="#Navigation_controls">navigation</a></td>
@@ -854,6 +862,14 @@ var options = {
     <td>"400px"</td>
     <td>The width of the graph in pixels or as a percentage.</td>
   </tr>
+    <tr>
+        <td>zoomable</td>
+        <td>Boolean</td>
+        <td>true</td>
+        <td>
+            Toggle if the graph can be zoomed.
+        </td>
+    </tr>
 
 </table>
 
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;
+  }
 };