Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix ScreenSpaceEventHandler when Cesium does not take up the entire browser window #2417

Merged
merged 4 commits into from
Jan 28, 2015
Merged

Fix ScreenSpaceEventHandler when Cesium does not take up the entire browser window #2417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab6c9c9
Correctly adjust clientX/clientY.
kring Jan 22, 2015
8cbb714
CameraEventAggregator must account for doc vs. canvas coords.
kring Jan 23, 2015
e0ff40d
Merge remote-tracking branch 'origin/master' into correctMouseCoordin…
kring Jan 28, 2015
99247ef
Reduce calls to getBoundingClientRect.
kring Jan 28, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Source/Core/ScreenSpaceEventHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
26 changes: 23 additions & 3 deletions Source/Scene/CameraEventAggregator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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]) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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)) {
Expand All @@ -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);
}
}
}
Expand Down
38 changes: 22 additions & 16 deletions Specs/Scene/CameraEventAggregatorSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
10 changes: 6 additions & 4 deletions Specs/Scene/ScreenSpaceCameraControllerSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down