diff --git a/src/ol/ImageTile.js b/src/ol/ImageTile.js index 6c10a2a673..7b1be5536d 100644 --- a/src/ol/ImageTile.js +++ b/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; diff --git a/src/ol/Overlay.js b/src/ol/Overlay.js index 5daa65d2af..8aaaae026d 100644 --- a/src/ol/Overlay.js +++ b/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, - [_ol_dom_.outerWidth(element), _ol_dom_.outerHeight(element)]); + var overlayRect = this.getRect(element, [outerWidth(element), outerHeight(element)]); var margin = this.autoPanMargin; if (!containsExtent(mapRect, overlayRect)) { diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index c4d19859e9..47d4ea1511 100644 --- a/src/ol/PluggableMap.js +++ b/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); diff --git a/src/ol/VectorImageTile.js b/src/ol/VectorImageTile.js index b54d1fa695..08456cf8d8 100644 --- a/src/ol/VectorImageTile.js +++ b/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]; }; diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index fbaacd36ed..476f90d297 100644 --- a/src/ol/control/Attribution.js +++ b/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_; }; diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js index c640863e6c..2967f27939 100644 --- a/src/ol/control/Control.js +++ b/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]); diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index fd731c9315..cd8a16a19a 100644 --- a/src/ol/control/FullScreen.js +++ b/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(); diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index 56077bbb79..2c6d1373f0 100644 --- a/src/ol/control/OverviewMap.js +++ b/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_; diff --git a/src/ol/dom.js b/src/ol/dom.js index b2bc7ee2dd..cbade563de 100644 --- a/src/ol/dom.js +++ b/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_; +} diff --git a/src/ol/layer/Heatmap.js b/src/ol/layer/Heatmap.js index b6a94ff922..a4ee0d844e 100644 --- a/src/ol/layer/Heatmap.js +++ b/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'; diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js index b06a7a0728..24756705c2 100644 --- a/src/ol/render/canvas.js +++ b/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; }; diff --git a/src/ol/render/canvas/ReplayGroup.js b/src/ol/render/canvas/ReplayGroup.js index 0f8037a552..d358740752 100644 --- a/src/ol/render/canvas/ReplayGroup.js +++ b/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 diff --git a/src/ol/render/canvas/TextReplay.js b/src/ol/render/canvas/TextReplay.js index 4a7eabd65e..641a3c9413 100644 --- a/src/ol/render/canvas/TextReplay.js +++ b/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; diff --git a/src/ol/render/webgl/TextReplay.js b/src/ol/render/webgl/TextReplay.js index f2c4f19882..15a8477e5a 100644 --- a/src/ol/render/webgl/TextReplay.js +++ b/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 diff --git a/src/ol/renderer/canvas/IntermediateCanvas.js b/src/ol/renderer/canvas/IntermediateCanvas.js index cc4baeaadc..112bc0bf4c 100644 --- a/src/ol/renderer/canvas/IntermediateCanvas.js +++ b/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); diff --git a/src/ol/renderer/canvas/Map.js b/src/ol/renderer/canvas/Map.js index c5a41441f6..94eb64ff54 100644 --- a/src/ol/renderer/canvas/Map.js +++ b/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 diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js index 30f113def4..1804720ef6 100644 --- a/src/ol/renderer/canvas/TileLayer.js +++ b/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 diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js index 3c195d4f91..e84c70a8eb 100644 --- a/src/ol/renderer/canvas/VectorLayer.js +++ b/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); diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js index f0182e7647..87445f72ce 100644 --- a/src/ol/renderer/canvas/VectorTileLayer.js +++ b/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; diff --git a/src/ol/renderer/webgl/ImageLayer.js b/src/ol/renderer/webgl/ImageLayer.js index fa6b4bb215..c22d949704 100644 --- a/src/ol/renderer/webgl/ImageLayer.js +++ b/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); diff --git a/src/ol/renderer/webgl/Map.js b/src/ol/renderer/webgl/Map.js index 642eb73d06..c33ab1e2a7 100644 --- a/src/ol/renderer/webgl/Map.js +++ b/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 diff --git a/src/ol/reproj.js b/src/ol/reproj.js index 9f68fb7429..9cb9bc301f 100644 --- a/src/ol/reproj.js +++ b/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)); diff --git a/src/ol/source/ImageStatic.js b/src/ol/source/ImageStatic.js index ae6e25d403..822cceb527 100644 --- a/src/ol/source/ImageStatic.js +++ b/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); diff --git a/src/ol/source/Raster.js b/src/ol/source/Raster.js index 85851571eb..56998e575d 100644 --- a/src/ol/source/Raster.js +++ b/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); } diff --git a/src/ol/source/TileDebug.js b/src/ol/source/TileDebug.js index ca5e8fdb41..28f703497b 100644 --- a/src/ol/source/TileDebug.js +++ b/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); diff --git a/src/ol/source/Zoomify.js b/src/ol/source/Zoomify.js index 12cdbe7ac0..ae7f4d88e0 100644 --- a/src/ol/source/Zoomify.js +++ b/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; diff --git a/src/ol/style/Atlas.js b/src/ol/style/Atlas.js index a23d71e264..b5932d59c1 100644 --- a/src/ol/style/Atlas.js +++ b/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 diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js index 910a1b94f0..c6e18546ab 100644 --- a/src/ol/style/IconImage.js +++ b/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 { diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 380200b867..91d9f32add 100644 --- a/src/ol/style/RegularShape.js +++ b/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); diff --git a/test/spec/ol/dom/dom.test.js b/test/spec/ol/dom/dom.test.js index 639a02a612..bd9f7d48ae 100644 --- a/test/spec/ol/dom/dom.test.js +++ b/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); }); diff --git a/test/spec/ol/render/webgl/textreplay.test.js b/test/spec/ol/render/webgl/textreplay.test.js index 0072a63258..278a010dc6 100644 --- a/test/spec/ol/render/webgl/textreplay.test.js +++ b/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;