Merge pull request #2417 from AnalyticalGraphicsInc/correctMouseCoord…

…inates Fix ScreenSpaceEventHandler when Cesium does not take up the entire browser window
CesiumGS · Jan 28, 2015 · fb3df24 · fb3df24
2 parents 8ca84af + 99247ef
commit fb3df24
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 24 deletions.
diff --git a/Source/Core/ScreenSpaceEventHandler.js b/Source/Core/ScreenSpaceEventHandler.js
@@ -23,7 +23,7 @@ define([
 
     function getPosition(screenSpaceEventHandler, event, result) {
         var element = screenSpaceEventHandler._element;
-        if (element === document || !screenSpaceEventHandler._mouseMoveOnDocument) {
+        if (element === document) {
             result.x = event.clientX;
             result.y = event.clientY;
             return result;

diff --git a/Source/Scene/CameraEventAggregator.js b/Source/Scene/CameraEventAggregator.js
@@ -39,6 +39,11 @@ define([
         Cartesian2.clone(pinchMovement.angleAndHeight.endPosition, result.angleAndHeight.endPosition);
     }
 
+    function transformDocumentCoordinatesToCanvasCoordinates(coordinates, canvasBoundingRectangle) {
+        coordinates.x -= canvasBoundingRectangle.left;
+        coordinates.y -= canvasBoundingRectangle.top;
+    }
+
     function listenToPinch(aggregator, modifier, canvas) {
         var key = getKey(CameraEventType.PINCH, modifier);
 
@@ -81,6 +86,12 @@ define([
         }, ScreenSpaceEventType.PINCH_END, modifier);
 
         aggregator._documentEventHandler.setInputAction(function(mouseMovement) {
+            var canvasBoundingRectangle = canvas.getBoundingClientRect();
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.startPosition, canvasBoundingRectangle);
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.endPosition, canvasBoundingRectangle);
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.startPosition, canvasBoundingRectangle);
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.endPosition, canvasBoundingRectangle);
+
             if (isDown[key]) {
                 // Aggregate several input events into a single animation frame.
                 if (!update[key]) {
@@ -188,7 +199,7 @@ define([
         Cartesian2.clone(mouseMovement.endPosition, result.endPosition);
     }
 
-    function listenMouseMove(aggregator, modifier) {
+    function listenMouseMove(aggregator, modifier, canvas) {
         var update = aggregator._update;
         var movement = aggregator._movement;
         var lastMovement = aggregator._lastMovement;
@@ -219,7 +230,16 @@ define([
             }
         }
 
+        var mouseMovementScratch = {
+            startPosition : new Cartesian2(),
+            endPosition : new Cartesian2()
+        };
+
         aggregator._documentEventHandler.setInputAction(function(mouseMovement) {
+            var canvasBoundingRectangle = canvas.getBoundingClientRect();
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.startPosition, canvasBoundingRectangle);
+            transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.endPosition, canvasBoundingRectangle);
+
             for ( var typeName in CameraEventType) {
                 if (CameraEventType.hasOwnProperty(typeName)) {
                     var type = CameraEventType[typeName];
@@ -282,7 +302,7 @@ define([
         listenMouseButtonDownUp(this, undefined, CameraEventType.LEFT_DRAG);
         listenMouseButtonDownUp(this, undefined, CameraEventType.RIGHT_DRAG);
         listenMouseButtonDownUp(this, undefined, CameraEventType.MIDDLE_DRAG);
-        listenMouseMove(this, undefined);
+        listenMouseMove(this, undefined, canvas);
 
         for ( var modifierName in KeyboardEventModifier) {
             if (KeyboardEventModifier.hasOwnProperty(modifierName)) {
@@ -293,7 +313,7 @@ define([
                     listenMouseButtonDownUp(this, modifier, CameraEventType.LEFT_DRAG);
                     listenMouseButtonDownUp(this, modifier, CameraEventType.RIGHT_DRAG);
                     listenMouseButtonDownUp(this, modifier, CameraEventType.MIDDLE_DRAG);
-                    listenMouseMove(this, modifier);
+                    listenMouseMove(this, modifier, canvas);
                 }
             }
         }

diff --git a/Specs/Scene/CameraEventAggregatorSpec.js b/Specs/Scene/CameraEventAggregatorSpec.js
@@ -81,15 +81,17 @@ defineSuite([
     }
 
     function moveMouse(button, startPosition, endPosition, shiftKey) {
+        var canvasRect = canvas.getBoundingClientRect();
+
         var options = {
             button : button,
-            clientX : startPosition.x,
-            clientY : startPosition.y,
+            clientX : startPosition.x + canvasRect.left,
+            clientY : startPosition.y + canvasRect.top,
             shiftKey : shiftKey
         };
         simulateMouseDown(options);
-        options.clientX = endPosition.x;
-        options.clientY = endPosition.y;
+        options.clientX = endPosition.x + canvasRect.left;
+        options.clientY = endPosition.y + canvasRect.top;
         simulateMouseMove(options);
         simulateMouseUp(options);
     }
@@ -153,18 +155,20 @@ defineSuite([
         var endPosition = Cartesian2.UNIT_X;
         var endPosition2 = Cartesian2.UNIT_Y;
 
+        var canvasRect = canvas.getBoundingClientRect();
+
         var options = {
             button : MouseButtons.LEFT,
-            clientX : startPosition.x,
-            clientY : startPosition.y
+            clientX : startPosition.x + canvasRect.left,
+            clientY : startPosition.y + canvasRect.top
         };
         simulateMouseDown(options);
-        options.clientX = endPosition.x;
-        options.clientY = endPosition.y;
+        options.clientX = endPosition.x + canvasRect.left;
+        options.clientY = endPosition.y + canvasRect.top;
         simulateMouseMove(options);
         handler.reset();
-        options.clientX = endPosition2.x;
-        options.clientY = endPosition2.y;
+        options.clientX = endPosition2.x + canvasRect.left;
+        options.clientY = endPosition2.y + canvasRect.top;
         simulateMouseMove(options);
 
         var movement = handler.getLastMovement(CameraEventType.LEFT_DRAG);
@@ -264,17 +268,19 @@ defineSuite([
         var endPosition = Cartesian2.UNIT_X;
         var endPosition2 = Cartesian2.UNIT_Y;
 
+        var canvasRect = canvas.getBoundingClientRect();
+
         var options = {
             button : MouseButtons.LEFT,
-            clientX : startPosition.x,
-            clientY : startPosition.y
+            clientX : startPosition.x + canvasRect.left,
+            clientY : startPosition.y + canvasRect.top
         };
         simulateMouseDown(options);
-        options.clientX = endPosition.x;
-        options.clientY = endPosition.y;
+        options.clientX = endPosition.x + canvasRect.left;
+        options.clientY = endPosition.y + canvasRect.top;
         simulateMouseMove(options);
-        options.clientX = endPosition2.x;
-        options.clientY = endPosition2.y;
+        options.clientX = endPosition2.x + canvasRect.left;
+        options.clientY = endPosition2.y + canvasRect.top;
         simulateMouseMove(options);
 
         var movement = handler.getMovement(CameraEventType.LEFT_DRAG);

diff --git a/Specs/Scene/ScreenSpaceCameraControllerSpec.js b/Specs/Scene/ScreenSpaceCameraControllerSpec.js
@@ -131,15 +131,17 @@ defineSuite([
     }
 
     function moveMouse(button, startPosition, endPosition, shiftKey) {
+        var canvasRect = canvas.getBoundingClientRect();
+
         var options = {
             button : button,
-            clientX : startPosition.x,
-            clientY : startPosition.y,
+            clientX : startPosition.x + canvasRect.left,
+            clientY : startPosition.y + canvasRect.top,
             shiftKey : shiftKey
         };
         simulateMouseDown(options);
-        options.clientX = endPosition.x;
-        options.clientY = endPosition.y;
+        options.clientX = endPosition.x + canvasRect.left;
+        options.clientY = endPosition.y + canvasRect.top;
         simulateMouseMove(options);
         simulateMouseUp(options);
     }