Permalink
Browse files

Separated panning and tilting into two distinct classes

  • Loading branch information...
1 parent 429d573 commit 7f392d17a55e4093daebceb34a75ebe5c914f4ee @petrsloup petrsloup committed Sep 13, 2011
Showing with 241 additions and 85 deletions.
  1. +15 −82 we/ui/{scenedragger.js → scenepanner.js}
  2. +216 −0 we/ui/scenetilter.js
  3. +10 −3 weapp/main.js
@@ -21,23 +21,21 @@
*/
/**
- * @fileoverview Scene dragging.
+ * @fileoverview Scene panning.
*
* @author petr.sloup@klokantech.com (Petr Sloup)
* @author petr.pridal@klokantech.com (Petr Pridal)
*
*/
-goog.provide('we.ui.SceneDragger');
+goog.provide('we.ui.ScenePanner');
-goog.require('goog.Timer');
goog.require('goog.events');
+goog.require('goog.events.EventType');
goog.require('goog.fx.Animation');
goog.require('goog.fx.Animation.EventType');
-goog.require('goog.fx.AnimationEvent');
goog.require('goog.fx.easing');
goog.require('goog.math');
-goog.require('goog.ui.Component.EventType');
goog.require('we.scene.CameraAnimator');
goog.require('we.scene.Scene');
@@ -51,7 +49,7 @@ goog.require('we.scene.Scene');
* cancel on user input.
* @constructor
*/
-we.ui.SceneDragger = function(scene, opt_animator) {
+we.ui.ScenePanner = function(scene, opt_animator) {
/**
* @type {!we.scene.Scene}
* @private
@@ -65,21 +63,6 @@ we.ui.SceneDragger = function(scene, opt_animator) {
this.dragging_ = false;
/**
- * undefined - no rotation,
- * null - free rotation,
- * Array.<number> - fixed rotation around this coordinates
- * @type {undefined|null|Array.<number>}
- * @private
- */
- this.rotationTarget_ = undefined;
-
- /**
- * @type {number}
- * @private
- */
- this.rotationDistance_ = 0;
-
- /**
* @type {number}
* @private
*/
@@ -135,7 +118,7 @@ we.ui.SceneDragger = function(scene, opt_animator) {
* @param {!goog.events.BrowserEvent} e Event object.
* @private
*/
-we.ui.SceneDragger.prototype.onMouseDown_ = function(e) {
+we.ui.ScenePanner.prototype.onMouseDown_ = function(e) {
if (!e.isButton(goog.events.BrowserEvent.MouseButton.RIGHT) &&
!e.ctrlKey && !e.altKey) {
@@ -152,44 +135,12 @@ we.ui.SceneDragger.prototype.onMouseDown_ = function(e) {
this.olderX_ = this.oldX_ = e.screenX;
this.olderY_ = this.oldY_ = e.screenY;
-
- if (e.isButton(goog.events.BrowserEvent.MouseButton.MIDDLE) ||
- (e.isButton(goog.events.BrowserEvent.MouseButton.LEFT) &&
- e.shiftKey)) {
- this.rotationTarget_ = this.scene_.camera.getTarget();// ||*/
- //this.scene_.getLatLongForXY(e.offsetX, e.offsetY,
- // true);
- if (goog.isDefAndNotNull(this.rotationTarget_)) {
- if (window.debugMarker) {
- window.debugMarker.lat = goog.math.toDegrees(this.rotationTarget_[0]);
- window.debugMarker.lon = goog.math.toDegrees(this.rotationTarget_[1]);
- window.debugMarker.enable(true);
- }
- //TODO: Optimize !!
- if (this.scene_.camera.getTilt() == 0) {
- this.rotationDistance_ = this.scene_.camera.getAltitude();
- } else {
- var singamma =
- (1 + this.scene_.camera.getAltitude() / we.scene.EARTH_RADIUS) *
- Math.sin(this.scene_.camera.getTilt());
- var gamma = Math.PI - Math.asin(singamma);
-
- var beta = Math.PI - this.scene_.camera.getTilt() - gamma;
- this.rotationDistance_ =
- (Math.sin(beta) / Math.sin(this.scene_.camera.getTilt())) *
- we.scene.EARTH_RADIUS;
- }
- }
- }
-
-
//Unregister onMouseMove_
if (!goog.isNull(this.listenKey_)) {
goog.events.unlistenByKey(this.listenKey_);
this.listenKey_ = null;
}
-
//Register onMouseMove_
this.listenKey_ = goog.events.listen(
goog.dom.getOwnerDocument(this.scene_.context.canvas),
@@ -206,15 +157,11 @@ we.ui.SceneDragger.prototype.onMouseDown_ = function(e) {
* @param {!goog.events.BrowserEvent} e Event object.
* @private
*/
-we.ui.SceneDragger.prototype.onMouseUp_ = function(e) {
+we.ui.ScenePanner.prototype.onMouseUp_ = function(e) {
if (this.dragging_) {
e.preventDefault();
- this.rotationTarget_ = undefined;
- if (window.debugMarker)
- window.debugMarker.enable(false);
-
this.dragging_ = false;
//Unregister onMouseMove_
@@ -256,35 +203,21 @@ we.ui.SceneDragger.prototype.onMouseUp_ = function(e) {
* @param {number} yDiff Difference of position in pixels in y-axis.
* @private
*/
-we.ui.SceneDragger.prototype.scenePixelMove_ = function(xDiff, yDiff) {
- if (goog.isDef(this.rotationTarget_)) { //Rotation mode
- var deltaX = (xDiff / this.scene_.context.canvas.width) * Math.PI * -2;
- var deltaY = (yDiff / this.scene_.context.canvas.height) * Math.PI / 2;
-
- if (!goog.isNull(this.rotationTarget_)) { //Rotation around fixed target
- this.scene_.camera.rotateAround(
- this.rotationTarget_[0], this.rotationTarget_[1],
- this.rotationDistance_, deltaX, deltaY);
- } else { //Free rotation
- this.scene_.camera.setHeading(this.scene_.camera.getHeading() + deltaX);
- this.scene_.camera.setTilt(this.scene_.camera.getTilt() + deltaY);
- }
- } else { //Pan mode
- //PI * (How much is 1px on the screen?) * (How much is visible?)
- var factor = Math.PI * (1 / this.scene_.context.canvas.height) *
- (this.scene_.tilesVertically /
- Math.pow(2, this.scene_.camera.getZoom()));
+we.ui.ScenePanner.prototype.scenePixelMove_ = function(xDiff, yDiff) {
+ //PI * (How much is 1px on the screen?) * (How much is visible?)
+ var factor = Math.PI * (1 / this.scene_.context.canvas.height) *
+ (this.scene_.tilesVertically /
+ Math.pow(2, this.scene_.camera.getZoom()));
- this.scene_.camera.moveRelative(yDiff * factor, -2 * xDiff * factor);
- }
+ this.scene_.camera.moveRelative(yDiff * factor, -2 * xDiff * factor);
};
/**
* @param {!goog.events.BrowserEvent} e Event object.
* @private
*/
-we.ui.SceneDragger.prototype.onMouseMove_ = function(e) {
+we.ui.ScenePanner.prototype.onMouseMove_ = function(e) {
var xDiff = e.screenX - this.oldX_;
var yDiff = e.screenY - this.oldY_;
@@ -308,7 +241,7 @@ we.ui.SceneDragger.prototype.onMouseMove_ = function(e) {
* @param {number=} opt_duration Duration of the animation.
* @private
*/
-we.ui.SceneDragger.prototype.inertialStart_ =
+we.ui.ScenePanner.prototype.inertialStart_ =
function(xDiff, yDiff, opt_duration) {
var duration = opt_duration || 1300;
@@ -330,7 +263,7 @@ we.ui.SceneDragger.prototype.inertialStart_ =
* @param {!goog.fx.AnimationEvent} e Event object.
* @private
*/
-we.ui.SceneDragger.prototype.inertialMoveTick_ = function(e) {
+we.ui.ScenePanner.prototype.inertialMoveTick_ = function(e) {
this.scenePixelMove_(e.x - this.oldX_, e.y - this.oldY_);
this.oldX_ = e.x;
this.oldY_ = e.y;
Oops, something went wrong.

0 comments on commit 7f392d1

Please sign in to comment.