Merge pull request #640 from twpayne/interaction-options

Interaction options
This commit is contained in:
Tom Payne
2013-04-23 07:11:56 -07:00
18 changed files with 262 additions and 68 deletions

View File

@@ -111,7 +111,9 @@ class Class(Exportable):
lines.append(' }\n')
lines.append(' goog.base(this, arg);\n')
lines.append('};\n')
lines.append('goog.inherits(%sExport, %s);\n' % (self.name, self.name))
lines.append('goog.inherits(\n')
lines.append(' %sExport,\n' % (self.name,));
lines.append(' %s);\n' % (self.name,));
lines.append('goog.exportSymbol(\n')
lines.append(' \'%s\',\n' % (self.name,))
lines.append(' %s);\n' % (self.export_name(),))

View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Drag rotate and zoom example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Drag rotate and zoom example</h4>
<p id="shortdesc"><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
<div id="docs">
<p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
</div>
<div id="tags">drag, rotate, zoom, interaction</div>
</div>
</div>
</div>
<script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
<script src="../resources/social-links.js" type="text/javascript"></script>
</body>
</html>

View File

@@ -0,0 +1,25 @@
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.interaction.DragRotateAndZoom');
goog.require('ol.interaction.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');
var map = new ol.Map({
interactions: ol.interaction.defaults({}, [
new ol.interaction.DragRotateAndZoom()
]),
layers: [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: [0, 0],
zoom: 2
})
});

View File

