@vcmap/core 5.0.0-rc.8 → 5.0.0-rc.9

package/src/style/declarativeStyleItem.js

@@ -6,7 +6,7 @@ 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,
@@ -14,7 +14,7 @@ import {
   whiteColor,
 } from './styleHelpers.js';
 import { originalFeatureSymbol } from '../layer/vectorSymbols.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import { styleClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} DeclarativeStyleItemConditions
@@ -119,7 +119,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>} */
@@ -127,22 +127,18 @@ class DeclarativeStyleItem extends StyleItem {
   }
 
   /**
-   * @param {DeclarativeStyleItemSections=} sections
    * @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),
+    );
 
-    return options;
+    return config;
   }
 
   /**
@@ -154,7 +150,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);
   }
 
   /**
@@ -163,8 +161,9 @@ class DeclarativeStyleItem extends StyleItem {
    * @api
    */
   assign(styleItem) {
-    this.cesiumStyle = styleItem.cesiumStyle;
+    super.assign(styleItem);
     this._styleOptions = this.cesiumStyle.style;
+    this.cesiumStyle = new Cesium3DTileStyle(this._styleOptions);
     return this;
   }
 
@@ -559,7 +558,7 @@ class DeclarativeStyleItem extends StyleItem {
 }
 
 export default DeclarativeStyleItem;
