diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index 9f2c71999c..8def21ac83 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -26,6 +26,10 @@ A number of internal types have been renamed. This will not affect those who us ### v3.18.0 +#### Removal of the DOM renderer + +The DOM renderer has been removed. Instead, the Canvas renderer should be used. If you were previously constructing a map with `'dom'` as the `renderer` option, you will see an error message in the console in debug mode and the Canvas renderer will be used instead. To remove the warning, remove the `renderer` option from your map constructor. + #### Changes in the way assertions are handled Previously, minified builds of the library did not have any assertions. This caused applications to fail silently or with cryptic stack traces. Starting with this release, developers get notified of many runtime errors through the new `ol.AssertionError`. This error has a `code` property. The meaning of the code can be found on http://openlayers.org/en/latest/doc/errors/. There are additional console assertion checks in debug mode when the `goog.DEBUG` compiler flag is `true`. As this is `true` by default, it is recommended that those creating custom builds set this to `false` so these assertions are stripped.' diff --git a/doc/tutorials/closure.md b/doc/tutorials/closure.md index 61b709249c..7e14aa7c8a 100644 --- a/doc/tutorials/closure.md +++ b/doc/tutorials/closure.md @@ -170,7 +170,6 @@ The minimum config file looks like this: ], "define": [ "ol.DEBUG=false", - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false" ], "js": [ @@ -222,7 +221,6 @@ Here is a version of `config.json` with more compilation checks enabled: ], "define": [ "ol.DEBUG=false", - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false" ], "js": [ diff --git a/doc/tutorials/custom-builds.md b/doc/tutorials/custom-builds.md index 66f7e2986c..4ffc771ac0 100644 --- a/doc/tutorials/custom-builds.md +++ b/doc/tutorials/custom-builds.md @@ -156,7 +156,6 @@ Setting some of these to `false` means that the portions of the code relating to You might have noticed that the build file you've just created is considerably smaller than the full build, but it can be reduced further. This is because all three renderers and all layer types are included by default. We only need one renderer, and only need the tile layer, so can exclude the others by setting these properties with `define`s. So add the following to the define section of the config above: ``` - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false", "ol.ENABLE_PROJ4JS=false", "ol.ENABLE_IMAGE=false", @@ -207,7 +206,6 @@ Now let's try a more complicated example: [`heatmaps-earthquakes`](http://openla "externs/oli.js" ], "define": [ - "ol.ENABLE_DOM=false", "ol.ENABLE_WEBGL=false", "ol.ENABLE_PROJ4JS=false", "ol.ENABLE_IMAGE=false", diff --git a/examples/side-by-side.html b/examples/side-by-side.html index aadcb3c856..4defaff50b 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -1,10 +1,10 @@ --- layout: example.html title: Shared Views -shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. +shortdesc: Two maps with different renderers share view properties docs: > - The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. -tags: "side-by-side, canvas, webgl, dom, canvas, sync, object" + Two maps (one with the Canvas renderer, one with the WebGL renderer) share the same center, resolution, rotation and layers. +tags: "side-by-side, canvas, webgl" ---

Canvas

@@ -13,5 +13,3 @@ tags: "side-by-side, canvas, webgl, dom, canvas, sync, object" -

DOM

