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

package/src/style/arrowStyle.js

@@ -0,0 +1,304 @@
+import { Cartesian3 } from '@vcmap-cesium/engine';
+import {
+  Circle,
+  Fill,
+  Icon,
+  Stroke,
+  Style,
+  Image as OlImage,
+} from 'ol/style.js';
+import { parseEnumValue, parseNumber } from '@vcsuite/parsers';
+import { getCartesianBearing } from '../util/math.js';
+import { PrimitiveOptionsType } from '../layer/vectorProperties.js';
+import { getStringColor, parseColor } from './styleHelpers.js';
+
+/**
+ * @typedef {Object} ArrowStyleOptions
+ * @property {import("ol/color").Color|import("ol/colorlike").ColorLike} [color='#000000'] - color used to color in the line & the icon
+ * @property {number} [width=1] - passed to ol.Style.Stroke
+ * @property {number} [zIndex] - passed to ol.Style
+ * @property {import("ol/style/Icon").Options|import("ol/style").Image} [arrowIcon] - icon options to use. if none are provided, if is attempted to derive the arrow icon from the primitive options. if providing your own icon, the color will not be options.color by default
+ * @property {VectorPropertiesPrimitiveOptions} [primitiveOptions] - the default primitive options are a cylinder with a bottom radius of 1/3 its length and 0 top radius
+ * @property {ArrowEnd} [end=ArrowEnd.END] - end to place the arrow head at
+ */
+
+/**
+ * @enum {string}
+ */
+export const ArrowEnd = {
+  NONE: 'none',
+  BOTH: 'both',
+  START: 'start',
+  END: 'end',
+};
+
+/**
+ * @param {VectorPropertiesPrimitiveOptions} primitiveOptions
+ * @param {number} [twoDFactor=1.5]
+ * @returns {string}
+ * @private
+ */
+export function getDefaultArrowIconSrc(primitiveOptions, twoDFactor = 1.5) {
+  let height = 13;
+  let width = 13;
+  let points = [
+    [0, 13],
+    [13, 13],
+    [6, 0],
+  ];
+
+  if (primitiveOptions.type === PrimitiveOptionsType.SPHERE) {
+    const radius = Math.floor(
+      (primitiveOptions.geometryOptions?.radius ?? 1) * twoDFactor,
+    );
+    return `<svg height="${radius * 2}" width="${
+      radius * 2
+    }" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="${radius}" cy="${radius}" r="${radius}" style="fill:white;" />
+</svg>`;
+  }
+
+  if (
+    primitiveOptions.type === PrimitiveOptionsType.BOX &&
+    primitiveOptions.geometryOptions.minimum &&
+    primitiveOptions.geometryOptions.maximum
+  ) {
+    const min = Array.isArray(primitiveOptions.geometryOptions.minimum)
+      ? primitiveOptions.geometryOptions.minimum
+      : Cartesian3.pack(primitiveOptions.geometryOptions.minimum, []);
+
+    const max = Array.isArray(primitiveOptions.geometryOptions.maximum)
+      ? primitiveOptions.geometryOptions.maximum
+      : Cartesian3.pack(primitiveOptions.geometryOptions.maximum, []);
+
+    width = Math.floor((max[0] - min[0]) * twoDFactor);
+    height = Math.floor((max[1] - min[1]) * twoDFactor);
+
+    points = [
+      [0, 0],
+      [width, 0],
+      [width, height],
+      [0, height],
+    ];
+  } else if (
+    primitiveOptions.type === PrimitiveOptionsType.CYLINDER &&
+    primitiveOptions.geometryOptions.length
+  ) {
+    const topRadius = Math.floor(
+      primitiveOptions.geometryOptions.topRadius * twoDFactor,
+    );
+    const bottomRadius = Math.floor(
+      primitiveOptions.geometryOptions.bottomRadius * twoDFactor,
+    );
+    const maxRadius = Math.max(topRadius, bottomRadius);
+
+    height = Math.floor(primitiveOptions.geometryOptions.length * twoDFactor);
+    width = maxRadius * 2;
+
+    points = [
+      [width / 2 - bottomRadius, height],
+      [width / 2 + bottomRadius, height],
+      [width / 2 + topRadius, 0],
+      [width / 2 - topRadius, 0],
+    ];
+    if (bottomRadius === 0) {
+      points.splice(1, 1);
+    } else if (topRadius === 0) {
+      points.splice(2, 1);
+    }
+  }
+  return `<svg height="${height}" width="${width}" xmlns="http://www.w3.org/2000/svg"><polygon points="${points
+    .map((p) => p.join(','))
+    .join(' ')}" style="fill:white;" /></svg>`;
+}
+
+/**
+ * @returns {VectorPropertiesPrimitiveOptions}
+ */
+function getDefaultArrowPrimitive() {
+  return {
+    type: PrimitiveOptionsType.CYLINDER,
+    geometryOptions: {
+      length: 9,
+      bottomRadius: 3,
+      topRadius: 0,
+    },
+    offset: [0, 0, -4.3],
+  };
+}
+
+/**
+ * A style which renders arrow heads at the ends of a line string. This style cannot be applied to non-LineString geometries.
+ * When setting this on a layer with heterogeneous geometry types, use a style function.
+ * @class
+ * @extends {Style}
+ */
+class ArrowStyle extends Style {
+  /**
+   * @param {ArrowStyleOptions} [options={}]
+   */
+  constructor(options = {}) {
+    const color = options.color ?? '#000000';
+    const styleOptions = {
+      stroke: new Stroke({
+        color,
+        width: parseNumber(options.width, 1),
+      }),
+      zIndex: options.zIndex,
+    };
+
+    const primitiveOptions =
+      options.primitiveOptions ?? getDefaultArrowPrimitive();
+    const iconOptions = options.arrowIcon ?? {
+      src: `data:image/svg+xml,${encodeURIComponent(
+        getDefaultArrowIconSrc(primitiveOptions),
+      )}`,
+      color: parseColor(color),
+    };
+    styleOptions.image =
+      iconOptions instanceof OlImage ? iconOptions : new Icon(iconOptions);
+    super(styleOptions);
+
+    /**
+     * @type {VectorPropertiesPrimitiveOptions}
+     */
+    this.primitiveOptions = primitiveOptions;
+    /**
+     * @type {ArrowEnd}
+     */
+    this.end = parseEnumValue(options.end, ArrowEnd, ArrowEnd.END);
+    this.setRenderer(this._render.bind(this));
+  }
+
+  /**
+   * Same as getStroke().getWidth() / getStroke().setWidth()
+   * @type {number}
+   */
+  get width() {
+    return this.getStroke().getWidth();
+  }
+
+  /**
+   * @param {number} width
+   */
+  set width(width) {
+    this.getStroke().setWidth(width);
+  }
+
+  /**
+   * The color of the stroke and icon styles. Setting the color will not re-apply the icons color.
+   * @type {import("ol/color").Color|import("ol/colorlike").ColorLike}
+   */
+  get color() {
+    return this.getStroke().getColor();
+  }
+
+  /**
+   * @param {import("ol/color").Color|import("ol/colorlike").ColorLike} color
+   */
+  set color(color) {
+    this.getStroke().setColor(color);
+  }
+
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {import("ol/coordinate").Coordinate} imagePosition
+   * @param {number} rotation
+   * @param {number} pixelRatio
+   * @private
+   */
+  _drawArrow(ctx, imagePosition, rotation, pixelRatio) {
+    ctx.save();
+    let scale = this.getImage().getScale();
+    scale = Array.isArray(scale) ? scale : [scale, scale];
+    ctx.setTransform(
+      scale[0],
+      0,
+      0,
+      scale[1],
+      imagePosition[0],
+      imagePosition[1],
+    );
+    ctx.rotate(Math.PI - rotation);
+    const image = this.getImage().getImage(pixelRatio);
+    ctx.translate(0, Math.floor(image.height / 2));
+    ctx.drawImage(image, -image.width / 2, -image.height / 2);
+    ctx.restore();
+  }
+
+  /**
+   * @param {Array<import("ol/coordinate").Coordinate>} geom
+   * @param {import("ol/render").State} e
+   * @private
+   */
+  _render(geom, e) {
+    if (e.geometry.getType() === 'LineString' && geom.length > 1) {
+      const ctx = e.context;
+      if (this.end !== ArrowEnd.NONE) {
+        if (this.end === ArrowEnd.START || this.end === ArrowEnd.BOTH) {
+          this._drawArrow(
+            ctx,
+            geom[0],
+            getCartesianBearing(geom[1], geom[0]),
+            e.pixelRatio,
+          );
+        }
+
+        if (this.end === ArrowEnd.END || this.end === ArrowEnd.BOTH) {
+          this._drawArrow(
+            ctx,
+            geom.at(-1),
+            getCartesianBearing(geom.at(-2), geom.at(-1)),
+            e.pixelRatio,
+          );
+        }
+      }
+      ctx.save();
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle = getStringColor(this.color);
+      ctx.beginPath();
+      ctx.moveTo(geom[0][0], geom[0][1]);
+      for (let i = 0; i < geom.length; i++) {
+        ctx.lineTo(geom[i][0], geom[i][1]);
+      }
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Returns the style used to render primitives (a style with a circle image and the color of this style).
+   * @returns {import("ol/style").Style}
+   */
+  getOlcsStyle() {
+    return new Style({
+      image: new Circle({
+        radius: 2,
+        fill: new Fill({ color: this.color }),
+      }),
+    });
+  }
+
+  /**
+   * @returns {ArrowStyleOptions}
+   * @protected
+   */
+  _getCloneOptions() {
+    return {
+      color: this.color,
+      width: this.width,
+      arrowIcon: this.getImage().clone(),
+      zIndex: this.getZIndex(),
+    };
+  }
+
+  /**
+   * @returns {ArrowStyle}
+   */
+  clone() {
+    return new ArrowStyle(this._getCloneOptions());
+  }
+}
+
+export default ArrowStyle;

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

@@ -1,4 +1,11 @@
-import { Color, ConditionsExpression, Expression, Cesium3DTileStyle } from '@vcmap/cesium';
+import {
+  Color,
+  ConditionsExpression,
+  Expression,
+  Cesium3DTileStyle,
+} from '@vcmap-cesium/engine';
+import { is } from '@vcsuite/check';
+
 import Style from 'ol/style/Style.js';
 import Stroke from 'ol/style/Stroke.js';
 import Icon from 'ol/style/Icon.js';
@@ -6,14 +13,14 @@ import Circle from 'ol/style/Circle.js';
 import OLText from 'ol/style/Text.js';
 import Fill from 'ol/style/Fill.js';
 
-import StyleItem, { StyleType } from './styleItem.js';
+import StyleItem from './styleItem.js';
 import {
   cesiumColorToColor,
-  emptyStyle,
   getDefaultCondition,
   whiteColor,
 } from './styleHelpers.js';
-import { originalFeatureSymbol } from '../../layer/vectorSymbols.js';
+import { originalFeatureSymbol } from '../layer/vectorSymbols.js';
+import { styleClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} DeclarativeStyleItemConditions
@@ -62,7 +69,7 @@ import { originalFeatureSymbol } from '../../layer/vectorSymbols.js';
  * @api
  */
 
-/** @type {import("@vcmap/cesium").Color} */
+/** @type {import("@vcmap-cesium/engine").Color} */
 const scratchColor = new Color();
 
 const defaultText = new OLText({
@@ -73,16 +80,13 @@ const defaultText = new OLText({
 });
 
 /**
- * @param {import("@vcmap/cesium").Cesium3DTileStyle} style
+ * @param {import("@vcmap-cesium/engine").Cesium3DTileStyle} style
  * @param {string} key
  * @param {DeclarativeStyleOptions} options
  */
 function addCustomProperty(style, key, options) {
   if (options[key].conditions) {
-    style[key] = new ConditionsExpression(
-      options[key],
-      options.defines,
-    );
+    style[key] = new ConditionsExpression(options[key], options.defines);
   } else {
     style[key] = new Expression(options[key], options.defines);
   }
@@ -91,12 +95,13 @@ function addCustomProperty(style, key, options) {
 /**
  * Style Object {@see https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling}
  * @class
- * @export
  * @extends {StyleItem}
  * @api stable
  */
 class DeclarativeStyleItem extends StyleItem {
-  static get className() { return 'vcs.vcm.util.style.DeclarativeStyleItem'; }
+  static get className() {
+    return 'DeclarativeStyleItem';
+  }
 
   /**
    * @param {DeclarativeStyleItemOptions} options
@@ -105,9 +110,10 @@ class DeclarativeStyleItem extends StyleItem {
     super(options);
 
     const declarativeStyle = options.declarativeStyle || {};
-    declarativeStyle.show = declarativeStyle.show != null ? declarativeStyle.show : true;
+    declarativeStyle.show =
+      declarativeStyle.show != null ? declarativeStyle.show : true;
 
-    /** @type {import("@vcmap/cesium").Cesium3DTileStyle} */
+    /** @type {import("@vcmap-cesium/engine").Cesium3DTileStyle} */
     this.cesiumStyle = new Cesium3DTileStyle(declarativeStyle);
 
     this._style = this._styleFunction.bind(this);
@@ -118,7 +124,7 @@ class DeclarativeStyleItem extends StyleItem {
     if (declarativeStyle.strokeWidth) {
       addCustomProperty(this.cesiumStyle, 'strokeWidth', declarativeStyle);
     }
-    /** @type {DeclarativeStyleOptions} */
+    /** @type {DeclarativeStyleOptions} */ // XXX is this even still needed?
     this._styleOptions = declarativeStyle;
 
     /** @type {Map<string,import("ol/style/Circle").default>} */
@@ -126,22 +132,32 @@ class DeclarativeStyleItem extends StyleItem {
   }
 
   /**
-   * @param {DeclarativeStyleItemSections=} sections
+   * @type {DeclarativeStyleOptions}
+   * @readonly
+   */
+  get styleOptions() {
+    return JSON.parse(JSON.stringify(this._styleOptions));
+  }
+
+  /**
    * @returns {DeclarativeStyleItemOptions}
    * @api
    */
-  getOptions(sections) {
-    const options = /** @type {DeclarativeStyleItemOptions} */ (super.getOptions(sections));
-    options.type = StyleType.DECLARATIVE;
-    const usedSections = sections || {
-      declarativeStyle: true,
-      defaults: true,
-    };
-    if (usedSections.declarativeStyle) {
-      options.declarativeStyle = this.cesiumStyle.style;
-    }
+  toJSON() {
+    const config = /** @type {DeclarativeStyleItemOptions} */ (super.toJSON());
+
+    config.declarativeStyle = Object.fromEntries(
+      Object.entries(this.cesiumStyle.style)
+        .filter(([, value]) => value != null)
+        .map(([key, value]) => {
+          if (is(value, Boolean)) {
+            return [key, value.toString()];
+          }
+          return [key, value];
+        }),
+    );
 
-    return options;
+    return config;
   }
 
   /**
@@ -153,7 +169,9 @@ class DeclarativeStyleItem extends StyleItem {
     if (result) {
       return result.assign(this);
     }
-    return new DeclarativeStyleItem(this.getOptions());
+    const config = this.toJSON();
+    delete config.name;
+    return new DeclarativeStyleItem(config);
   }
 
   /**
@@ -162,8 +180,10 @@ class DeclarativeStyleItem extends StyleItem {
    * @api
    */
   assign(styleItem) {
-    this.cesiumStyle = styleItem.cesiumStyle;
-    this._styleOptions = this.cesiumStyle.style;
+    super.assign(styleItem);
+    this._styleOptions = styleItem.cesiumStyle.style;
+
+    this.cesiumStyle = new Cesium3DTileStyle(this._styleOptions);
     return this;
   }
 
@@ -175,7 +195,7 @@ class DeclarativeStyleItem extends StyleItem {
   _styleFunction(feature) {
     const actualFeature = feature[originalFeatureSymbol] || feature;
     if (!this.cesiumStyle.show.evaluate(actualFeature)) {
-      return emptyStyle;
+      return undefined;
     }
 
     const geometryType = actualFeature.getGeometry().getType();
@@ -203,7 +223,7 @@ class DeclarativeStyleItem extends StyleItem {
     }
 
     this.getLogger().warning(`could not style geometry type: ${geometryType}`);
-    return emptyStyle;
+    return undefined;
   }
 
   /**
@@ -213,12 +233,18 @@ class DeclarativeStyleItem extends StyleItem {
    */
   _stylePolygon(feature) {
     const style = new Style({});
-    const color = this.cesiumStyle.color ?
-      // @ts-ignore
-      this.cesiumStyle.color.evaluate(feature, scratchColor) :
-      Color.WHITE;
+    const color = this.cesiumStyle.color
+      ? // @ts-ignore
+        this.cesiumStyle.color.evaluate(feature, scratchColor)
+      : Color.WHITE;
     if (color) {
-      style.setFill(new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)) }));
+      style.setFill(
+        new Fill({
+          color: cesiumColorToColor(
+            /** @type {import("@vcmap-cesium/engine").Color} */ (color),
+          ),
+        }),
+      );
     }
 
     this._evaluateStroke(feature, style);
@@ -232,23 +258,34 @@ class DeclarativeStyleItem extends StyleItem {
    */
   _styleLineString(feature) {
     const style = new Style({});
-    const isExtruded = feature.get('olcs_extrudedHeight') ||
+    const isExtruded =
+      feature.get('olcs_extrudedHeight') ||
       (feature.get('olcs_storeyHeight') && feature.get('olcs_storeyNumber'));
-    const color = this.cesiumStyle.color ?
-      // @ts-ignore
-      this.cesiumStyle.color.evaluate(feature, scratchColor) :
-      Color.WHITE;
+    const color = this.cesiumStyle.color
+      ? // @ts-ignore
+        this.cesiumStyle.color.evaluate(feature, scratchColor)
+      : Color.WHITE;
     if (color) {
       if (isExtruded) {
-        style.setFill(new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */(color)) }));
+        style.setFill(
+          new Fill({
+            color: cesiumColorToColor(
+              /** @type {import("@vcmap-cesium/engine").Color} */ (color),
+            ),
+          }),
+        );
       } else {
-        const strokeWidth = this.cesiumStyle.strokeWidth ?
-          this.cesiumStyle.strokeWidth.evaluate(feature) :
-          1;
-        style.setStroke(new Stroke({
-          width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
-          color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)),
-        }));
+        const strokeWidth = this.cesiumStyle.strokeWidth
+          ? this.cesiumStyle.strokeWidth.evaluate(feature)
+          : 1;
+        style.setStroke(
+          new Stroke({
+            width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
+            color: cesiumColorToColor(
+              /** @type {import("@vcmap-cesium/engine").Color} */ (color),
+            ),
+          }),
+        );
       }
     }
 
@@ -281,24 +318,36 @@ class DeclarativeStyleItem extends StyleItem {
           }
         }
         if (this.cesiumStyle.labelColor) {
-          // @ts-ignore
-          const textColor = this.cesiumStyle.labelColor.evaluateColor(feature, scratchColor);
+          const textColor = this.cesiumStyle.labelColor.evaluateColor(
+            // @ts-ignore
+            feature,
+            scratchColor,
+          );
           if (textColor) {
             textStyle.getFill().setColor(cesiumColorToColor(textColor));
           }
         }
         if (this.cesiumStyle.labelOutlineColor) {
-          // @ts-ignore
-          const outlineColor = this.cesiumStyle.labelOutlineColor.evaluate(feature, scratchColor);
+          const outlineColor = this.cesiumStyle.labelOutlineColor.evaluate(
+            // @ts-ignore
+            feature,
+            scratchColor,
+          );
           if (outlineColor) {
-            const outlineWidth = this.cesiumStyle.labelOutlineWidth ?
-              // @ts-ignore
-              this.cesiumStyle.labelOutlineWidth.evaluate(feature) :
-              1;
-            textStyle.setStroke(new Stroke({
-              color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (outlineColor)),
-              width: outlineWidth,
-            }));
+            const outlineWidth = this.cesiumStyle.labelOutlineWidth
+              ? // @ts-ignore
+                this.cesiumStyle.labelOutlineWidth.evaluate(feature)
+              : 1;
+            textStyle.setStroke(
+              new Stroke({
+                color: cesiumColorToColor(
+                  /** @type {import("@vcmap-cesium/engine").Color} */ (
+                    outlineColor
+                  ),
+                ),
+                width: outlineWidth,
+              }),
+            );
           }
         }
         style.setText(textStyle);
@@ -312,10 +361,10 @@ class DeclarativeStyleItem extends StyleItem {
         style.setImage(new Icon({ src }));
       }
     } else {
-      const color = this.cesiumStyle.color ?
-        // @ts-ignore
-        this.cesiumStyle.color.evaluate(feature, scratchColor) :
-        Color.WHITE;
+      const color = this.cesiumStyle.color
+        ? // @ts-ignore
+          this.cesiumStyle.color.evaluate(feature, scratchColor)
+        : Color.WHITE;
 
       let radius = 4;
       if (this.cesiumStyle.pointSize) {
@@ -323,16 +372,19 @@ class DeclarativeStyleItem extends StyleItem {
         const size = this.cesiumStyle.pointSize.evaluate(feature);
         radius = size / 2;
       }
-      const width = this.cesiumStyle.pointOutlineWidth ?
-        // @ts-ignore
-        this.cesiumStyle.pointOutlineWidth.evaluate(feature) :
-        0;
+      const width = this.cesiumStyle.pointOutlineWidth
+        ? // @ts-ignore
+          this.cesiumStyle.pointOutlineWidth.evaluate(feature)
+        : 0;
 
       let pointOutlineColor = Color.BLACK;
       if (width) {
         if (this.cesiumStyle.pointOutlineColor) {
-          // @ts-ignore
-          pointOutlineColor = this.cesiumStyle.pointOutlineColor.evaluateColor(feature, scratchColor);
+          pointOutlineColor = this.cesiumStyle.pointOutlineColor.evaluateColor(
+            // @ts-ignore
+            feature,
+            scratchColor,
+          );
         }
         radius += width / 2;
       }
@@ -341,7 +393,11 @@ class DeclarativeStyleItem extends StyleItem {
       if (!this._circleCache.has(circleCacheKey)) {
         const circleOptions = {
           radius,
-          fill: new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)) }),
+          fill: new Fill({
+            color: cesiumColorToColor(
+              /** @type {import("@vcmap-cesium/engine").Color} */ (color),
+            ),
+          }),
         };
         if (width) {
           circleOptions.stroke = new Stroke({
@@ -372,16 +428,21 @@ class DeclarativeStyleItem extends StyleItem {
    */
   _evaluateStroke(feature, style) {
     if (this.cesiumStyle.strokeColor) {
-      // @ts-ignore
-      const strokeColor = this.cesiumStyle.strokeColor.evaluateColor(feature, scratchColor);
+      const strokeColor = this.cesiumStyle.strokeColor.evaluateColor(
+        // @ts-ignore
+        feature,
+        scratchColor,
+      );
       if (strokeColor) {
-        const strokeWidth = this.cesiumStyle.strokeWidth ?
-          this.cesiumStyle.strokeWidth.evaluate(feature) :
-          1;
-        style.setStroke(new Stroke({
-          width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
-          color: cesiumColorToColor(strokeColor),
-        }));
+        const strokeWidth = this.cesiumStyle.strokeWidth
+          ? this.cesiumStyle.strokeWidth.evaluate(feature)
+          : 1;
+        style.setStroke(
+          new Stroke({
+            width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
+            color: cesiumColorToColor(strokeColor),
+          }),
+        );
       }
     }
   }
@@ -558,6 +619,10 @@ class DeclarativeStyleItem extends StyleItem {
 }
 
 export default DeclarativeStyleItem;
+styleClassRegistry.registerClass(
+  DeclarativeStyleItem.className,
+  DeclarativeStyleItem,
+);
 
 /**
  * @type {DeclarativeStyleItem}