Adding handlers to zoom in/out on scrollwheel event.

Questions:
- Is deltaY the correct field in which to store this event value?
- Is the 'wheel' addEventListener hook broken in the first place? Doesn't work for me on OSX, but might be working in Windows/Linux and don't know if this change would break it for those.
- It is necessary to cancel event bubbling for the onmousewheel event?
Review URL: http://codereview.chromium.org/2456004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@49305 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 47 insertions, 8 deletions

diff --git a/o3d/samples/o3d-webgl-samples/pool.html b/o3d/samples/o3d-webgl-samples/pool.html
index cabe6d0..14eca54 100644
--- a/o3d/samples/o3d-webgl-samples/pool.html
+++ b/o3d/samples/o3d-webgl-samples/pool.html
@@ -894,6 +894,8 @@ function registerEventCallbacks() {
   o3djs.event.addEventListener(g_o3dElement, 'keypress', keyPressed);
   o3djs.event.addEventListener(g_o3dElement, 'keyup', keyUp);
   o3djs.event.addEventListener(g_o3dElement, 'keydown', keyDown);
+
+  o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollWheel);
 }
 
 
@@ -1884,6 +1886,22 @@ function keyDown(event) {
   }
 }
 
+function zoomIn() {
+  g_cameraInfo.targetPosition.radius *= 0.9;
+}
+
+function zoomOut() {
+  g_cameraInfo.targetPosition.radius /= 0.9;
+}
+
+function scrollWheel(event) {
+  if (event.deltaY > 0) {
+    zoomIn();
+  } else {
+    zoomOut();
+  }
+}
+
 function keyPressed(event) {
   var keyChar = String.fromCharCode(o3djs.event.getEventKeyChar(event));
   keyChar = keyChar.toLowerCase();
@@ -1943,12 +1961,12 @@ function keyPressed(event) {
 
     case '=':
     case '+':
-      g_cameraInfo.targetPosition.radius *= 0.9;
+      zoomIn();
       break;
 
     case '-':
     case '_':
-      g_cameraInfo.targetPosition.radius /= 0.9;
+      zoomOut();
       break;
 
     case ' ':
diff --git a/o3d/samples/o3d-webgl-samples/texturesamplers.html b/o3d/samples/o3d-webgl-samples/texturesamplers.html
index 13ef9c9..13fec25 100644
--- a/o3d/samples/o3d-webgl-samples/texturesamplers.html
+++ b/o3d/samples/o3d-webgl-samples/texturesamplers.html
@@ -74,8 +74,6 @@ var g_finished = false;  // for selenium testing
 function scrollMe(e) {
   g_eye = g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, g_eye);
   g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_eye, g_target, g_up);
-  // Prevents event from reaching up to the window, e.g. so page will not scroll
-  o3djs.event.cancel(e);
 }
 
 /**
diff --git a/o3d/samples/o3d-webgl/client.js b/o3d/samples/o3d-webgl/client.js
index 9d846c1..b585b72 100644
--- a/o3d/samples/o3d-webgl/client.js
+++ b/o3d/samples/o3d-webgl/client.js
@@ -840,17 +840,23 @@ o3d.Client.getRelativeCoordinates_ = function(eventInfo, opt_reference) {
  * Wraps a user's event callback with one that properly computes
  * relative coordinates for the event.
  * @param {!o3d.EventCallback} handler Function to call on event.
+ * @param {boolean} doCancelEvent If event should be canceled after callback.
  * @return {!o3d.EventCallback} Wrapped handler function.
  * @private
  */
-o3d.Client.wrapEventCallback_ = function(handler) {
+o3d.Client.wrapEventCallback_ = function(handler, doCancelEvent) {
   return function(event) {
     event = o3d.Client.getEvent_(event);
     var info = o3d.Client.getEventInfo_(event);
     var relativeCoords = o3d.Client.getRelativeCoordinates_(info);
     event.x = relativeCoords.x;
     event.y = relativeCoords.y;
+    // Invert value to meet contract for deltaY. @see event.js.
+    event.deltaY = -info.wheel;
     handler(event);
+    if (doCancelEvent) {
+      o3djs.event.cancel(event);
+    }
   };
 };
 
@@ -869,13 +875,20 @@ o3d.Client.prototype.setEventCallback =
   var listener = this.gl.hack_canvas;
   // TODO(petersont): Figure out a way for a canvas to listen to a key event
   // directly.
+
+  var isWheelEvent = type == 'wheel';
   var forKeyEvent = type.substr(0, 3) == 'key';
   if (forKeyEvent) {
     listener = document;
   } else {
-    handler = o3d.Client.wrapEventCallback_(handler);
+    handler = o3d.Client.wrapEventCallback_(handler, isWheelEvent);
+  }
+  if (isWheelEvent) {
+    listener.addEventListener('DOMMouseScroll', handler, true);
+    listener.addEventListener('mousewheel', handler, true);
+  } else {
+    listener.addEventListener(type, handler, true);
   }
-  listener.addEventListener(type, handler, true);
 };
 
 
@@ -885,11 +898,21 @@ o3d.Client.prototype.setEventCallback =
  */
 o3d.Client.prototype.clearEventCallback =
     function(type) {
+  //TODO(petersont): Same as TODO in setEventCallback above.
+  var listener = this.gl.hack_canvas;
+
+  var isWheelEvent = type == 'wheel';
   var forKeyEvent = type.substr(0, 3) == 'key';
   if (forKeyEvent) {
     listener = document;
   }
-  listener.removeEventListener(type);
+
+  if (isWheelEvent) {
+    listener.removeEventListener('DOMMouseScroll');
+    listener.removeEventListener('mousewheel');
+  } else {
+    listener.removeEventListener(type);
+  }
 };