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

[vector-api] Re-enable dragzoom for every renderer

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`.

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;

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);
 };

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;
 
 };

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_();
 };

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) {
+};

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);
   }
 };

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);
   }
 };