@@ -164,9 +164,38 @@
* @property {number|undefined} minResolution Minimum resolution.
*/
/**
* @typedef {Object} ol.interaction.DoubleClickZoomOptions
* @property {number|undefined} delta The zoom delta applied on each double
* click.
*/
/**
* @typedef {Object} ol.interaction.DragPanOptions
* @property {ol.Kinetic|undefined} kinetic Kinetic.
* @property {ol.interaction.ConditionType|undefined} condition Conditon.
*/
/**
* @typedef {Object} ol.interaction.DragRotateOptions
* @property {ol.interaction.ConditionType|undefined} condition Condition.
*/
/**
* @typedef {Object} ol.interaction.DragRotateAndZoomOptions
* @property {ol.interaction.ConditionType|undefined} condition Condition.
*/
/**
* @typedef {Object} ol.interaction.DragZoomOptions
* @property {ol.interaction.ConditionType|undefined} condition Condition.
*/
/**
* Interactions for the map. Default is true for all options.
* @typedef {Object} ol.interaction.DefaultsOptions
* @property {boolean|undefined} altShiftDragRotate Whether Alt-Shift-drag
* rotate is desired.
* @property {boolean|undefined} doubleClickZoom Whether double click zoom is
* desired.
* @property {boolean|undefined} dragPan Whether drag-pan is desired.
@@ -180,18 +209,31 @@
* desired.
* @property {boolean|undefined} touchRotate Whether touch rotate is desired.
* @property {boolean|undefined} touchZoom Whether touch zoom is desired.
* @property {number|undefined} zoomDelta Zoom delta.
*/
/**
* @typedef {Object} ol.interaction.KeyboardPanOptions
* @property {ol.interaction.ConditionType|undefined} condition Condition.
* @property {number|undefined} pixelDelta Pixel delta
*/
/**
* @typedef {Object} ol.interaction.KeyboardZoomOptions
* @property {ol.interaction.ConditionType|undefined} condition Condition.
* @property {number|undefined} delta Delta.
*/
/**
* @typedef {Object} ol.interaction.TouchPanOptions
* @property {ol.Kinetic|undefined} kinetic Kinetic.
*/
/**
* @typedef {Object} ol.interaction.TouchRotateOptions
* @property {number|undefined} threshold Minimal angle to start a rotation.
*/
/**
* @typedef {Object} ol.layer.LayerOptions
* @property {number|undefined} brightness Brightness.

View File

@@ -0,0 +1,6 @@
@exportSymbol ol.interaction.condition.altKeyOnly
@exportSymbol ol.interaction.condition.altShiftKeysOnly
@exportSymbol ol.interaction.condition.always
@exportSymbol ol.interaction.condition.noModifierKeys
@exportSymbol ol.interaction.condition.platformModifierKeyOnly
@exportSymbol ol.interaction.condition.shiftKeyOnly

View File

@@ -1,6 +1,8 @@
goog.provide('ol.interaction.ConditionType');
goog.provide('ol.interaction.condition');
goog.require('goog.functions');
/**
* @typedef {function(goog.events.BrowserEvent): boolean}
@@ -32,6 +34,13 @@ ol.interaction.condition.altShiftKeysOnly = function(browserEvent) {
};
/**
* @param {goog.events.BrowserEvent} browserEvent Browser event.
* @return {boolean} True.
*/
ol.interaction.condition.always = goog.functions.TRUE;
/**
* @param {goog.events.BrowserEvent} browserEvent Browser event.
* @return {boolean} True if only the no modifier keys are pressed.

View File

@@ -1,6 +1,6 @@
// FIXME works for View2D only
goog.provide('ol.interaction.DblClickZoom');
goog.provide('ol.interaction.DoubleClickZoom');
goog.require('goog.asserts');
goog.require('ol.MapBrowserEvent');
@@ -11,43 +11,46 @@ goog.require('ol.interaction.Interaction');
/**
* @define {number} Animation duration.
*/
ol.interaction.DBLCLICKZOOM_ANIMATION_DURATION = 250;
ol.interaction.DOUBLECLICKZOOM_ANIMATION_DURATION = 250;
/**
* @constructor
* @extends {ol.interaction.Interaction}
* @param {number} delta The zoom delta applied on each double click.
* @param {ol.interaction.DoubleClickZoomOptions=} opt_options Options.
*/
ol.interaction.DblClickZoom = function(delta) {
ol.interaction.DoubleClickZoom = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {number}
*/
this.delta_ = delta;
this.delta_ = goog.isDef(options.delta) ? options.delta : 1;
goog.base(this);
};
goog.inherits(ol.interaction.DblClickZoom, ol.interaction.Interaction);
goog.inherits(ol.interaction.DoubleClickZoom, ol.interaction.Interaction);
/**
* @inheritDoc
*/
ol.interaction.DblClickZoom.prototype.handleMapBrowserEvent =
ol.interaction.DoubleClickZoom.prototype.handleMapBrowserEvent =
function(mapBrowserEvent) {
var browserEvent = mapBrowserEvent.browserEvent;
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.DBLCLICK &&
mapBrowserEvent.isMouseActionButton()) {
var map = mapBrowserEvent.map;
var anchor = mapBrowserEvent.getCoordinate();
var delta = mapBrowserEvent.browserEvent.shiftKey ?
-this.delta_ : this.delta_;
var delta = browserEvent.shiftKey ? -this.delta_ : this.delta_;
// FIXME works for View2D only
var view = map.getView().getView2D();
ol.interaction.Interaction.zoomByDelta(map, view, delta, anchor,
ol.interaction.DBLCLICKZOOM_ANIMATION_DURATION);
ol.interaction.DOUBLECLICKZOOM_ANIMATION_DURATION);
mapBrowserEvent.preventDefault();
browserEvent.preventDefault();
}

View File

