Merge pull request #1452 from tonio/vector-api-dragbox-webgl

[vector-api] Re-enable dragzoom for every renderer
2014-01-03 07:46:14 -08:00
parent 975dd31012 2ebfba2235
commit fec4fd6d2f
10 changed files with 178 additions and 127 deletions
--- a/examples/dragzoom.html
+++ b/examples/dragzoom.html
@@ -1,52 +0,0 @@
-<!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="../css/ol.css" type="text/css">
-    <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>DragZoom example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </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="span12">
-          <h4 id="title">DragZoom example</h4>
-          <p id="shortdesc">Example of dragzoom interaction.</p>
-          <div id="docs">
-            <p>Press SHIFT and drag the map to trigger the interaction.</p>
-            <p>See the <a href="dragzoom.js" target="_blank">dragzoom.js source</a> to see how this is done.</p>
-            <p>For the moment, only works with the <strong>canvas</strong> renderer.</p>
-          </div>
-          <div id="tags">dragzoom, openstreetmap</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="loader.js?id=dragzoom" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-
-  </body>
-</html>
--- a/examples/dragzoom.js
+++ b/examples/dragzoom.js
@@ -1,38 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.RendererHint');
-goog.require('ol.View2D');
-goog.require('ol.interaction');
-goog.require('ol.interaction.DragZoom');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-
-var map = new ol.Map({
-  interactions: ol.interaction.defaults().extend([
-    new ol.interaction.DragZoom({
-      style: new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: 'rgba(255,0,0,1)',
-          width: 2
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(155,0,0,0.2)'
-        })
-      })
-    })
-  ]),
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    })
-  ],
-  renderer: ol.RendererHint.CANVAS,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
-});
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -342,6 +342,8 @@
 *     desired. Default is `true`.
 * @property {boolean|undefined} mouseWheelZoom Whether mousewheel zoom is
 *     desired. Default is `true`.
+ * @property {boolean|undefined} shiftDragZoom Whether Shift-drag zoom is
+ *     desired. Default is `true`.
 * @property {boolean|undefined} touchPan Whether touch pan is
 *     desired. Default is `true`.
 * @property {boolean|undefined} touchRotate Whether touch rotate is desired. Default is `true`.
--- a/src/ol/interaction/dragboxinteraction.js
+++ b/src/ol/interaction/dragboxinteraction.js
@@ -92,6 +92,12 @@ ol.interaction.DragBox = function(opt_options) {
   */
  this.box_ = new ol.render.Box(style);

+  /**
+   * @type {ol.Pixel}
+   * @private
+   */
+  this.startPixel_ = null;
+
  /**
   * @private
   * @type {ol.events.ConditionType}
@@ -107,8 +113,7 @@ goog.inherits(ol.interaction.DragBox, ol.interaction.Drag);
 * @inheritDoc
 */
 ol.interaction.DragBox.prototype.handleDrag = function(mapBrowserEvent) {
-  this.box_.setCoordinates(
-      this.startCoordinate, mapBrowserEvent.getCoordinate());
+  this.box_.setPixels(this.startPixel_, mapBrowserEvent.getPixel());
 };


@@ -150,8 +155,9 @@ ol.interaction.DragBox.prototype.handleDragStart =
    function(mapBrowserEvent) {
  var browserEvent = mapBrowserEvent.browserEvent;
  if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) {
-    this.box_.setCoordinates(this.startCoordinate, this.startCoordinate);
+    this.startPixel_ = mapBrowserEvent.getPixel();
    this.box_.setMap(mapBrowserEvent.map);
+    this.box_.setPixels(this.startPixel_, this.startPixel_);
    this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXSTART,
        mapBrowserEvent.getCoordinate()));
    return true;
--- a/src/ol/interaction/dragzoominteraction.js
+++ b/src/ol/interaction/dragzoominteraction.js
@@ -2,11 +2,19 @@ goog.provide('ol.interaction.DragZoom');

 goog.require('goog.asserts');
 goog.require('ol.events.condition');
+goog.require('ol.extent');
 goog.require('ol.interaction.DragBox');
+goog.require('ol.interaction.Interaction');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');


