Using a union type instead of a string enum

examples/webgl-vector-layer.js

@@ -6,11 +6,8 @@ import TileLayer from '../src/ol/layer/WebGLTile.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import WebGLVectorLayerRenderer from '../src/ol/renderer/webgl/VectorLayer.js';
-import {
-  DefaultAttributes,
-  packColor,
-} from '../src/ol/renderer/webgl/shaders.js';
 import {asArray} from '../src/ol/color.js';
+import {packColor} from '../src/ol/renderer/webgl/shaders.js';
 
 class WebGLLayer extends Layer {
   createRenderer() {
@@ -18,27 +15,27 @@ class WebGLLayer extends Layer {
       className: this.getClassName(),
       fill: {
         attributes: {
-          [DefaultAttributes.COLOR]: function (feature) {
+          color: function (feature) {
             const color = asArray(feature.get('COLOR') || '#eee');
             color[3] = 0.85;
             return packColor(color);
           },
-          [DefaultAttributes.OPACITY]: function () {
+          opacity: function () {
             return 0.6;
           },
         },
       },
       stroke: {
         attributes: {
-          [DefaultAttributes.COLOR]: function (feature) {
+          color: function (feature) {
             const color = [...asArray(feature.get('COLOR') || '#eee')];
             color.forEach((_, i) => (color[i] = Math.round(color[i] * 0.75))); // darken slightly
             return packColor(color);
           },
-          [DefaultAttributes.WIDTH]: function () {
+          width: function () {
             return 1.5;
           },
-          [DefaultAttributes.OPACITY]: function () {
+          opacity: function () {
             return 1;
           },
         },

src/ol/renderer/webgl/VectorLayer.js

@@ -9,8 +9,8 @@ import PolygonBatchRenderer from '../../render/webgl/PolygonBatchRenderer.js';
 import VectorEventType from '../../source/VectorEventType.js';
 import ViewHint from '../../ViewHint.js';
 import WebGLLayerRenderer from './Layer.js';
+import {DefaultUniform} from '../../webgl/Helper.js';
 import {
-  DefaultAttributes,
   FILL_FRAGMENT_SHADER,
   FILL_VERTEX_SHADER,
   POINT_FRAGMENT_SHADER,
@@ -19,7 +19,6 @@ import {
   STROKE_VERTEX_SHADER,
   packColor,
 } from './shaders.js';
-import {DefaultUniform} from '../../webgl/Helper.js';
 import {buffer, createEmpty, equals, getWidth} from '../../extent.js';
 import {create as createTransform} from '../../transform.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
@@ -35,7 +34,7 @@ import {listen, unlistenByKey} from '../../events.js';
  * @typedef {Object} ShaderProgram An object containing both shaders (vertex and fragment) as well as the required attributes
  * @property {string} [vertexShader] Vertex shader source (using the default one if unspecified).
  * @property {string} [fragmentShader] Fragment shader source (using the default one if unspecified).
- * @property {Object<string,CustomAttributeCallback>} attributes Custom attributes made available in the vertex shader.
+ * @property {Object<import("./shaders.js").DefaultAttributes,CustomAttributeCallback>} attributes Custom attributes made available in the vertex shader.
  * Keys are the names of the attributes which are then accessible in the vertex shader using the `a_` prefix, e.g.: `a_opacity`.
  * Default shaders rely on the attributes in {@link module:ol/render/webgl/shaders~DefaultAttributes}.
  */
@@ -50,6 +49,14 @@ import {listen, unlistenByKey} from '../../events.js';
  * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
 
+/**
+ * @param {Object<import("./shaders.js").DefaultAttributes,CustomAttributeCallback>} obj Lookup of attribute getters.
+ * @return {Array<import("../../render/webgl/BatchRenderer").CustomAttribute>} An array of attribute descriptors.
+ */
+function toAttributesArray(obj) {
+  return Object.keys(obj).map((key) => ({name: key, callback: obj[key]}));
+}
+
 /**
  * @classdesc
  * Experimental WebGL vector renderer. Supports polygons, lines and points:
@@ -97,42 +104,38 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     this.currentTransform_ = projectionMatrixTransform;
 
     const fillAttributes = {
-      [DefaultAttributes.COLOR]: function () {
+      color: function () {
         return packColor('#ddd');
       },
-      [DefaultAttributes.OPACITY]: function () {
+      opacity: function () {
         return 1;
       },
       ...(options.fill && options.fill.attributes),
     };
 
     const strokeAttributes = {
-      [DefaultAttributes.COLOR]: function () {
+      color: function () {
         return packColor('#eee');
       },
-      [DefaultAttributes.OPACITY]: function () {
+      opacity: function () {
         return 1;
       },
-      [DefaultAttributes.WIDTH]: function () {
+      width: function () {
         return 1.5;
       },
       ...(options.stroke && options.stroke.attributes),
     };
 
     const pointAttributes = {
-      [DefaultAttributes.COLOR]: function () {
+      color: function () {
         return packColor('#eee');
       },
-      [DefaultAttributes.OPACITY]: function () {
+      opacity: function () {
         return 1;
       },
       ...(options.point && options.point.attributes),
     };
 
-    function toAttributesArray(obj) {
-      return Object.keys(obj).map((key) => ({name: key, callback: obj[key]}));
-    }
-
     this.fillVertexShader_ =
       (options.fill && options.fill.vertexShader) || FILL_VERTEX_SHADER;
     this.fillFragmentShader_ =

src/ol/renderer/webgl/shaders.js

@@ -3,19 +3,11 @@
  */
 import {asArray} from '../../color.js';
 
-/**
+/** @typedef {'color'|'opacity'|'width'} DefaultAttributes */
- * Attribute names used in the default shaders.
- * @enum {string}
- */
-export const DefaultAttributes = {
-  COLOR: 'color',
-  OPACITY: 'opacity',
-  WIDTH: 'width',
-};
 
 /**
  * Packs red/green/blue channels of a color into a single float value; alpha is ignored.
- * This is how DefaultAttributes.COLOR is expected to be computed.
+ * This is how the color is expected to be computed.
  * @param {import("../../color.js").Color|string} color Color as array of numbers or string
  * @return {number} Float value containing the color
  */
@@ -35,7 +27,7 @@ const DECODE_COLOR_EXPRESSION = `vec3(
 
 /**
  * Default polygon vertex shader.
- * Relies on DefaultAttributes.COLOR and DefaultAttributes.OPACITY.
+ * Relies on the color and opacity attributes.
  * @type {string}
  */
 export const FILL_VERTEX_SHADER = `
@@ -68,7 +60,7 @@ export const FILL_FRAGMENT_SHADER = `
 
 /**
  * Default linestring vertex shader.
- * Relies on DefaultAttributes.COLOR, DefaultAttributes.OPACITY and DefaultAttributes.WIDTH.
+ * Relies on color, opacity and width attributes.
  * @type {string}
  */
 export const STROKE_VERTEX_SHADER = `
@@ -163,7 +155,7 @@ export const STROKE_FRAGMENT_SHADER = `
 
 /**
  * Default point vertex shader.
- * Relies on DefaultAttributes.COLOR and DefaultAttributes.OPACITY.
+ * Relies on color and opacity attributes.
  * @type {string}
  */
 export const POINT_VERTEX_SHADER = `