From ab6c9c999f2109b72b19b21f2d16cbb1a1d7cf5d Mon Sep 17 00:00:00 2001 From: Kevin Ring Date: Thu, 22 Jan 2015 14:51:25 +1100 Subject: [PATCH 1/3] Correctly adjust clientX/clientY. --- Source/Core/ScreenSpaceEventHandler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Source/Core/ScreenSpaceEventHandler.js b/Source/Core/ScreenSpaceEventHandler.js index 97fb4add2958..befbc1cc7cec 100644 --- 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; From 8cbb714b61f69a957c60c753f808063e018085dc Mon Sep 17 00:00:00 2001 From: Kevin Ring Date: Fri, 23 Jan 2015 12:13:40 +1100 Subject: [PATCH 2/3] CameraEventAggregator must account for doc vs. canvas coords. --- Source/Scene/CameraEventAggregator.js | 25 ++++++++++-- Specs/Scene/CameraEventAggregatorSpec.js | 38 +++++++++++-------- .../Scene/ScreenSpaceCameraControllerSpec.js | 10 +++-- 3 files changed, 50 insertions(+), 23 deletions(-) diff --git a/Source/Scene/CameraEventAggregator.js b/Source/Scene/CameraEventAggregator.js index b5919c961392..617bbb557f00 100644 --- a/Source/Scene/CameraEventAggregator.js +++ b/Source/Scene/CameraEventAggregator.js @@ -39,6 +39,12 @@ define([ Cartesian2.clone(pinchMovement.angleAndHeight.endPosition, result.angleAndHeight.endPosition); } + function transformDocumentCoordinatesToCanvasCoordinates(coordinates, canvas) { + var canvasRect = canvas.getBoundingClientRect(); + coordinates.x -= canvasRect.left; + coordinates.y -= canvasRect.top; + } + function listenToPinch(aggregator, modifier, canvas) { var key = getKey(CameraEventType.PINCH, modifier); @@ -81,6 +87,11 @@ define([ }, ScreenSpaceEventType.PINCH_END, modifier); aggregator._documentEventHandler.setInputAction(function(mouseMovement) { + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.startPosition, canvas); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.endPosition, canvas); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.startPosition, canvas); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.endPosition, canvas); + 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,15 @@ define([ } } + var mouseMovementScratch = { + startPosition : new Cartesian2(), + endPosition : new Cartesian2() + }; + aggregator._documentEventHandler.setInputAction(function(mouseMovement) { + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.startPosition, canvas); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.endPosition, canvas); + for ( var typeName in CameraEventType) { if (CameraEventType.hasOwnProperty(typeName)) { var type = CameraEventType[typeName]; @@ -282,7 +301,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 +312,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 index 5b57767053fd..fa17689faa1d 100644 --- 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 index 19378887f914..c5ee2fbfe7dc 100644 --- a/Specs/Scene/ScreenSpaceCameraControllerSpec.js +++ b/Specs/Scene/ScreenSpaceCameraControllerSpec.js @@ -136,15 +136,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); } From 99247efb5c8a13de2b1f4fc3bae5adf1c0ab5458 Mon Sep 17 00:00:00 2001 From: Kevin Ring Date: Wed, 28 Jan 2015 21:45:47 +1100 Subject: [PATCH 3/3] Reduce calls to getBoundingClientRect. --- Source/Scene/CameraEventAggregator.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/Source/Scene/CameraEventAggregator.js b/Source/Scene/CameraEventAggregator.js index 617bbb557f00..c92f6d3f9e07 100644 --- a/Source/Scene/CameraEventAggregator.js +++ b/Source/Scene/CameraEventAggregator.js @@ -39,10 +39,9 @@ define([ Cartesian2.clone(pinchMovement.angleAndHeight.endPosition, result.angleAndHeight.endPosition); } - function transformDocumentCoordinatesToCanvasCoordinates(coordinates, canvas) { - var canvasRect = canvas.getBoundingClientRect(); - coordinates.x -= canvasRect.left; - coordinates.y -= canvasRect.top; + function transformDocumentCoordinatesToCanvasCoordinates(coordinates, canvasBoundingRectangle) { + coordinates.x -= canvasBoundingRectangle.left; + coordinates.y -= canvasBoundingRectangle.top; } function listenToPinch(aggregator, modifier, canvas) { @@ -87,10 +86,11 @@ define([ }, ScreenSpaceEventType.PINCH_END, modifier); aggregator._documentEventHandler.setInputAction(function(mouseMovement) { - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.startPosition, canvas); - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.distance.endPosition, canvas); - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.startPosition, canvas); - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.angleAndHeight.endPosition, canvas); + 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. @@ -236,8 +236,9 @@ define([ }; aggregator._documentEventHandler.setInputAction(function(mouseMovement) { - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.startPosition, canvas); - transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.endPosition, canvas); + var canvasBoundingRectangle = canvas.getBoundingClientRect(); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.startPosition, canvasBoundingRectangle); + transformDocumentCoordinatesToCanvasCoordinates(mouseMovement.endPosition, canvasBoundingRectangle); for ( var typeName in CameraEventType) { if (CameraEventType.hasOwnProperty(typeName)) {