Improve style layer inheritance (#378)

Author: wipfli

.eslintrc

@@ -62,6 +62,8 @@
     // @typescript-eslint/quotes requires standard quotes rule to be turned off
     "quotes": "off",
     "@typescript-eslint/quotes": ["error", "single"],
+    "no-redeclare": "off",
+    "@typescript-eslint/no-redeclare": ["error"],
     "space-before-function-paren": "off",
     "template-curly-spacing": "error",
     "no-useless-escape": "off",

src/style/style_layer.ts

@@ -31,7 +31,22 @@ import {mat4} from 'gl-matrix';
 
 const TRANSITION_SUFFIX = '-transition';
 
-class StyleLayer extends Evented {
+// this interface is used to allow optional overload for this methods in the derived classes.
+interface StyleLayer {
+    queryRadius?(bucket: Bucket): number;
+    queryIntersectsFeature?(
+      queryGeometry: Array<Point>,
+      feature: VectorTileFeature,
+      featureState: FeatureState,
+      geometry: Array<Array<Point>>,
+      zoom: number,
+      transform: Transform,
+      pixelsToTileUnits: number,
+      pixelPosMatrix: mat4
+    ): boolean | number;
+}
+
+abstract class StyleLayer extends Evented {
     id: string;
     metadata: unknown;
     type: string;
@@ -52,18 +67,6 @@ class StyleLayer extends Evented {
 
     _featureFilter: FeatureFilter;
 
-    readonly queryRadius: (bucket: Bucket) => number;
-    readonly queryIntersectsFeature: (
-      queryGeometry: Array<Point>,
-      feature: VectorTileFeature,
-      featureState: FeatureState,
-      geometry: Array<Array<Point>>,
-      zoom: number,
-      transform: Transform,
-      pixelsToTileUnits: number,
-      pixelPosMatrix: mat4
-    ) => boolean | number;
-
     readonly onAdd: ((map: Map) => void);
     readonly onRemove: ((map: Map) => void);
 

src/style/style_layer/circle_style_layer.ts

@@ -29,14 +29,14 @@ class CircleStyleLayer extends StyleLayer {
         return new CircleBucket(parameters);
     }
 
-    queryRadius = (bucket: Bucket): number => {
+    queryRadius(bucket: Bucket): number {
         const circleBucket: CircleBucket<CircleStyleLayer> = (bucket as any);
         return getMaximumPaintValue('circle-radius', this, circleBucket) +
             getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
             translateDistance(this.paint.get('circle-translate'));
     }
 
-    queryIntersectsFeature = (
+    queryIntersectsFeature(
       queryGeometry: Array<Point>,
       feature: VectorTileFeature,
       featureState: FeatureState,
@@ -45,7 +45,7 @@ class CircleStyleLayer extends StyleLayer {
       transform: Transform,
       pixelsToTileUnits: number,
       pixelPosMatrix: mat4
-    ): boolean => {
+    ): boolean {
         const translatedPolygon = translate(queryGeometry,
             this.paint.get('circle-translate'),
             this.paint.get('circle-translate-anchor'),

src/style/style_layer/fill_extrusion_style_layer.ts

@@ -28,15 +28,15 @@ class FillExtrusionStyleLayer extends StyleLayer {
         return new FillExtrusionBucket(parameters);
     }
 
-    queryRadius = (): number => {
+    queryRadius(): number {
         return translateDistance(this.paint.get('fill-extrusion-translate'));
     }
 
     is3D(): boolean {
         return true;
     }
 
-    queryIntersectsFeature = (
+    queryIntersectsFeature(
       queryGeometry: Array<Point>,
       feature: VectorTileFeature,
       featureState: FeatureState,
@@ -45,7 +45,7 @@ class FillExtrusionStyleLayer extends StyleLayer {
       transform: Transform,
       pixelsToTileUnits: number,
       pixelPosMatrix: mat4
-    ): boolean | number => {
+    ): boolean | number {
 
         const translatedPolygon = translate(queryGeometry,
             this.paint.get('fill-extrusion-translate'),

src/style/style_layer/fill_style_layer.ts

@@ -39,19 +39,19 @@ class FillStyleLayer extends StyleLayer {
         return new FillBucket(parameters);
     }
 
-    queryRadius = (): number => {
+    queryRadius(): number {
         return translateDistance(this.paint.get('fill-translate'));
     }
 
-    queryIntersectsFeature = (
+    queryIntersectsFeature(
       queryGeometry: Array<Point>,
       feature: VectorTileFeature,
       featureState: FeatureState,
       geometry: Array<Array<Point>>,
       zoom: number,
       transform: Transform,
       pixelsToTileUnits: number
-    ): boolean => {
+    ): boolean {
         const translatedPolygon = translate(queryGeometry,
             this.paint.get('fill-translate'),
             this.paint.get('fill-translate-anchor'),

src/style/style_layer/heatmap_style_layer.ts

@@ -55,11 +55,11 @@ class HeatmapStyleLayer extends StyleLayer {
         }
     }
 
-    queryRadius = (): number => {
+    queryRadius(): number {
         return 0;
     }
 
-    queryIntersectsFeature = (): boolean => {
+    queryIntersectsFeature(): boolean {
         return false;
     }
 

src/style/style_layer/line_style_layer.ts

@@ -77,7 +77,7 @@ class LineStyleLayer extends StyleLayer {
         return new LineBucket(parameters);
     }
 
-    queryRadius = (bucket: Bucket): number => {
+    queryRadius(bucket: Bucket): number {
         const lineBucket: LineBucket = (bucket as any);
         const width = getLineWidth(
             getMaximumPaintValue('line-width', this, lineBucket),
@@ -86,15 +86,15 @@ class LineStyleLayer extends StyleLayer {
         return width / 2 + Math.abs(offset) + translateDistance(this.paint.get('line-translate'));
     }
 
-    queryIntersectsFeature = (
+    queryIntersectsFeature(
       queryGeometry: Array<Point>,
       feature: VectorTileFeature,
       featureState: FeatureState,
       geometry: Array<Array<Point>>,
       zoom: number,
       transform: Transform,
       pixelsToTileUnits: number
-    ): boolean => {
+    ): boolean {
         const translatedPolygon = translate(queryGeometry,
             this.paint.get('line-translate'),
             this.paint.get('line-translate-anchor'),

src/style/style_layer/symbol_style_layer.ts

@@ -105,11 +105,11 @@ class SymbolStyleLayer extends StyleLayer {
         return new SymbolBucket(parameters);
     }
 
-    queryRadius = (): number => {
+    queryRadius(): number {
         return 0;
     }
 
-    queryIntersectsFeature= (): boolean => {
+    queryIntersectsFeature(): boolean {
         assert(false); // Should take a different path in FeatureIndex
         return false;
     }