-VcsClassRegistry.registerClass(DeclarativeStyleItem.className, DeclarativeStyleItem);
+styleClassRegistry.registerClass(DeclarativeStyleItem.className, DeclarativeStyleItem);
 
 /**
  * @type {DeclarativeStyleItem}

package/src/style/styleFactory.js

@@ -1,48 +1,29 @@
-import { getLogger as getLoggerByName } from '@vcsuite/logger';
-import StyleItem, { StyleType } from './styleItem.js';
-import DeclarativeStyleItem, { defaultDeclarativeStyle } from './declarativeStyleItem.js';
+import { is } from '@vcsuite/check';
+import StyleItem from './styleItem.js';
+import { defaultDeclarativeStyle } from './declarativeStyleItem.js';
+import { styleClassRegistry } from '../classRegistry.js';
 import VectorStyleItem from './vectorStyleItem.js';
-import { styleCollection } from '../globalCollections.js';
 
 /**
- * @returns {import("@vcsuite/logger").Logger}
- */
-function getLogger() {
-  return getLoggerByName('styleFactory');
-}
-
-/**
- * @param {(Reference|DeclarativeStyleItemOptions|VectorStyleItemOptions|StyleItem|string)=} styleOptions
+ * @param {(DeclarativeStyleItemOptions|VectorStyleItemOptions|StyleItem)=} styleOptions
  * @param {StyleItem=} defaultStyle
  * @returns {StyleItem}
  */
 // eslint-disable-next-line import/prefer-default-export
 export function getStyleOrDefaultStyle(styleOptions, defaultStyle) {
-  if (typeof styleOptions === 'string') {
-    const styleItem = styleCollection.getByKey(styleOptions);
-    if (styleItem) {
-      return styleItem;
-    }
-    getLogger().warning(`could not find style with name ${styleOptions}`);
-  } else if (styleOptions && (styleOptions instanceof StyleItem)) {
-    return styleOptions;
-  } else if (styleOptions) { // DeclarativeStyleItemOptions || VectorStyleItemOptions || ClusterStyleItemOptions
-    if (
-      /** @type {DeclarativeStyleItemOptions} */ (styleOptions).type === StyleType.DECLARATIVE ||
-      /** @type {DeclarativeStyleItemOptions} */ (styleOptions).declarativeStyle) {
-      return new DeclarativeStyleItem(/** @type {DeclarativeStyleItemOptions} */ (styleOptions));
-    } else if (/** @type {Reference} */ (styleOptions).type === StyleType.REFERENCE) {
-      const { name } = /** @type {Reference} */ (styleOptions);
-      const styleItem = styleCollection.getByKey(name);
+  if (is(styleOptions, [StyleItem, { type: String }])) {
+    if (styleOptions instanceof StyleItem) {
+      return styleOptions;
+    } else {
+      const styleItem = styleClassRegistry.createFromTypeOptions(styleOptions);
       if (styleItem) {
+        if (styleItem instanceof VectorStyleItem && defaultStyle instanceof VectorStyleItem) {
+          return defaultStyle.assign(styleItem);
+        }
         return styleItem;
       }
-      getLogger().warning(`could not find style with name ${name}`);
-    } else {
-      // @ts-ignore
-      const vectorStyle = new VectorStyleItem(/** @type {VectorStyleItemOptions} */ styleOptions);
-      return defaultStyle instanceof VectorStyleItem ? defaultStyle.assign(vectorStyle) : vectorStyle;
     }
   }
+
   return defaultStyle || defaultDeclarativeStyle.clone();
 }

package/src/style/styleItem.js

@@ -4,13 +4,7 @@ import deepEqual from 'fast-deep-equal';
 import { parseEnumValue } from '@vcsuite/parsers';
 import VcsObject from '../vcsObject.js';
 import VcsEvent from '../vcsEvent.js';
-import { VcsClassRegistry } from '../classRegistry.js';
-
-/**
- * @namespace style
- * @export
- * @api
- */
+import { styleClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} StyleItemLegendEntry
@@ -21,51 +15,16 @@ import { VcsClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {VcsObjectOptions} StyleItemOptions
- * @property {string|undefined} [type] - used in configuration to differentiate vector from declarative styles
- * @property {string|Object<string, string>|undefined} title - name is used when none is specifies
- * @property {Array<StyleItemLegendEntry>|undefined} [legend]
  * @property {number} [colorBlendMode=import("@vcmap/cesium").Cesium3DTileColorBlendMode.HIGHLIGHT] - colorBlendMode for 3D Tiledataset @see https://cesiumjs.org/import("@vcmap/cesium").Build/Documentation/Cesium3DTileColorBlendMode.html
  * @api
  */
 
-/**
- * @typedef {Object} Reference
- * @property {string} [type=StyleType.REFERENCE]
- * @property {string} name
- * @property {string|undefined} [url] - vcs:undocumented this is not yet implemented
- * @api
- */
-
 /**
  * @typedef {Object} StyleItemSections
  * @property {boolean|undefined} [meta]
  * @api
  */
 
-/**
- * Enumeration of possible style types.
- * @enum {string}
- * @property {string} VECTOR
- * @property {string} DECLARATIVE
- * @property {string} REFERENCE
- * @export
- * @api
- */
-export const StyleType = {
-  VECTOR: 'vector',
-  DECLARATIVE: 'declarative',
-  REFERENCE: 'reference',
-  CLUSTER: 'cluster',
-};
-
-/**
- * indicates, that this style is part of the config and can be referenced by name
- * @type {symbol}
- * @export
- * @api
- */
-export const referenceableStyleSymbol = Symbol('referencableStyleSymbol');
-
 /**
  * An abstract style definition which can be applied to a layer
  * @class
@@ -83,18 +42,6 @@ class StyleItem extends VcsObject {
   constructor(options) {
     super(options);
 
-    /**
-     * @type {string|Object<string, string>}
-     */
-    this.title = options.title || this.name.toString();
-
-    /**
-     * Legend entries
-     * @type {Array<StyleItemLegendEntry>}
-     * @api
-     */
-    this.legend = options.legend || [];
-
     /** @type {Array<string>} */
     this.supportedLayers = [];
 
@@ -146,42 +93,21 @@ class StyleItem extends VcsObject {
       this.supportedLayers.indexOf(className) > -1;
   }
 
-  /**
-   * Gets the options for this style item to be used in a config or vcsMeta
-   * @param {(VectorStyleItemSections|DeclarativeStyleItemSections)=} sections
-   * @returns {VectorStyleItemOptions|DeclarativeStyleItemOptions}
-   * @api
-   */
-  getOptions(sections) {
-    if (sections && sections.meta) {
-      return {
-        name: this.name.toString(),
-        title: this.title,
-        legend: this.legend.length ? this.legend : undefined,
-      };
-    }
-    return {};
-  }
-
   /**
    * @inheritDoc
    * @returns {StyleItemOptions}
    */
   toJSON() {
-    const config = { ...super.toJSON(), ...this.getOptions() };
-    if (this.title) {
-      config.title = this.title;
-    }
-
-    if (this.legend.length > 0) {
-      config.legend = this.legend.slice();
+    const config = /** @type {StyleItemOptions} */ (super.toJSON());
+    if (this.colorBlendMode !== Cesium3DTileColorBlendMode.HIGHLIGHT) {
+      config.colorBlendMode = this.colorBlendMode;
     }
 
     return config;
   }
 
   /**
-   * Clones this style
+   * Clones this style. Does not pass the name property.
    * @param {StyleItem=} result
    * @returns {StyleItem}
    * @api
@@ -194,36 +120,29 @@ class StyleItem extends VcsObject {
    * @returns {StyleItem}
    * @api
    */
-  // eslint-disable-next-line class-methods-use-this
-  assign(styleItem) { return styleItem; }
+  assign(styleItem) {
+    this.properties = JSON.parse(JSON.stringify(styleItem.properties));
+    return this;
+  }
 
   /**
+   * Tests if two styleItems are equivalent. Does not match the name property (e.g. identifier)
    * @param {StyleItem} styleItem
    * @returns {boolean}
    * @api
    */
   equals(styleItem) {
     if (this !== styleItem) {
-      const options = this.getOptions();
-      const candidateOptions = styleItem.getOptions();
+      const options = this.toJSON();
+      delete options.name;
+      const candidateOptions = styleItem.toJSON();
+      delete candidateOptions.name;
       return deepEqual(options, candidateOptions);
     }
 
     return true;
   }
 
-  /**
-   * gets a reference to this style by its name. should only be used for static styles, aka styles already part of the config
-   * @returns {Reference}
-   * @api
-   */
-  getReference() {
-    return {
-      type: StyleType.REFERENCE,
-      name: this.name.toString(),
-    };
-  }
-
   /**
    * @protected
    */
@@ -242,4 +161,4 @@ class StyleItem extends VcsObject {
 }
 
 export default StyleItem;
-VcsClassRegistry.registerClass(StyleItem.className, StyleItem);
+styleClassRegistry.registerClass(StyleItem.className, StyleItem);

package/src/style/vectorStyleItem.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,7 +24,7 @@ import {
   getDefaultVectorStyleItemOptions,
 } from './styleHelpers.js';
 import { getShapeFromOptions } from './shapesCategory.js';
-import { VcsClassRegistry } from '../classRegistry.js';
+import { styleClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} VectorStyleItemPattern
@@ -711,7 +711,9 @@ class VectorStyleItem extends StyleItem {
       });
       return result;
     }
-    return new VectorStyleItem(this.getOptions());
+    const config = this.toJSON();
+    delete config.name;
+    return new VectorStyleItem(config);
   }
 
   /**
@@ -720,6 +722,7 @@ class VectorStyleItem extends StyleItem {
    * @api
    */
   assign(result) {
+    super.assign(result);
     if (result.fillColor) {
       this.fillColor = result.fillColor.slice();
     }
@@ -756,79 +759,61 @@ 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;
@@ -842,33 +827,38 @@ class VectorStyleItem extends StyleItem {
     const type = feature.getGeometry().getType();
     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;
+      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;
   }
 
   /**
@@ -908,7 +898,7 @@ export default VectorStyleItem;
  * @export
  */
 export const defaultVectorStyle = new VectorStyleItem(getDefaultVectorStyleItemOptions());
-VcsClassRegistry.registerClass(VectorStyleItem.className, VectorStyleItem);
+styleClassRegistry.registerClass(VectorStyleItem.className, VectorStyleItem);
 
 /**
  * @param {import("@vcmap/cesium").Color} cesiumColor

package/src/style/writeStyle.js

@@ -1,6 +1,5 @@
 import VectorStyleItem from './vectorStyleItem.js';
 import DeclarativeStyleItem from './declarativeStyleItem.js';
-import { referenceableStyleSymbol } from './styleItem.js';
 
 /**
  * @param {VectorStyleItemOptions} obj
@@ -34,13 +33,11 @@ export function embedIconsInStyle(obj, embeddedIcons) {
  * @param {VcsMeta=} vcsMeta
  * @returns {VcsMeta}
  */
-function writeStyle(style, vcsMeta = {}) {
-  if (style[referenceableStyleSymbol]) { // XXX this should be configurable. In some cases, writting out the actual style would be desirable
-    vcsMeta.style = style.getReference();
-  } else if (style instanceof VectorStyleItem) {
-    vcsMeta.style = embedIconsInStyle(style.getOptions(), vcsMeta.embeddedIcons);
+function writeStyle(style, vcsMeta = {}) { // XXX this entire function is not what is to be expected. feature store expects styles as refs to be possible
+  if (style instanceof VectorStyleItem) {
+    vcsMeta.style = embedIconsInStyle(style.toJSON(), vcsMeta.embeddedIcons);
   } else if (style instanceof DeclarativeStyleItem) {
-    vcsMeta.style = style.getOptions();
+    vcsMeta.style = style.toJSON();
   }
   return vcsMeta;
 }

package/src/util/projection.js

@@ -2,7 +2,6 @@ import { getTransform, get as getProjection, equivalent } from 'ol/proj.js';
 import { register } from 'ol/proj/proj4.js';
 import proj4 from 'proj4';
 import { check } from '@vcsuite/check';
-import { VcsClassRegistry } from '../classRegistry.js';
 
 /**
  * @typedef {Object} ProjectionOptions
@@ -362,5 +361,3 @@ export const wgs84Projection = new Projection({ epsg: 4326 });
  * @export
  */
 export const mercatorProjection = new Projection({ epsg: 3857 });
-
-VcsClassRegistry.registerClass(Projection.className, Projection);

package/src/util/viewpoint.js

@@ -3,7 +3,6 @@ import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import Projection, { wgs84Projection } from './projection.js';
 import VcsObject from '../vcsObject.js';
 import Extent from './extent.js';
-import { VcsClassRegistry } from '../classRegistry.js';
 
 /**
  * compares two numeric properties
@@ -332,5 +331,3 @@ class ViewPoint extends VcsObject {
 }
 
 export default ViewPoint;
-
-VcsClassRegistry.registerClass(ViewPoint.className, ViewPoint);