@@ -11,30 +11,33 @@ goog.require('ol.ViewHint');
goog.require('ol.coordinate');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Drag');
goog.require('ol.interaction.condition');
/**
* @constructor
* @extends {ol.interaction.Drag}
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.Kinetic=} opt_kinetic Kinetic object.
* @param {ol.interaction.DragPanOptions=} opt_options Options.
*/
ol.interaction.DragPan = function(condition, opt_kinetic) {
ol.interaction.DragPan = function(opt_options) {
goog.base(this);
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.noModifierKeys;
/**
* @private
* @type {ol.Kinetic|undefined}
*/
this.kinetic_ = opt_kinetic;
this.kinetic_ = options.kinetic;
/**
* @private

View File

@@ -0,0 +1 @@
@exportClass ol.interaction.DragRotateAndZoom ol.interaction.DragRotateAndZoomOptions

View File

@@ -7,15 +7,24 @@ goog.require('goog.math.Vec2');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Drag');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.condition');
/**
* @define {number} Animation duration.
*/
ol.interaction.DRAGROTATEANDZOOM_ANIMATION_DURATION = 400;
/**
* @constructor
* @extends {ol.interaction.Drag}
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.interaction.DragRotateAndZoomOptions=} opt_options Options.
*/
ol.interaction.DragRotateAndZoom = function(condition) {
ol.interaction.DragRotateAndZoom = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
goog.base(this);
@@ -23,7 +32,8 @@ ol.interaction.DragRotateAndZoom = function(condition) {
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.shiftKeyOnly;
/**
* @private
@@ -37,6 +47,12 @@ ol.interaction.DragRotateAndZoom = function(condition) {
*/
this.lastMagnitude_ = undefined;
/**
* @private
* @type {number}
*/
this.lastScaleDelta_ = 0;
};
goog.inherits(ol.interaction.DragRotateAndZoom, ol.interaction.Drag);
@@ -57,22 +73,41 @@ ol.interaction.DragRotateAndZoom.prototype.handleDrag =
// FIXME works for View2D only
var view = map.getView().getView2D();
map.requestRenderFrame();
// FIXME the calls to map.rotate and map.zoomToResolution should use
// map.withFrozenRendering but an assertion fails :-(
if (goog.isDef(this.lastAngle_)) {
var angleDelta = theta - this.lastAngle_;
ol.interaction.Interaction.rotate(
ol.interaction.Interaction.rotateWithoutConstraints(
map, view, view.getRotation() - angleDelta);
}
this.lastAngle_ = theta;
if (goog.isDef(this.lastMagnitude_)) {
var resolution = this.lastMagnitude_ * (view.getResolution() / magnitude);
ol.interaction.Interaction.zoom(map, view, resolution);
ol.interaction.Interaction.zoomWithoutConstraints(map, view, resolution);
}
if (goog.isDef(this.lastMagnitude_)) {
this.lastScaleDelta_ = this.lastMagnitude_ / magnitude;
}
this.lastMagnitude_ = magnitude;
};
/**
* @inheritDoc
*/
ol.interaction.DragRotateAndZoom.prototype.handleDragEnd =
function(mapBrowserEvent) {
var map = mapBrowserEvent.map;
var view = map.getView().getView2D();
var direction = this.lastScaleDelta_ - 1;
map.withFrozenRendering(function() {
ol.interaction.Interaction.rotate(map, view, view.getRotation());
ol.interaction.Interaction.zoom(map, view, view.getResolution(), undefined,
ol.interaction.DRAGROTATEANDZOOM_ANIMATION_DURATION, direction);
});
this.lastScaleDelta_ = 0;
return true;
};
/**
* @inheritDoc
*/

View File

@@ -6,6 +6,7 @@ goog.require('ol.ViewHint');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Drag');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.condition');
/**
@@ -18,9 +19,11 @@ ol.interaction.DRAGROTATE_ANIMATION_DURATION = 250;
/**
* @constructor
* @extends {ol.interaction.Drag}
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.interaction.DragRotateOptions=} opt_options Options.
*/
ol.interaction.DragRotate = function(condition) {
ol.interaction.DragRotate = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
goog.base(this);
@@ -28,13 +31,14 @@ ol.interaction.DragRotate = function(condition) {
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.altShiftKeysOnly;
/**
* @private
* @type {number|undefined}
*/
this.lastAngle_;
this.lastAngle_ = undefined;
};
goog.inherits(ol.interaction.DragRotate, ol.interaction.Drag);

View File

@@ -10,6 +10,7 @@ goog.require('ol.control.DragBox');
goog.require('ol.extent');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Drag');
goog.require('ol.interaction.condition');
/**
@@ -30,17 +31,20 @@ ol.SHIFT_DRAG_ZOOM_HYSTERESIS_PIXELS_SQUARED =
/**
* @constructor
* @extends {ol.interaction.Drag}
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.interaction.DragZoomOptions=} opt_options Options.
*/
ol.interaction.DragZoom = function(condition) {
ol.interaction.DragZoom = function(opt_options) {
goog.base(this);
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.shiftKeyOnly;
/**
* @type {ol.control.DragBox}

View File

@@ -2,7 +2,7 @@ goog.provide('ol.interaction.defaults');
goog.require('ol.Collection');
goog.require('ol.Kinetic');
goog.require('ol.interaction.DblClickZoom');
goog.require('ol.interaction.DoubleClickZoom');
goog.require('ol.interaction.DragPan');
goog.require('ol.interaction.DragRotate');
goog.require('ol.interaction.DragZoom');
@@ -13,7 +13,6 @@ goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.TouchPan');
goog.require('ol.interaction.TouchRotate');
goog.require('ol.interaction.TouchZoom');
goog.require('ol.interaction.condition');
/**
@@ -28,26 +27,28 @@ ol.interaction.defaults = function(opt_options, opt_interactions) {
var interactions = new ol.Collection();
var rotate = goog.isDef(options.rotate) ?
options.rotate : true;
if (rotate) {
interactions.push(new ol.interaction.DragRotate(
ol.interaction.condition.altShiftKeysOnly));
var kinetic = new ol.Kinetic(-0.005, 0.05, 100);
var altShiftDragRotate = goog.isDef(options.altShiftDragRotate) ?
options.altShiftDragRotate : true;
if (altShiftDragRotate) {
interactions.push(new ol.interaction.DragRotate());
}
var doubleClickZoom = goog.isDef(options.doubleClickZoom) ?
options.doubleClickZoom : true;
if (doubleClickZoom) {
var zoomDelta = goog.isDef(options.zoomDelta) ?
options.zoomDelta : 1;
interactions.push(new ol.interaction.DblClickZoom(zoomDelta));
interactions.push(new ol.interaction.DoubleClickZoom({
delta: options.zoomDelta
}));
}
var touchPan = goog.isDef(options.touchPan) ?
options.touchPan : true;
if (touchPan) {
interactions.push(new ol.interaction.TouchPan(
new ol.Kinetic(-0.005, 0.05, 100)));
interactions.push(new ol.interaction.TouchPan({
kinetic: kinetic
}));
}
var touchRotate = goog.isDef(options.touchRotate) ?
@@ -65,18 +66,18 @@ ol.interaction.defaults = function(opt_options, opt_interactions) {
var dragPan = goog.isDef(options.dragPan) ?
options.dragPan : true;
if (dragPan) {
interactions.push(
new ol.interaction.DragPan(ol.interaction.condition.noModifierKeys,
new ol.Kinetic(-0.005, 0.05, 100)));
interactions.push(new ol.interaction.DragPan({
kinetic: kinetic
}));
}
var keyboard = goog.isDef(options.keyboard) ?
options.keyboard : true;
if (keyboard) {
interactions.push(new ol.interaction.KeyboardPan(
ol.interaction.condition.noModifierKeys));
interactions.push(new ol.interaction.KeyboardZoom(
ol.interaction.condition.noModifierKeys));
interactions.push(new ol.interaction.KeyboardPan());
interactions.push(new ol.interaction.KeyboardZoom({
delta: options.zoomDelta
}));
}
var mouseWheelZoom = goog.isDef(options.mouseWheelZoom) ?
@@ -88,8 +89,7 @@ ol.interaction.defaults = function(opt_options, opt_interactions) {
var shiftDragZoom = goog.isDef(options.shiftDragZoom) ?
options.shiftDragZoom : true;
if (shiftDragZoom) {
interactions.push(
new ol.interaction.DragZoom(ol.interaction.condition.shiftKeyOnly));
interactions.push(new ol.interaction.DragZoom());
}
if (goog.isDef(opt_interactions)) {

View File

@@ -9,6 +9,7 @@ goog.require('ol.View2D');
goog.require('ol.coordinate');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.condition');
/**
@@ -21,10 +22,9 @@ ol.interaction.KEYBOARD_PAN_DURATION = 100;
/**
* @constructor
* @extends {ol.interaction.Interaction}
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.interaction.KeyboardPanOptions=} opt_options Options.
*/
ol.interaction.KeyboardPan = function(condition, opt_options) {
ol.interaction.KeyboardPan = function(opt_options) {
goog.base(this);
@@ -34,7 +34,8 @@ ol.interaction.KeyboardPan = function(condition, opt_options) {
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.noModifierKeys;
/**
* @private

View File

@@ -6,6 +6,7 @@ goog.require('goog.asserts');
goog.require('goog.events.KeyHandler.EventType');
goog.require('ol.interaction.ConditionType');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.condition');
/**
@@ -17,11 +18,10 @@ ol.interaction.KEYBOARD_ZOOM_DURATION = 100;
/**
* @constructor
* @param {ol.interaction.ConditionType} condition Condition.
* @param {ol.interaction.KeyboardZoomOptions=} opt_options Options.
* @extends {ol.interaction.Interaction}
*/
ol.interaction.KeyboardZoom = function(condition, opt_options) {
ol.interaction.KeyboardZoom = function(opt_options) {
goog.base(this);
@@ -31,7 +31,8 @@ ol.interaction.KeyboardZoom = function(condition, opt_options) {
* @private
* @type {ol.interaction.ConditionType}
*/
this.condition_ = condition;
this.condition_ = goog.isDef(options.condition) ?
options.condition : ol.interaction.condition.noModifierKeys;
/**
* @private

View File

@@ -15,17 +15,19 @@ goog.require('ol.interaction.Touch');
/**
* @constructor
* @extends {ol.interaction.Touch}
* @param {ol.Kinetic=} opt_kinetic Kinetic object.
* @param {ol.interaction.TouchPanOptions=} opt_options Options.
*/
ol.interaction.TouchPan = function(opt_kinetic) {
ol.interaction.TouchPan = function(opt_options) {
goog.base(this);
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {ol.Kinetic|undefined}
*/
this.kinetic_ = opt_kinetic;
this.kinetic_ = options.kinetic;
/**
* @private

View File

@@ -21,13 +21,14 @@ ol.interaction.TOUCHROTATE_ANIMATION_DURATION = 250;
/**
* @constructor
* @extends {ol.interaction.Touch}
* @param {number=} opt_threshold Minimal angle to start a rotation.
* Default to 0.3 (radian).
* @param {ol.interaction.TouchRotateOptions=} opt_options Options.
*/
ol.interaction.TouchRotate = function(opt_threshold) {
ol.interaction.TouchRotate = function(opt_options) {
goog.base(this);
var options = goog.isDef(opt_options) ? opt_options : {};
/**
* @private
* @type {ol.Coordinate}
@@ -56,7 +57,7 @@ ol.interaction.TouchRotate = function(opt_threshold) {
* @private
* @type {number}
*/
this.threshold_ = goog.isDef(opt_threshold) ? opt_threshold : 0.3;
this.threshold_ = goog.isDef(options.threshold) ? options.threshold : 0.3;
};
goog.inherits(ol.interaction.TouchRotate, ol.interaction.Touch);

View File

@@ -72,7 +72,7 @@ describe('ol.Map', function() {
beforeEach(function() {
options = {
rotate: false,
altShiftDragRotate: false,
doubleClickZoom: false,
dragPan: false,
keyboard: false,
@@ -103,7 +103,7 @@ describe('ol.Map', function() {
it('create double click interaction with default delta', function() {
var interactions = ol.interaction.defaults(options);
expect(interactions.getLength()).to.eql(1);
expect(interactions.getAt(0)).to.be.a(ol.interaction.DblClickZoom);
expect(interactions.getAt(0)).to.be.a(ol.interaction.DoubleClickZoom);
expect(interactions.getAt(0).delta_).to.eql(1);
});
});
@@ -113,7 +113,7 @@ describe('ol.Map', function() {
options.zoomDelta = 7;
var interactions = ol.interaction.defaults(options);
expect(interactions.getLength()).to.eql(1);
expect(interactions.getAt(0)).to.be.a(ol.interaction.DblClickZoom);
expect(interactions.getAt(0)).to.be.a(ol.interaction.DoubleClickZoom);
expect(interactions.getAt(0).delta_).to.eql(7);
});
});
@@ -127,6 +127,6 @@ goog.require('goog.dom');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.RendererHints');
goog.require('ol.interaction.DblClickZoom');
goog.require('ol.interaction.DoubleClickZoom');
goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.defaults');