[Graph3d] zoomable and ctrlToZoom options (almende#3800)

* zoomable and ctrlToZoom options * fix pointer events when tooltip enabled * configuring tooltip style options * event check before if
visjs · Jun 9, 2019 · 3664087 · 3664087
1 parent bf655a6
commit 3664087
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 38 deletions.
diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html
@@ -769,6 +769,18 @@ <h2 id="Configuration_Options">Configuration Options</h2>
       <td>z</td>
       <td>Label on the Z axis.</td>
     </tr>
+    <tr>
+      <td>zoomable</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, the graph is zoomable.</td>
+    </tr>
+    <tr>
+      <td>ctrlToZoom</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>If true and zoomable enabled, the graph is zoomable by pressing ctrl key and scrolling mouse.</td>
+    </tr>
     <tr>
       <td>filterLabel</td>
       <td>String</td>

diff --git a/examples/graph3d/13_disable_zoom.html b/examples/graph3d/13_disable_zoom.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D demo</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+
+    function custom(x, y) {
+      return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var counter = 0;
+      var steps = 50;  // number of datapoints will be steps*steps
+      var axisMax = 314;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x < axisMax; x+=axisStep) {
+        for (var y = 0; y < axisMax; y+=axisStep) {
+          var value = custom(x,y);
+          data.add({id:counter++,x:x,y:y,z:value,style:value});
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        zoomable: false
+      };
+
+      // Instantiate our graph object.
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>
diff --git a/examples/graph3d/14_zoom_ctrl_scroll.html b/examples/graph3d/14_zoom_ctrl_scroll.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D demo</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+
+    function custom(x, y) {
+      return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var counter = 0;
+      var steps = 50;  // number of datapoints will be steps*steps
+      var axisMax = 314;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x < axisMax; x+=axisStep) {
+        for (var y = 0; y < axisMax; y+=axisStep) {
+          var value = custom(x,y);
+          data.add({id:counter++,x:x,y:y,z:value,style:value});
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        ctrlToZoom: true
+      };
+
+      // Instantiate our graph object.
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>
diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
@@ -82,13 +82,15 @@ Graph3d.DEFAULTS = {
       line    : {
         height        : '40px',
         width         : '0',
-        borderLeft    : '1px solid #4d4d4d'
+        borderLeft    : '1px solid #4d4d4d',
+        pointerEvents : 'none'
       },
       dot     : {
         height        : '0',
         width         : '0',
         border        : '5px solid #4d4d4d',
-        borderRadius  : '5px'
+        borderRadius  : '5px',
+        pointerEvents : 'none'
       }
   },
 
@@ -103,6 +105,9 @@ Graph3d.DEFAULTS = {
      vertical  : 0.5,
      distance  : 1.7
   },
+
+  zoomable  : true,
+  ctrlToZoom: false,
 
 /*
   The following fields are 'auto by default', see above.
@@ -2093,38 +2098,40 @@ Graph3d.prototype._onTouchEnd = function(event) {
 Graph3d.prototype._onWheel = function(event) {
   if (!event) /* For IE. */
     event = window.event;
+  if (this.zoomable && (!this.ctrlToZoom || event.ctrlKey)) {
+
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+      delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+      // In Mozilla, sign of delta is different than in IE.
+      // Also, delta is multiple of 3.
+      delta = -event.detail/3;
+    }
 
-  // retrieve delta
-  var delta = 0;
-  if (event.wheelDelta) { /* IE/Opera. */
-    delta = event.wheelDelta/120;
-  } else if (event.detail) { /* Mozilla case. */
-    // In Mozilla, sign of delta is different than in IE.
-    // Also, delta is multiple of 3.
-    delta = -event.detail/3;
-  }
-
-  // If delta is nonzero, handle it.
-  // Basically, delta is now positive if wheel was scrolled up,
-  // and negative, if wheel was scrolled down.
-  if (delta) {
-    var oldLength = this.camera.getArmLength();
-    var newLength = oldLength * (1 - delta / 10);
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+      var oldLength = this.camera.getArmLength();
+      var newLength = oldLength * (1 - delta / 10);
 
-    this.camera.setArmLength(newLength);
-    this.redraw();
+      this.camera.setArmLength(newLength);
+      this.redraw();
 
-    this._hideTooltip();
-  }
+      this._hideTooltip();
+    }
 
-  // fire a cameraPositionChange event
-  var parameters = this.getCameraPosition();
-  this.emit('cameraPositionChange', parameters);
+    // fire a cameraPositionChange event
+    var parameters = this.getCameraPosition();
+    this.emit('cameraPositionChange', parameters);
 
-  // Prevent default actions caused by mouse wheel.
-  // That might be ugly, but we handle scrolls somehow
-  // anyway, so don't bother here..
-  util.preventDefault(event);
+    // Prevent default actions caused by mouse wheel.
+    // That might be ugly, but we handle scrolls somehow
+    // anyway, so don't bother here..
+    util.preventDefault(event);
+  }
 };
 
 /**

diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js
@@ -73,6 +73,8 @@ var OPTIONKEYS = [
   'gridColor',
   'xCenter',
   'yCenter',
+  'zoomable',
+  'ctrlToZoom'
 ];
 
 

diff --git a/lib/graph3d/options.js b/lib/graph3d/options.js
@@ -43,6 +43,8 @@ let allOptions = {
     vertical  : { number },
     __type__  : { object }
   },
+  zoomable          : { boolean: bool },
+  ctrlToZoom        : { boolean: bool },
   xCenter           : { string },
   yCenter           : { string },
   dataColor         : colorOptions,
@@ -101,17 +103,19 @@ let allOptions = {
       __type__    : { object }
     },
     line: {
-      borderLeft: { string },
-      height    : { string },
-      width     : { string },
-      __type__  : { object }
+      borderLeft   : { string },
+      height       : { string },
+      width        : { string },
+      pointerEvents: { string },
+      __type__     : { object }
     },
     dot: {
-      border      : { string },
-      borderRadius: { string },
-      height      : { string },
-      width       : { string },
-      __type__    : { object},
+      border       : { string },
+      borderRadius : { string },
+      height       : { string },
+      width        : { string },
+      pointerEvents: { string },
+      __type__     : { object}
     },
      __type__: { object}
   },