Use DOM instead of map canvas for ol.render.Box

changelog/upgrade-notes.md

@@ -2,6 +2,35 @@
 
 ### v3.11.0
 
+#### `ol.interaction.DragBox` and `ol.interaction.DragZoom` changes
+
+Styling is no longer done with `ol.Style`, but with pure CSS. The `style` constructor option is no longer required, and no longer available. Instead, there is a `className` option for the CSS selector. The default for `ol.interaction.DragBox` is `ol-dragbox`, and `ol.interaction.DragZoom` uses `ol-dragzoom`. If you previously had
+```js
+new ol.interaction.DragZoom({
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: [255, 255, 255, 0.4]
+    })
+  })
+});
+```
+you'll now just need
+```js
+new ol.interaction.DragZoom();
+```
+but with additional css:
+```css
+.ol-dragzoom {
+  border-color: red;
+  border-width: 3px;
+  background-color: rgba(255,255,255,0.4);
+}
+```
+
 ### v3.10.0
 
 #### `ol.layer.Layer` changes

css/ol.css

@@ -1,3 +1,8 @@
+.ol-box {
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 2px solid blue;
+}
 
 .ol-mouse-position {
   top: 8px;

examples/box-selection.css

@@ -0,0 +1,4 @@
+.ol-dragbox {
+  background-color: rgba(255,255,255,0.4);
+  border-color: rgba(100,150,0,1);
+}

examples/box-selection.js

@@ -8,9 +8,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 
 var vectorSource = new ol.source.Vector({
@@ -44,15 +41,7 @@ var selectedFeatures = select.getFeatures();
 
 // a DragBox interaction used to select features by drawing boxes
 var dragBox = new ol.interaction.DragBox({
-  condition: ol.events.condition.platformModifierKeyOnly,
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: [255, 255, 255, 0.4]
-    }),
-    stroke: new ol.style.Stroke({
-      color: [100, 150, 0, 1]
-    })
-  })
+  condition: ol.events.condition.platformModifierKeyOnly
 });
 
 map.addInteraction(dragBox);

externs/olx.js

@@ -2281,29 +2281,29 @@ olx.interaction.DragAndDropOptions.prototype.projection;
 
 
 /**
- * @typedef {{condition: (ol.events.ConditionType|undefined),
- *     style: ol.style.Style}}
+ * @typedef {{className: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined)}}
  * @api
  */
 olx.interaction.DragBoxOptions;
 
 
 /**
- * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
- * to indicate whether that event should be handled.
- * Default is {@link ol.events.condition.always}.
- * @type {ol.events.ConditionType|undefined}
+ * CSS class name for styling the box. The default is `ol-dragbox`.
+ * @type {string|undefined}
  * @api
  */
-olx.interaction.DragBoxOptions.prototype.condition;
+olx.interaction.DragBoxOptions.prototype.className;
 
 
 /**
- * Style for the box.
- * @type {ol.style.Style}
+ * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
+ * to indicate whether that event should be handled.
+ * Default is {@link ol.events.condition.always}.
+ * @type {ol.events.ConditionType|undefined}
  * @api
  */
-olx.interaction.DragBoxOptions.prototype.style;
+olx.interaction.DragBoxOptions.prototype.condition;
 
 
 /**
@@ -2374,14 +2374,22 @@ olx.interaction.DragRotateOptions.prototype.duration;
 
 
 /**
- * @typedef {{condition: (ol.events.ConditionType|undefined),
- *     duration: (number|undefined),
- *     style: (ol.style.Style|undefined)}}
+ * @typedef {{className: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined),
+ *     duration: (number|undefined)}}
  * @api
  */
 olx.interaction.DragZoomOptions;
 
 
+/**
+ * CSS class name for styling the box. The default is `ol-dragzoom`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.interaction.DragZoomOptions.prototype.className;
+
+
 /**
  * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
  * to indicate whether that event should be handled.
@@ -2400,14 +2408,6 @@ olx.interaction.DragZoomOptions.prototype.condition;
 olx.interaction.DragZoomOptions.prototype.duration;
 
 
-/**
- * Style for the box.
- * @type {ol.style.Style|undefined}
- * @api
- */
-olx.interaction.DragZoomOptions.prototype.style;
-
-
 /**
  * @typedef {{clickTolerance: (number|undefined),
  *     features: (ol.Collection.<ol.Feature>|undefined),
@@ -5995,15 +5995,15 @@ olx.style.TextOptions.prototype.rotation;
 
 
 /**
- * Text content. 
+ * Text content.
  * @type {string|undefined}
  * @api
  */
 olx.style.TextOptions.prototype.text;
 
 
 /**
- * Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. 
+ * Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'.
  * Default is 'start'.
  * @type {string|undefined}
  * @api
@@ -6012,7 +6012,7 @@ olx.style.TextOptions.prototype.textAlign;
 
 
 /**
- * Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 
+ * Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic',
  * 'hanging', 'ideographic'. Default is 'alphabetic'.
  * @type {string|undefined}
  * @api

src/ol/interaction/dragboxinteraction.js

@@ -93,17 +93,11 @@ ol.interaction.DragBox = function(opt_options) {
 
   var options = opt_options ? opt_options : {};
 
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  var style = options.style ? options.style : null;
-
   /**
    * @type {ol.render.Box}
    * @private
    */
-  this.box_ = new ol.render.Box(style);
+  this.box_ = new ol.render.Box(options.className || 'ol-dragbox');
 
   /**
    * @type {ol.Pixel}

src/ol/interaction/dragzoominteraction.js

@@ -6,8 +6,6 @@ goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.extent');
 goog.require('ol.interaction.DragBox');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 
 
@@ -17,6 +15,9 @@ goog.require('ol.style.Style');
  * normally combined with an {@link ol.events.condition} that limits
  * it to when a key, shift by default, is held down.
  *
+ * To change the style of the box, use CSS and the `.ol-dragzoom` selector, or
+ * your custom one configured with `className`.
+ *
  * @constructor
  * @extends {ol.interaction.DragBox}
  * @param {olx.interaction.DragZoomOptions=} opt_options Options.
@@ -34,20 +35,9 @@ ol.interaction.DragZoom = function(opt_options) {
    */
   this.duration_ = options.duration !== undefined ? options.duration : 200;
 
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  var style = options.style ?
-      options.style : new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: [0, 0, 255, 1]
-        })
-      });
-
   goog.base(this, {
     condition: condition,
-    style: style
+    className: options.className || 'ol-dragzoom'
   });
 
 };