@vcmap/core 5.0.0-rc.9 → 5.0.1

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@vcmap/core",
-  "version": "5.0.0-rc.9",
+  "version": "5.0.1",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
   "type": "module",
-  "types": "index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "test": "node node_modules/mocha/bin/_mocha --exit --require tests/setupJsdom.js --require tests/setup.js --file tests/vcs.js --recursive \"tests/**/*spec.js\"",
-    "lint": "eslint .",
-    "pretype-check": "npm run build-typedefs",
-    "type-check": "node build/typeCheck.js",
+    "test": "tsc -b tests && node -e \"require('fs').cpSync('tests/data', '.tests/tests/data', { recursive: true })\" && mocha --exit --require .tests/tests/setupJsdom.js --require .tests/tests/setup.js --file .tests/tests/vcs.js \".tests/**/*.spec.js\"",
+    "lint:js": "eslint . --ext .vue,.js,.cjs,.mjs,.ts",
+    "lint:prettier": "prettier --check .",
+    "lint": "npm run lint:js && npm run lint:prettier",
+    "format": "prettier --write --list-different . && npm run lint:js -- --fix",
+    "type-check": "tsc --noEmit",
     "postinstall": "node build/postinstall.js",
     "coverage": "c8 --reporter text-summary npm run test",
     "coverage:gitlab": "c8 --reporter text-summary npm run test -- --reporter mocha-junit-reporter",
-    "serve": "npx wds --node-resolve --open --watch",
-    "build-index": "jsdoc -c build/index/conf.json",
-    "build-typedefs": "jsdoc -c build/info/conf.json",
-    "build-tsd": "node build/buildDTs.js",
-    "prepare": "npm run build-index && npm run build-tsd"
+    "build-docs": "typedoc index.ts --out docs --skipErrorChecking",
+    "build": "tsc && node -e \"require('fs').cpSync('tests/data', 'dist/tests/data', { recursive: true })\"",
+    "watch": "tsc --watch",
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -26,61 +27,94 @@
   "files": [
     "build/postinstall.js",
     "src/",
+    "dist/",
     "LICENSE.md",
     "README.md",
-    "index.js",
-    "index.d.ts"
+    "index.ts",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "author": "Virtual City Systems",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@vcsuite/eslint-config": "^2.0.3",
-    "@vcsuite/tsd-jsdoc": "^1.0.2",
-    "@web/dev-server": "^0.1.11",
-    "@web/dev-server-rollup": "^0.3.3",
+    "@types/chai": "^4.3.5",
+    "@types/geojson": "^7946.0.10",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^18.17.15",
+    "@types/proj4": "^2.5.2",
+    "@types/sinon": "^10.0.15",
+    "@types/uuid": "^9.0.1",
+    "@vcsuite/eslint-config": "^3.0.5",
     "c8": "^7.7.1",
-    "canvas": "^2.8.0",
+    "canvas": "^2.11.2",
     "chai": "^4.3.4",
-    "eslint": "^8.1.0",
-    "jsdoc": "^3.6.7",
-    "jsdoc-plugin-typescript": "^2.0.6",
+    "eslint": "^8.38.0",
     "jsdom": "^16.5.2",
     "jsdom-global": "^3.0.2",
     "mocha": "^9.1.3",
     "mocha-junit-reporter": "^2.0.2",
     "nock": "^13.2.4",
     "node-fetch": "^3.2.0",
+    "prettier": "^3.0.3",
+    "resize-observer-polyfill": "^1.5.1",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.6.0",
-    "typescript": "^4.6.2"
+    "typedoc": "^0.24.8",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "@vcmap/cesium": "~1.87.3",
-    "ol": "~6.13.0"
+    "@vcmap-cesium/engine": "^4.0.3",
+    "ol": "^7.5.2"
   },
   "eslintConfig": {
     "extends": [
-      "@vcsuite/eslint-config/vue"
+      "@vcsuite/eslint-config/node-ts"
+    ],
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "no-restricted-syntax": "off",
+      "import/extensions": [
+        "error",
+        "always"
+      ]
+    },
+    "overrides": [
+      {
+        "files": [
+          "*.ts",
+          "*.vue"
+        ],
+        "parserOptions": {
+          "project": [
+            "./tsconfig.json",
+            "./tests/tsconfig.json"
+          ]
+        },
+        "rules": {
+          "@typescript-eslint/no-non-null-assertion": "off",
+          "@typescript-eslint/no-unused-vars": "off",
+          "@typescript-eslint/no-explicit-any": "off"
+        }
+      }
     ]
   },
   "eslintIgnore": [
     "node_modules",
     "coverage",
-    "index.js",
-    "*.d.ts"
+    "docs",
+    "dist",
+    ".tests"
   ],
