Add scroll to tools, extract logic, fixes #1319

src/tools/draw.js

@@ -131,6 +131,13 @@ dwv.tool.Draw = function (app) {
    */
   var mouseOverCursor = 'pointer';
 
+  /**
+   * Scroll wheel handler.
+   *
+   * @type {dwv.tool.ScrollWheel}
+   */
+  var scrollWhell = new dwv.tool.ScrollWheel(app);
+
   /**
    * Shape editor.
    *
@@ -398,6 +405,15 @@ dwv.tool.Draw = function (app) {
     self.dblclick(event);
   };
 
+  /**
+   * Handle mouse wheel event.
+   *
+   * @param {object} event The mouse wheel event.
+   */
+  this.wheel = function (event) {
+    scrollWhell.wheel(event);
+  };
+
   /**
    * Handle key down event.
    *

src/tools/opacity.js

@@ -39,6 +39,13 @@ dwv.tool.Opacity = function (app) {
    */
   this.started = false;
 
+  /**
+   * Scroll wheel handler.
+   *
+   * @type {dwv.tool.ScrollWheel}
+   */
+  var scrollWhell = new dwv.tool.ScrollWheel(app);
+
   /**
    * Handle mouse down event.
    *
@@ -130,6 +137,15 @@ dwv.tool.Opacity = function (app) {
     self.mouseup(event);
   };
 
+  /**
+   * Handle mouse wheel event.
+   *
+   * @param {object} event The mouse wheel event.
+   */
+  this.wheel = function (event) {
+    scrollWhell.wheel(event);
+  };
+
   /**
    * Handle key down event.
    *

src/tools/scroll.js

@@ -85,11 +85,11 @@ dwv.tool.Scroll = function (app) {
   var touchTimerID = null;
 
   /**
-   * Accumulated wheel event deltaY.
+   * Scroll wheel handler.
    *
-   * @type {number}
+   * @type {dwv.tool.ScrollWheel}
    */
-  var wheelDeltaY = 0;
+  var scrollWhell = new dwv.tool.ScrollWheel(app);
 
   /**
    * Option to show or not a value tooltip on mousemove.
@@ -254,45 +254,7 @@ dwv.tool.Scroll = function (app) {
    * @param {object} event The mouse wheel event.
    */
   this.wheel = function (event) {
-    // deltaMode (deltaY values on my machine...):
-    // - 0 (DOM_DELTA_PIXEL): chrome, deltaY mouse scroll = 53
-    // - 1 (DOM_DELTA_LINE): firefox, deltaY mouse scroll = 6
-    // - 2 (DOM_DELTA_PAGE): ??
-    // TODO: check scroll event
-    var scrollMin = 52;
-    if (event.deltaMode === 1) {
-      scrollMin = 5.99;
-    }
-    wheelDeltaY += event.deltaY;
-    if (Math.abs(wheelDeltaY) < scrollMin) {
-      return;
-    } else {
-      wheelDeltaY = 0;
-    }
-
-    var up = false;
-    if (event.deltaY < 0) {
-      up = true;
-    }
-
-    var layerDetails = dwv.gui.getLayerDetailsFromEvent(event);
-    var layerGroup = app.getLayerGroupByDivId(layerDetails.groupDivId);
-    var viewController =
-      layerGroup.getActiveViewLayer().getViewController();
-    var imageSize = viewController.getImageSize();
-    if (imageSize.canScroll3D()) {
-      if (up) {
-        viewController.incrementScrollIndex();
-      } else {
-        viewController.decrementScrollIndex();
-      }
-    } else if (imageSize.moreThanOne(3)) {
-      if (up) {
-        viewController.incrementIndex(3);
-      } else {
-        viewController.decrementIndex(3);
-      }
-    }
+    scrollWhell.wheel(event);
   };
 
   /**

src/tools/scrollWheel.js

@@ -0,0 +1,63 @@
+// namespaces
+var dwv = dwv || {};
+dwv.tool = dwv.tool || {};
+
+/**
+ * Scroll wheel class: provides a wheel event handler
+ *   that scroll the corresponding data.
+ *
+ * @class
+ * @param {dwv.App} app The associated application.
+ */
+dwv.tool.ScrollWheel = function (app) {
+  /**
+   * Accumulated wheel event deltaY.
+   *
+   * @type {number}
+   */
+  var wheelDeltaY = 0;
+
+  /**
+   * Handle mouse wheel event.
+   *
+   * @param {object} event The mouse wheel event.
+   */
+  this.wheel = function (event) {
+    // deltaMode (deltaY values on my machine...):
+    // - 0 (DOM_DELTA_PIXEL): chrome, deltaY mouse scroll = 53
+    // - 1 (DOM_DELTA_LINE): firefox, deltaY mouse scroll = 6
+    // - 2 (DOM_DELTA_PAGE): ??
+    // TODO: check scroll event
+    var scrollMin = 52;
+    if (event.deltaMode === 1) {
+      scrollMin = 5.99;
+    }
+    wheelDeltaY += event.deltaY;
+    if (Math.abs(wheelDeltaY) < scrollMin) {
+      return;
+    } else {
+      wheelDeltaY = 0;
+    }
+
+    var up = event.deltaY < 0 ? true : false;
+
+    var layerDetails = dwv.gui.getLayerDetailsFromEvent(event);
+    var layerGroup = app.getLayerGroupByDivId(layerDetails.groupDivId);
+    var viewController =
+      layerGroup.getActiveViewLayer().getViewController();
+    var imageSize = viewController.getImageSize();
+    if (imageSize.canScroll3D()) {
+      if (up) {
+        viewController.incrementScrollIndex();
+      } else {
+        viewController.decrementScrollIndex();
+      }
+    } else if (imageSize.moreThanOne(3)) {
+      if (up) {
+        viewController.incrementIndex(3);
+      } else {
+        viewController.decrementIndex(3);
+      }
+    }
+  };
+}; // ScrollWheel class

src/tools/windowLevel.js

@@ -39,6 +39,13 @@ dwv.tool.WindowLevel = function (app) {
    */
   this.started = false;
 
+  /**
+   * Scroll wheel handler.
+   *
+   * @type {dwv.tool.ScrollWheel}
+   */
+  var scrollWhell = new dwv.tool.ScrollWheel(app);
+
   /**
    * Handle mouse down event.
    *
@@ -171,6 +178,15 @@ dwv.tool.WindowLevel = function (app) {
       parseInt(viewController.getWindowLevel().width, 10));
   };
 
+  /**
+   * Handle mouse wheel event.
+   *
+   * @param {object} event The mouse wheel event.
+   */
+  this.wheel = function (event) {
+    scrollWhell.wheel(event);
+  };
+
   /**
    * Handle key down event.
    *

tests/pacs/viewer.html

@@ -157,6 +157,7 @@
 <script type="text/javascript" src="../../src/tools/opacity.js"></script>
 <script type="text/javascript" src="../../src/tools/undo.js"></script>
 <script type="text/javascript" src="../../src/tools/scroll.js"></script>
+<script type="text/javascript" src="../../src/tools/scrollWheel.js"></script>
 <script type="text/javascript" src="../../src/tools/windowLevel.js"></script>
 <script type="text/javascript" src="../../src/tools/zoomPan.js"></script>
 <script type="text/javascript" src="../../src/utils/array.js"></script>