Merge pull request #7811 from fredj/rm_ol.FeatureStyleFunction

Remove ol.FeatureStyleFunction support

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:

src/ol/Feature.js

@@ -73,14 +73,13 @@ const Feature = function(opt_geometryOrProperties) {
   /**
    * User provided style.
    * @private
-   * @type {ol.style.Style|Array.<ol.style.Style>|
+   * @type {ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction}
-   *     ol.FeatureStyleFunction}
    */
   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.style.Style>|
+ * @return {ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction} The feature style.
- *     ol.FeatureStyleFunction|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.style.Style>|
+ * @param {ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction} style Style for this feature.
- *     ol.FeatureStyleFunction|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>|!ol.style.Style} obj
+ * @param {ol.StyleFunction|!Array.<ol.style.Style>|!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) {
+    return obj;
-      styleFunction = function(resolution) {
-        return /** @type {ol.StyleFunction} */ (obj)(this, resolution);
-      };
-    } else {
-      styleFunction = obj;
-    }
   } else {
     /**
      * @type {Array.<ol.style.Style>}
@@ -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;

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.
+     * @param {ol.Feature} feature feature.
-         * @return {Array.<ol.style.Style>} Style.
+     * @param {number} resolution Resolution.
-         * @this {ol.Feature}
+     * @return {Array.<ol.style.Style>} Style.
-         */
+     */
-    function(resolution) {
+    function(feature, resolution) {
       let drawName = showPointNames;
       /** @type {ol.style.Style|undefined} */
       let nameStyle;
       let name = '';
       if (drawName) {
-        if (this.getGeometry()) {
+        const geometry = feature.getGeometry();
-          drawName = (this.getGeometry().getType() ===
+        if (geometry) {
-                        GeometryType.POINT);
+          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_) {

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);
+      styles = styleFunction(feature, resolution);
-    } else {
-      styleFunction = vectorLayer.getStyleFunction();
-      if (styleFunction) {
-        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);

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);
+        styles = styleFunction(feature, resolution);
-      } else {
-        styleFunction = layer.getStyleFunction();
-        if (styleFunction) {
-          styles = styleFunction(feature, resolution);
-        }
       }
       if (styles) {
-        const dirty = this.renderFeature(feature, squaredTolerance, styles,
+        const dirty = this.renderFeature(feature, squaredTolerance, styles, replayGroup);
-          replayGroup);
         this.dirty_ = this.dirty_ || dirty;
         replayState.dirty = replayState.dirty || dirty;
       }

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);
+      styles = styleFunction(feature, resolution);
-    } else {
-      styleFunction = vectorLayer.getStyleFunction();
-      if (styleFunction) {
-        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);

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.style.Style>)}
- */
-ol.FeatureStyleFunction;
-
-
 /**
  * {@link ol.source.Vector} sources use a function of this type to get the url
  * to load features from.

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()).to.be(styleFunction);
-      expect(feature.getStyleFunction()(42)).to.be(42);
+      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);

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);