diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index 4494bca99a..ab91055ef7 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -2,6 +2,26 @@ ### Next release +#### Removal of ol.FeatureStyleFunction + +The signature of the vector style function passed to the feature has changed. The function now always takes the `feature` and the `resolution` as aguments, the `feature` is no longer bound to `this`. + +Old code: +```js +feature.setStyle(function(resolution) { + var text = this.get('name'); + ... +}); +``` + +New code: +```js +feature.setStyle(function(feature, resolution) { + var text = feature.get('name'); + ... +}); +``` + #### Changed behavior of the `Draw` interaction For better drawing experience, two changes were made to the behavior of the Draw interaction: diff --git a/src/ol/Feature.js b/src/ol/Feature.js index 0f2fd321d0..e3f7416d50 100644 --- a/src/ol/Feature.js +++ b/src/ol/Feature.js @@ -73,14 +73,13 @@ const Feature = function(opt_geometryOrProperties) { /** * User provided style. * @private - * @type {ol.style.Style|Array.| - * ol.FeatureStyleFunction} + * @type {ol.style.Style|Array.|ol.StyleFunction} */ this.style_ = null; /** * @private - * @type {ol.FeatureStyleFunction|undefined} + * @type {ol.StyleFunction|undefined} */ this.styleFunction_ = undefined; @@ -172,8 +171,7 @@ Feature.prototype.getGeometryName = function() { /** * Get the feature's style. Will return what was provided to the * {@link ol.Feature#setStyle} method. - * @return {ol.style.Style|Array.| - * ol.FeatureStyleFunction|ol.StyleFunction} The feature style. + * @return {ol.style.Style|Array.|ol.StyleFunction} The feature style. * @api */ Feature.prototype.getStyle = function() { @@ -183,7 +181,7 @@ Feature.prototype.getStyle = function() { /** * Get the feature's style function. - * @return {ol.FeatureStyleFunction|undefined} Return a function + * @return {ol.StyleFunction|undefined} Return a function * representing the current style of this feature. * @api */ @@ -233,8 +231,7 @@ Feature.prototype.setGeometry = function(geometry) { * Set the style for the feature. This can be a single style object, an array * of styles, or a function that takes a resolution and returns an array of * styles. If it is `null` the feature has no style (a `null` style). - * @param {ol.style.Style|Array.| - * ol.FeatureStyleFunction|ol.StyleFunction} style Style for this feature. + * @param {ol.style.Style|Array.|ol.StyleFunction} style Style for this feature. * @api * @fires ol.events.Event#event:change */ @@ -284,21 +281,13 @@ Feature.prototype.setGeometryName = function(name) { * Convert the provided object into a feature style function. Functions passed * through unchanged. Arrays of ol.style.Style or single style objects wrapped * in a new feature style function. - * @param {ol.FeatureStyleFunction|!Array.|!ol.style.Style} obj + * @param {ol.StyleFunction|!Array.|!ol.style.Style} obj * A feature style function, a single style, or an array of styles. - * @return {ol.FeatureStyleFunction} A style function. + * @return {ol.StyleFunction} A style function. */ Feature.createStyleFunction = function(obj) { - let styleFunction; - if (typeof obj === 'function') { - if (obj.length == 2) { - styleFunction = function(resolution) { - return /** @type {ol.StyleFunction} */ (obj)(this, resolution); - }; - } else { - styleFunction = obj; - } + return obj; } else { /** * @type {Array.} @@ -311,10 +300,9 @@ Feature.createStyleFunction = function(obj) { 41); // Expected an `ol.style.Style` or an array of `ol.style.Style` styles = [obj]; } - styleFunction = function() { + return function() { return styles; }; } - return styleFunction; }; export default Feature; diff --git a/src/ol/format/KML.js b/src/ol/format/KML.js index 59fb55f1c8..57e1b3856c 100644 --- a/src/ol/format/KML.js +++ b/src/ol/format/KML.js @@ -388,31 +388,31 @@ function createNameStyleFunction(foundStyle, name) { * styles. * @param {boolean|undefined} showPointNames true to show names for point * placemarks. - * @return {ol.FeatureStyleFunction} Feature style function. + * @return {ol.StyleFunction} Feature style function. */ function createFeatureStyleFunction(style, styleUrl, defaultStyle, sharedStyles, showPointNames) { return ( /** - * @param {number} resolution Resolution. - * @return {Array.} Style. - * @this {ol.Feature} - */ - function(resolution) { + * @param {ol.Feature} feature feature. + * @param {number} resolution Resolution. + * @return {Array.} Style. + */ + function(feature, resolution) { let drawName = showPointNames; /** @type {ol.style.Style|undefined} */ let nameStyle; let name = ''; if (drawName) { - if (this.getGeometry()) { - drawName = (this.getGeometry().getType() === - GeometryType.POINT); + const geometry = feature.getGeometry(); + if (geometry) { + drawName = geometry.getType() === GeometryType.POINT; } } if (drawName) { - name = /** @type {string} */ (this.get('name')); + name = /** @type {string} */ (feature.get('name')); drawName = drawName && name; } @@ -2707,7 +2707,7 @@ function writePlacemark(node, feature, objectStack) { if (styleFunction) { // FIXME the styles returned by the style function are supposed to be // resolution-independent here - const styles = styleFunction.call(feature, 0); + const styles = styleFunction(feature, 0); if (styles) { const style = Array.isArray(styles) ? styles[0] : styles; if (this.writeStyles_) { diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js index f5910ef8aa..58ccc359e3 100644 --- a/src/ol/renderer/canvas/VectorLayer.js +++ b/src/ol/renderer/canvas/VectorLayer.js @@ -364,14 +364,9 @@ CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerSta */ const render = function(feature) { let styles; - let styleFunction = feature.getStyleFunction(); + const styleFunction = feature.getStyleFunction() || vectorLayer.getStyleFunction(); if (styleFunction) { - styles = styleFunction.call(feature, resolution); - } else { - styleFunction = vectorLayer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } + styles = styleFunction(feature, resolution); } if (styles) { const dirty = this.renderFeature( @@ -384,8 +379,8 @@ CanvasVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerSta const features = []; vectorSource.forEachFeatureInExtent(extent, /** - * @param {ol.Feature} feature Feature. - */ + * @param {ol.Feature} feature Feature. + */ function(feature) { features.push(feature); }, this); diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js index 797ad5552a..d0dea9edc2 100644 --- a/src/ol/renderer/canvas/VectorTileLayer.js +++ b/src/ol/renderer/canvas/VectorTileLayer.js @@ -201,18 +201,12 @@ CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function( */ const render = function(feature) { let styles; - let styleFunction = feature.getStyleFunction(); + const styleFunction = feature.getStyleFunction() || layer.getStyleFunction(); if (styleFunction) { - styles = styleFunction.call(/** @type {ol.Feature} */ (feature), resolution); - } else { - styleFunction = layer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } + styles = styleFunction(feature, resolution); } if (styles) { - const dirty = this.renderFeature(feature, squaredTolerance, styles, - replayGroup); + const dirty = this.renderFeature(feature, squaredTolerance, styles, replayGroup); this.dirty_ = this.dirty_ || dirty; replayState.dirty = replayState.dirty || dirty; } diff --git a/src/ol/renderer/webgl/VectorLayer.js b/src/ol/renderer/webgl/VectorLayer.js index f802637814..f39c854035 100644 --- a/src/ol/renderer/webgl/VectorLayer.js +++ b/src/ol/renderer/webgl/VectorLayer.js @@ -266,14 +266,9 @@ WebGLVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerStat */ const render = function(feature) { let styles; - let styleFunction = feature.getStyleFunction(); + const styleFunction = feature.getStyleFunction() || vectorLayer.getStyleFunction(); if (styleFunction) { - styles = styleFunction.call(feature, resolution); - } else { - styleFunction = vectorLayer.getStyleFunction(); - if (styleFunction) { - styles = styleFunction(feature, resolution); - } + styles = styleFunction(feature, resolution); } if (styles) { const dirty = this.renderFeature( @@ -286,8 +281,8 @@ WebGLVectorLayerRenderer.prototype.prepareFrame = function(frameState, layerStat const features = []; vectorSource.forEachFeatureInExtent(extent, /** - * @param {ol.Feature} feature Feature. - */ + * @param {ol.Feature} feature Feature. + */ function(feature) { features.push(feature); }, this); diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index ae88f335a9..d8c9799e67 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -289,17 +289,6 @@ ol.Extent; ol.FeatureLoader; -/** - * A function that returns an array of {@link ol.style.Style styles} given a - * resolution. The `this` keyword inside the function references the - * {@link ol.Feature} to be styled. - * - * @typedef {function(this: ol.Feature, number): - * (ol.style.Style|Array.)} - */ -ol.FeatureStyleFunction; - - /** * {@link ol.source.Vector} sources use a function of this type to get the url * to load features from. diff --git a/test/spec/ol/feature.test.js b/test/spec/ol/feature.test.js index ca131bc043..0468a64269 100644 --- a/test/spec/ol/feature.test.js +++ b/test/spec/ol/feature.test.js @@ -266,7 +266,7 @@ describe('ol.Feature', function() { describe('#getStyleFunction()', function() { - const styleFunction = function(resolution) { + const styleFunction = function(feature, resolution) { return null; }; @@ -319,20 +319,10 @@ describe('ol.Feature', function() { }); it('accepts a style function', function() { - const feature = new Feature(); - function featureStyleFunction(resolution) { - return styleFunction(this, resolution); - } - feature.setStyle(featureStyleFunction); - expect(feature.getStyleFunction()).to.be(featureStyleFunction); - expect(feature.getStyleFunction()(42)).to.be(42); - }); - - it('accepts a layer style function', function() { const feature = new Feature(); feature.setStyle(styleFunction); - expect(feature.getStyleFunction()).to.not.be(styleFunction); - expect(feature.getStyleFunction()(42)).to.be(42); + expect(feature.getStyleFunction()).to.be(styleFunction); + expect(feature.getStyleFunction()(feature, 42)).to.be(42); }); it('accepts null', function() { @@ -357,7 +347,7 @@ describe('ol.Feature', function() { const style = new Style(); - const styleFunction = function(resolution) { + const styleFunction = function(feature, resolution) { return null; }; @@ -461,7 +451,7 @@ describe('ol.Feature.createStyleFunction()', function() { }); it('passes through a function', function() { - const original = function() { + const original = function(feature, resolution) { return [style]; }; const styleFunction = Feature.createStyleFunction(original); diff --git a/test/spec/ol/format/kml.test.js b/test/spec/ol/format/kml.test.js index 7919bb8170..200570ebbf 100644 --- a/test/spec/ol/format/kml.test.js +++ b/test/spec/ol/format/kml.test.js @@ -57,7 +57,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1715,7 +1715,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1748,7 +1748,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1828,7 +1828,7 @@ describe('ol.format.KML', function() { expect(f.getId()).to.be.within(1, 5); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1899,7 +1899,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1935,7 +1935,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -1970,7 +1970,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2002,7 +2002,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2039,7 +2039,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2078,7 +2078,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2115,7 +2115,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2153,7 +2153,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2206,7 +2206,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(2); const style = styleArray[1]; @@ -2255,7 +2255,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(2); const style = styleArray[1]; @@ -2509,7 +2509,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2542,7 +2542,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2583,7 +2583,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2617,7 +2617,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2651,7 +2651,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2685,7 +2685,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const s = styleArray[0]; @@ -2718,7 +2718,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2750,7 +2750,7 @@ describe('ol.format.KML', function() { expect(f).to.be.an(Feature); const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); expect(styleArray).to.have.length(1); const style = styleArray[0]; @@ -2783,13 +2783,13 @@ describe('ol.format.KML', function() { expect(f1).to.be.an(Feature); const styleFunction1 = f1.getStyleFunction(); expect(styleFunction1).not.to.be(undefined); - const styleArray1 = styleFunction1.call(f1, 0); + const styleArray1 = styleFunction1(f1, 0); expect(styleArray1).to.be.an(Array); const f2 = fs[1]; expect(f2).to.be.an(Feature); const styleFunction2 = f2.getStyleFunction(); expect(styleFunction2).not.to.be(undefined); - const styleArray2 = styleFunction2.call(f2, 0); + const styleArray2 = styleFunction2(f2, 0); expect(styleArray2).to.be.an(Array); expect(styleArray1).to.be(styleArray2); }); @@ -3204,7 +3204,7 @@ describe('ol.format.KML', function() { const f = features[0]; const styleFunction = f.getStyleFunction(); expect(styleFunction).not.to.be(undefined); - const styleArray = styleFunction.call(f, 0); + const styleArray = styleFunction(f, 0); expect(styleArray).to.be.an(Array); const style = styleArray[0]; expect(style).to.be.an(Style);