+/**
+ * @define {number} Timeout duration.
+ */
+ol.interaction.DRAGZOOM_ANIMATION_DURATION = 200;
+
+

 /**
 * Allows the user to zoom the map by clicking and dragging on the map,
@@ -47,12 +55,12 @@ goog.inherits(ol.interaction.DragZoom, ol.interaction.DragBox);
 * @inheritDoc
 */
 ol.interaction.DragZoom.prototype.onBoxEnd = function() {
-  this.getMap().withFrozenRendering(goog.bind(function() {
-    // FIXME works for View2D only
-    var view = this.getMap().getView().getView2D();
-
-    view.fitExtent(this.getGeometry().getExtent(), this.getMap().getSize());
-    // FIXME we should preserve rotation
-    view.setRotation(0);
-  }, this));
+  // FIXME works for View2D only
+  var map = this.getMap();
+  var view = map.getView().getView2D();
+  var extent = this.getGeometry().getExtent();
+  var center = ol.extent.getCenter(extent);
+  ol.interaction.Interaction.zoom(map, view,
+      view.getResolutionForExtent(extent, map.getSize()),
+      center, ol.interaction.DRAGZOOM_ANIMATION_DURATION);
 };
--- a/src/ol/interaction/interactiondefaults.js
+++ b/src/ol/interaction/interactiondefaults.js
@@ -5,6 +5,7 @@ goog.require('ol.Kinetic');
 goog.require('ol.interaction.DoubleClickZoom');
 goog.require('ol.interaction.DragPan');
 goog.require('ol.interaction.DragRotate');
+goog.require('ol.interaction.DragZoom');
 goog.require('ol.interaction.KeyboardPan');
 goog.require('ol.interaction.KeyboardZoom');
 goog.require('ol.interaction.MouseWheelZoom');
@@ -98,6 +99,12 @@ ol.interaction.defaults = function(opt_options) {
    }));
  }

+  var shiftDragZoom = goog.isDef(options.shiftDragZoom) ?
+      options.shiftDragZoom : true;
+  if (shiftDragZoom) {
+    interactions.push(new ol.interaction.DragZoom());
+  }
+
  return interactions;

 };
--- a/src/ol/render/box.js
+++ b/src/ol/render/box.js
@@ -3,6 +3,7 @@
 goog.provide('ol.render.Box');

 goog.require('goog.Disposable');
+goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('ol.geom.Polygon');
@@ -31,15 +32,15 @@ ol.render.Box = function(style) {

  /**
   * @private
-   * @type {ol.Coordinate}
+   * @type {ol.Pixel}
   */
-  this.startCoordinate_ = null;
+  this.startPixel_ = null;

  /**
   * @private
-   * @type {ol.Coordinate}
+   * @type {ol.Pixel}
   */
-  this.endCoordinate_ = null;
+  this.endPixel_ = null;

  /**
   * @private
@@ -62,19 +63,22 @@ goog.inherits(ol.render.Box, goog.Disposable);
 * @return {ol.geom.Polygon} Geometry.
 */
 ol.render.Box.prototype.createGeometry_ = function() {
-  goog.asserts.assert(!goog.isNull(this.startCoordinate_));
-  goog.asserts.assert(!goog.isNull(this.endCoordinate_));
-  var startCoordinate = this.startCoordinate_;
-  var endCoordinate = this.endCoordinate_;
-  var coordinates = [
+  goog.asserts.assert(!goog.isNull(this.startPixel_));
+  goog.asserts.assert(!goog.isNull(this.endPixel_));
+  goog.asserts.assert(!goog.isNull(this.map_));
+  var startPixel = this.startPixel_;
+  var endPixel = this.endPixel_;
+  var pixels = [
    [
-      startCoordinate,
-      [startCoordinate[0], endCoordinate[1]],
-      endCoordinate,
-      [endCoordinate[0], startCoordinate[1]]
+      startPixel,
+      [startPixel[0], endPixel[1]],
+      endPixel,
+      [endPixel[0], startPixel[1]]
    ]
  ];
-  return new ol.geom.Polygon(coordinates);
+  var coordinates = goog.array.map(pixels[0],
+      this.map_.getCoordinateFromPixel, this.map_);
+  return new ol.geom.Polygon([coordinates]);
 };


@@ -91,7 +95,6 @@ ol.render.Box.prototype.disposeInternal = function() {
 * @private
 */
 ol.render.Box.prototype.handleMapPostCompose_ = function(event) {
-  this.geometry_ = this.createGeometry_();
  var style = this.style_;
  goog.asserts.assert(!goog.isNull(style));
  var render = event.getRender();
@@ -113,8 +116,8 @@ ol.render.Box.prototype.getGeometry = function() {
 */
 ol.render.Box.prototype.requestMapRenderFrame_ = function() {
  if (!goog.isNull(this.map_) &&
-      !goog.isNull(this.startCoordinate_) &&
-      !goog.isNull(this.endCoordinate_)) {
+      !goog.isNull(this.startPixel_) &&
+      !goog.isNull(this.endPixel_)) {
    this.map_.requestRenderFrame();
  }
 };
@@ -141,12 +144,12 @@ ol.render.Box.prototype.setMap = function(map) {


 /**
- * @param {ol.Coordinate} startCoordinate Start coordinate.
- * @param {ol.Coordinate} endCoordinate End coordinate.
+ * @param {ol.Pixel} startPixel Start pixel.
+ * @param {ol.Pixel} endPixel End pixel.
 */
-ol.render.Box.prototype.setCoordinates =
-    function(startCoordinate, endCoordinate) {
-  this.startCoordinate_ = startCoordinate;
-  this.endCoordinate_ = endCoordinate;
+ol.render.Box.prototype.setPixels = function(startPixel, endPixel) {
+  this.startPixel_ = startPixel;
+  this.endPixel_ = endPixel;
+  this.geometry_ = this.createGeometry_();
  this.requestMapRenderFrame_();
 };
--- a/src/ol/render/webgl/webglimmediate.js
+++ b/src/ol/render/webgl/webglimmediate.js
@@ -0,0 +1,109 @@
+goog.provide('ol.render.webgl.Immediate');
+
+
+
+/**
+ * @constructor
+ * @implements {ol.render.IRender}
+ * @param {ol.webgl.Context} context Context.
+ * @param {number} pixelRatio Pixel ratio.
+ * @struct
+ */
+ol.render.webgl.Immediate = function(context, pixelRatio) {
+};
+
+
+/**
+ * @param {ol.Feature} feature Feature.
+ * @param {ol.style.Style} style Style.
+ */
+ol.render.webgl.Immediate.prototype.drawFeature = function(feature, style) {
+};
+
+
+/**
+ * @param {ol.geom.GeometryCollection} geometryCollectionGeometry Geometry
+ *     collection.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawGeometryCollectionGeometry =
+    function(geometryCollectionGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.Point} pointGeometry Point geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawPointGeometry =
+    function(pointGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.LineString} lineStringGeometry Line string geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawLineStringGeometry =
+    function(lineStringGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.MultiLineString} multiLineStringGeometry
+ *     MultiLineString geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawMultiLineStringGeometry =
+    function(multiLineStringGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.MultiPoint} multiPointGeometry MultiPoint geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawMultiPointGeometry =
+    function(multiPointGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawMultiPolygonGeometry =
+    function(multiPolygonGeometry, data) {
+};
+
+
+/**
+ * @param {ol.geom.Polygon} polygonGeometry Polygon geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.webgl.Immediate.prototype.drawPolygonGeometry =
+    function(polygonGeometry, data) {
+};
+
+
+/**
+ * @param {ol.style.Fill} fillStyle Fill style.
+ * @param {ol.style.Stroke} strokeStyle Stroke style.
+ */
+ol.render.webgl.Immediate.prototype.setFillStrokeStyle =
+    function(fillStyle, strokeStyle) {
+};
+
+
+/**
+ * @param {ol.style.Image} imageStyle Image style.
+ */
+ol.render.webgl.Immediate.prototype.setImageStyle = function(imageStyle) {
+};
+
+
+/**
+ * @param {ol.style.Text} textStyle Text style.
+ */
+ol.render.webgl.Immediate.prototype.setTextStyle = function(textStyle) {
+};
--- a/src/ol/renderer/webgl/webgllayerrenderer.js
+++ b/src/ol/renderer/webgl/webgllayerrenderer.js
@@ -7,6 +7,7 @@ goog.require('ol.color.Matrix');
 goog.require('ol.layer.Layer');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
+goog.require('ol.render.webgl.Immediate');
 goog.require('ol.renderer.Layer');
 goog.require('ol.renderer.webgl.map.shader.Color');
 goog.require('ol.renderer.webgl.map.shader.Default');
@@ -237,8 +238,10 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ =
    function(type, context, frameState) {
  var layer = this.getLayer();
  if (layer.hasListener(type)) {
+    var render = new ol.render.webgl.Immediate(context,
+        frameState.devicePixelRatio);
    var composeEvent = new ol.render.Event(
-        type, layer, null, frameState, null, context);
+        type, layer, render, frameState, null, context);
    layer.dispatchEvent(composeEvent);
  }
 };
--- a/src/ol/renderer/webgl/webglmaprenderer.js
+++ b/src/ol/renderer/webgl/webglmaprenderer.js
@@ -20,6 +20,7 @@ goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
+goog.require('ol.render.webgl.Immediate');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.Layer');
@@ -282,10 +283,12 @@ ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
 ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ =
    function(type, frameState) {
  var map = this.getMap();
-  var context = this.getContext();
  if (map.hasListener(type)) {
+    var context = this.getContext();
+    var render = new ol.render.webgl.Immediate(context,
+        frameState.devicePixelRatio);
    var composeEvent = new ol.render.Event(
-        type, map, null, frameState, null, context);
+        type, map, render, frameState, null, context);
    map.dispatchEvent(composeEvent);
  }
 };