@vcmap/core 5.0.0-rc.3 → 5.0.0-rc.31

package/src/{vcs/vcm/util/style → style}/vectorStyleItem.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-template-curly-in-string */
 import Stroke from 'ol/style/Stroke.js';
-import { Color, VerticalOrigin } from '@vcmap/cesium';
+import { Color, VerticalOrigin } from '@vcmap-cesium/engine';
 import Icon from 'ol/style/Icon.js';
 import Style from 'ol/style/Style.js';
 import OLText from 'ol/style/Text.js';
@@ -10,7 +10,7 @@ import Circle from 'ol/style/Circle.js';
 import RegularShape from 'ol/style/RegularShape.js';
 
 import { check, checkMaybe } from '@vcsuite/check';
-import StyleItem, { StyleType } from './styleItem.js';
+import StyleItem from './styleItem.js';
 import {
   parseColor,
   PatternType,
@@ -24,6 +24,7 @@ import {
   getDefaultVectorStyleItemOptions,
 } from './styleHelpers.js';
 import { getShapeFromOptions } from './shapesCategory.js';
+import { styleClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} VectorStyleItemPattern
@@ -96,7 +97,7 @@ import { getShapeFromOptions } from './shapesCategory.js';
  * @property {number} POLYLINE
  * @property {number} POINT
  */
-export const olcsGeometryType = {
+export const OlcsGeometryType = {
   POLYGON: 1,
   POLYLINE: 2,
   POINT: 3,
@@ -114,21 +115,21 @@ export const olcsGeometryType = {
 
 /**
  * Is set on a feature and is used to signal that the feature has a specific vectorStyleItem.
- * Is set by the Editor if the layerStyle is overwritten. The Vector layer assures this style is set, if
+ * Is set by the Editor if the layerStyle is overwritten. The VectorLayer layer assures this style is set, if
  * the style on the layer is not a DeclarativeStyle
  * @type {symbol}
- * @export
  */
 export const vectorStyleSymbol = Symbol('VcsVectorStyleItem');
 
 /**
  * @class
  * @extends {StyleItem}
- * @export
  * @api
  */
 class VectorStyleItem extends StyleItem {
-  static get className() { return 'vcs.vcm.util.style.VectorStyleItem'; }
+  static get className() {
+    return 'VectorStyleItem';
+  }
 
   /**
    * @param {VectorStyleItemOptions} options
@@ -180,7 +181,7 @@ class VectorStyleItem extends StyleItem {
     this.label = this._label;
 
     /**
-     * @type {import("@vcmap/cesium").Color}
+     * @type {import("@vcmap-cesium/engine").Color}
      * @private
      */
     this._cesiumColor = new Color();
@@ -191,9 +192,11 @@ class VectorStyleItem extends StyleItem {
      */
     this._image = undefined;
     if (options.image) {
-      this._image = options.image.radius ?
-        getShapeFromOptions({ ...options.image }) :
-        new Icon(/** @type {import("ol/style/Icon").Options} */ (options.image));
+      this._image = options.image.radius
+        ? getShapeFromOptions({ ...options.image })
+        : new Icon(
+            /** @type {import("ol/style/Icon").Options} */ (options.image),
+          );
     }
 
     /**
@@ -224,7 +227,9 @@ class VectorStyleItem extends StyleItem {
         check(option.color.length, [3, 4]);
       } catch (e) {
         this.getLogger().error(e.message);
-        option.color = /** @type {import("ol/color").Color} */ ([255, 255, 255, 0.4]);
+        option.color = /** @type {import("ol/color").Color} */ ([
+          255, 255, 255, 0.4,
+        ]);
       }
     };
 
@@ -240,8 +245,15 @@ class VectorStyleItem extends StyleItem {
       checkColor(options.fill);
       if (options.fill.pattern) {
         checkStroke(options.fill.pattern);
-        if (!(options.fill.pattern.type && Object.values(PatternType).includes(options.fill.pattern.type))) {
-          this.getLogger().error(`Cannot find pattern ${options.fill.pattern.type}`);
+        if (
+          !(
+            options.fill.pattern.type &&
+            Object.values(PatternType).includes(options.fill.pattern.type)
+          )
+        ) {
+          this.getLogger().error(
+            `Cannot find pattern ${options.fill.pattern.type}`,
+          );
           options.fill.pattern.type = PatternType.NWSE;
         }
       }
@@ -260,7 +272,9 @@ class VectorStyleItem extends StyleItem {
       }
 
       if (!(options.image.src || options.image.radius)) {
-        this.getLogger().error('missing source or label in style, setting default circle');
+        this.getLogger().error(
+          'missing source or label in style, setting default circle',
+        );
         options.image = {
           fill: {
             color: 'rgba(255,255,255,0.4)',
@@ -296,24 +310,9 @@ class VectorStyleItem extends StyleItem {
    * @api
    */
   get fillColor() {
-    return this._fillOptions ? /** @type {import("ol/color").Color} */ (this._fillOptions.color) : null;
-  }
-
-  /**
-   * the current fill color as a cesium color
-   * @readonly
-   * @type {import("@vcmap/cesium").Color}
-   * @api
-   */
-  get cesiumFillColor() {
-    const fillColor = this.fillColor ? this.fillColor.slice() : null;
-    if (fillColor) {
-      fillColor[3] = fillColor[3] || 1;
-      fillColor[3] *= 255; // cesium alpha range between 0 and 255
-      // @ts-ignore
-      return Color.fromBytes(...fillColor, this._cesiumColor);
-    }
-    return Color.RED.clone(this._cesiumColor); // TODO should not be red - transparent?
+    return this._fillOptions
+      ? /** @type {import("ol/color").Color} */ (this._fillOptions.color)
+      : null;
   }
 
   /**
@@ -340,12 +339,31 @@ class VectorStyleItem extends StyleItem {
     }
   }
 
+  /**
+   * the current fill color as a cesium color
+   * @readonly
+   * @type {import("@vcmap-cesium/engine").Color}
+   * @api
+   */
+  get cesiumFillColor() {
+    const fillColor = this.fillColor ? this.fillColor.slice() : null;
+    if (fillColor) {
+      fillColor[3] = fillColor[3] || 1;
+      fillColor[3] *= 255; // cesium alpha range between 0 and 255
+      // @ts-ignore
+      return Color.fromBytes(...fillColor, this._cesiumColor);
+    }
+    return Color.RED.clone(this._cesiumColor); // TODO should not be red - transparent?
+  }
+
   /**
    * @type {VectorStyleItemPattern}
    * @api
    */
   get pattern() {
-    return this._fillOptions && this._fillOptions.pattern ? this._fillOptions.pattern : null;
+    return this._fillOptions && this._fillOptions.pattern
+      ? this._fillOptions.pattern
+      : null;
   }
 
   /**
@@ -357,12 +375,16 @@ class VectorStyleItem extends StyleItem {
       return;
     }
     if (patternOptions) {
-      checkMaybe(patternOptions, {
-        color: [String, [Number]],
-        width: Number,
-        type: Number,
-        size: [Number, undefined, null],
-      }, true);
+      checkMaybe(
+        patternOptions,
+        {
+          color: [String, [Number]],
+          width: Number,
+          type: Number,
+          size: [Number, undefined, null],
+        },
+        true,
+      );
       this._fillOptions.pattern = patternOptions;
     } else {
       this._fillOptions.pattern = undefined;
@@ -374,7 +396,9 @@ class VectorStyleItem extends StyleItem {
    * @type {import("ol/style/Stroke").default}
    * @api
    */
-  get stroke() { return this._stroke; }
+  get stroke() {
+    return this._stroke;
+  }
 
   /**
    * @param {import("ol/style/Stroke").default=} stroke
@@ -395,7 +419,9 @@ class VectorStyleItem extends StyleItem {
    * @type {string}
    * @api
    */
-  get label() { return this._label; }
+  get label() {
+    return this._label;
+  }
 
   /**
    * @param {string} label
@@ -416,7 +442,9 @@ class VectorStyleItem extends StyleItem {
    * @type {import("ol/style/Text").default}
    * @api
    */
-  get text() { return this._text; }
+  get text() {
+    return this._text;
+  }
 
   /**
    * @param {import("ol/style/Text").default=} text
@@ -436,7 +464,9 @@ class VectorStyleItem extends StyleItem {
    * @type {(import("ol/style/Icon").default|import("ol/style/RegularShape").default)}
    * @api
    */
-  get image() { return this._image; }
+  get image() {
+    return this._image;
+  }
 
   /**
    * @param {(import("ol/style/Icon").default|import("ol/style/RegularShape").default)=} image
@@ -457,7 +487,9 @@ class VectorStyleItem extends StyleItem {
    * @type {import("ol/style/Style").default|import("ol/style/Style").StyleFunction}
    * @api
    */
-  get style() { return this._style; }
+  get style() {
+    return this._style;
+  }
 
   /**
    * @param {import("ol/style/Style").default|import("ol/style/Style").StyleFunction} style
@@ -468,7 +500,10 @@ class VectorStyleItem extends StyleItem {
       this._stroke = style.getStroke();
       this._fill = style.getFill();
       this._text = style.getText();
-      this._image = /** @type {import("ol/style/Icon").default|import("ol/style/Circle").default} */ (style.getImage());
+      this._image =
+        /** @type {import("ol/style/Icon").default|import("ol/style/Circle").default} */ (
+          style.getImage()
+        );
     } else {
       this._stroke = undefined;
       this._fill = undefined;
@@ -490,9 +525,9 @@ class VectorStyleItem extends StyleItem {
    */
   _setFill() {
     if (this._style instanceof Style) {
-      const color = this._fillOptions.pattern ?
-        createPattern(this._fillOptions) :
-        this._fillOptions.color;
+      const color = this._fillOptions.pattern
+        ? createPattern(this._fillOptions)
+        : this._fillOptions.color;
       if (this._fill) {
         this._fill.setColor(color);
       } else {
@@ -521,13 +556,16 @@ class VectorStyleItem extends StyleItem {
   updateCesiumStyleColor(silent) {
     const colorConditions = getDefaultCondition('olcs_color', true);
     if (this.stroke && this.stroke.getColor()) {
-      colorConditions.splice(1, 0, [`\${olcs_geometryType}===${olcsGeometryType.POLYLINE}`, getStringColor(this.stroke.getColor())]);
+      colorConditions.splice(1, 0, [
+        `\${olcs_geometryType}===${OlcsGeometryType.POLYLINE}`,
+        getStringColor(this.stroke.getColor()),
+      ]);
     }
     if (this._image instanceof Circle && this._image.getFill()) {
-      colorConditions.splice(
-        1, 0,
-        [`\${olcs_geometryType}===${olcsGeometryType.POINT}`, getStringColor(this._image.getFill().getColor())],
-      );
+      colorConditions.splice(1, 0, [
+        `\${olcs_geometryType}===${OlcsGeometryType.POINT}`,
+        getStringColor(this._image.getFill().getColor()),
+      ]);
     }
     if (this.fillColor) {
       colorConditions.splice(-1, 1, ['true', getStringColor(this.fillColor)]);
@@ -548,8 +586,12 @@ class VectorStyleItem extends StyleItem {
       ],
     } */
     const scaleConditions = getDefaultCondition('olcs_scale');
-    const pointOutlineWidthConditions = getDefaultCondition('olcs_outlineWidth');
-    const pointOutlineColorConditions = getDefaultCondition('olcs_outlineColor', true);
+    const pointOutlineWidthConditions =
+      getDefaultCondition('olcs_outlineWidth');
+    const pointOutlineColorConditions = getDefaultCondition(
+      'olcs_outlineColor',
+      true,
+    );
     const pointSizeConditions = getDefaultCondition('olcs_pointSize');
     const imageConditions = getDefaultCondition('olcs_image');
     /* commented out, because we simulate the anchorline via a line in the tileset, TODO Evaluate again
@@ -572,7 +614,10 @@ class VectorStyleItem extends StyleItem {
         let size = this._image.getRadius() * 2;
         if (stroke) {
           if (this._image.getStroke().getColor()) {
-            pointOutlineColorConditions.splice(1, 1, ['true', getStringColor(this._image.getStroke().getColor())]);
+            pointOutlineColorConditions.splice(1, 1, [
+              'true',
+              getStringColor(this._image.getStroke().getColor()),
+            ]);
           }
           const width = this._image.getStroke().getWidth();
           pointOutlineWidthConditions.splice(1, 1, ['true', `${width}`]);
@@ -580,7 +625,9 @@ class VectorStyleItem extends StyleItem {
         }
         pointSizeConditions.splice(1, 1, ['true', `${size}`]);
       } else if (this._image instanceof RegularShape) {
-        const dataUrl = /** @type {HTMLCanvasElement} */ (this._image.getImage(1)).toDataURL();
+        const dataUrl = /** @type {HTMLCanvasElement} */ (
+          this._image.getImage(1)
+        ).toDataURL();
         imageConditions.splice(1, 1, ['true', `"${dataUrl}"`]);
       } else if (this._image instanceof Icon) {
         imageConditions.splice(1, 1, ['true', `"${this._image.getSrc()}"`]);
@@ -593,10 +640,14 @@ class VectorStyleItem extends StyleItem {
     */
     // @ts-ignore
     this.cesiumStyle.scale = { conditions: scaleConditions };
-    // @ts-ignore
-    this.cesiumStyle.pointOutlineWidth = { conditions: pointOutlineWidthConditions };
-    // @ts-ignore
-    this.cesiumStyle.pointOutlineColor = { conditions: pointOutlineColorConditions };
+    this.cesiumStyle.pointOutlineWidth = {
+      // @ts-ignore
+      conditions: pointOutlineWidthConditions,
+    };
+    this.cesiumStyle.pointOutlineColor = {
+      // @ts-ignore
+      conditions: pointOutlineColorConditions,
+    };
     // @ts-ignore
     this.cesiumStyle.pointSize = { conditions: pointSizeConditions };
     // @ts-ignore
@@ -622,8 +673,13 @@ class VectorStyleItem extends StyleItem {
     const fontConditions = getDefaultCondition('olcs_font');
     const labelTextConditions = getDefaultCondition('olcs_labelText');
     const labelColorConditions = getDefaultCondition('olcs_fontColor', true);
-    const labelOutlineWidthConditions = getDefaultCondition('olcs_fontOutlineWidth');
-    const labelOutlineColorConditions = getDefaultCondition('olcs_fontOutlineColor', true);
+    const labelOutlineWidthConditions = getDefaultCondition(
+      'olcs_fontOutlineWidth',
+    );
+    const labelOutlineColorConditions = getDefaultCondition(
+      'olcs_fontOutlineColor',
+      true,
+    );
 
     if (this._text) {
       if (this._text.getFont()) {
@@ -633,12 +689,21 @@ class VectorStyleItem extends StyleItem {
         labelTextConditions.splice(1, 1, ['true', `'${this._text.getText()}'`]);
       }
       if (this._text.getFill() && this._text.getFill().getColor()) {
-        labelColorConditions.splice(1, 1, ['true', getStringColor(this._text.getFill().getColor())]);
+        labelColorConditions.splice(1, 1, [
+          'true',
+          getStringColor(this._text.getFill().getColor()),
+        ]);
       }
 
       if (this._text.getStroke() && this._text.getStroke().getColor()) {
-        labelOutlineColorConditions.splice(1, 1, ['true', getStringColor(this._text.getStroke().getColor())]);
-        labelOutlineWidthConditions.splice(1, 1, ['true', `${this._text.getStroke().getWidth() || 1.25}`]);
+        labelOutlineColorConditions.splice(1, 1, [
+          'true',
+          getStringColor(this._text.getStroke().getColor()),
+        ]);
+        labelOutlineWidthConditions.splice(1, 1, [
+          'true',
+          `${this._text.getStroke().getWidth() || 1.25}`,
+        ]);
       }
     }
 
@@ -649,12 +714,17 @@ class VectorStyleItem extends StyleItem {
     // @ts-ignore
     this.cesiumStyle.labelColor = { conditions: labelColorConditions };
 
+    this.cesiumStyle.labelOutlineWidth = {
+      // @ts-ignore
+      conditions: labelOutlineWidthConditions,
+    };
+    this.cesiumStyle.labelOutlineColor = {
+      // @ts-ignore
+      conditions: labelOutlineColorConditions,
+    };
     // @ts-ignore
-    this.cesiumStyle.labelOutlineWidth = { conditions: labelOutlineWidthConditions };
-    // @ts-ignore
-    this.cesiumStyle.labelOutlineColor = { conditions: labelOutlineColorConditions };
-    // @ts-ignore
-    this.cesiumStyle.labelStyle = 'Boolean(${olcs_fontOutlineWidth}) === true ? 2 : 0';
+    this.cesiumStyle.labelStyle =
+      'Boolean(${olcs_fontOutlineWidth}) === true ? 2 : 0';
     // @ts-ignore
     this.cesiumStyle.labelHorizontalOrigin = '0';
 
@@ -695,9 +765,12 @@ class VectorStyleItem extends StyleItem {
    */
   clone(result) {
     if (result) {
-      result.style = this._style instanceof Style ? this._style.clone() : this._style;
+      result.style =
+        this._style instanceof Style ? this._style.clone() : this._style;
       if (this._fillOptions && this._fillOptions.color) {
-        result.fillColor = /** @type {import("ol/color").Color} */ (this._fillOptions.color).slice();
+        result.fillColor = /** @type {import("ol/color").Color} */ (
+          this._fillOptions.color
+        ).slice();
         if (this._fillOptions.pattern) {
           result.pattern = { ...this._fillOptions.pattern };
         }
@@ -710,7 +783,9 @@ class VectorStyleItem extends StyleItem {
       });
       return result;
     }
-    return new VectorStyleItem(this.getOptions());
+    const config = this.toJSON();
+    delete config.name;
+    return new VectorStyleItem(config);
   }
 
   /**
@@ -719,6 +794,7 @@ class VectorStyleItem extends StyleItem {
    * @api
    */
   assign(result) {
+    super.assign(result);
     if (result.fillColor) {
       this.fillColor = result.fillColor.slice();
     }
@@ -755,79 +831,67 @@ class VectorStyleItem extends StyleItem {
   }
 
   /**
-   * @param {VectorStyleItemSections=} sections
    * @returns {VectorStyleItemOptions}
    * @api
    */
-  getOptions(sections) {
+  toJSON() {
     // TODO clean default, only copy relevant keys
-    const options = /** @type {VectorStyleItemOptions} */ (super.getOptions(sections));
-    options.type = StyleType.VECTOR;
-    /** @type {VectorStyleItemSections} */
-    const usedSections = sections || {
-      fill: true,
-      stroke: true,
-      text: true,
-      image: true,
-    };
-
-    if (usedSections.fill) {
-      if (this._fillOptions) {
-        options.fill = {
-          color: /** @type {import("ol/color").Color} */ (parseColor(this._fillOptions.color).slice()),
-        };
-        if (this._fillOptions.pattern) {
-          options.fill.pattern = { ...this._fillOptions.pattern };
-        }
-      } else if (this.exclude.fill) {
-        options.fill = false;
+    const options = /** @type {VectorStyleItemOptions} */ (super.toJSON());
+    if (this._fillOptions) {
+      options.fill = {
+        color: /** @type {import("ol/color").Color} */ (
+          parseColor(this._fillOptions.color).slice()
+        ),
+      };
+      if (this._fillOptions.pattern) {
+        options.fill.pattern = { ...this._fillOptions.pattern };
       }
+    } else if (this.exclude.fill) {
+      options.fill = false;
     }
 
-    if (usedSections.stroke) {
-      if (this._stroke) {
-        options.stroke = getStrokeOptions(this._stroke);
-      } else if (this.exclude.stroke) {
-        options.stroke = false;
-      }
+    if (this._stroke) {
+      options.stroke = getStrokeOptions(this._stroke);
+    } else if (this.exclude.stroke) {
+      options.stroke = false;
     }
 
-    if (usedSections.text) {
-      if (this._text) {
-        options.text = getTextOptions(this._text);
-      }
+    if (this._text) {
+      options.text = getTextOptions(this._text);
     }
 
-    if (usedSections.label) {
+    if (this._label) {
       options.label = this._label;
     }
 
-    if (usedSections.image) { // TODO this should be nicer...
-      if (this._image instanceof Icon) {
-        options.image = {
-          src: this._image.getSrc(), // XXX this is an issue... we dont want a data URI in the geoJSON
-          scale: this._image.getScale(),
-          opacity: this._image.getOpacity(),
-        };
-      } else if (this._image instanceof Circle) {
-        options.image = {
-          scale: this._image.getScale(),
-          fill: getFillOptions(this._image),
-          radius: this._image.getRadius(),
-          stroke: this._image.getStroke() ? getStrokeOptions(this._image.getStroke()) : undefined,
-        };
-      } else if (this._image instanceof RegularShape) {
-        options.image = {
-          scale: this._image.getScale(),
-          fill: getFillOptions(this._image),
-          points: this._image.getPoints(),
-          angle: this._image.getAngle(),
-          radius: this._image.getRadius(),
-          stroke: this._image.getStroke() ? getStrokeOptions(this._image.getStroke()) : undefined,
-        };
-      } else if (this.exclude.image) {
-        options.image = false;
-      }
+    if (this._image instanceof Icon) {
+      options.image = {
+        src: this._image.getSrc(), // XXX this is an issue... we dont want a data URI in the geoJSON
+        scale: this._image.getScale(),
+        opacity: this._image.getOpacity(),
+      };
+    } else if (this._image instanceof Circle) {
+      options.image = {
+        scale: this._image.getScale(),
+        fill: getFillOptions(this._image),
+        radius: this._image.getRadius(),
+        stroke: this._image.getStroke()
+          ? getStrokeOptions(this._image.getStroke())
+          : undefined,
+      };
+    } else if (this._image instanceof RegularShape) {
+      options.image = {
+        scale: this._image.getScale(),
+        fill: getFillOptions(this._image),
+        points: this._image.getPoints(),
+        angle: this._image.getAngle(),
+        radius: this._image.getRadius(),
+        stroke: this._image.getStroke()
+          ? getStrokeOptions(this._image.getStroke())
+          : undefined,
+      };
+    } else if (this.exclude.image) {
+      options.image = false;
     }
 
     return options;
@@ -839,35 +903,45 @@ class VectorStyleItem extends StyleItem {
    */
   getOptionsForFeature(feature) {
     const type = feature.getGeometry().getType();
-    const extrusion = feature.get('olcs_extrudedHeight') ||
+    const extrusion =
+      feature.get('olcs_extrudedHeight') ||
       (feature.get('olcs_storeyHeight') && feature.get('olcs_storeyNumber'));
-    const sections = {};
+    const sections = new Set();
 
     if (type === 'Point' || type === 'MultiPoint') {
       if (feature[vectorStyleSymbol].label != null) {
-        sections.text = true;
-        sections.label = true;
+        sections.add('text');
+        sections.add('label');
       }
-      sections.image = true;
+      sections.add('image');
 
       if (extrusion) {
-        sections.stroke = true;
+        sections.add('stroke');
       }
     } else if (type === 'LineString' || type === 'MultiLineString') {
-      sections.stroke = true;
+      sections.add('stroke');
       if (extrusion) {
-        sections.fill = true;
+        sections.add('fill');
       }
-    } else if (type === 'Polygon' || type === 'MultiPolygon' || type === 'Circle') {
-      sections.stroke = true;
-      sections.fill = true;
+    } else if (
+      type === 'Polygon' ||
+      type === 'MultiPolygon' ||
+      type === 'Circle'
+    ) {
+      sections.add('stroke');
+      sections.add('fill');
     } else if (type === 'GeometryCollection') {
-      sections.stroke = true;
-      sections.fill = true;
-      sections.image = true;
-      sections.text = true;
-    }
-    return this.getOptions(sections);
+      sections.add('stroke');
+      sections.add('fill');
+      sections.add('image');
+      sections.add('text');
+    }
+    const config = this.toJSON();
+    const options = {};
+    sections.forEach((key) => {
+      options[key] = config[key];
+    });
+    return options;
   }
 
   /**
@@ -904,14 +978,15 @@ export default VectorStyleItem;
 
 /**
  * @type {VectorStyleItem}
- * @export
  */
-export const defaultVectorStyle = new VectorStyleItem(getDefaultVectorStyleItemOptions());
+export const defaultVectorStyle = new VectorStyleItem(
+  getDefaultVectorStyleItemOptions(),
+);
+styleClassRegistry.registerClass(VectorStyleItem.className, VectorStyleItem);
 
 /**
- * @param {import("@vcmap/cesium").Color} cesiumColor
+ * @param {import("@vcmap-cesium/engine").Color} cesiumColor
  * @returns {VectorStyleItem}
- * @export
  */
 export function fromCesiumColor(cesiumColor) {
   const color = /** @type {import("ol/color").Color} */ (cesiumColor.toBytes());
@@ -924,4 +999,3 @@ export function fromCesiumColor(cesiumColor) {
     },
   });
 }
-