@vcmap/core 6.0.7 → 6.1.0-rc.2

package/src/util/clipping/clippingPolygonObject.ts

@@ -0,0 +1,223 @@
+import deepEqual from 'fast-deep-equal';
+import { Coordinate } from 'ol/coordinate.js';
+import { Feature } from 'ol';
+import { Polygon } from 'ol/geom.js';
+import { check, oneOf } from '@vcsuite/check';
+import { parseBoolean } from '@vcsuite/parsers';
+import { getLogger } from '@vcsuite/logger';
+import { Cartesian3, ClippingPolygon } from '@vcmap-cesium/engine';
+import VcsObject, { VcsObjectOptions } from '../../vcsObject.js';
+import VcsEvent from '../../vcsEvent.js';
+
+export enum ClippingPolygonObjectState {
+  INACTIVE = 1,
+  ACTIVE = 2,
+}
+
+export type ClippingPolygonObjectOptions = VcsObjectOptions & {
+  layerNames?: string[] | 'all';
+  terrain?: boolean;
+  activeOnStartup?: boolean;
+  coordinates: Array<Coordinate>;
+};
+
+function getLayerNamesClone(layerNames: string[] | 'all'): string[] | 'all' {
+  return Array.isArray(layerNames) ? layerNames.slice() : layerNames;
+}
+
+class ClippingPolygonObject extends VcsObject {
+  static get className(): string {
+    return 'ClippingPolygonObject';
+  }
+
+  static getDefaultOptions(): ClippingPolygonObjectOptions {
+    return {
+      activeOnStartup: false,
+      layerNames: 'all',
+      terrain: false,
+      coordinates: [],
+    };
+  }
+
+  static fromFeature(feature: Feature<Polygon>): ClippingPolygonObject | null {
+    const geometry = feature.getGeometry();
+    if (geometry instanceof Polygon) {
+      return ClippingPolygonObject.fromGeometry(geometry);
+    }
+    return null;
+  }
+
+  static fromGeometry(geometry: Polygon): ClippingPolygonObject {
+    check(geometry, Polygon);
+    const ring = geometry.getLinearRing(0)!;
+    const coordinates = ring.getCoordinates();
+    return new ClippingPolygonObject({ coordinates });
+  }
+
+  activeOnStartup: boolean;
+
+  private _state: ClippingPolygonObjectState;
+
+  stateChanged = new VcsEvent<ClippingPolygonObjectState>();
+
+  private _layerNames: string[] | 'all';
+
+  private _terrain: boolean;
+
+  private _coordinates: Array<Coordinate> = [];
+
+  private _clippingPolygon: ClippingPolygon | undefined = undefined;
+
+  clippingPolygonChanged = new VcsEvent<{
+    newValue: ClippingPolygon;
+    oldValue: ClippingPolygon | undefined;
+  }>();
+
+  layersChanged = new VcsEvent<{
+    newValue: string[] | 'all';
+    oldValue: string[] | 'all';
+  }>();
+
+  terrainChanged = new VcsEvent<boolean>();
+
+  constructor(options: ClippingPolygonObjectOptions) {
+    super(options);
+    const defaultOptions = ClippingPolygonObject.getDefaultOptions();
+
+    this.activeOnStartup = parseBoolean(
+      options.activeOnStartup,
+      defaultOptions.activeOnStartup,
+    );
+
+    this._state = ClippingPolygonObjectState.INACTIVE;
+
+    this._layerNames = options.layerNames || defaultOptions.layerNames!;
+
+    this._terrain = parseBoolean(options.terrain, defaultOptions.terrain);
+
+    this.setCoordinates(options.coordinates || defaultOptions.coordinates);
+  }
+
+  /**
+   * Whether the clipping polygon object is active or not
+   */
+  get active(): boolean {
+    return this._state === ClippingPolygonObjectState.ACTIVE;
+  }
+
+  get layerNames(): string[] | 'all' {
+    return this._layerNames;
+  }
+
+  get terrain(): boolean {
+    return this._terrain;
+  }
+
+  set terrain(terrain: boolean) {
+    check(terrain, Boolean);
+
+    if (this._terrain !== terrain) {
+      this._terrain = terrain;
+      this.terrainChanged.raiseEvent(this._terrain);
+    }
+  }
+
+  get clippingPolygon(): ClippingPolygon | undefined {
+    return this._clippingPolygon;
+  }
+
+  get coordinates(): readonly Readonly<Coordinate>[] {
+    return this._coordinates;
+  }
+
+  /**
+   * Set polygon coordinates from an array of geographic wgs84 coordinates
+   * @param coordinates
+   */
+  setCoordinates(coordinates: Coordinate[]): void {
+    check(coordinates, [[Number]]);
+
+    if (coordinates.length < 3) {
+      getLogger('ClippingPolygonObject').error(
+        'At least 3 coordinates are required!',
+      );
+      return;
+    }
+
+    if (deepEqual(this._coordinates, coordinates)) {
+      getLogger('ClippingPolygonObject').error(
+        'The provided coordinates are already set!',
+      );
+      return;
+    }
+
+    const positions = coordinates.map((c) => {
+      return Cartesian3.fromDegrees(c[0], c[1], c[2]);
+    });
+    this._coordinates = structuredClone(coordinates);
+
+    const oldValue = this._clippingPolygon;
+    const newValue = new ClippingPolygon({ positions });
+    this._clippingPolygon = newValue;
+    this.clippingPolygonChanged.raiseEvent({ oldValue, newValue });
+  }
+
+  setLayerNames(layerNames: string[] | 'all'): void {
+    check(layerNames, oneOf([String], 'all'));
+
+    if (!deepEqual(this._layerNames, layerNames)) {
+      const oldValue = this._layerNames;
+      this._layerNames = getLayerNamesClone(layerNames);
+      this.layersChanged.raiseEvent({
+        newValue: layerNames,
+        oldValue,
+      });
+    }
+  }
+
+  activate(): void {
+    if (this._state === ClippingPolygonObjectState.INACTIVE) {
+      this._state = ClippingPolygonObjectState.ACTIVE;
+      this.stateChanged.raiseEvent(this._state);
+    }
+  }
+
+  deactivate(): void {
+    if (this._state === ClippingPolygonObjectState.ACTIVE) {
+      this._state = ClippingPolygonObjectState.INACTIVE;
+      this.stateChanged.raiseEvent(this._state);
+    }
+  }
+
+  toJSON(): ClippingPolygonObjectOptions {
+    const config: ClippingPolygonObjectOptions = {
+      ...super.toJSON(),
+      coordinates: structuredClone(this._coordinates),
+    };
+    const defaultOptions = ClippingPolygonObject.getDefaultOptions();
+
+    if (!deepEqual(this._layerNames, defaultOptions.layerNames)) {
+      config.layerNames = getLayerNamesClone(this._layerNames);
+    }
+
+    if (this._terrain !== defaultOptions.terrain) {
+      config.terrain = this._terrain;
+    }
+
+    if (this.activeOnStartup !== defaultOptions.activeOnStartup) {
+      config.activeOnStartup = this.activeOnStartup;
+    }
+
+    return config;
+  }
+
+  destroy(): void {
+    this.stateChanged.destroy();
+    this.clippingPolygonChanged.destroy();
+    this.layersChanged.destroy();
+    this.terrainChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default ClippingPolygonObject;

package/src/util/clipping/clippingPolygonObjectCollection.ts

@@ -0,0 +1,249 @@
+import { Cesium3DTileset } from '@vcmap-cesium/engine';
+import Collection from '../collection.js';
+import VcsEvent from '../../vcsEvent.js';
+import type VcsApp from '../../vcsApp.js';
+import type ClippingPolygonObject from './clippingPolygonObject.js';
+import {
+  addClippingPolygon,
+  addClippingPolygonObjectToMap,
+  getTargetTilesets,
+  removeClippingPolygon,
+  removeClippingPolygonFromMap,
+} from './clippingPolygonHelper.js';
+import { vcsLayerName } from '../../layer/layerSymbols.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import MapState from '../../map/mapState.js';
+
+class ClippingPolygonObjectCollection extends Collection<ClippingPolygonObject> {
+  private _app: VcsApp;
+
+  private _listener: Array<() => void>;
+
+  private _mapListener: Map<string, () => void> = new Map();
+
+  private _itemListener: Map<string, () => void> = new Map();
+
+  stateChanged: VcsEvent<ClippingPolygonObject> = new VcsEvent();
+
+  constructor(app: VcsApp) {
+    super();
+
+    this._app = app;
+
+    this._listener = [
+      this.added.addEventListener((item) => {
+        this._itemListener.set(item.name, this._setItemListener(item));
+        if (item.activeOnStartup) {
+          item.activate();
+        }
+      }),
+      this.removed.addEventListener((item) => {
+        if (item.active) {
+          const maps = this._getActiveCesiumMaps();
+          maps.forEach((map) => {
+            removeClippingPolygonFromMap(
+              map,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            );
+          });
+        }
+        if (this._itemListener.has(item.name)) {
+          this._itemListener.get(item.name)?.();
+          this._itemListener.delete(item.name);
+        }
+      }),
+      this._app.maps.added.addEventListener((map) => {
+        if (map instanceof CesiumMap) {
+          this._mapListener.set(map.name, this._setMapListener(map));
+        }
+      }),
+      this._app.maps.removed.addEventListener((map) => {
+        if (map instanceof CesiumMap) {
+          this._array.forEach((item) => {
+            removeClippingPolygonFromMap(
+              map,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            );
+          });
+          if (this._mapListener.has(map.name)) {
+            this._mapListener.get(map.name)?.();
+            this._mapListener.delete(map.name);
+          }
+        }
+      }),
+      this._app.maps.replaced.addEventListener(({ old }) => {
+        if (old instanceof CesiumMap) {
+          this._array.forEach((item) => {
+            removeClippingPolygonFromMap(
+              old,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            );
+          });
+          if (this._mapListener.has(old.name)) {
+            this._mapListener.get(old.name)?.();
+            this._mapListener.delete(old.name);
+          }
+        }
+      }),
+    ];
+  }
+
+  _getActiveCesiumMaps(): CesiumMap[] {
+    return this._app.maps
+      .getByType(CesiumMap.className)
+      .filter((map) => map.active) as CesiumMap[];
+  }
+
+  _setMapListener(map: CesiumMap): () => void {
+    const listener = [
+      map.stateChanged.addEventListener((state) => {
+        if (state === MapState.INACTIVE) {
+          this._array.forEach((item) => {
+            removeClippingPolygonFromMap(
+              map,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            );
+          });
+        } else if (state === MapState.ACTIVE) {
+          this._array
+            .filter((item) => item.active)
+            .forEach((item) => {
+              addClippingPolygonObjectToMap(
+                map,
+                item.clippingPolygon,
+                item.terrain,
+                item.layerNames,
+              );
+            });
+        }
+      }),
+      map.visualizationAdded.addEventListener((v) => {
+        if (v instanceof Cesium3DTileset) {
+          this._array
+            .filter(
+              (item) =>
+                item.active &&
+                (item.layerNames === 'all' ||
+                  item.layerNames.includes(v[vcsLayerName])),
+            )
+            .forEach((item) => {
+              addClippingPolygon(v, item.clippingPolygon);
+            });
+        }
+      }),
+      map.visualizationRemoved.addEventListener((v) => {
+        if (v instanceof Cesium3DTileset) {
+          this._array
+            .filter(
+              (item) =>
+                item.layerNames === 'all' ||
+                item.layerNames.includes(v[vcsLayerName]),
+            )
+            .forEach((item) => {
+              removeClippingPolygon(v, item.clippingPolygon);
+            });
+        }
+      }),
+    ];
+
+    return () => listener.forEach((cb) => cb());
+  }
+
+  _setItemListener(item: ClippingPolygonObject): () => void {
+    const listener = [
+      item.stateChanged.addEventListener(() => {
+        const maps = this._getActiveCesiumMaps();
+        if (item.active) {
+          maps.forEach((map) =>
+            addClippingPolygonObjectToMap(
+              map,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            ),
+          );
+        } else {
+          maps.forEach((map) =>
+            removeClippingPolygonFromMap(
+              map,
+              item.clippingPolygon,
+              item.terrain,
+              item.layerNames,
+            ),
+          );
+        }
+      }),
+      item.clippingPolygonChanged.addEventListener(({ oldValue, newValue }) => {
+        if (item.active) {
+          const maps = this._getActiveCesiumMaps();
+          maps.forEach((map) =>
+            removeClippingPolygonFromMap(
+              map,
+              oldValue,
+              item.terrain,
+              item.layerNames,
+            ),
+          );
+          maps.forEach((map) =>
+            addClippingPolygonObjectToMap(
+              map,
+              newValue,
+              item.terrain,
+              item.layerNames,
+            ),
+          );
+        }
+      }),
+      item.terrainChanged.addEventListener(() => {
+        if (item.active) {
+          const globes = this._getActiveCesiumMaps()
+            .map((map) => map.getScene()?.globe)
+            .filter((g) => !!g);
+          if (item.terrain) {
+            globes.forEach((g) => addClippingPolygon(g, item.clippingPolygon));
+          } else {
+            globes.forEach((g) =>
+              removeClippingPolygon(g, item.clippingPolygon),
+            );
+          }
+        }
+      }),
+      item.layersChanged.addEventListener(({ newValue, oldValue }) => {
+        const maps = this._getActiveCesiumMaps();
+        maps.forEach((map) => {
+          const old = getTargetTilesets(map, oldValue);
+          const tilesets = getTargetTilesets(map, newValue);
+
+          const added = tilesets.filter((i) => !old.includes(i));
+          const removed = old.filter((i) => !tilesets.includes(i));
+
+          removed.forEach((tileset) => {
+            removeClippingPolygon(tileset, item.clippingPolygon);
+          });
+          added.forEach((tileset) => {
+            addClippingPolygon(tileset, item.clippingPolygon);
+          });
+        });
+      }),
+    ];
+
+    return () => listener.forEach((cb) => cb());
+  }
+
+  destroy(): void {
+    this._listener.forEach((cb) => cb());
+    this._mapListener.forEach((cb) => cb());
+    this._itemListener.forEach((cb) => cb());
+    super.destroy();
+  }
+}
+
+export default ClippingPolygonObjectCollection;

package/src/util/layerCollection.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { parseBoolean } from '@vcsuite/parsers';
 import { check } from '@vcsuite/check';
 import IndexedCollection from './indexedCollection.js';
 import ExclusiveManager from './exclusiveManager.js';
@@ -7,6 +7,9 @@ import VcsEvent from '../vcsEvent.js';
 import GlobalHider from '../layer/globalHider.js';
 // eslint-disable-next-line import/no-named-default
 import type { default as Layer, SplitLayer } from '../layer/layer.js';
+import VectorClusterGroupCollection from '../vectorCluster/vectorClusterGroupCollection.js';
+import type VectorLayer from '../layer/vectorLayer.js';
+import { destroyCollection } from '../vcsModuleHelpers.js';
 
 /**
  * The largest integer zindex which can be safely assigned to a layer (equal to Number.MAX_SAFE_INTEGER)
@@ -14,6 +17,11 @@ import type { default as Layer, SplitLayer } from '../layer/layer.js';
  */
 export const maxZIndex = Number.MAX_SAFE_INTEGER;
 
+export type LayerCollectionOptions = {
+  vectorClusterGroupCollection?: VectorClusterGroupCollection;
+  destroyVectorClusterGroupCollection?: boolean;
+};
+
 /**
  * A collection of layers. Manages rendering order and layer exclusivity. Emits state changes for convenience. Passed to
  * {@link Map} for layers available to said map. Layers must have unique names.
@@ -57,6 +65,8 @@ class LayerCollection extends IndexedCollection<Layer> {
    */
   private _globalHider: GlobalHider;
 
+  private _vectorClusterGroups: VectorClusterGroupCollection;
+
   /**
    * Locale for this layerCollection, will be synchronized by the vcsApp, if part of an vcsApp.
    * This Locale will be set on all Member Layers. On setting the Locale this will trigger a reload of all locale
@@ -64,7 +74,11 @@ class LayerCollection extends IndexedCollection<Layer> {
    */
   private _locale: string;
 
-  constructor() {
+  private _vectorClusterGroupListeners: (() => void) | undefined;
+
+  destroyVectorClusterGroupCollection: boolean;
+
+  constructor(options: LayerCollectionOptions = {}) {
     super();
 
     this._layerEventListeners = {};
@@ -73,6 +87,18 @@ class LayerCollection extends IndexedCollection<Layer> {
     this.exclusiveManager = new ExclusiveManager();
     this._globalHider = new GlobalHider();
     this._locale = 'en';
+    if (options.vectorClusterGroupCollection) {
+      this._vectorClusterGroups = options.vectorClusterGroupCollection;
+    } else {
+      this._vectorClusterGroups = new VectorClusterGroupCollection(
+        this._globalHider,
+      );
+    }
+    this.destroyVectorClusterGroupCollection = parseBoolean(
+      options.destroyVectorClusterGroupCollection,
+      !options.vectorClusterGroupCollection,
+    );
+    this._setupVectorClusterGroupListeners();
   }
 
   /**
@@ -102,6 +128,7 @@ class LayerCollection extends IndexedCollection<Layer> {
     this._array.forEach((layer) => {
       layer.setGlobalHider(this._globalHider);
     });
+    this.vectorClusterGroups.globalHider = this._globalHider;
   }
 
   get locale(): string {
@@ -119,6 +146,10 @@ class LayerCollection extends IndexedCollection<Layer> {
     }
   }
 
+  get vectorClusterGroups(): VectorClusterGroupCollection {
+    return this._vectorClusterGroups;
+  }
+
   private _listenToLayerEvents(layer: Layer): void {
     const stateListener = layer.stateChanged.addEventListener(
       (state: LayerState) => {
@@ -148,6 +179,25 @@ class LayerCollection extends IndexedCollection<Layer> {
         ),
       );
     }
+
+    if ((layer as VectorLayer).vectorClusterGroupChanged) {
+      listeners.push(
+        (layer as VectorLayer).vectorClusterGroupChanged.addEventListener(
+          ({ newGroup, oldGroup }) => {
+            if (oldGroup) {
+              this._vectorClusterGroups
+                .getByKey(oldGroup)
+                ?.removeLayer(layer as VectorLayer);
+            }
+            if (newGroup) {
+              this._vectorClusterGroups
+                .getByKey(newGroup)
+                ?.addLayer(layer as VectorLayer);
+            }
+          },
+        ),
+      );
+    }
     this._layerEventListeners[layer.name] = listeners;
   }
 
@@ -158,7 +208,7 @@ class LayerCollection extends IndexedCollection<Layer> {
    */
   private _findZIndexPosition(zIndex: number): number | null {
     const usedIndex = this._array.findIndex(
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       (l) => l[this._zIndexSymbol] > zIndex,
     );
     return usedIndex > -1 ? usedIndex : null;
@@ -173,7 +223,7 @@ class LayerCollection extends IndexedCollection<Layer> {
   private _zIndexChanged(layer: Layer): void {
     const currentIndex = this.indexOf(layer);
     if (currentIndex > -1) {
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       layer[this._zIndexSymbol] = layer.zIndex;
       let zIndexPosition = this._findZIndexPosition(layer.zIndex);
       if (
@@ -197,29 +247,43 @@ class LayerCollection extends IndexedCollection<Layer> {
    */
   private _ensureLocalZIndex(layer: Layer): void {
     const currentIndex = this.indexOf(layer);
-    // @ts-ignore
+    // @ts-expect-error: z index is undefined
     const currentLayerZIndex = layer[this._zIndexSymbol] as number;
     if (currentIndex > 0) {
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       const below: number = this._array[currentIndex - 1][
         this._zIndexSymbol
       ] as number;
       if (below > currentLayerZIndex) {
-        // @ts-ignore
+        // @ts-expect-error: z index is undefined
         layer[this._zIndexSymbol] = below;
       }
     }
 
     if (currentIndex < this._array.length - 1) {
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       const above = this._array[currentIndex + 1][this._zIndexSymbol] as number;
       if (above < currentLayerZIndex) {
-        // @ts-ignore
+        // @ts-expect-error: z index is undefined
         layer[this._zIndexSymbol] = above;
       }
     }
   }
 
+  private _setupVectorClusterGroupListeners(): void {
+    this._vectorClusterGroupListeners =
+      this._vectorClusterGroups.added.addEventListener((collection) => {
+        this._array
+          .filter(
+            (layer) =>
+              (layer as VectorLayer).vectorClusterGroup === collection.name,
+          )
+          .forEach((layer) => {
+            collection.addLayer(layer as VectorLayer);
+          });
+      });
+  }
+
   /**
    * Adds a layer to the collection. Can optionally be passed an index at which to insert the layer.
    * The layer locale will be set to the same locale of the layerCollection. This will trigger a forceRedraw
@@ -235,13 +299,18 @@ class LayerCollection extends IndexedCollection<Layer> {
     }
     const insertedAt = super.add(layer, usedIndex);
     if (insertedAt != null) {
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       layer[this._zIndexSymbol] = layer.zIndex;
       layer.setGlobalHider(this._globalHider);
       layer.locale = this.locale;
       this._ensureLocalZIndex(layer);
       this._listenToLayerEvents(layer);
       this.exclusiveManager.registerLayer(layer);
+      if ((layer as VectorLayer).vectorClusterGroup) {
+        this._vectorClusterGroups
+          .getByKey((layer as VectorLayer).vectorClusterGroup)
+          ?.addLayer(layer as VectorLayer);
+      }
     }
     return insertedAt;
   }
@@ -253,10 +322,15 @@ class LayerCollection extends IndexedCollection<Layer> {
       });
       delete this._layerEventListeners[layer.name];
     }
-    // @ts-ignore
+    // @ts-expect-error: z index is undefined
     delete layer[this._zIndexSymbol];
     layer.setGlobalHider();
     this.exclusiveManager.unregisterLayer(layer);
+    if ((layer as VectorLayer).vectorClusterGroup) {
+      this._vectorClusterGroups
+        .getByKey((layer as VectorLayer).vectorClusterGroup)
+        ?.removeLayer(layer as VectorLayer);
+    }
     return super._remove(layer);
   }
 
@@ -267,7 +341,7 @@ class LayerCollection extends IndexedCollection<Layer> {
         r();
       });
     this._array.forEach((l) => {
-      // @ts-ignore
+      // @ts-expect-error: z index is undefined
       delete l[this._zIndexSymbol];
     });
 
@@ -286,6 +360,10 @@ class LayerCollection extends IndexedCollection<Layer> {
     this._layerEventListeners = {};
     this.exclusiveManager.destroy();
     this._globalHider.destroy();
+    this._vectorClusterGroupListeners?.();
+    if (this.destroyVectorClusterGroupCollection) {
+      destroyCollection(this._vectorClusterGroups);
+    }
     super.destroy();
   }
 }