Use union type instead of enum for canvas builder type

src/ol/render/canvas.js

@@ -8,6 +8,10 @@ import {clear} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {getFontParameters} from '../css.js';
 
+/**
+ * @typedef {'Circle' | 'Image' | 'LineString' | 'Polygon' | 'Text' | 'Default'} BuilderType
+ */
+
 /**
  * @typedef {Object} FillState
  * @property {import("../colorlike.js").ColorLike} fillStyle FillStyle.

src/ol/render/canvas/BuilderGroup.js

@@ -9,7 +9,7 @@ import PolygonBuilder from './PolygonBuilder.js';
 import TextBuilder from './TextBuilder.js';
 
 /**
- * @type {Object<import("./BuilderType").default, typeof Builder>}
+ * @type {Object<import("../canvas.js").BuilderType, typeof Builder>}
  */
 const BATCH_CONSTRUCTORS = {
   'Circle': PolygonBuilder,
@@ -54,13 +54,13 @@ class BuilderGroup {
 
     /**
      * @private
-     * @type {!Object<string, !Object<import("./BuilderType").default, Builder>>}
+     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, Builder>>}
      */
     this.buildersByZIndex_ = {};
   }
 
   /**
-   * @return {!Object<string, !Object<import("./BuilderType").default, import("./Builder.js").SerializableInstructions>>} The serializable instructions
+   * @return {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Builder.js").SerializableInstructions>>} The serializable instructions
    */
   finish() {
     const builderInstructions = {};
@@ -77,7 +77,7 @@ class BuilderGroup {
 
   /**
    * @param {number|undefined} zIndex Z index.
-   * @param {import("./BuilderType.js").default} builderType Replay type.
+   * @param {import("../canvas.js").BuilderType} builderType Replay type.
    * @return {import("../VectorContext.js").default} Replay.
    */
   getBuilder(zIndex, builderType) {

src/ol/render/canvas/BuilderType.js

@@ -1,15 +0,0 @@
-/**
- * @module ol/render/canvas/BuilderType
- */
-
-/**
- * @enum {string}
- */
-export default {
-  CIRCLE: 'Circle',
-  DEFAULT: 'Default',
-  IMAGE: 'Image',
-  LINE_STRING: 'LineString',
-  POLYGON: 'Polygon',
-  TEXT: 'Text',
-};

src/ol/render/canvas/ExecutorGroup.js

@@ -2,7 +2,6 @@
  * @module ol/render/canvas/ExecutorGroup
  */
 
-import BuilderType from './BuilderType.js';
 import Executor from './Executor.js';
 import {buffer, createEmpty, extendCoordinate} from '../../extent.js';
 import {
@@ -16,16 +15,9 @@ import {transform2D} from '../../geom/flat/transform.js';
 
 /**
  * @const
- * @type {Array<import("./BuilderType.js").default>}
+ * @type {Array<import("../canvas.js").BuilderType>}
  */
-const ORDER = [
+const ORDER = ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'];
-  BuilderType.POLYGON,
-  BuilderType.CIRCLE,
-  BuilderType.LINE_STRING,
-  BuilderType.IMAGE,
-  BuilderType.TEXT,
-  BuilderType.DEFAULT,
-];
 
 class ExecutorGroup {
   /**
@@ -36,7 +28,7 @@ class ExecutorGroup {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The executor group can have overlapping geometries.
-   * @param {!Object<string, !Object<import("./BuilderType.js").default, import("../canvas.js").SerializableInstructions>>} allInstructions
+   * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions
    * The serializable instructions.
    * @param {number} [opt_renderBuffer] Optional rendering buffer.
    */
@@ -80,7 +72,7 @@ class ExecutorGroup {
 
     /**
      * @private
-     * @type {!Object<string, !Object<import("./BuilderType.js").default, import("./Executor").default>>}
+     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Executor").default>>}
      */
     this.executorsByZIndex_ = {};
 
@@ -116,7 +108,7 @@ class ExecutorGroup {
   /**
    * Create executors and populate them using the provided instructions.
    * @private
-   * @param {!Object<string, !Object<import("./BuilderType.js").default, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+   * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
    */
   createExecutors_(allInstructions) {
     for (const zIndex in allInstructions) {
@@ -139,7 +131,7 @@ class ExecutorGroup {
   }
 
   /**
-   * @param {Array<import("./BuilderType.js").default>} executors Executors.
+   * @param {Array<import("../canvas.js").BuilderType>} executors Executors.
    * @return {boolean} Has executors of the provided types.
    */
   hasExecutors(executors) {
@@ -238,8 +230,7 @@ class ExecutorGroup {
         if (imageData[indexes[i]] > 0) {
           if (
             !declutteredFeatures ||
-            (builderType !== BuilderType.IMAGE &&
+            (builderType !== 'Image' && builderType !== 'Text') ||
-              builderType !== BuilderType.TEXT) ||
             declutteredFeatures.indexOf(feature) !== -1
           ) {
             const idx = (indexes[i] - 3) / 4;
@@ -316,7 +307,7 @@ class ExecutorGroup {
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
-   * @param {Array<import("./BuilderType.js").default>} [opt_builderTypes] Ordered replay types to replay.
+   * @param {Array<import("../canvas.js").BuilderType>} [opt_builderTypes] Ordered replay types to replay.
    *     Default is {@link module:ol/render/replay~ORDER}
    * @param {import("rbush").default} [opt_declutterTree] Declutter tree.
    */

src/ol/renderer/canvas/VectorTileLayer.js

@@ -4,7 +4,6 @@
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import CanvasExecutorGroup from '../../render/canvas/ExecutorGroup.js';
 import CanvasTileLayerRenderer from './TileLayer.js';
-import ReplayType from '../../render/canvas/BuilderType.js';
 import TileState from '../../TileState.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ViewHint from '../../ViewHint.js';
@@ -40,33 +39,20 @@ import {toSize} from '../../size.js';
 import {wrapX} from '../../coordinate.js';
 
 /**
- * @type {!Object<string, Array<import("../../render/canvas/BuilderType.js").default>>}
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
  */
 const IMAGE_REPLAYS = {
-  'image': [
+  'image': ['Polygon', 'Circle', 'LineString', 'Image', 'Text'],
-    ReplayType.POLYGON,
+  'hybrid': ['Polygon', 'LineString'],
-    ReplayType.CIRCLE,
-    ReplayType.LINE_STRING,
-    ReplayType.IMAGE,
-    ReplayType.TEXT,
-  ],
-  'hybrid': [ReplayType.POLYGON, ReplayType.LINE_STRING],
   'vector': [],
 };
 
 /**
- * @type {!Object<string, Array<import("../../render/canvas/BuilderType.js").default>>}
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
  */
 const VECTOR_REPLAYS = {
-  'hybrid': [ReplayType.IMAGE, ReplayType.TEXT, ReplayType.DEFAULT],
+  'hybrid': ['Image', 'Text', 'Default'],
-  'vector': [
+  'vector': ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'],
-    ReplayType.POLYGON,
-    ReplayType.CIRCLE,
-    ReplayType.LINE_STRING,
-    ReplayType.IMAGE,
-    ReplayType.TEXT,
-    ReplayType.DEFAULT,
-  ],
 };
 
 /**

src/ol/renderer/vector.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/renderer/vector
  */
-import BuilderType from '../render/canvas/BuilderType.js';
 import ImageState from '../ImageState.js';
 import {getUid} from '../util.js';
 
@@ -83,10 +82,7 @@ function renderCircleGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (fillStyle || strokeStyle) {
-    const circleReplay = builderGroup.getBuilder(
+    const circleReplay = builderGroup.getBuilder(style.getZIndex(), 'Circle');
-      style.getZIndex(),
-      BuilderType.CIRCLE
-    );
     circleReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     circleReplay.drawCircle(geometry, feature);
   }
@@ -94,7 +90,7 @@ function renderCircleGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -202,7 +198,7 @@ function renderGeometry(replayGroup, geometry, style, feature) {
     }
     return;
   }
-  const replay = replayGroup.getBuilder(style.getZIndex(), BuilderType.DEFAULT);
+  const replay = replayGroup.getBuilder(style.getZIndex(), 'Default');
   replay.drawCustom(
     /** @type {import("../geom/SimpleGeometry.js").default} */ (geometry),
     feature,
@@ -257,7 +253,7 @@ function renderLineStringGeometry(
   if (strokeStyle) {
     const lineStringReplay = builderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.LINE_STRING
+      'LineString'
     );
     lineStringReplay.setFillStrokeStyle(null, strokeStyle);
     lineStringReplay.drawLineString(geometry, feature);
@@ -266,7 +262,7 @@ function renderLineStringGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -291,7 +287,7 @@ function renderMultiLineStringGeometry(
   if (strokeStyle) {
     const lineStringReplay = builderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.LINE_STRING
+      'LineString'
     );
     lineStringReplay.setFillStrokeStyle(null, strokeStyle);
     lineStringReplay.drawMultiLineString(geometry, feature);
@@ -300,7 +296,7 @@ function renderMultiLineStringGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -324,10 +320,7 @@ function renderMultiPolygonGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (strokeStyle || fillStyle) {
-    const polygonReplay = builderGroup.getBuilder(
+    const polygonReplay = builderGroup.getBuilder(style.getZIndex(), 'Polygon');
-      style.getZIndex(),
-      BuilderType.POLYGON
-    );
     polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     polygonReplay.drawMultiPolygon(geometry, feature);
   }
@@ -335,7 +328,7 @@ function renderMultiPolygonGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);
@@ -373,7 +366,7 @@ function renderPointGeometry(
           // draw in non-declutter group:
           const imageReplay = builderGroup.getBuilder(
             style.getZIndex(),
-            BuilderType.IMAGE
+            'Image'
           );
           imageReplay.setImageStyle(imageStyle, declutterImageWithText);
           imageReplay.drawPoint(geometry, feature);
@@ -384,7 +377,7 @@ function renderPointGeometry(
     }
     const imageReplay = imageBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.IMAGE
+      'Image'
     );
     imageReplay.setImageStyle(imageStyle, declutterImageWithText);
     imageReplay.drawPoint(geometry, feature);
@@ -396,7 +389,7 @@ function renderPointGeometry(
     }
     const textReplay = textBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle, declutterImageWithText);
     textReplay.drawText(geometry, feature);
@@ -434,7 +427,7 @@ function renderMultiPointGeometry(
           // draw in non-declutter group:
           const imageReplay = builderGroup.getBuilder(
             style.getZIndex(),
-            BuilderType.IMAGE
+            'Image'
           );
           imageReplay.setImageStyle(imageStyle, declutterImageWithText);
           imageReplay.drawMultiPoint(geometry, feature);
@@ -445,7 +438,7 @@ function renderMultiPointGeometry(
     }
     const imageReplay = imageBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.IMAGE
+      'Image'
     );
     imageReplay.setImageStyle(imageStyle, declutterImageWithText);
     imageReplay.drawMultiPoint(geometry, feature);
@@ -457,7 +450,7 @@ function renderMultiPointGeometry(
     }
     const textReplay = textBuilderGroup.getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle, declutterImageWithText);
     textReplay.drawText(geometry, feature);
@@ -481,10 +474,7 @@ function renderPolygonGeometry(
   const fillStyle = style.getFill();
   const strokeStyle = style.getStroke();
   if (fillStyle || strokeStyle) {
-    const polygonReplay = builderGroup.getBuilder(
+    const polygonReplay = builderGroup.getBuilder(style.getZIndex(), 'Polygon');
-      style.getZIndex(),
-      BuilderType.POLYGON
-    );
     polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
     polygonReplay.drawPolygon(geometry, feature);
   }
@@ -492,7 +482,7 @@ function renderPolygonGeometry(
   if (textStyle && textStyle.getText()) {
     const textReplay = (opt_declutterBuilderGroup || builderGroup).getBuilder(
       style.getZIndex(),
-      BuilderType.TEXT
+      'Text'
     );
     textReplay.setTextStyle(textStyle);
     textReplay.drawText(geometry, feature);