Merge pull request #7586 from fredj/ne_dom

Named exports from ol/dom

src/ol/ImageTile.js

@@ -4,7 +4,7 @@
 import {inherits} from './index.js';
 import _ol_Tile_ from './Tile.js';
 import _ol_TileState_ from './TileState.js';
-import _ol_dom_ from './dom.js';
+import {createCanvasContext2D} from './dom.js';
 import _ol_events_ from './events.js';
 import _ol_events_EventType_ from './events/EventType.js';
 
@@ -168,7 +168,7 @@ _ol_ImageTile_.prototype.unlistenImage_ = function() {
  * @return {HTMLCanvasElement} Blank image.
  */
 _ol_ImageTile_.getBlankImage = function() {
-  var ctx = _ol_dom_.createCanvasContext2D(1, 1);
+  var ctx = createCanvasContext2D(1, 1);
   ctx.fillStyle = 'rgba(0,0,0,0)';
   ctx.fillRect(0, 0, 1, 1);
   return ctx.canvas;

src/ol/Overlay.js

@@ -6,7 +6,7 @@ import _ol_MapEventType_ from './MapEventType.js';
 import _ol_Object_ from './Object.js';
 import _ol_OverlayPositioning_ from './OverlayPositioning.js';
 import _ol_css_ from './css.js';
-import _ol_dom_ from './dom.js';
+import {removeNode, removeChildren, outerWidth, outerHeight} from './dom.js';
 import _ol_events_ from './events.js';
 import {containsExtent} from './extent.js';
 
@@ -231,7 +231,7 @@ _ol_Overlay_.prototype.getPositioning = function() {
  * @protected
  */
 _ol_Overlay_.prototype.handleElementChanged = function() {
-  _ol_dom_.removeChildren(this.element);
+  removeChildren(this.element);
   var element = this.getElement();
   if (element) {
     this.element.appendChild(element);
@@ -244,7 +244,7 @@ _ol_Overlay_.prototype.handleElementChanged = function() {
  */
 _ol_Overlay_.prototype.handleMapChanged = function() {
   if (this.mapPostrenderListenerKey) {
-    _ol_dom_.removeNode(this.element);
+    removeNode(this.element);
     _ol_events_.unlistenByKey(this.mapPostrenderListenerKey);
     this.mapPostrenderListenerKey = null;
   }
@@ -359,8 +359,7 @@ _ol_Overlay_.prototype.panIntoView = function() {
 
   var mapRect = this.getRect(map.getTargetElement(), map.getSize());
   var element = /** @type {!Element} */ (this.getElement());
-  var overlayRect = this.getRect(element,
+  var overlayRect = this.getRect(element, [outerWidth(element), outerHeight(element)]);
-      [_ol_dom_.outerWidth(element), _ol_dom_.outerHeight(element)]);
 
   var margin = this.autoPanMargin;
   if (!containsExtent(mapRect, overlayRect)) {

src/ol/PluggableMap.js

@@ -16,7 +16,7 @@ import _ol_TileQueue_ from './TileQueue.js';
 import _ol_View_ from './View.js';
 import _ol_ViewHint_ from './ViewHint.js';
 import _ol_asserts_ from './asserts.js';
-import _ol_dom_ from './dom.js';
+import {removeNode} from './dom.js';
 import _ol_events_ from './events.js';
 import _ol_events_Event_ from './events/Event.js';
 import _ol_events_EventType_ from './events/EventType.js';
@@ -949,7 +949,7 @@ _ol_PluggableMap_.prototype.handleTargetChanged_ = function() {
 
   if (!targetElement) {
     this.renderer_.removeLayerRenderers();
-    _ol_dom_.removeNode(this.viewport_);
+    removeNode(this.viewport_);
     if (this.handleResize_ !== undefined) {
       window.removeEventListener(_ol_events_EventType_.RESIZE,
           this.handleResize_, false);

src/ol/VectorImageTile.js

@@ -4,7 +4,7 @@
 import {getUid, inherits} from './index.js';
 import _ol_Tile_ from './Tile.js';
 import _ol_TileState_ from './TileState.js';
-import _ol_dom_ from './dom.js';
+import {createCanvasContext2D} from './dom.js';
 import _ol_events_ from './events.js';
 import {getHeight, getIntersection, getWidth} from './extent.js';
 import _ol_events_EventType_ from './events/EventType.js';
@@ -160,7 +160,7 @@ _ol_VectorImageTile_.prototype.disposeInternal = function() {
 _ol_VectorImageTile_.prototype.getContext = function(layer) {
   var key = getUid(layer).toString();
   if (!(key in this.context_)) {
-    this.context_[key] = _ol_dom_.createCanvasContext2D();
+    this.context_[key] = createCanvasContext2D();
   }
   return this.context_[key];
 };

src/ol/control/Attribution.js

@@ -7,7 +7,7 @@ import {inherits} from '../index.js';
 import _ol_array_ from '../array.js';
 import _ol_control_Control_ from '../control/Control.js';
 import _ol_css_ from '../css.js';
-import _ol_dom_ from '../dom.js';
+import {removeNode, replaceNode} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_EventType_ from '../events/EventType.js';
 import _ol_layer_Layer_ from '../layer/Layer.js';
@@ -273,7 +273,7 @@ _ol_control_Attribution_.prototype.insertLogos_ = function(frameState) {
 
   for (logo in logoElements) {
     if (!(logo in logos)) {
-      _ol_dom_.removeNode(logoElements[logo]);
+      removeNode(logoElements[logo]);
       delete logoElements[logo];
     }
   }
@@ -321,9 +321,9 @@ _ol_control_Attribution_.prototype.handleClick_ = function(event) {
 _ol_control_Attribution_.prototype.handleToggle_ = function() {
   this.element.classList.toggle('ol-collapsed');
   if (this.collapsed_) {
-    _ol_dom_.replaceNode(this.collapseLabel_, this.label_);
+    replaceNode(this.collapseLabel_, this.label_);
   } else {
-    _ol_dom_.replaceNode(this.label_, this.collapseLabel_);
+    replaceNode(this.label_, this.collapseLabel_);
   }
   this.collapsed_ = !this.collapsed_;
 };

src/ol/control/Control.js

@@ -4,7 +4,7 @@
 import {inherits, nullFunction} from '../index.js';
 import _ol_MapEventType_ from '../MapEventType.js';
 import _ol_Object_ from '../Object.js';
-import _ol_dom_ from '../dom.js';
+import {removeNode} from '../dom.js';
 import _ol_events_ from '../events.js';
 
 /**
@@ -82,7 +82,7 @@ inherits(_ol_control_Control_, _ol_Object_);
  * @inheritDoc
  */
 _ol_control_Control_.prototype.disposeInternal = function() {
-  _ol_dom_.removeNode(this.element);
+  removeNode(this.element);
   _ol_Object_.prototype.disposeInternal.call(this);
 };
 
@@ -107,7 +107,7 @@ _ol_control_Control_.prototype.getMap = function() {
  */
 _ol_control_Control_.prototype.setMap = function(map) {
   if (this.map_) {
-    _ol_dom_.removeNode(this.element);
+    removeNode(this.element);
   }
   for (var i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
     _ol_events_.unlistenByKey(this.listenerKeys[i]);

src/ol/control/FullScreen.js

@@ -4,7 +4,7 @@
 import {inherits} from '../index.js';
 import _ol_control_Control_ from '../control/Control.js';
 import _ol_css_ from '../css.js';
-import _ol_dom_ from '../dom.js';
+import {replaceNode} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_EventType_ from '../events/EventType.js';
 
@@ -143,10 +143,10 @@ _ol_control_FullScreen_.prototype.handleFullScreenChange_ = function() {
   var map = this.getMap();
   if (_ol_control_FullScreen_.isFullScreen()) {
     button.className = this.cssClassName_ + '-true';
-    _ol_dom_.replaceNode(this.labelActiveNode_, this.labelNode_);
+    replaceNode(this.labelActiveNode_, this.labelNode_);
   } else {
     button.className = this.cssClassName_ + '-false';
-    _ol_dom_.replaceNode(this.labelNode_, this.labelActiveNode_);
+    replaceNode(this.labelNode_, this.labelActiveNode_);
   }
   if (map) {
     map.updateSize();

src/ol/control/OverviewMap.js

@@ -14,7 +14,7 @@ import _ol_ViewProperty_ from '../ViewProperty.js';
 import _ol_control_Control_ from '../control/Control.js';
 import _ol_coordinate_ from '../coordinate.js';
 import _ol_css_ from '../css.js';
-import _ol_dom_ from '../dom.js';
+import {replaceNode} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_EventType_ from '../events/EventType.js';
 import {containsExtent, getBottomLeft, getBottomRight, getTopLeft, getTopRight, scaleFromCenter} from '../extent.js';
@@ -492,9 +492,9 @@ _ol_control_OverviewMap_.prototype.handleClick_ = function(event) {
 _ol_control_OverviewMap_.prototype.handleToggle_ = function() {
   this.element.classList.toggle('ol-collapsed');
   if (this.collapsed_) {
-    _ol_dom_.replaceNode(this.collapseLabel_, this.label_);
+    replaceNode(this.collapseLabel_, this.label_);
   } else {
-    _ol_dom_.replaceNode(this.label_, this.collapseLabel_);
+    replaceNode(this.label_, this.collapseLabel_);
   }
   this.collapsed_ = !this.collapsed_;
 

src/ol/dom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/dom
  */
-var _ol_dom_ = {};
 
 
 /**
@@ -10,7 +9,7 @@ var _ol_dom_ = {};
  * @param {number=} opt_height Canvas height.
  * @return {CanvasRenderingContext2D} The context.
  */
-_ol_dom_.createCanvasContext2D = function(opt_width, opt_height) {
+export function createCanvasContext2D(opt_width, opt_height) {
   var canvas = document.createElement('CANVAS');
   if (opt_width) {
     canvas.width = opt_width;
@@ -19,7 +18,7 @@ _ol_dom_.createCanvasContext2D = function(opt_width, opt_height) {
     canvas.height = opt_height;
   }
   return canvas.getContext('2d');
-};
+}
 
 
 /**
@@ -29,13 +28,13 @@ _ol_dom_.createCanvasContext2D = function(opt_width, opt_height) {
  * @param {!Element} element Element.
  * @return {number} The width.
  */
-_ol_dom_.outerWidth = function(element) {
+export function outerWidth(element) {
   var width = element.offsetWidth;
   var style = getComputedStyle(element);
   width += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
 
   return width;
-};
+}
 
 
 /**
@@ -45,39 +44,38 @@ _ol_dom_.outerWidth = function(element) {
  * @param {!Element} element Element.
  * @return {number} The height.
  */
-_ol_dom_.outerHeight = function(element) {
+export function outerHeight(element) {
   var height = element.offsetHeight;
   var style = getComputedStyle(element);
   height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
 
   return height;
-};
+}
 
 /**
  * @param {Node} newNode Node to replace old node
  * @param {Node} oldNode The node to be replaced
  */
-_ol_dom_.replaceNode = function(newNode, oldNode) {
+export function replaceNode(newNode, oldNode) {
   var parent = oldNode.parentNode;
   if (parent) {
     parent.replaceChild(newNode, oldNode);
   }
-};
+}
 
 /**
  * @param {Node} node The node to remove.
  * @returns {Node} The node that was removed or null.
  */
-_ol_dom_.removeNode = function(node) {
+export function removeNode(node) {
   return node && node.parentNode ? node.parentNode.removeChild(node) : null;
-};
+}
 
 /**
  * @param {Node} node The node to remove the children from.
  */
-_ol_dom_.removeChildren = function(node) {
+export function removeChildren(node) {
   while (node.lastChild) {
     node.removeChild(node.lastChild);
   }
-};
+}
-export default _ol_dom_;

src/ol/layer/Heatmap.js

@@ -4,7 +4,7 @@
 import _ol_events_ from '../events.js';
 import {inherits} from '../index.js';
 import _ol_Object_ from '../Object.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_layer_Vector_ from '../layer/Vector.js';
 import _ol_math_ from '../math.js';
 import _ol_obj_ from '../obj.js';
@@ -136,7 +136,7 @@ _ol_layer_Heatmap_.DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
 _ol_layer_Heatmap_.createGradient_ = function(colors) {
   var width = 1;
   var height = 256;
-  var context = _ol_dom_.createCanvasContext2D(width, height);
+  var context = createCanvasContext2D(width, height);
 
   var gradient = context.createLinearGradient(0, 0, width, height);
   var step = 1 / (colors.length - 1);
@@ -160,7 +160,7 @@ _ol_layer_Heatmap_.prototype.createCircle_ = function() {
   var blur = this.getBlur();
   var halfSize = radius + blur + 1;
   var size = 2 * halfSize;
-  var context = _ol_dom_.createCanvasContext2D(size, size);
+  var context = createCanvasContext2D(size, size);
   context.shadowOffsetX = context.shadowOffsetY = this.shadow_;
   context.shadowBlur = blur;
   context.shadowColor = '#000';

src/ol/render/canvas.js

@@ -2,7 +2,7 @@
  * @module ol/render/canvas
  */
 import _ol_css_ from '../css.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_obj_ from '../obj.js';
 import _ol_structs_LRUCache_ from '../structs/LRUCache.js';
 import _ol_transform_ from '../transform.js';
@@ -194,7 +194,7 @@ _ol_render_canvas_.checkFont = (function() {
 _ol_render_canvas_.getMeasureContext = function() {
   var context = _ol_render_canvas_.measureContext_;
   if (!context) {
-    context = _ol_render_canvas_.measureContext_ = _ol_dom_.createCanvasContext2D(1, 1);
+    context = _ol_render_canvas_.measureContext_ = createCanvasContext2D(1, 1);
   }
   return context;
 };

src/ol/render/canvas/ReplayGroup.js

@@ -3,7 +3,7 @@
  */
 import {inherits} from '../../index.js';
 import _ol_array_ from '../../array.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import {buffer, createEmpty, extendCoordinate} from '../../extent.js';
 import _ol_geom_flat_transform_ from '../../geom/flat/transform.js';
 import _ol_obj_ from '../../obj.js';
@@ -93,7 +93,7 @@ var _ol_render_canvas_ReplayGroup_ = function(
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.hitDetectionContext_ = _ol_dom_.createCanvasContext2D(1, 1);
+  this.hitDetectionContext_ = createCanvasContext2D(1, 1);
 
   /**
    * @private

src/ol/render/canvas/TextReplay.js

@@ -3,7 +3,7 @@
  */
 import {getUid, inherits} from '../../index.js';
 import _ol_colorlike_ from '../../colorlike.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import {intersects} from '../../extent.js';
 import _ol_geom_flat_straightchunk_ from '../../geom/flat/straightchunk.js';
 import _ol_geom_GeometryType_ from '../../geom/GeometryType.js';
@@ -301,7 +301,7 @@ _ol_render_canvas_TextReplay_.prototype.getImage = function(text, textKey, fillK
     var lineHeight = _ol_render_canvas_.measureTextHeight(textState.font);
     var height = lineHeight * numLines;
     var renderWidth = (width + strokeWidth);
-    var context = _ol_dom_.createCanvasContext2D(
+    var context = createCanvasContext2D(
         Math.ceil(renderWidth * scale),
         Math.ceil((height + strokeWidth) * scale));
     label = context.canvas;

src/ol/render/webgl/TextReplay.js

@@ -3,7 +3,7 @@
  */
 import {getUid, inherits} from '../../index.js';
 import _ol_colorlike_ from '../../colorlike.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import _ol_geom_GeometryType_ from '../../geom/GeometryType.js';
 import _ol_has_ from '../../has.js';
 import _ol_render_replay_ from '../replay.js';
@@ -38,7 +38,7 @@ var _ol_render_webgl_TextReplay_ = function(tolerance, maxExtent) {
    * @private
    * @type {HTMLCanvasElement}
    */
-  this.measureCanvas_ = _ol_dom_.createCanvasContext2D(0, 0).canvas;
+  this.measureCanvas_ = createCanvasContext2D(0, 0).canvas;
 
   /**
    * @private

src/ol/renderer/canvas/IntermediateCanvas.js

@@ -3,7 +3,7 @@
  */
 import {inherits, nullFunction} from '../../index.js';
 import _ol_coordinate_ from '../../coordinate.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import {containsExtent, intersects} from '../../extent.js';
 import _ol_renderer_canvas_Layer_ from '../canvas/Layer.js';
 import _ol_transform_ from '../../transform.js';
@@ -132,7 +132,7 @@ _ol_renderer_canvas_IntermediateCanvas_.prototype.forEachLayerAtCoordinate = fun
     _ol_coordinate_.scale(pixel, frameState.viewState.resolution / this.renderedResolution);
 
     if (!this.hitCanvasContext_) {
-      this.hitCanvasContext_ = _ol_dom_.createCanvasContext2D(1, 1);
+      this.hitCanvasContext_ = createCanvasContext2D(1, 1);
     }
 
     this.hitCanvasContext_.clearRect(0, 0, 1, 1);

src/ol/renderer/canvas/Map.js

@@ -7,7 +7,7 @@ import _ol_transform_ from '../../transform.js';
 import {inherits} from '../../index.js';
 import _ol_array_ from '../../array.js';
 import _ol_css_ from '../../css.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import _ol_layer_Layer_ from '../../layer/Layer.js';
 import _ol_render_Event_ from '../../render/Event.js';
 import _ol_render_EventType_ from '../../render/EventType.js';
@@ -32,7 +32,7 @@ var _ol_renderer_canvas_Map_ = function(container, map) {
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.context_ = _ol_dom_.createCanvasContext2D();
+  this.context_ = createCanvasContext2D();
 
   /**
    * @private

src/ol/renderer/canvas/TileLayer.js

@@ -6,7 +6,7 @@ import _ol_LayerType_ from '../../LayerType.js';
 import _ol_TileRange_ from '../../TileRange.js';
 import _ol_TileState_ from '../../TileState.js';
 import _ol_ViewHint_ from '../../ViewHint.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import {containsExtent, createEmpty, equals, getIntersection, isEmpty} from '../../extent.js';
 import _ol_renderer_Type_ from '../Type.js';
 import _ol_renderer_canvas_IntermediateCanvas_ from '../canvas/IntermediateCanvas.js';
@@ -26,7 +26,7 @@ var _ol_renderer_canvas_TileLayer_ = function(tileLayer) {
    * @protected
    * @type {CanvasRenderingContext2D}
    */
-  this.context = this.context === null ? null :  _ol_dom_.createCanvasContext2D();
+  this.context = this.context === null ? null : createCanvasContext2D();
 
   /**
    * @private

src/ol/renderer/canvas/VectorLayer.js

@@ -4,7 +4,7 @@
 import {getUid, inherits} from '../../index.js';
 import _ol_LayerType_ from '../../LayerType.js';
 import _ol_ViewHint_ from '../../ViewHint.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import _ol_events_ from '../../events.js';
 import _ol_events_EventType_ from '../../events/EventType.js';
 import _ol_ext_rbush_ from 'rbush';
@@ -78,7 +78,7 @@ var _ol_renderer_canvas_VectorLayer_ = function(vectorLayer) {
   /**
    * @type {CanvasRenderingContext2D}
    */
-  this.context = _ol_dom_.createCanvasContext2D();
+  this.context = createCanvasContext2D();
 
   _ol_events_.listen(_ol_render_canvas_.labelCache, _ol_events_EventType_.CLEAR, this.handleFontsChanged_, this);
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -4,7 +4,7 @@
 import {getUid, inherits} from '../../index.js';
 import _ol_LayerType_ from '../../LayerType.js';
 import _ol_TileState_ from '../../TileState.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import _ol_events_ from '../../events.js';
 import _ol_events_EventType_ from '../../events/EventType.js';
 import _ol_ext_rbush_ from 'rbush';
@@ -134,7 +134,7 @@ _ol_renderer_canvas_VectorTileLayer_.prototype.prepareFrame = function(frameStat
     this.renderedTiles.length = 0;
     var renderMode = layer.getRenderMode();
     if (!this.context && renderMode != _ol_layer_VectorTileRenderType_.VECTOR) {
-      this.context = _ol_dom_.createCanvasContext2D();
+      this.context = createCanvasContext2D();
     }
     if (this.context && renderMode == _ol_layer_VectorTileRenderType_.VECTOR) {
       this.context = null;

src/ol/renderer/webgl/ImageLayer.js

@@ -5,7 +5,7 @@ import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import {inherits, nullFunction} from '../../index.js';
 import _ol_LayerType_ from '../../LayerType.js';
 import _ol_ViewHint_ from '../../ViewHint.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import _ol_functions_ from '../../functions.js';
 import _ol_renderer_Type_ from '../Type.js';
@@ -280,7 +280,7 @@ _ol_renderer_webgl_ImageLayer_.prototype.forEachLayerAtPixel = function(pixel, f
     }
 
     if (!this.hitCanvasContext_) {
-      this.hitCanvasContext_ = _ol_dom_.createCanvasContext2D(1, 1);
+      this.hitCanvasContext_ = createCanvasContext2D(1, 1);
     }
 
     this.hitCanvasContext_.clearRect(0, 0, 1, 1);

src/ol/renderer/webgl/Map.js

@@ -5,7 +5,7 @@
 import {inherits} from '../../index.js';
 import _ol_array_ from '../../array.js';
 import _ol_css_ from '../../css.js';
-import _ol_dom_ from '../../dom.js';
+import {createCanvasContext2D} from '../../dom.js';
 import _ol_events_ from '../../events.js';
 import _ol_has_ from '../../has.js';
 import _ol_layer_Layer_ from '../../layer/Layer.js';
@@ -66,7 +66,7 @@ var _ol_renderer_webgl_Map_ = function(container, map) {
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.clipTileContext_ = _ol_dom_.createCanvasContext2D();
+  this.clipTileContext_ = createCanvasContext2D();
 
   /**
    * @private

src/ol/reproj.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/reproj
  */
-import _ol_dom_ from './dom.js';
+import {createCanvasContext2D} from './dom.js';
 import {containsCoordinate, createEmpty, extend, getHeight, getTopLeft, getWidth} from './extent.js';
 import _ol_math_ from './math.js';
 import {getPointResolution, transform} from './proj.js';
@@ -94,7 +94,7 @@ _ol_reproj_.render = function(width, height, pixelRatio,
     sourceResolution, sourceExtent, targetResolution, targetExtent,
     triangulation, sources, gutter, opt_renderEdges) {
 
-  var context = _ol_dom_.createCanvasContext2D(Math.round(pixelRatio * width),
+  var context = createCanvasContext2D(Math.round(pixelRatio * width),
       Math.round(pixelRatio * height));
 
   if (sources.length === 0) {
@@ -110,7 +110,7 @@ _ol_reproj_.render = function(width, height, pixelRatio,
 
   var canvasWidthInUnits = getWidth(sourceDataExtent);
   var canvasHeightInUnits = getHeight(sourceDataExtent);
-  var stitchContext = _ol_dom_.createCanvasContext2D(
+  var stitchContext = createCanvasContext2D(
       Math.round(pixelRatio * canvasWidthInUnits / sourceResolution),
       Math.round(pixelRatio * canvasHeightInUnits / sourceResolution));
 

src/ol/source/ImageStatic.js

@@ -4,7 +4,7 @@
 import {inherits} from '../index.js';
 import _ol_Image_ from '../Image.js';
 import _ol_ImageState_ from '../ImageState.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_EventType_ from '../events/EventType.js';
 import {intersects, getHeight, getWidth} from '../extent.js';
@@ -85,7 +85,7 @@ _ol_source_ImageStatic_.prototype.handleImageChange = function(evt) {
     var resolution = getHeight(imageExtent) / imageHeight;
     var targetWidth = Math.ceil(getWidth(imageExtent) / resolution);
     if (targetWidth != imageWidth) {
-      var context = _ol_dom_.createCanvasContext2D(targetWidth, imageHeight);
+      var context = createCanvasContext2D(targetWidth, imageHeight);
       var canvas = context.canvas;
       context.drawImage(image, 0, 0, imageWidth, imageHeight,
           0, 0, canvas.width, canvas.height);

src/ol/source/Raster.js

@@ -4,7 +4,7 @@
 import {getUid, inherits} from '../index.js';
 import _ol_ImageCanvas_ from '../ImageCanvas.js';
 import _ol_TileQueue_ from '../TileQueue.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_Event_ from '../events/Event.js';
 import _ol_events_EventType_ from '../events/EventType.js';
@@ -298,7 +298,7 @@ _ol_source_Raster_.prototype.onWorkerComplete_ = function(frameState, err, outpu
   } else {
     var width = Math.round(getWidth(extent) / resolution);
     var height = Math.round(getHeight(extent) / resolution);
-    context = _ol_dom_.createCanvasContext2D(width, height);
+    context = createCanvasContext2D(width, height);
     this.renderedImageCanvas_ = new _ol_ImageCanvas_(extent, resolution, 1, context.canvas);
   }
   context.putImageData(output, 0, 0);
@@ -326,11 +326,11 @@ _ol_source_Raster_.getImageData_ = function(renderer, frameState, layerState) {
   var width = frameState.size[0];
   var height = frameState.size[1];
   if (!_ol_source_Raster_.context_) {
-    _ol_source_Raster_.context_ = _ol_dom_.createCanvasContext2D(width, height);
+    _ol_source_Raster_.context_ = createCanvasContext2D(width, height);
   } else {
     var canvas = _ol_source_Raster_.context_.canvas;
     if (canvas.width !== width || canvas.height !== height) {
-      _ol_source_Raster_.context_ = _ol_dom_.createCanvasContext2D(width, height);
+      _ol_source_Raster_.context_ = createCanvasContext2D(width, height);
     } else {
       _ol_source_Raster_.context_.clearRect(0, 0, width, height);
     }

src/ol/source/TileDebug.js

@@ -4,7 +4,7 @@
 import {inherits} from '../index.js';
 import _ol_Tile_ from '../Tile.js';
 import _ol_TileState_ from '../TileState.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_size_ from '../size.js';
 import _ol_source_Tile_ from '../source/Tile.js';
 import _ol_tilecoord_ from '../tilecoord.js';
@@ -99,7 +99,7 @@ _ol_source_TileDebug_.Tile_.prototype.getImage = function() {
     return this.canvas_;
   } else {
     var tileSize = this.tileSize_;
-    var context = _ol_dom_.createCanvasContext2D(tileSize[0], tileSize[1]);
+    var context = createCanvasContext2D(tileSize[0], tileSize[1]);
 
     context.strokeStyle = 'black';
     context.strokeRect(0.5, 0.5, tileSize[0] + 0.5, tileSize[1] + 0.5);

src/ol/source/Zoomify.js

@@ -7,7 +7,7 @@ import _ol_ImageTile_ from '../ImageTile.js';
 import _ol_TileState_ from '../TileState.js';
 import _ol_TileUrlFunction_ from '../TileUrlFunction.js';
 import _ol_asserts_ from '../asserts.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import {getTopLeft} from '../extent.js';
 import _ol_size_ from '../size.js';
 import _ol_source_TileImage_ from '../source/TileImage.js';
@@ -200,7 +200,7 @@ _ol_source_Zoomify_.Tile_.prototype.getImage = function() {
       this.zoomifyImage_ = image;
       return image;
     } else {
-      var context = _ol_dom_.createCanvasContext2D(tileSize[0], tileSize[1]);
+      var context = createCanvasContext2D(tileSize[0], tileSize[1]);
       context.drawImage(image, 0, 0);
       this.zoomifyImage_ = context.canvas;
       return context.canvas;

src/ol/style/Atlas.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/style/Atlas
  */
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 
 /**
  * This class facilitates the creation of image atlases.
@@ -44,7 +44,7 @@ var _ol_style_Atlas_ = function(size, space) {
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.context_ = _ol_dom_.createCanvasContext2D(size, size);
+  this.context_ = createCanvasContext2D(size, size);
 
   /**
    * @private

src/ol/style/IconImage.js

@@ -2,7 +2,7 @@
  * @module ol/style/IconImage
  */
 import {inherits} from '../index.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_events_ from '../events.js';
 import _ol_events_EventTarget_ from '../events/EventTarget.js';
 import _ol_events_EventType_ from '../events/EventType.js';
@@ -118,7 +118,7 @@ _ol_style_IconImage_.get = function(image, src, size, crossOrigin, imageState,
  * @private
  */
 _ol_style_IconImage_.prototype.determineTainting_ = function() {
-  var context = _ol_dom_.createCanvasContext2D(1, 1);
+  var context = createCanvasContext2D(1, 1);
   try {
     context.drawImage(this.image_, 0, 0);
     context.getImageData(0, 0, 1, 1);
@@ -189,7 +189,7 @@ _ol_style_IconImage_.prototype.getHitDetectionImage = function(pixelRatio) {
     if (this.tainting_) {
       var width = this.size_[0];
       var height = this.size_[1];
-      var context = _ol_dom_.createCanvasContext2D(width, height);
+      var context = createCanvasContext2D(width, height);
       context.fillRect(0, 0, width, height);
       this.hitDetectionImage_ = context.canvas;
     } else {

src/ol/style/RegularShape.js

@@ -3,7 +3,7 @@
  */
 import {inherits} from '../index.js';
 import _ol_colorlike_ from '../colorlike.js';
-import _ol_dom_ from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import _ol_has_ from '../has.js';
 import _ol_ImageState_ from '../ImageState.js';
 import _ol_render_canvas_ from '../render/canvas.js';
@@ -368,7 +368,7 @@ _ol_style_RegularShape_.prototype.render_ = function(atlasManager) {
 
   if (atlasManager === undefined) {
     // no atlas manager is used, create a new canvas
-    var context = _ol_dom_.createCanvasContext2D(size, size);
+    var context = createCanvasContext2D(size, size);
     this.canvas_ = context.canvas;
 
     // canvas.width and height are rounded to the closest integer
@@ -489,7 +489,7 @@ _ol_style_RegularShape_.prototype.createHitDetectionCanvas_ = function(renderOpt
 
   // if no fill style is set, create an extra hit-detection image with a
   // default fill style
-  var context = _ol_dom_.createCanvasContext2D(renderOptions.size, renderOptions.size);
+  var context = createCanvasContext2D(renderOptions.size, renderOptions.size);
   this.hitDetectionCanvas_ = context.canvas;
 
   this.drawHitDetectionCanvas_(renderOptions, context, 0, 0);

test/spec/ol/dom/dom.test.js

@@ -1,4 +1,4 @@
-import _ol_dom_ from '../../../../src/ol/dom.js';
+import {createCanvasContext2D, outerWidth, outerHeight} from '../../../../src/ol/dom.js';
 
 describe('ol.dom', function() {
 
@@ -9,7 +9,7 @@ describe('ol.dom', function() {
     var defaultHeight = 150;
 
     it('returns a CanvasRenderingContext2D', function() {
-      var ctx = _ol_dom_.createCanvasContext2D();
+      var ctx = createCanvasContext2D();
       expect(ctx).to.be.a(CanvasRenderingContext2D);
       expect(ctx.canvas).to.be.a(HTMLCanvasElement);
       expect(ctx.canvas.width).to.be(defaultWidth);
@@ -17,7 +17,7 @@ describe('ol.dom', function() {
     });
 
     it('has the desired width', function() {
-      var ctx = _ol_dom_.createCanvasContext2D(42);
+      var ctx = createCanvasContext2D(42);
       expect(ctx).to.be.a(CanvasRenderingContext2D);
       expect(ctx.canvas).to.be.a(HTMLCanvasElement);
       expect(ctx.canvas.width).to.be(42);
@@ -25,7 +25,7 @@ describe('ol.dom', function() {
     });
 
     it('has the desired height', function() {
-      var ctx = _ol_dom_.createCanvasContext2D(undefined, 42);
+      var ctx = createCanvasContext2D(undefined, 42);
       expect(ctx).to.be.a(CanvasRenderingContext2D);
       expect(ctx.canvas).to.be.a(HTMLCanvasElement);
       expect(ctx.canvas.width).to.be(defaultWidth);
@@ -33,7 +33,7 @@ describe('ol.dom', function() {
     });
 
     it('has the desired height and width', function() {
-      var ctx = _ol_dom_.createCanvasContext2D(42, 42);
+      var ctx = createCanvasContext2D(42, 42);
       expect(ctx).to.be.a(CanvasRenderingContext2D);
       expect(ctx.canvas).to.be.a(HTMLCanvasElement);
       expect(ctx.canvas.width).to.be(42);
@@ -61,7 +61,7 @@ describe('ol.dom', function() {
     describe('without padding, margin or border', function() {
 
       it('calculates correctly', function() {
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(10);
       });
 
@@ -70,13 +70,13 @@ describe('ol.dom', function() {
     describe('with padding', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.paddingLeft = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(15);
       });
     });
@@ -85,13 +85,13 @@ describe('ol.dom', function() {
 
       it('calculates correctly (both sides)', function() {
         element.style.margin = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.marginLeft = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(15);
       });
 
@@ -101,14 +101,14 @@ describe('ol.dom', function() {
 
       it('calculates correctly (both sides)', function() {
         element.style.border = '5px solid chocolate';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.border = '5px solid chocolate';
         element.style.borderRightWidth = '0';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(15);
       });
 
@@ -119,14 +119,14 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
         element.style.margin = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(30);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.paddingLeft = '5px';
         element.style.marginLeft = '5px';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
@@ -137,7 +137,7 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
         element.style.border = '5px solid chocolate';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(30);
       });
 
@@ -145,7 +145,7 @@ describe('ol.dom', function() {
         element.style.paddingLeft = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderRightWidth = '0';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
@@ -156,7 +156,7 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.margin = '5px';
         element.style.border = '5px solid chocolate';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(30);
       });
 
@@ -164,7 +164,7 @@ describe('ol.dom', function() {
         element.style.marginLeft = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderRightWidth = '0';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(20);
       });
 
@@ -176,7 +176,7 @@ describe('ol.dom', function() {
         element.style.margin = '5px';
         element.style.padding = '5px';
         element.style.border = '5px solid chocolate';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(40);
       });
 
@@ -185,7 +185,7 @@ describe('ol.dom', function() {
         element.style.paddingLeft = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderRightWidth = '0';
-        var calcWidth = _ol_dom_.outerWidth(element);
+        var calcWidth = outerWidth(element);
         expect(calcWidth).to.be(25);
       });
 
@@ -212,7 +212,7 @@ describe('ol.dom', function() {
     describe('without padding, margin or border', function() {
 
       it('calculates correctly', function() {
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(10);
       });
 
@@ -221,13 +221,13 @@ describe('ol.dom', function() {
     describe('with padding', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.paddingTop = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(15);
       });
     });
@@ -236,13 +236,13 @@ describe('ol.dom', function() {
 
       it('calculates correctly (both sides)', function() {
         element.style.margin = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.marginTop = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(15);
       });
 
@@ -252,14 +252,14 @@ describe('ol.dom', function() {
 
       it('calculates correctly (both sides)', function() {
         element.style.border = '5px solid chocolate';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.border = '5px solid chocolate';
         element.style.borderBottomWidth = '0';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(15);
       });
 
@@ -270,14 +270,14 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
         element.style.margin = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(30);
       });
 
       it('calculates correctly (one side)', function() {
         element.style.paddingTop = '5px';
         element.style.marginTop = '5px';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
@@ -288,7 +288,7 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.padding = '5px';
         element.style.border = '5px solid chocolate';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(30);
       });
 
@@ -296,7 +296,7 @@ describe('ol.dom', function() {
         element.style.paddingTop = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderBottomWidth = '0';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
@@ -307,7 +307,7 @@ describe('ol.dom', function() {
       it('calculates correctly (both sides)', function() {
         element.style.margin = '5px';
         element.style.border = '5px solid chocolate';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(30);
       });
 
@@ -315,7 +315,7 @@ describe('ol.dom', function() {
         element.style.marginTop = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderBottomWidth = '0';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(20);
       });
 
@@ -327,7 +327,7 @@ describe('ol.dom', function() {
         element.style.margin = '5px';
         element.style.padding = '5px';
         element.style.border = '5px solid chocolate';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(40);
       });
 
@@ -336,7 +336,7 @@ describe('ol.dom', function() {
         element.style.paddingTop = '5px';
         element.style.border = '5px solid chocolate';
         element.style.borderBottomWidth = '0';
-        var calcHeight = _ol_dom_.outerHeight(element);
+        var calcHeight = outerHeight(element);
         expect(calcHeight).to.be(25);
       });
 

test/spec/ol/render/webgl/textreplay.test.js

@@ -1,4 +1,4 @@
-import _ol_dom_ from '../../../../../src/ol/dom.js';
+import {createCanvasContext2D} from '../../../../../src/ol/dom.js';
 import _ol_geom_Point_ from '../../../../../src/ol/geom/Point.js';
 import _ol_render_webgl_TextReplay_ from '../../../../../src/ol/render/webgl/TextReplay.js';
 import _ol_style_Fill_ from '../../../../../src/ol/style/Fill.js';
@@ -242,7 +242,7 @@ describe('ol.render.webgl.TextReplay', function() {
 
     it('returns the size of the label\'s bounding box in pixels', function() {
       var size;
-      var mCtx = _ol_dom_.createCanvasContext2D(0, 0);
+      var mCtx = createCanvasContext2D(0, 0);
       mCtx.font = '12px Arial';
       var width = mCtx.measureText('someText').width;
       var width2 = mCtx.measureText('anEvenLongerLine').width;