+  "prettier": "@vcsuite/eslint-config/prettier.js",
   "dependencies": {
-    "@types/rbush": "^3.0.0",
     "@vcsuite/check": "^1.1.2",
     "@vcsuite/logger": "^1.0.1",
-    "@vcsuite/parsers": "^1.0.1",
+    "@vcsuite/parsers": "^1.0.3",
     "fast-deep-equal": "^3.1.3",
-    "proj4": "^2.7.5",
+    "proj4": "^2.9.0",
     "rbush": ">=3.0.1",
     "rbush-knn": "^3.0.1",
-    "underscore.template": "^0.1.7",
-    "uuid": "^8.3.2"
+    "uuid": "^9.0.0"
   }
 }

package/src/category/category.ts

@@ -0,0 +1,414 @@
+import { check } from '@vcsuite/check';
+import { Feature } from 'ol';
+import type { GeoJSONFeature } from 'ol/format/GeoJSON.js';
+import { destroyCollection } from '../vcsModuleHelpers.js';
+import makeOverrideCollection, {
+  isOverrideCollection,
+  OverrideCollection,
+  ReplacedEvent,
+} from '../util/overrideCollection.js';
+import VcsObject, { VcsObjectOptions } from '../vcsObject.js';
+import VectorLayer, { type VectorOptions } from '../layer/vectorLayer.js';
+import IndexedCollection from '../util/indexedCollection.js';
+import { parseGeoJSON, writeGeoJSONFeature } from '../layer/geojsonHelpers.js';
+import Collection from '../util/collection.js';
+import { getStyleOrDefaultStyle } from '../style/styleFactory.js';
+import {
+  categoryClassRegistry,
+  getObjectFromClassRegistry,
+  TypedConstructorOptions,
+} from '../classRegistry.js';
+import OverrideClassRegistry from '../overrideClassRegistry.js';
+import VcsEvent from '../vcsEvent.js';
+import type VectorStyleItem from '../style/vectorStyleItem.js';
+import type VcsApp from '../vcsApp.js';
+import { markVolatile } from '../vcsModule.js';
+
+export type CategoryOptions<T extends VcsObject | object> = VcsObjectOptions & {
+  title?: string;
+  /**
+   * the class registry name on the current app to provide classes for this category. if provided, parseItems will deserialize using this class registry. See: {@link getObjectFromClassRegistry}.
+   */
+  classRegistryName?: keyof VcsApp;
+  featureProperty?: keyof T;
+  layerOptions?: VectorOptions;
+  keyProperty?: keyof T;
+};
+
+function assignLayerOptions(layer: VectorLayer, options: VectorOptions): void {
+  if (options.style) {
+    layer.setStyle(getStyleOrDefaultStyle(options.style, layer.defaultStyle));
+  }
+
+  if (options.highlightStyle) {
+    const highlightStyle = getStyleOrDefaultStyle(
+      options.highlightStyle,
+      layer.highlightStyle,
+    ) as VectorStyleItem;
+    layer.setHighlightStyle(highlightStyle);
+  }
+
+  if (options.vectorProperties) {
+    layer.vectorProperties.setValues(options.vectorProperties);
+  }
+
+  if (options.zIndex != null) {
+    layer.zIndex = options.zIndex;
+  }
+}
+
+function checkMergeOptionOverride<
+  T extends number | boolean | string | symbol | undefined,
+>(key: string, value: T, defaultOption: T, option?: T): void {
+  const isOverride =
+    option == null ? value !== defaultOption : option !== value;
+  if (isOverride) {
+    throw new Error(`Cannot merge options, values of ${key} do not match`);
+  }
+}
+
+/**
+ * A category contains user based items and is a special container. The container should not be created directly, but via
+ * the requestCategory API on the categories collection. Do not use toJSON to retrieve the state of a category, since
+ * categories outlive modules and may be changed with mergeOptions to no longer reflect your initial state. Requestors
+ * should keep track of the requested options themselves.
+ * @template {Object|VcsObject} T
+ * @group Category
+ */
+class Category<
+  T extends VcsObject | object = VcsObject | object,
+> extends VcsObject {
+  static get className(): string {
+    return 'Category';
+  }
+
+  static getDefaultConfig(): CategoryOptions<VcsObject> {
+    return {
+      title: '',
+      featureProperty: undefined,
+      classRegistryName: undefined,
+      layerOptions: {},
+      keyProperty: 'name',
+    };
+  }
+
+  title: string;
+
+  protected _app: VcsApp | null = null;
+
+  private _featureProperty: keyof T | undefined;
+
+  private _classRegistryName: keyof VcsApp | undefined;
+
+  private _layerOptions: VectorOptions;
+
+  protected _layer: VectorLayer | null;
+
+  private _keyProperty: keyof T;
+
+  /**
+   * Event raised if the collection is reset
+   */
+  private _collectionChanged = new VcsEvent<void>();
+
+  private _collectionListeners: (() => void)[] = [];
+
+  private _collection: OverrideCollection<T> = makeOverrideCollection(
+    new IndexedCollection(),
+    this._getDynamicModuleId.bind(this),
+    this._serializeItem.bind(this),
+    this._deserializeItem.bind(this),
+  );
+
+  // eslint-disable-next-line class-methods-use-this
+  private _moduleRemovedListener: () => void = () => {};
+
+  constructor(options: CategoryOptions<T>) {
+    super(options);
+    const defaultOptions = Category.getDefaultConfig();
+
+    this.title = options.title || this.name;
+    this._featureProperty =
+      options.featureProperty ||
+      (defaultOptions.featureProperty as keyof T | undefined);
+
+    this._classRegistryName = options.classRegistryName;
+    this._layerOptions =
+      options.layerOptions || (defaultOptions.layerOptions as VectorOptions);
+    this._layer = null;
+    if (this._featureProperty) {
+      this._layer = new VectorLayer(this._layerOptions);
+      markVolatile(this._layer);
+    }
+
+    this._keyProperty =
+      options.keyProperty || (defaultOptions.keyProperty as keyof T);
+
+    this.setCollection(new IndexedCollection(this._keyProperty));
+  }
+
+  get classRegistryName(): string | symbol | undefined {
+    return this._classRegistryName;
+  }
+
+  get collection(): OverrideCollection<T> {
+    return this._collection;
+  }
+
+  /**
+   * Event raised if the collection is reset
+   */
+  get collectionChanged(): VcsEvent<void> {
+    return this._collectionChanged;
+  }
+
+  /**
+   * Returns the layer of this collection. Caution, do not use the layer API to add or remove items.
+   * When adding items to the collection, the features are added to the layer async (timeout of 0), since there is weird behavior
+   * when removing and adding a feature with the same id in the same sync call.
+   */
+  get layer(): VectorLayer | null {
+    return this._layer;
+  }
+
+  protected _itemAdded(item: T): void {
+    if (this._featureProperty && this._layer) {
+      const id = item[this._keyProperty];
+      this._layer.removeFeaturesById([id as string]); // this may be a replacement.
+
+      const geoJsonFeature = item[this._featureProperty];
+      let feature: Feature | undefined;
+      if (geoJsonFeature instanceof Feature) {
+        feature = geoJsonFeature;
+      } else if (typeof geoJsonFeature === 'object') {
+        const { features } = parseGeoJSON(geoJsonFeature as GeoJSONFeature);
+        if (features[0]) {
+          // XXX do we warn on feature collection?
+          feature = features[0];
+        }
+      }
+
+      if (feature) {
+        feature.setId(String(id));
+        setTimeout(() => {
+          this._layer?.addFeatures([feature as Feature]);
+        }, 0); // We need to set a timeout, since removing and adding the feature in the same sync call leads to undefined behavior in OL TODO recheck in ol 6.11
+      }
+    }
+  }
+
+  protected _itemRemoved(item: T): void {
+    if (this._featureProperty && this._layer) {
+      this._layer.removeFeaturesById([item[this._keyProperty] as string]);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  protected _itemReplaced(_item: ReplacedEvent<T>): void {}
+
+  // eslint-disable-next-line class-methods-use-this,no-unused-vars
+  protected _itemMoved(_item: T): void {}
+
+  private _getDynamicModuleId(): string {
+    if (!this._app) {
+      throw new Error('Cannot get dynamic module id, before setting the vcApp');
+    }
+    return this._app.dynamicModuleId;
+  }
+
+  /**
+   * Throws if typed, featureProperty and keyProperty do not match. Merges other options.
+   * Only merges: style, highlightStyle, zIndex & vectorProperties from layerOptions.
+   * @param  options
+   */
+  mergeOptions(options: CategoryOptions<T>): void {
+    const defaultOptions = Category.getDefaultConfig();
+    checkMergeOptionOverride(
+      'classRegistryName',
+      this._classRegistryName,
+      defaultOptions.classRegistryName,
+      options.classRegistryName,
+    );
+    checkMergeOptionOverride(
+      'featureProperty',
+      this._featureProperty,
+      defaultOptions.featureProperty as keyof T,
+      options.featureProperty,
+    );
+    checkMergeOptionOverride(
+      'keyProperty',
+      this._keyProperty,
+      defaultOptions.keyProperty as keyof T,
+      options.keyProperty,
+    );
+    this.title = options.title || this.title;
+    if (options.layerOptions && this._layer) {
+      assignLayerOptions(this._layer, options.layerOptions);
+    }
+  }
+
+  /**
+   * When setting the category, it MUST use the same uniqueKey as the previous collection (default is "name").
+   * All items in the current collection _will be destroyed_ and the current collection will be destroyed. The category will take
+   * complete ownership of the collection and destroy it once the category is destroyed. The collection will
+   * be turned into an {@link OverrideCollection}
+   * @param  collection
+   */
+  setCollection(
+    collection: Collection<T> | OverrideCollection<T, IndexedCollection<T>>,
+  ): void {
+    check(collection, Collection);
+
+    if (this._keyProperty !== collection.uniqueKey) {
+      throw new Error(
+        'The collections key property does not match the categories key property',
+      );
+    }
+
+    this._collectionListeners.forEach((cb) => {
+      cb();
+    });
+    if (this._collection) {
+      destroyCollection(this._collection);
+    }
+    if (this._layer) {
+      this._layer.removeAllFeatures(); // XXX should we call `itemRemoved` instead?
+    }
+
+    this._collection = (collection as OverrideCollection<T>)[
+      isOverrideCollection
+    ]
+      ? (collection as OverrideCollection<T>)
+      : makeOverrideCollection(
+          collection,
+          this._getDynamicModuleId.bind(this),
+          this._serializeItem.bind(this),
+          this._deserializeItem.bind(this),
+        );
+
+    [...this.collection].forEach((item) => {
+      this._itemAdded(item);
+    });
+
+    this._collectionListeners = [
+      this._collection.added.addEventListener(this._itemAdded.bind(this)),
+      this._collection.removed.addEventListener(this._itemRemoved.bind(this)),
+      this._collection.replaced.addEventListener(this._itemReplaced.bind(this)),
+    ];
+
+    if (
+      (this._collection as OverrideCollection<T, IndexedCollection<T>>).moved
+    ) {
+      this._collectionListeners.push(
+        (
+          this._collection as OverrideCollection<T, IndexedCollection<T>>
+        ).moved.addEventListener(this._itemMoved.bind(this)),
+      );
+    }
+    this.collectionChanged.raiseEvent();
+  }
+
+  setApp(app: VcsApp): void {
+    if (this._app) {
+      throw new Error('Cannot switch apps');
+    }
+    this._app = app;
+    this._moduleRemovedListener = this._app.moduleRemoved.addEventListener(
+      (module) => {
+        this._collection.removeModule(module._id);
+      },
+    );
+    if (this._layer) {
+      this._app.layers.add(this._layer);
+    }
+  }
+
+  protected _deserializeItem(config: object): Promise<T> {
+    if (!this._app) {
+      throw new Error('Cannot deserialize item before setting the vcApp');
+    }
+    const classRegistry = this._classRegistryName
+      ? (this._app[this._classRegistryName] as OverrideClassRegistry<
+          new () => T
+        >)
+      : null;
+
+    let item: T | null = null;
+    if (classRegistry && classRegistry instanceof OverrideClassRegistry) {
+      item = getObjectFromClassRegistry(
+        classRegistry,
+        config as TypedConstructorOptions,
+      );
+    }
+    return Promise.resolve((item ?? config) as T);
+  }
+
+  protected _serializeItem(item: T): object {
+    const config = JSON.parse(JSON.stringify(item)) as Record<keyof T, unknown>;
+    if (this._featureProperty && this._layer) {
+      const feature = this._layer.getFeatureById(
+        item[this._keyProperty] as string,
+      );
+      if (feature) {
+        config[this._featureProperty] = writeGeoJSONFeature(feature);
+      }
+    }
+    return config;
+  }
+
+  serializeModule(moduleId: string): { name: string; items: object[] } | null {
+    if (this._collection.size === 0) {
+      return null;
+    }
+
+    return {
+      name: this.name,
+      items: this.collection.serializeModule(moduleId),
+    };
+  }
+
+  toJSON(): CategoryOptions<T> {
+    const config: CategoryOptions<T> = super.toJSON();
+
+    const defaultOptions = Category.getDefaultConfig();
+    if (this.title !== this.name) {
+      config.title = this.title;
+    }
+    if (this._featureProperty !== defaultOptions.featureProperty) {
+      config.featureProperty = this._featureProperty;
+    }
+    if (this._classRegistryName !== defaultOptions.classRegistryName) {
+      config.classRegistryName = this._classRegistryName;
+    }
+    if (Object.keys(this._layerOptions).length > 0) {
+      config.layerOptions = { ...this._layerOptions };
+    }
+    if (this._keyProperty !== defaultOptions.keyProperty) {
+      config.keyProperty = this._keyProperty;
+    }
+    return config;
+  }
+
+  destroy(): void {
+    super.destroy();
+    if (this._app && this._layer) {
+      this._app.layers.remove(this._layer);
+    }
+    if (this._layer) {
+      this._layer.destroy();
+    }
+
+    this._collectionListeners.forEach((cb) => {
+      cb();
+    });
+    this._collectionListeners.splice(0);
+    this._moduleRemovedListener();
+    this._moduleRemovedListener = (): void => {};
+    destroyCollection(this._collection);
+    this._collectionChanged.destroy();
+    this._app = null;
+  }
+}
+
+export default Category;
+categoryClassRegistry.registerClass(Category.className, Category);