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
@@ -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>
@@ -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
  })
 });
@@ -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`.
@@ -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.box_.setPixels(this.startPixel_, mapBrowserEvent.getPixel());
      this.startCoordinate, mapBrowserEvent.getCoordinate());
 };
@@ -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;
@@ -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
-    // FIXME works for View2D only
+  var map = this.getMap();
-    var view = this.getMap().getView().getView2D();
+  var view = map.getView().getView2D();
-
+  var extent = this.getGeometry().getExtent();
-    view.fitExtent(this.getGeometry().getExtent(), this.getMap().getSize());
+  var center = ol.extent.getCenter(extent);
-    // FIXME we should preserve rotation
+  ol.interaction.Interaction.zoom(map, view,
-    view.setRotation(0);
+      view.getResolutionForExtent(extent, map.getSize()),
-  }, this));
+      center, ol.interaction.DRAGZOOM_ANIMATION_DURATION);
 };
@@ -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;
 };
@@ -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.startPixel_));
-  goog.asserts.assert(!goog.isNull(this.endCoordinate_));
+  goog.asserts.assert(!goog.isNull(this.endPixel_));
-  var startCoordinate = this.startCoordinate_;
+  goog.asserts.assert(!goog.isNull(this.map_));
-  var endCoordinate = this.endCoordinate_;
+  var startPixel = this.startPixel_;
-  var coordinates = [
+  var endPixel = this.endPixel_;
  var pixels = [
    [
-      startCoordinate,
+      startPixel,
-      [startCoordinate[0], endCoordinate[1]],
+      [startPixel[0], endPixel[1]],
-      endCoordinate,
+      endPixel,
-      [endCoordinate[0], startCoordinate[1]]
+      [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.startPixel_) &&
-      !goog.isNull(this.endCoordinate_)) {
+      !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.Pixel} startPixel Start pixel.
- * @param {ol.Coordinate} endCoordinate End coordinate.
+ * @param {ol.Pixel} endPixel End pixel.
 */
-ol.render.Box.prototype.setCoordinates =
+ol.render.Box.prototype.setPixels = function(startPixel, endPixel) {
-    function(startCoordinate, endCoordinate) {
+  this.startPixel_ = startPixel;
-  this.startCoordinate_ = startCoordinate;
+  this.endPixel_ = endPixel;
-  this.endCoordinate_ = endCoordinate;
+  this.geometry_ = this.createGeometry_();
  this.requestMapRenderFrame_();
 };
@@ -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) {
 };
@@ -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);
  }
 };
@@ -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);
  }
 };