-
diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 056a95ce13..43a03a3d4c 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -4,33 +4,27 @@ goog.require('ol.has'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); - -var map1 = new ol.Map({ - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() - }) - ], - renderer: 'dom', - target: 'domMap', - view: new ol.View({ - center: [0, 0], - zoom: 1 - }) +var layer = new ol.layer.Tile({ + source: new ol.source.OSM() }); -var map2 = new ol.Map({ +var view = new ol.View({ + center: [0, 0], + zoom: 1 +}); + +var map1 = new ol.Map({ target: 'canvasMap', - layers: map1.getLayers(), - view: map1.getView() + layers: [layer], + view: view }); if (ol.has.WEBGL) { - var map3 = new ol.Map({ - renderer: 'webgl', + var map2 = new ol.Map({ target: 'webglMap', - layers: map1.getLayers(), - view: map1.getView() + renderer: 'webgl', + layers: [layer], + view: view }); } else { var info = document.getElementById('no-webgl'); diff --git a/externs/olx.js b/externs/olx.js index 62d4e6f2d7..23c3456564 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -272,11 +272,11 @@ olx.MapOptions.prototype.overlays; /** - * Renderer. By default, Canvas, DOM and WebGL renderers are tested for support + * Renderer. By default, Canvas and WebGL renderers are tested for support * in that order, and the first supported used. Specify a * {@link ol.RendererType} here to use a specific renderer. - * Note that at present the Canvas and DOM renderers fully support vector data, - * but WebGL can only render Point geometries. + * Note that the Canvas renderer fully supports vector data, but WebGL can only + * render Point geometries. * @type {ol.RendererType|Array.|string|undefined} * @api stable */ diff --git a/src/ol/dom.js b/src/ol/dom.js index f55e9655c8..79d6098cd4 100644 --- a/src/ol/dom.js +++ b/src/ol/dom.js @@ -1,15 +1,6 @@ goog.provide('ol.dom'); goog.require('ol'); -goog.require('ol.has'); -goog.require('ol.vec.Mat4'); - - -/** - * @type {Array.} - * @private - */ -ol.dom.tmpMat4_ = ol.vec.Mat4.create(); /** @@ -30,147 +21,6 @@ ol.dom.createCanvasContext2D = function(opt_width, opt_height) { }; -/** - * Detect 2d transform. - * Adapted from http://stackoverflow.com/q/5661671/130442 - * http://caniuse.com/#feat=transforms2d - * @return {boolean} - */ -ol.dom.canUseCssTransform = (function() { - var global = ol.global; - var canUseCssTransform; - return function() { - if (canUseCssTransform === undefined) { - var el = document.createElement('P'), - has2d, - transforms = { - 'webkitTransform': '-webkit-transform', - 'OTransform': '-o-transform', - 'msTransform': '-ms-transform', - 'MozTransform': '-moz-transform', - 'transform': 'transform' - }; - document.body.appendChild(el); - for (var t in transforms) { - if (t in el.style) { - el.style[t] = 'translate(1px,1px)'; - has2d = global.getComputedStyle(el).getPropertyValue( - transforms[t]); - } - } - document.body.removeChild(el); - - canUseCssTransform = (has2d && has2d !== 'none'); - } - return canUseCssTransform; - }; -}()); - - -/** - * Detect 3d transform. - * Adapted from http://stackoverflow.com/q/5661671/130442 - * http://caniuse.com/#feat=transforms3d - * @return {boolean} - */ -ol.dom.canUseCssTransform3D = (function() { - var global = ol.global; - var canUseCssTransform3D; - return function() { - if (canUseCssTransform3D === undefined) { - var el = document.createElement('P'), - has3d, - transforms = { - 'webkitTransform': '-webkit-transform', - 'OTransform': '-o-transform', - 'msTransform': '-ms-transform', - 'MozTransform': '-moz-transform', - 'transform': 'transform' - }; - document.body.appendChild(el); - for (var t in transforms) { - if (t in el.style) { - el.style[t] = 'translate3d(1px,1px,1px)'; - has3d = global.getComputedStyle(el).getPropertyValue( - transforms[t]); - } - } - document.body.removeChild(el); - - canUseCssTransform3D = (has3d && has3d !== 'none'); - } - return canUseCssTransform3D; - }; -}()); - - -/** - * @param {Element} element Element. - * @param {string} value Value. - */ -ol.dom.setTransform = function(element, value) { - var style = element.style; - style.WebkitTransform = value; - style.MozTransform = value; - style.OTransform = value; - style.msTransform = value; - style.transform = value; - - // IE 9+ seems to assume transform-origin: 100% 100%; for some unknown reason - if (ol.has.IE) { - element.style.transformOrigin = '0 0'; - } -}; - - -/** - * @param {!Element} element Element. - * @param {ol.Transform} transform Matrix. - * @param {number=} opt_precision Precision. - */ -ol.dom.transformElement2D = function(element, transform, opt_precision) { - // using matrix() causes gaps in Chrome and Firefox on Mac OS X, so prefer - // matrix3d() - var i; - if (ol.dom.canUseCssTransform3D()) { - var value3D; - var transform3D = ol.vec.Mat4.fromTransform(ol.dom.tmpMat4_, transform); - if (opt_precision !== undefined) { - /** @type {Array.} */ - var strings3D = new Array(16); - for (i = 0; i < 16; ++i) { - strings3D[i] = transform3D[i].toFixed(opt_precision); - } - value3D = strings3D.join(','); - } else { - value3D = transform3D.join(','); - } - ol.dom.setTransform(element, 'matrix3d(' + value3D + ')'); - } else if (ol.dom.canUseCssTransform()) { - /** @type {string} */ - var value2D; - if (opt_precision !== undefined) { - /** @type {Array.} */ - var strings2D = new Array(6); - for (i = 0; i < 6; ++i) { - strings2D[i] = transform[i].toFixed(opt_precision); - } - value2D = strings2D.join(','); - } else { - value2D = transform.join(','); - } - ol.dom.setTransform(element, 'matrix(' + value2D + ')'); - } else { - element.style.left = Math.round(transform[4]) + 'px'; - element.style.top = Math.round(transform[5]) + 'px'; - - // TODO: Add scaling here. This isn't quite as simple as multiplying - // width/height, because that only changes the container size, not the - // content size. - } -}; - - /** * Get the current computed width for the given element including margin, * padding and border. diff --git a/src/ol/has.js b/src/ol/has.js index 3f7d8124b1..5c64bd2fb7 100644 --- a/src/ol/has.js +++ b/src/ol/has.js @@ -7,15 +7,6 @@ var olGlobal = ol.global; var ua = typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase() : ''; -var ie = ua.match(/msie ([0-9]{1,}[\.0-9]{0,})/); -var trident = ua.match(/trident\/([0-9]{1,}[\.0-9]{0,})/); - -/** - * User agent string says we are dealing with IE >= 9 as browser. - * @type {boolean} - */ -ol.has.IE = !!(ie && parseFloat(ie[1]) >= 9 || trident && parseFloat(trident[1]) >= 6); - /** * User agent string says we are dealing with Firefox as browser. * @type {boolean} @@ -98,14 +89,6 @@ ol.has.CANVAS = ol.ENABLE_CANVAS && ( ol.has.DEVICE_ORIENTATION = 'DeviceOrientationEvent' in olGlobal; -/** - * True if `ol.ENABLE_DOM` is set to `true` at compile time. - * @const - * @type {boolean} - */ -ol.has.DOM = ol.ENABLE_DOM; - - /** * Is HTML5 geolocation supported in the current browser? * @const diff --git a/src/ol/imagetile.js b/src/ol/imagetile.js index a78f61619c..883bfe071b 100644 --- a/src/ol/imagetile.js +++ b/src/ol/imagetile.js @@ -4,7 +4,6 @@ goog.require('ol'); goog.require('ol.Tile'); goog.require('ol.events'); goog.require('ol.events.EventType'); -goog.require('ol.obj'); /** @@ -80,22 +79,8 @@ ol.ImageTile.prototype.disposeInternal = function() { * @inheritDoc * @api */ -ol.ImageTile.prototype.getImage = function(opt_context) { - if (opt_context !== undefined) { - var image; - var key = ol.getUid(opt_context); - if (key in this.imageByContext_) { - return this.imageByContext_[key]; - } else if (ol.obj.isEmpty(this.imageByContext_)) { - image = this.image_; - } else { - image = /** @type {Image} */ (this.image_.cloneNode(false)); - } - this.imageByContext_[key] = image; - return image; - } else { - return this.image_; - } +ol.ImageTile.prototype.getImage = function() { + return this.image_; }; diff --git a/src/ol/index.js b/src/ol/index.js index 47762a8714..697b11a25f 100644 --- a/src/ol/index.js +++ b/src/ol/index.js @@ -67,15 +67,6 @@ ol.DRAG_BOX_HYSTERESIS_PIXELS = 8; ol.ENABLE_CANVAS = true; -/** - * @define {boolean} Enable the DOM renderer (used as a fallback where Canvas is - * not available). Default is `true`. Setting this to false at compile time - * in advanced mode removes all code supporting the DOM renderer from the - * build. - */ -ol.ENABLE_DOM = true; - - /** * @define {boolean} Enable rendering of ol.layer.Image based layers. Default * is `true`. Setting this to false at compile time in advanced mode removes diff --git a/src/ol/map.js b/src/ol/map.js index 48e17709b2..1ab9981868 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -33,7 +33,6 @@ goog.require('ol.obj'); goog.require('ol.proj.common'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.canvas.Map'); -goog.require('ol.renderer.dom.Map'); goog.require('ol.renderer.webgl.Map'); goog.require('ol.size'); goog.require('ol.structs.PriorityQueue'); @@ -81,8 +80,7 @@ ol.OL3_LOGO_URL = 'data:image/png;base64,' + */ ol.DEFAULT_RENDERER_TYPES = [ ol.RendererType.CANVAS, - ol.RendererType.WEBGL, - ol.RendererType.DOM + ol.RendererType.WEBGL ]; @@ -125,8 +123,7 @@ ol.MapProperty = { * `ol-overlaycontainer-stopevent` for controls and some overlays, and one with * CSS class name `ol-overlaycontainer` for other overlays (see the `stopEvent` * option of {@link ol.Overlay} for the difference). The map itself is placed in - * a further element within the viewport, either DOM or Canvas, depending on the - * renderer. + * a further element within the viewport. * * Layers are stored as a `ol.Collection` in layerGroups. A top-level group is * provided by the library. This is what is accessed by `getLayerGroup` and @@ -1481,6 +1478,10 @@ ol.Map.createOptionsInternal = function(options) { } else { ol.asserts.assert(false, 46); // Incorrect format for `renderer` option } + if (rendererTypes.indexOf(/** @type {ol.RendererType} */ ('dom')) >= 0) { + goog.DEBUG && console.assert(false, 'The DOM render has been removed'); + rendererTypes = rendererTypes.concat(ol.DEFAULT_RENDERER_TYPES); + } } else { rendererTypes = ol.DEFAULT_RENDERER_TYPES; } @@ -1494,11 +1495,6 @@ ol.Map.createOptionsInternal = function(options) { rendererConstructor = ol.renderer.canvas.Map; break; } - } else if (ol.ENABLE_DOM && rendererType == ol.RendererType.DOM) { - if (ol.has.DOM) { - rendererConstructor = ol.renderer.dom.Map; - break; - } } else if (ol.ENABLE_WEBGL && rendererType == ol.RendererType.WEBGL) { if (ol.has.WEBGL) { rendererConstructor = ol.renderer.webgl.Map; diff --git a/src/ol/renderer/dom/imagelayer.js b/src/ol/renderer/dom/imagelayer.js deleted file mode 100644 index 60d5fcbad2..0000000000 --- a/src/ol/renderer/dom/imagelayer.js +++ /dev/null @@ -1,154 +0,0 @@ -goog.provide('ol.renderer.dom.ImageLayer'); - -goog.require('ol'); -goog.require('ol.View'); -goog.require('ol.array'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.proj'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Image} imageLayer Image layer. - */ -ol.renderer.dom.ImageLayer = function(imageLayer) { - var target = document.createElement('DIV'); - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, imageLayer, target); - - /** - * The last rendered image. - * @private - * @type {?ol.ImageBase} - */ - this.image_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - -}; -ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, callback, thisArg) { - var layer = this.getLayer(); - var source = layer.getSource(); - var resolution = frameState.viewState.resolution; - var rotation = frameState.viewState.rotation; - var skippedFeatureUids = frameState.skippedFeatureUids; - return source.forEachFeatureAtCoordinate( - coordinate, resolution, rotation, skippedFeatureUids, - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - return callback.call(thisArg, feature, layer); - }); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.clearFrame = function() { - ol.dom.removeChildren(this.target); - this.image_ = null; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerState) { - - var viewState = frameState.viewState; - var viewCenter = viewState.center; - var viewResolution = viewState.resolution; - var viewRotation = viewState.rotation; - - var image = this.image_; - var imageLayer = /** @type {ol.layer.Image} */ (this.getLayer()); - var imageSource = imageLayer.getSource(); - - var hints = frameState.viewHints; - - var renderedExtent = frameState.extent; - if (layerState.extent !== undefined) { - renderedExtent = ol.extent.getIntersection( - renderedExtent, layerState.extent); - } - - if (!hints[ol.View.Hint.ANIMATING] && !hints[ol.View.Hint.INTERACTING] && - !ol.extent.isEmpty(renderedExtent)) { - var projection = viewState.projection; - if (!ol.ENABLE_RASTER_REPROJECTION) { - var sourceProjection = imageSource.getProjection(); - if (sourceProjection) { - ol.DEBUG && console.assert(ol.proj.equivalent(projection, sourceProjection), - 'projection and sourceProjection are equivalent'); - projection = sourceProjection; - } - } - var image_ = imageSource.getImage(renderedExtent, viewResolution, - frameState.pixelRatio, projection); - if (image_) { - var loaded = this.loadImage(image_); - if (loaded) { - image = image_; - } - } - } - - if (image) { - var imageExtent = image.getExtent(); - var imageResolution = image.getResolution(); - var transform = ol.transform.create(); - ol.transform.compose(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - imageResolution / viewResolution, imageResolution / viewResolution, - viewRotation, - (imageExtent[0] - viewCenter[0]) / imageResolution, - (viewCenter[1] - imageExtent[3]) / imageResolution); - - if (image != this.image_) { - var imageElement = image.getImage(this); - // Bootstrap sets the style max-width: 100% for all images, which breaks - // prevents the image from being displayed in FireFox. Workaround by - // overriding the max-width style. - imageElement.style.maxWidth = 'none'; - imageElement.style.position = 'absolute'; - ol.dom.removeChildren(this.target); - this.target.appendChild(imageElement); - this.image_ = image; - } - this.setTransform_(transform); - this.updateAttributions(frameState.attributions, image.getAttributions()); - this.updateLogos(frameState, imageSource); - } - - return true; -}; - - -/** - * @param {ol.Transform} transform Transform. - * @private - */ -ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) { - if (!ol.array.equals(transform, this.transform_)) { - ol.dom.transformElement2D(this.target, transform, 6); - ol.transform.setFromArray(this.transform_, transform); - } -}; diff --git a/src/ol/renderer/dom/layer.js b/src/ol/renderer/dom/layer.js deleted file mode 100644 index 584cd00010..0000000000 --- a/src/ol/renderer/dom/layer.js +++ /dev/null @@ -1,54 +0,0 @@ -goog.provide('ol.renderer.dom.Layer'); - -goog.require('ol'); -goog.require('ol.renderer.Layer'); - - -/** - * @constructor - * @extends {ol.renderer.Layer} - * @param {ol.layer.Layer} layer Layer. - * @param {!Element} target Target. - */ -ol.renderer.dom.Layer = function(layer, target) { - - ol.renderer.Layer.call(this, layer); - - /** - * @type {!Element} - * @protected - */ - this.target = target; - -}; -ol.inherits(ol.renderer.dom.Layer, ol.renderer.Layer); - - -/** - * Clear rendered elements. - */ -ol.renderer.dom.Layer.prototype.clearFrame = ol.nullFunction; - - -/** - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - */ -ol.renderer.dom.Layer.prototype.composeFrame = ol.nullFunction; - - -/** - * @return {!Element} Target. - */ -ol.renderer.dom.Layer.prototype.getTarget = function() { - return this.target; -}; - - -/** - * @abstract - * @param {olx.FrameState} frameState Frame state. - * @param {ol.LayerState} layerState Layer state. - * @return {boolean} whether composeFrame should be called. - */ -ol.renderer.dom.Layer.prototype.prepareFrame = function(frameState, layerState) {}; diff --git a/src/ol/renderer/dom/map.js b/src/ol/renderer/dom/map.js deleted file mode 100644 index 2305dde773..0000000000 --- a/src/ol/renderer/dom/map.js +++ /dev/null @@ -1,211 +0,0 @@ -goog.provide('ol.renderer.dom.Map'); - -goog.require('ol.events'); -goog.require('ol.events.Event'); -goog.require('ol.events.EventType'); -goog.require('ol.transform'); -goog.require('ol'); -goog.require('ol.RendererType'); -goog.require('ol.array'); -goog.require('ol.css'); -goog.require('ol.dom'); -goog.require('ol.layer.Image'); -goog.require('ol.layer.Layer'); -goog.require('ol.layer.Tile'); -goog.require('ol.layer.Vector'); -goog.require('ol.render.Event'); -goog.require('ol.render.EventType'); -goog.require('ol.render.canvas.Immediate'); -goog.require('ol.renderer.Map'); -goog.require('ol.renderer.dom.ImageLayer'); -goog.require('ol.renderer.dom.TileLayer'); -goog.require('ol.renderer.dom.VectorLayer'); -goog.require('ol.source.State'); - - -/** - * @constructor - * @extends {ol.renderer.Map} - * @param {Element} container Container. - * @param {ol.Map} map Map. - */ -ol.renderer.dom.Map = function(container, map) { - - ol.renderer.Map.call(this, container, map); - - /** - * @private - * @type {CanvasRenderingContext2D} - */ - this.context_ = ol.dom.createCanvasContext2D(); - var canvas = this.context_.canvas; - canvas.style.position = 'absolute'; - canvas.style.width = '100%'; - canvas.style.height = '100%'; - canvas.className = ol.css.CLASS_UNSELECTABLE; - container.insertBefore(canvas, container.childNodes[0] || null); - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @type {!Element} - * @private - */ - this.layersPane_ = document.createElement('DIV'); - this.layersPane_.className = ol.css.CLASS_UNSELECTABLE; - var style = this.layersPane_.style; - style.position = 'absolute'; - style.width = '100%'; - style.height = '100%'; - - // prevent the img context menu on mobile devices - ol.events.listen(this.layersPane_, ol.events.EventType.TOUCHSTART, - ol.events.Event.preventDefault); - - container.insertBefore(this.layersPane_, container.childNodes[0] || null); - - /** - * @private - * @type {boolean} - */ - this.renderedVisible_ = true; - -}; -ol.inherits(ol.renderer.dom.Map, ol.renderer.Map); - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.disposeInternal = function() { - ol.dom.removeNode(this.layersPane_); - ol.renderer.Map.prototype.disposeInternal.call(this); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) { - var layerRenderer; - if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) { - layerRenderer = new ol.renderer.dom.ImageLayer(layer); - } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) { - layerRenderer = new ol.renderer.dom.TileLayer(layer); - } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) { - layerRenderer = new ol.renderer.dom.VectorLayer(layer); - } else { - ol.DEBUG && console.assert(false, 'unexpected layer configuration'); - return null; - } - return layerRenderer; -}; - - -/** - * @param {ol.render.EventType} type Event type. - * @param {olx.FrameState} frameState Frame state. - * @private - */ -ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState) { - var map = this.getMap(); - if (map.hasListener(type)) { - var extent = frameState.extent; - var pixelRatio = frameState.pixelRatio; - var viewState = frameState.viewState; - var rotation = viewState.rotation; - var context = this.context_; - var canvas = context.canvas; - - var transform = ol.transform.compose(this.transform_, - canvas.width / 2, canvas.height / 2, - pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution, - -rotation, - -viewState.center[0], -viewState.center[1]); - - var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio, - extent, transform, rotation); - var composeEvent = new ol.render.Event(type, vectorContext, - frameState, context, null); - map.dispatchEvent(composeEvent); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.getType = function() { - return ol.RendererType.DOM; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.Map.prototype.renderFrame = function(frameState) { - - if (!frameState) { - if (this.renderedVisible_) { - this.layersPane_.style.display = 'none'; - this.renderedVisible_ = false; - } - return; - } - - var map = this.getMap(); - if (map.hasListener(ol.render.EventType.PRECOMPOSE) || - map.hasListener(ol.render.EventType.POSTCOMPOSE)) { - var canvas = this.context_.canvas; - var pixelRatio = frameState.pixelRatio; - canvas.width = frameState.size[0] * pixelRatio; - canvas.height = frameState.size[1] * pixelRatio; - } - - this.dispatchComposeEvent_(ol.render.EventType.PRECOMPOSE, frameState); - - var layerStatesArray = frameState.layerStatesArray; - ol.array.stableSort(layerStatesArray, ol.renderer.Map.sortByZIndex); - - var viewResolution = frameState.viewState.resolution; - var i, ii, layer, layerRenderer, layerState; - for (i = 0, ii = layerStatesArray.length; i < ii; ++i) { - layerState = layerStatesArray[i]; - layer = layerState.layer; - layerRenderer = /** @type {ol.renderer.dom.Layer} */ ( - this.getLayerRenderer(layer)); - this.layersPane_.insertBefore(layerRenderer.getTarget(), this.layersPane_.childNodes[i] || null); - if (ol.layer.Layer.visibleAtResolution(layerState, viewResolution) && - layerState.sourceState == ol.source.State.READY) { - if (layerRenderer.prepareFrame(frameState, layerState)) { - layerRenderer.composeFrame(frameState, layerState); - } - } else { - layerRenderer.clearFrame(); - } - } - - var layerStates = frameState.layerStates; - var layerKey; - for (layerKey in this.getLayerRenderers()) { - if (!(layerKey in layerStates)) { - layerRenderer = /** @type {ol.renderer.dom.Layer} */ (this.getLayerRendererByKey(layerKey)); - ol.dom.removeNode(layerRenderer.getTarget()); - } - } - - if (!this.renderedVisible_) { - this.layersPane_.style.display = ''; - this.renderedVisible_ = true; - } - - this.calculateMatrices2D(frameState); - this.scheduleRemoveUnusedLayerRenderers(frameState); - this.scheduleExpireIconCache(frameState); - - this.dispatchComposeEvent_(ol.render.EventType.POSTCOMPOSE, frameState); -}; diff --git a/src/ol/renderer/dom/tilelayer.js b/src/ol/renderer/dom/tilelayer.js deleted file mode 100644 index 53bcf57d1d..0000000000 --- a/src/ol/renderer/dom/tilelayer.js +++ /dev/null @@ -1,440 +0,0 @@ -// FIXME probably need to reset TileLayerZ if offsets get too large -// FIXME when zooming out, preserve higher Z divs to avoid white flash - -goog.provide('ol.renderer.dom.TileLayer'); - -goog.require('ol'); -goog.require('ol.Tile'); -goog.require('ol.TileRange'); -goog.require('ol.View'); -goog.require('ol.array'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.size'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Tile} tileLayer Tile layer. - */ -ol.renderer.dom.TileLayer = function(tileLayer) { - - var target = document.createElement('DIV'); - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, tileLayer, target); - - /** - * @private - * @type {boolean} - */ - this.renderedVisible_ = true; - - /** - * @private - * @type {number} - */ - this.renderedOpacity_ = 1; - - /** - * @private - * @type {number} - */ - this.renderedRevision_ = 0; - - /** - * @private - * @type {!Object.} - */ - this.tileLayerZs_ = {}; - -}; -ol.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.TileLayer.prototype.clearFrame = function() { - ol.dom.removeChildren(this.target); - this.renderedRevision_ = 0; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerState) { - - if (!layerState.visible) { - if (this.renderedVisible_) { - this.target.style.display = 'none'; - this.renderedVisible_ = false; - } - return true; - } - - var pixelRatio = frameState.pixelRatio; - var viewState = frameState.viewState; - var projection = viewState.projection; - - var tileLayer = /** @type {ol.layer.Tile} */ (this.getLayer()); - var tileSource = tileLayer.getSource(); - var tileGrid = tileSource.getTileGridForProjection(projection); - var tileGutter = pixelRatio * tileSource.getGutter(projection); - var z = tileGrid.getZForResolution(viewState.resolution); - var tileResolution = tileGrid.getResolution(z); - var center = viewState.center; - var extent; - if (tileResolution == viewState.resolution) { - center = this.snapCenterToPixel(center, tileResolution, frameState.size); - extent = ol.extent.getForViewAndSize( - center, tileResolution, viewState.rotation, frameState.size); - } else { - extent = frameState.extent; - } - - if (layerState.extent !== undefined) { - extent = ol.extent.getIntersection(extent, layerState.extent); - } - - var tileRange = tileGrid.getTileRangeForExtentAndResolution( - extent, tileResolution); - - /** @type {Object.>} */ - var tilesToDrawByZ = {}; - tilesToDrawByZ[z] = {}; - - var findLoadedTiles = this.createLoadedTileFinder( - tileSource, projection, tilesToDrawByZ); - - var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError(); - - var tmpExtent = ol.extent.createEmpty(); - var tmpTileRange = new ol.TileRange(0, 0, 0, 0); - var childTileRange, drawable, fullyLoaded, tile, tileState, x, y; - for (x = tileRange.minX; x <= tileRange.maxX; ++x) { - for (y = tileRange.minY; y <= tileRange.maxY; ++y) { - tile = tileSource.getTile(z, x, y, pixelRatio, projection); - tileState = tile.getState(); - drawable = tileState == ol.Tile.State.LOADED || - tileState == ol.Tile.State.EMPTY || - tileState == ol.Tile.State.ERROR && !useInterimTilesOnError; - if (!drawable && tile.interimTile) { - tile = tile.interimTile; - } - tileState = tile.getState(); - if (tileState == ol.Tile.State.LOADED) { - tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; - continue; - } else if (tileState == ol.Tile.State.EMPTY || - (tileState == ol.Tile.State.ERROR && - !useInterimTilesOnError)) { - continue; - } - fullyLoaded = tileGrid.forEachTileCoordParentTileRange( - tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent); - if (!fullyLoaded) { - childTileRange = tileGrid.getTileCoordChildTileRange( - tile.tileCoord, tmpTileRange, tmpExtent); - if (childTileRange) { - findLoadedTiles(z + 1, childTileRange); - } - } - - } - - } - - // If the tile source revision changes, we destroy the existing DOM structure - // so that a new one will be created. It would be more efficient to modify - // the existing structure. - var tileLayerZ, tileLayerZKey; - if (this.renderedRevision_ != tileSource.getRevision()) { - for (tileLayerZKey in this.tileLayerZs_) { - tileLayerZ = this.tileLayerZs_[+tileLayerZKey]; - ol.dom.removeNode(tileLayerZ.target); - } - this.tileLayerZs_ = {}; - this.renderedRevision_ = tileSource.getRevision(); - } - - /** @type {Array.} */ - var zs = Object.keys(tilesToDrawByZ).map(Number); - zs.sort(ol.array.numberSafeCompareFunction); - - /** @type {Object.} */ - var newTileLayerZKeys = {}; - - var iz, iziz, tileCoordKey, tileCoordOrigin, tilesToDraw; - for (iz = 0, iziz = zs.length; iz < iziz; ++iz) { - tileLayerZKey = zs[iz]; - if (tileLayerZKey in this.tileLayerZs_) { - tileLayerZ = this.tileLayerZs_[tileLayerZKey]; - } else { - tileCoordOrigin = - tileGrid.getTileCoordForCoordAndZ(center, tileLayerZKey); - tileLayerZ = new ol.renderer.dom.TileLayerZ_(tileGrid, tileCoordOrigin); - newTileLayerZKeys[tileLayerZKey] = true; - this.tileLayerZs_[tileLayerZKey] = tileLayerZ; - } - tilesToDraw = tilesToDrawByZ[tileLayerZKey]; - for (tileCoordKey in tilesToDraw) { - tileLayerZ.addTile(tilesToDraw[tileCoordKey], tileGutter); - } - tileLayerZ.finalizeAddTiles(); - } - - /** @type {Array.} */ - var tileLayerZKeys = Object.keys(this.tileLayerZs_).map(Number); - tileLayerZKeys.sort(ol.array.numberSafeCompareFunction); - - var i, ii, j, origin, resolution; - var transform = ol.transform.create(); - for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) { - tileLayerZKey = tileLayerZKeys[i]; - tileLayerZ = this.tileLayerZs_[tileLayerZKey]; - if (!(tileLayerZKey in tilesToDrawByZ)) { - ol.dom.removeNode(tileLayerZ.target); - delete this.tileLayerZs_[tileLayerZKey]; - continue; - } - resolution = tileLayerZ.getResolution(); - origin = tileLayerZ.getOrigin(); - - ol.transform.compose(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - resolution / viewState.resolution, resolution / viewState.resolution, - viewState.rotation, - (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution); - - tileLayerZ.setTransform(transform); - if (tileLayerZKey in newTileLayerZKeys) { - for (j = tileLayerZKey - 1; j >= 0; --j) { - if (j in this.tileLayerZs_) { - if (this.tileLayerZs_[j].target.parentNode) { - this.tileLayerZs_[j].target.parentNode.insertBefore(tileLayerZ.target, this.tileLayerZs_[j].target.nextSibling); - } - break; - } - } - if (j < 0) { - this.target.insertBefore(tileLayerZ.target, this.target.childNodes[0] || null); - } - } else { - if (!frameState.viewHints[ol.View.Hint.ANIMATING] && - !frameState.viewHints[ol.View.Hint.INTERACTING]) { - tileLayerZ.removeTilesOutsideExtent(extent, tmpTileRange); - } - } - } - - if (layerState.opacity != this.renderedOpacity_) { - this.target.style.opacity = layerState.opacity; - this.renderedOpacity_ = layerState.opacity; - } - - if (layerState.visible && !this.renderedVisible_) { - this.target.style.display = ''; - this.renderedVisible_ = true; - } - - this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange); - this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio, - projection, extent, z, tileLayer.getPreload()); - this.scheduleExpireCache(frameState, tileSource); - this.updateLogos(frameState, tileSource); - - return true; -}; - - -/** - * @constructor - * @private - * @param {ol.tilegrid.TileGrid} tileGrid Tile grid. - * @param {ol.TileCoord} tileCoordOrigin Tile coord origin. - */ -ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) { - - /** - * @type {!Element} - */ - this.target = document.createElement('DIV'); - this.target.style.position = 'absolute'; - this.target.style.width = '100%'; - this.target.style.height = '100%'; - - /** - * @private - * @type {ol.tilegrid.TileGrid} - */ - this.tileGrid_ = tileGrid; - - /** - * @private - * @type {ol.TileCoord} - */ - this.tileCoordOrigin_ = tileCoordOrigin; - - /** - * @private - * @type {ol.Coordinate} - */ - this.origin_ = - ol.extent.getTopLeft(tileGrid.getTileCoordExtent(tileCoordOrigin)); - - /** - * @private - * @type {number} - */ - this.resolution_ = tileGrid.getResolution(tileCoordOrigin[0]); - - /** - * @private - * @type {Object.} - */ - this.tiles_ = {}; - - /** - * @private - * @type {DocumentFragment} - */ - this.documentFragment_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @private - * @type {ol.Size} - */ - this.tmpSize_ = [0, 0]; - -}; - - -/** - * @param {ol.Tile} tile Tile. - * @param {number} tileGutter Tile gutter. - */ -ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) { - var tileCoord = tile.tileCoord; - var tileCoordZ = tileCoord[0]; - var tileCoordX = tileCoord[1]; - var tileCoordY = tileCoord[2]; - ol.DEBUG && console.assert(tileCoordZ == this.tileCoordOrigin_[0], - 'tileCoordZ matches z of tileCoordOrigin'); - var tileCoordKey = tileCoord.toString(); - if (tileCoordKey in this.tiles_) { - return; - } - var tileSize = ol.size.toSize( - this.tileGrid_.getTileSize(tileCoordZ), this.tmpSize_); - var image = tile.getImage(this); - var imageStyle = image.style; - // Bootstrap sets the style max-width: 100% for all images, which - // prevents the tile from being displayed in FireFox. Workaround - // by overriding the max-width style. - imageStyle.maxWidth = 'none'; - var tileElement; - var tileElementStyle; - if (tileGutter > 0) { - tileElement = document.createElement('DIV'); - tileElementStyle = tileElement.style; - tileElementStyle.overflow = 'hidden'; - tileElementStyle.width = tileSize[0] + 'px'; - tileElementStyle.height = tileSize[1] + 'px'; - imageStyle.position = 'absolute'; - imageStyle.left = -tileGutter + 'px'; - imageStyle.top = -tileGutter + 'px'; - imageStyle.width = (tileSize[0] + 2 * tileGutter) + 'px'; - imageStyle.height = (tileSize[1] + 2 * tileGutter) + 'px'; - tileElement.appendChild(image); - } else { - imageStyle.width = tileSize[0] + 'px'; - imageStyle.height = tileSize[1] + 'px'; - tileElement = image; - tileElementStyle = imageStyle; - } - tileElementStyle.position = 'absolute'; - tileElementStyle.left = - ((tileCoordX - this.tileCoordOrigin_[1]) * tileSize[0]) + 'px'; - tileElementStyle.top = - ((this.tileCoordOrigin_[2] - tileCoordY) * tileSize[1]) + 'px'; - if (!this.documentFragment_) { - this.documentFragment_ = document.createDocumentFragment(); - } - this.documentFragment_.appendChild(tileElement); - this.tiles_[tileCoordKey] = tile; -}; - - -/** - * FIXME empty description for jsdoc - */ -ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() { - if (this.documentFragment_) { - this.target.appendChild(this.documentFragment_); - this.documentFragment_ = null; - } -}; - - -/** - * @return {ol.Coordinate} Origin. - */ -ol.renderer.dom.TileLayerZ_.prototype.getOrigin = function() { - return this.origin_; -}; - - -/** - * @return {number} Resolution. - */ -ol.renderer.dom.TileLayerZ_.prototype.getResolution = function() { - return this.resolution_; -}; - - -/** - * @param {ol.Extent} extent Extent. - * @param {ol.TileRange=} opt_tileRange Temporary ol.TileRange object. - */ -ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent = function(extent, opt_tileRange) { - var tileRange = this.tileGrid_.getTileRangeForExtentAndZ( - extent, this.tileCoordOrigin_[0], opt_tileRange); - /** @type {Array.} */ - var tilesToRemove = []; - var tile, tileCoordKey; - for (tileCoordKey in this.tiles_) { - tile = this.tiles_[tileCoordKey]; - if (!tileRange.contains(tile.tileCoord)) { - tilesToRemove.push(tile); - } - } - var i, ii; - for (i = 0, ii = tilesToRemove.length; i < ii; ++i) { - tile = tilesToRemove[i]; - tileCoordKey = tile.tileCoord.toString(); - ol.dom.removeNode(tile.getImage(this)); - delete this.tiles_[tileCoordKey]; - } -}; - - -/** - * @param {ol.Transform} transform Transform. - */ -ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) { - if (!ol.array.equals(transform, this.transform_)) { - ol.dom.transformElement2D(this.target, transform, 6); - ol.transform.setFromArray(this.transform_, transform); - } -}; diff --git a/src/ol/renderer/dom/vectorlayer.js b/src/ol/renderer/dom/vectorlayer.js deleted file mode 100644 index ef98e95b2c..0000000000 --- a/src/ol/renderer/dom/vectorlayer.js +++ /dev/null @@ -1,340 +0,0 @@ -goog.provide('ol.renderer.dom.VectorLayer'); - -goog.require('ol'); -goog.require('ol.View'); -goog.require('ol.dom'); -goog.require('ol.extent'); -goog.require('ol.render.Event'); -goog.require('ol.render.EventType'); -goog.require('ol.render.canvas.Immediate'); -goog.require('ol.render.canvas.ReplayGroup'); -goog.require('ol.renderer.dom.Layer'); -goog.require('ol.renderer.vector'); -goog.require('ol.transform'); - - -/** - * @constructor - * @extends {ol.renderer.dom.Layer} - * @param {ol.layer.Vector} vectorLayer Vector layer. - */ -ol.renderer.dom.VectorLayer = function(vectorLayer) { - - /** - * @private - * @type {CanvasRenderingContext2D} - */ - this.context_ = ol.dom.createCanvasContext2D(); - - var target = this.context_.canvas; - // Bootstrap sets the style max-width: 100% for all images, which breaks - // prevents the image from being displayed in FireFox. Workaround by - // overriding the max-width style. - target.style.maxWidth = 'none'; - target.style.position = 'absolute'; - - ol.renderer.dom.Layer.call(this, vectorLayer, target); - - /** - * @private - * @type {boolean} - */ - this.dirty_ = false; - - /** - * @private - * @type {number} - */ - this.renderedRevision_ = -1; - - /** - * @private - * @type {number} - */ - this.renderedResolution_ = NaN; - - /** - * @private - * @type {ol.Extent} - */ - this.renderedExtent_ = ol.extent.createEmpty(); - - /** - * @private - * @type {function(ol.Feature, ol.Feature): number|null} - */ - this.renderedRenderOrder_ = null; - - /** - * @private - * @type {ol.render.canvas.ReplayGroup} - */ - this.replayGroup_ = null; - - /** - * @private - * @type {ol.Transform} - */ - this.transform_ = ol.transform.create(); - - /** - * @private - * @type {ol.Transform} - */ - this.elementTransform_ = ol.transform.create(); - -}; -ol.inherits(ol.renderer.dom.VectorLayer, ol.renderer.dom.Layer); - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.clearFrame = function() { - // Clear the canvas - var canvas = this.context_.canvas; - canvas.width = canvas.width; - this.renderedRevision_ = 0; -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerState) { - var viewState = frameState.viewState; - var viewCenter = viewState.center; - var viewRotation = viewState.rotation; - var viewResolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var viewWidth = frameState.size[0]; - var viewHeight = frameState.size[1]; - var imageWidth = viewWidth * pixelRatio; - var imageHeight = viewHeight * pixelRatio; - - var transform = ol.transform.compose(this.transform_, - pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2, - pixelRatio / viewResolution, -pixelRatio / viewResolution, - -viewRotation, - -viewCenter[0], -viewCenter[1]); - - var context = this.context_; - - // Clear the canvas and set the correct size - context.canvas.width = imageWidth; - context.canvas.height = imageHeight; - - var elementTransform = ol.transform.reset(this.elementTransform_); - ol.transform.scale(elementTransform, 1 / pixelRatio, 1 / pixelRatio); - ol.transform.translate(elementTransform, - -(imageWidth - viewWidth) / 2 * pixelRatio, - -(imageHeight - viewHeight) / 2 * pixelRatio); - ol.dom.transformElement2D(context.canvas, elementTransform, 6); - - this.dispatchEvent_(ol.render.EventType.PRECOMPOSE, frameState, transform); - - var replayGroup = this.replayGroup_; - - if (replayGroup && !replayGroup.isEmpty()) { - - context.globalAlpha = layerState.opacity; - replayGroup.replay(context, pixelRatio, transform, viewRotation, - layerState.managed ? frameState.skippedFeatureUids : {}); - - this.dispatchEvent_(ol.render.EventType.RENDER, frameState, transform); - } - - this.dispatchEvent_(ol.render.EventType.POSTCOMPOSE, frameState, transform); -}; - - -/** - * @param {ol.render.EventType} type Event type. - * @param {olx.FrameState} frameState Frame state. - * @param {ol.Transform} transform Transform. - * @private - */ -ol.renderer.dom.VectorLayer.prototype.dispatchEvent_ = function(type, frameState, transform) { - var context = this.context_; - var layer = this.getLayer(); - if (layer.hasListener(type)) { - var render = new ol.render.canvas.Immediate( - context, frameState.pixelRatio, frameState.extent, transform, - frameState.viewState.rotation); - var event = new ol.render.Event(type, render, frameState, context, null); - layer.dispatchEvent(event); - } -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, callback, thisArg) { - if (!this.replayGroup_) { - return undefined; - } else { - var resolution = frameState.viewState.resolution; - var rotation = frameState.viewState.rotation; - var layer = this.getLayer(); - /** @type {Object.} */ - var features = {}; - return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, - rotation, {}, - /** - * @param {ol.Feature|ol.render.Feature} feature Feature. - * @return {?} Callback result. - */ - function(feature) { - var key = ol.getUid(feature).toString(); - if (!(key in features)) { - features[key] = true; - return callback.call(thisArg, feature, layer); - } - }); - } -}; - - -/** - * Handle changes in image style state. - * @param {ol.events.Event} event Image style change event. - * @private - */ -ol.renderer.dom.VectorLayer.prototype.handleStyleImageChange_ = function(event) { - this.renderIfReadyAndVisible(); -}; - - -/** - * @inheritDoc - */ -ol.renderer.dom.VectorLayer.prototype.prepareFrame = function(frameState, layerState) { - - var vectorLayer = /** @type {ol.layer.Vector} */ (this.getLayer()); - var vectorSource = vectorLayer.getSource(); - - this.updateAttributions( - frameState.attributions, vectorSource.getAttributions()); - this.updateLogos(frameState, vectorSource); - - var animating = frameState.viewHints[ol.View.Hint.ANIMATING]; - var interacting = frameState.viewHints[ol.View.Hint.INTERACTING]; - var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating(); - var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting(); - - if (!this.dirty_ && (!updateWhileAnimating && animating) || - (!updateWhileInteracting && interacting)) { - return true; - } - - var frameStateExtent = frameState.extent; - var viewState = frameState.viewState; - var projection = viewState.projection; - var resolution = viewState.resolution; - var pixelRatio = frameState.pixelRatio; - var vectorLayerRevision = vectorLayer.getRevision(); - var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer(); - var vectorLayerRenderOrder = vectorLayer.getRenderOrder(); - - if (vectorLayerRenderOrder === undefined) { - vectorLayerRenderOrder = ol.renderer.vector.defaultOrder; - } - - var extent = ol.extent.buffer(frameStateExtent, - vectorLayerRenderBuffer * resolution); - - if (!this.dirty_ && - this.renderedResolution_ == resolution && - this.renderedRevision_ == vectorLayerRevision && - this.renderedRenderOrder_ == vectorLayerRenderOrder && - ol.extent.containsExtent(this.renderedExtent_, extent)) { - return true; - } - - this.replayGroup_ = null; - - this.dirty_ = false; - - var replayGroup = - new ol.render.canvas.ReplayGroup( - ol.renderer.vector.getTolerance(resolution, pixelRatio), extent, - resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer()); - vectorSource.loadFeatures(extent, resolution, projection); - /** - * @param {ol.Feature} feature Feature. - * @this {ol.renderer.dom.VectorLayer} - */ - var renderFeature = function(feature) { - var styles; - var styleFunction = feature.getStyleFunction(); - if (styleFunction) { - styles = styleFunction.call(feature, resolution); - } else { - styleFunction = vectorLayer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } - } - if (styles) { - var dirty = this.renderFeature( - feature, resolution, pixelRatio, styles, replayGroup); - this.dirty_ = this.dirty_ || dirty; - } - }; - if (vectorLayerRenderOrder) { - /** @type {Array.} */ - var features = []; - vectorSource.forEachFeatureInExtent(extent, - /** - * @param {ol.Feature} feature Feature. - */ - function(feature) { - features.push(feature); - }, this); - features.sort(vectorLayerRenderOrder); - features.forEach(renderFeature, this); - } else { - vectorSource.forEachFeatureInExtent(extent, renderFeature, this); - } - replayGroup.finish(); - - this.renderedResolution_ = resolution; - this.renderedRevision_ = vectorLayerRevision; - this.renderedRenderOrder_ = vectorLayerRenderOrder; - this.renderedExtent_ = extent; - this.replayGroup_ = replayGroup; - - return true; -}; - - -/** - * @param {ol.Feature} feature Feature. - * @param {number} resolution Resolution. - * @param {number} pixelRatio Pixel ratio. - * @param {(ol.style.Style|Array.)} styles The style or array of - * styles. - * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group. - * @return {boolean} `true` if an image is loading. - */ -ol.renderer.dom.VectorLayer.prototype.renderFeature = function(feature, resolution, pixelRatio, styles, replayGroup) { - if (!styles) { - return false; - } - var loading = false; - if (Array.isArray(styles)) { - for (var i = 0, ii = styles.length; i < ii; ++i) { - loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles[i], - ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), - this.handleStyleImageChange_, this) || loading; - } - } else { - loading = ol.renderer.vector.renderFeature( - replayGroup, feature, styles, - ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio), - this.handleStyleImageChange_, this) || loading; - } - return loading; -}; diff --git a/src/ol/renderer/map.js b/src/ol/renderer/map.js index 9563c983c6..2bce7f923c 100644 --- a/src/ol/renderer/map.js +++ b/src/ol/renderer/map.js @@ -13,12 +13,11 @@ goog.require('ol.transform'); /** - * Available renderers: `'canvas'`, `'dom'` or `'webgl'`. + * Available renderers: `'canvas'` or `'webgl'`. * @enum {string} */ ol.RendererType = { CANVAS: 'canvas', - DOM: 'dom', WEBGL: 'webgl' }; diff --git a/src/ol/reproj/tile.js b/src/ol/reproj/tile.js index 5b6ff75ae6..b62493ed33 100644 --- a/src/ol/reproj/tile.js +++ b/src/ol/reproj/tile.js @@ -6,7 +6,6 @@ goog.require('ol.events'); goog.require('ol.events.EventType'); goog.require('ol.extent'); goog.require('ol.math'); -goog.require('ol.obj'); goog.require('ol.reproj'); goog.require('ol.reproj.Triangulation'); @@ -62,12 +61,6 @@ ol.reproj.Tile = function(sourceProj, sourceTileGrid, */ this.canvas_ = null; - /** - * @private - * @type {Object.} - */ - this.canvasByContext_ = {}; - /** * @private * @type {ol.tilegrid.TileGrid} @@ -216,22 +209,8 @@ ol.reproj.Tile.prototype.disposeInternal = function() { /** * @inheritDoc */ -ol.reproj.Tile.prototype.getImage = function(opt_context) { - if (opt_context !== undefined) { - var image; - var key = ol.getUid(opt_context); - if (key in this.canvasByContext_) { - return this.canvasByContext_[key]; - } else if (ol.obj.isEmpty(this.canvasByContext_)) { - image = this.canvas_; - } else { - image = /** @type {HTMLCanvasElement} */ (this.canvas_.cloneNode(false)); - } - this.canvasByContext_[key] = image; - return image; - } else { - return this.canvas_; - } +ol.reproj.Tile.prototype.getImage = function() { + return this.canvas_; }; diff --git a/src/ol/source/tiledebug.js b/src/ol/source/tiledebug.js index 0ef9e0439c..108461c63e 100644 --- a/src/ol/source/tiledebug.js +++ b/src/ol/source/tiledebug.js @@ -79,9 +79,9 @@ ol.source.TileDebug.Tile_ = function(tileCoord, tileSize, text) { /** * @private - * @type {Object.} + * @type {HTMLCanvasElement} */ - this.canvasByContext_ = {}; + this.canvas_ = null; }; ol.inherits(ol.source.TileDebug.Tile_, ol.Tile); @@ -89,16 +89,12 @@ ol.inherits(ol.source.TileDebug.Tile_, ol.Tile); /** * Get the image element for this tile. - * @param {Object=} opt_context Optional context. Only used by the DOM - * renderer. * @return {HTMLCanvasElement} Image. */ -ol.source.TileDebug.Tile_.prototype.getImage = function(opt_context) { - var key = opt_context !== undefined ? ol.getUid(opt_context) : -1; - if (key in this.canvasByContext_) { - return this.canvasByContext_[key]; +ol.source.TileDebug.Tile_.prototype.getImage = function() { + if (this.canvas_) { + return this.canvas_; } else { - var tileSize = this.tileSize_; var context = ol.dom.createCanvasContext2D(tileSize[0], tileSize[1]); @@ -111,8 +107,7 @@ ol.source.TileDebug.Tile_.prototype.getImage = function(opt_context) { context.font = '24px sans-serif'; context.fillText(this.text_, tileSize[0] / 2, tileSize[1] / 2); - this.canvasByContext_[key] = context.canvas; + this.canvas_ = context.canvas; return context.canvas; - } }; diff --git a/src/ol/source/tileutfgrid.js b/src/ol/source/tileutfgrid.js index 5bef4b55db..0e897d3763 100644 --- a/src/ol/source/tileutfgrid.js +++ b/src/ol/source/tileutfgrid.js @@ -322,11 +322,9 @@ ol.inherits(ol.source.TileUTFGrid.Tile_, ol.Tile); /** * Get the image element for this tile. - * @param {Object=} opt_context Optional context. Only used for the DOM - * renderer. * @return {Image} Image. */ -ol.source.TileUTFGrid.Tile_.prototype.getImage = function(opt_context) { +ol.source.TileUTFGrid.Tile_.prototype.getImage = function() { return null; }; diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index 932ffc9a61..b5f62ea3f8 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -140,10 +140,9 @@ ol.source.Zoomify.Tile_ = function( /** * @private - * @type {Object.} + * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} */ - this.zoomifyImageByContext_ = {}; + this.zoomifyImage_ = null; }; ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); @@ -152,27 +151,24 @@ ol.inherits(ol.source.Zoomify.Tile_, ol.ImageTile); /** * @inheritDoc */ -ol.source.Zoomify.Tile_.prototype.getImage = function(opt_context) { +ol.source.Zoomify.Tile_.prototype.getImage = function() { + if (this.zoomifyImage_) { + return this.zoomifyImage_; + } var tileSize = ol.DEFAULT_TILE_SIZE; - var key = opt_context !== undefined ? - ol.getUid(opt_context).toString() : ''; - if (key in this.zoomifyImageByContext_) { - return this.zoomifyImageByContext_[key]; - } else { - var image = ol.ImageTile.prototype.getImage.call(this, opt_context); - if (this.state == ol.Tile.State.LOADED) { - if (image.width == tileSize && image.height == tileSize) { - this.zoomifyImageByContext_[key] = image; - return image; - } else { - var context = ol.dom.createCanvasContext2D(tileSize, tileSize); - context.drawImage(image, 0, 0); - this.zoomifyImageByContext_[key] = context.canvas; - return context.canvas; - } - } else { + var image = ol.ImageTile.prototype.getImage.call(this); + if (this.state == ol.Tile.State.LOADED) { + if (image.width == tileSize && image.height == tileSize) { + this.zoomifyImage_ = image; return image; + } else { + var context = ol.dom.createCanvasContext2D(tileSize, tileSize); + context.drawImage(image, 0, 0); + this.zoomifyImage_ = context.canvas; + return context.canvas; } + } else { + return image; } }; diff --git a/src/ol/tile.js b/src/ol/tile.js index 6f7bf34084..55e34f0842 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -60,10 +60,9 @@ ol.Tile.prototype.changed = function() { /** * Get the HTML image element for this tile (may be a Canvas, Image, or Video). * @abstract - * @param {Object=} opt_context Object. * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image. */ -ol.Tile.prototype.getImage = function(opt_context) {}; +ol.Tile.prototype.getImage = function() {}; /** diff --git a/test/spec/ol/dom/dom.test.js b/test/spec/ol/dom/dom.test.js index cb3f70e605..f37980d715 100644 --- a/test/spec/ol/dom/dom.test.js +++ b/test/spec/ol/dom/dom.test.js @@ -1,24 +1,7 @@ -/*global Modernizr*/ goog.provide('ol.test.dom'); -goog.require('ol.transform'); goog.require('ol.dom'); -/*! modernizr 3.3.1 (Custom Build) | MIT - * - * This is a custom build of Modernizr, which is used to compare their result - * of checking whether csstransforms & csstransforms3d are available with our - * implementation. - * The code below provides the following properties - * * `Modernizr.csstransforms` - * * `Modernizr.csstransforms3d` - * - * http://modernizr.com/download/?-csstransforms-csstransforms3d-setclasses -!*/ -/*eslint-disable*/ -!function(e,n,t){function r(e,n){return typeof e===n}function s(){var e,n,t,s,o,i,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;tp;p++)if(h=e[p],v=E.style[h],i(h,"-")&&(h=f(h)),E.style[h]!==t){if(o||r(s,"undefined"))return l(),"pfx"==n?h:!0;try{E.style[h]=s}catch(y){}if(E.style[h]!=v)return l(),"pfx"==n?h:!0}return l(),!1}function v(e,n,t,s,o){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?h(a,n,s,o):(a=(e+" "+P.join(i+" ")+i).split(" "),u(a,n,t))}function g(e,n,r){return v(e,t,t,n,r)}var y=[],C=[],w={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=w,Modernizr=new Modernizr;var S=n.documentElement,x="svg"===S.nodeName.toLowerCase(),_="Moz O ms Webkit",b=w._config.usePrefixes?_.split(" "):[];w._cssomPrefixes=b;var P=w._config.usePrefixes?_.toLowerCase().split(" "):[];w._domPrefixes=P;var z={elem:a("modernizr")};Modernizr._q.push(function(){delete z.elem});var E={style:z.elem.style};Modernizr._q.unshift(function(){delete E.style}),w.testAllProps=v,w.testAllProps=g,Modernizr.addTest("csstransforms",function(){return-1===navigator.userAgent.indexOf("Android 2.")&&g("transform","scale(1)",!0)});var T="CSS"in e&&"supports"in e.CSS,N="supportsCSS"in e;Modernizr.addTest("supports",T||N);var k=w.testStyles=c;Modernizr.addTest("csstransforms3d",function(){var e=!!g("perspective","1px",!0),n=Modernizr._config.usePrefixes;if(e&&(!n||"webkitPerspective"in S.style)){var t,r="#modernizr{width:0;height:0}";Modernizr.supports?t="@supports (perspective: 1px)":(t="@media (transform-3d)",n&&(t+=",(-webkit-transform-3d)")),t+="{#modernizr{width:7px;height:18px;margin:0;padding:0;border:0}}",k(r+t,function(n){e=7===n.offsetWidth&&18===n.offsetHeight})}return e}),s(),o(y),delete w.addTest,delete w.addAsyncTest;for(var A=0;A