@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/util/editor/interactions/insertVertexInteraction.ts

@@ -0,0 +1,91 @@
+import { LinearRing, type LineString, type Polygon } from 'ol/geom.js';
+import type { Feature } from 'ol/index.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { cartesian2DDistance } from '../../math.js';
+import {
+  createVertex,
+  pointOnLine2D,
+  pointOnLine3D,
+  type Vertex,
+} from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+
+export type VertexInsertedEvent = {
+  vertex: Vertex;
+  index: number;
+};
+
+class InsertVertexInteraction extends AbstractInteraction {
+  vertexInserted = new VcsEvent<VertexInsertedEvent>();
+
+  private _feature: Feature<LineString | Polygon>;
+
+  private _geometry: LineString | LinearRing;
+
+  private _isLinearRing: boolean;
+
+  /**
+   * @param  feature
+   * @param  geometry
+   */
+  constructor(
+    feature: Feature<LineString | Polygon>,
+    geometry: LineString | LinearRing,
+  ) {
+    super(EventType.CLICK, ModificationKeyType.NONE);
+
+    this._feature = feature;
+    this._geometry = geometry;
+    this._isLinearRing = this._geometry instanceof LinearRing;
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature === this._feature) {
+      const lineCoords = this._geometry.getCoordinates();
+      const coordinate = event.positionOrPixel;
+      const closestCoord = this._geometry.getClosestPoint(coordinate);
+
+      if (this._isLinearRing) {
+        lineCoords.push(lineCoords[0]);
+      }
+      const distance = cartesian2DDistance(closestCoord, coordinate); // todo respect altitude mode here. e.g. distance3D
+      if (distance < event.map.getCurrentResolution(coordinate) * 5) {
+        const length = lineCoords.length - 1;
+        let i = 0;
+        for (i; i < length; i++) {
+          const onLine =
+            this._feature.get('olcs_altitudeMode') === 'clampToGround' // todo altitude mode
+              ? pointOnLine2D(lineCoords[i], lineCoords[i + 1], closestCoord)
+              : pointOnLine3D(lineCoords[i], lineCoords[i + 1], closestCoord);
+          if (onLine) {
+            break;
+          }
+        }
+
+        let index = i + 1;
+        if (this._isLinearRing && index === lineCoords.length) {
+          index = 0;
+        }
+        this.vertexInserted.raiseEvent({
+          vertex: createVertex(closestCoord),
+          index,
+        });
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this.vertexInserted.destroy();
+    super.destroy();
+  }
+}
+
+export default InsertVertexInteraction;

package/src/util/editor/interactions/mapInteractionController.ts

@@ -0,0 +1,119 @@
+import type { Feature } from 'ol/index.js';
+import DragPan from 'ol/interaction/DragPan.js';
+import type { CameraEventType, Scene } from '@vcmap-cesium/engine';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { handlerSymbol, vertexSymbol } from '../editorSymbols.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import type BaseOLMap from '../../../map/baseOLMap.js';
+import type CesiumMap from '../../../map/cesiumMap.js';
+
+function suspendOpenlayerMap(map: BaseOLMap): () => void {
+  const dragPan = map
+    .olMap!.getInteractions()
+    .getArray()
+    .find((i) => i instanceof DragPan);
+
+  if (dragPan) {
+    dragPan.setActive(false);
+    return () => {
+      dragPan.setActive(true);
+    };
+  }
+  return () => {};
+}
+
+type CachedScreenSpaceCameraControllerKeys =
+  | 'lookEventTypes'
+  | 'tiltEventTypes'
+  | 'rotateEventTypes';
+function suspendCesiumMap(map: CesiumMap): () => void {
+  function getOriginalEventTypes<T = any[] | CameraEventType | undefined>(
+    types: T,
+  ): T {
+    if (Array.isArray(types)) {
+      return types.slice() as T;
+    } else if (typeof types === 'object') {
+      return { ...types };
+    }
+    return types;
+  }
+
+  const originalScreenSpaceEvents: Partial<
+    Record<
+      CachedScreenSpaceCameraControllerKeys,
+      any[] | CameraEventType | undefined
+    >
+  > = {};
+  const { screenSpaceCameraController } = map.getScene() as Scene;
+  (
+    [
+      'lookEventTypes',
+      'tiltEventTypes',
+      'rotateEventTypes',
+    ] as CachedScreenSpaceCameraControllerKeys[]
+  ).forEach((eventTypes) => {
+    if (screenSpaceCameraController != null) {
+      originalScreenSpaceEvents[eventTypes] = getOriginalEventTypes(
+        screenSpaceCameraController[eventTypes],
+      );
+    }
+  });
+  screenSpaceCameraController.lookEventTypes = undefined;
+  screenSpaceCameraController.tiltEventTypes = undefined;
+  screenSpaceCameraController.rotateEventTypes = undefined;
+
+  return () => {
+    screenSpaceCameraController.lookEventTypes =
+      originalScreenSpaceEvents.lookEventTypes;
+    screenSpaceCameraController.tiltEventTypes =
+      originalScreenSpaceEvents.tiltEventTypes;
+    screenSpaceCameraController.rotateEventTypes =
+      originalScreenSpaceEvents.rotateEventTypes;
+  };
+}
+
+/**
+ * An interaction to suppress map interactions when handling editor features (e.g. dragPan)
+ */
+class MapInteractionController extends AbstractInteraction {
+  // eslint-disable-next-line class-methods-use-this
+  private _clear: () => void = () => {};
+
+  constructor() {
+    super(EventType.MOVE, ModificationKeyType.ALL);
+
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    this.reset();
+    if (
+      event.feature &&
+      ((event.feature as Feature)[vertexSymbol] ||
+        (event.feature as Feature)[handlerSymbol])
+    ) {
+      if (event.map.className === 'CesiumMap') {
+        this._clear = suspendCesiumMap(event.map as CesiumMap);
+      } else {
+        this._clear = suspendOpenlayerMap(event.map as BaseOLMap);
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  reset(): void {
+    this._clear();
+    this._clear = (): void => {};
+  }
+
+  destroy(): void {
+    this.reset();
+  }
+}
+
+export default MapInteractionController;

package/src/util/editor/interactions/removeVertexInteraction.ts

@@ -0,0 +1,37 @@
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { vertexSymbol } from '../editorSymbols.js';
+import VcsEvent from '../../../vcsEvent.js';
+import type { Vertex } from '../editorHelpers.js';
+
+/**
+ * This interaction will raise the passed in event for each feature clicked with the vertex symbol
+ * @extends {AbstractInteraction}
+ */
+class RemoveVertexInteraction extends AbstractInteraction {
+  vertexRemoved = new VcsEvent<Vertex>();
+
+  constructor() {
+    super(EventType.CLICK, ModificationKeyType.SHIFT);
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && (event.feature as Vertex)[vertexSymbol]) {
+      this.vertexRemoved.raiseEvent(event.feature as Vertex);
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this.vertexRemoved.destroy();
+    super.destroy();
+  }
+}
+
+export default RemoveVertexInteraction;

package/src/util/editor/interactions/selectFeatureMouseOverInteraction.ts

@@ -0,0 +1,132 @@
+import AbstractInteraction, {
+  EventAfterEventHandler,
+  EventFeature,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import SelectMultiFeatureInteraction from './selectMultiFeatureInteraction.js';
+import SelectSingleFeatureInteraction from './selectSingleFeatureInteraction.js';
+import { cursorMap } from './editGeometryMouseOverInteraction.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { mouseOverSymbol } from '../editorSymbols.js';
+
+/**
+ * Enumeration of editor selection modes.
+ */
+export enum SelectionMode {
+  SINGLE = 'single',
+  MULTI = 'multi',
+}
+
+/**
+ * A class to handle mouse over effects on features for select sessions.
+ */
+class SelectFeatureMouseOverInteraction extends AbstractInteraction {
+  private _selectFeatureInteraction:
+    | SelectSingleFeatureInteraction
+    | SelectMultiFeatureInteraction;
+
+  selectionMode: SelectionMode;
+
+  /**
+   * The feature that is currently hovered and belongs to the layer with the layerName.
+   */
+  private _currentFeature: EventFeature | null = null;
+
+  /**
+   * The layer name to react to
+   */
+  layerName: string;
+
+  private cursorStyle: CSSStyleDeclaration | undefined;
+
+  constructor(
+    layerName: string,
+    selectFeatureInteraction:
+      | SelectSingleFeatureInteraction
+      | SelectMultiFeatureInteraction,
+  ) {
+    let modkeys;
+    let selectionMode;
+    if (selectFeatureInteraction instanceof SelectSingleFeatureInteraction) {
+      modkeys = ModificationKeyType.NONE;
+      selectionMode = SelectionMode.SINGLE;
+    } else if (
+      selectFeatureInteraction instanceof SelectMultiFeatureInteraction
+    ) {
+      modkeys = ModificationKeyType.NONE | ModificationKeyType.CTRL;
+      selectionMode = SelectionMode.MULTI;
+    } else {
+      throw new Error('This interaction is not supported');
+    }
+
+    super(EventType.MOVE, modkeys);
+    this._selectFeatureInteraction = selectFeatureInteraction;
+    this.selectionMode = selectionMode;
+    this.layerName = layerName;
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && event.feature[vcsLayerName] === this.layerName) {
+      this._currentFeature = event.feature;
+    } else {
+      this._currentFeature = null;
+    }
+    if (!this.cursorStyle && event.map?.target) {
+      this.cursorStyle = event.map.target.style;
+    }
+    this._evaluate(event.key);
+    return Promise.resolve(event);
+  }
+
+  modifierChanged(modifier: ModificationKeyType): void {
+    this._evaluate(modifier);
+  }
+
+  setActive(active?: boolean | number): void {
+    super.setActive(active);
+    this.reset();
+  }
+
+  reset(): void {
+    if (this.cursorStyle && this.cursorStyle.cursor) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      this.cursorStyle = undefined;
+    }
+  }
+
+  private _evaluate(modifier: ModificationKeyType): void {
+    if (!this.cursorStyle) {
+      return;
+    }
+    if (this._currentFeature) {
+      const isCtrlPressed =
+        this.selectionMode === SelectionMode.MULTI &&
+        modifier & ModificationKeyType.CTRL;
+      const isSelected = this._selectFeatureInteraction.hasFeatureId(
+        this._currentFeature.getId() as string | number,
+      );
+
+      if (isCtrlPressed) {
+        this.cursorStyle.cursor = isSelected
+          ? cursorMap.removeFromSelection
+          : cursorMap.addToSelection;
+      } else {
+        this.cursorStyle.cursor = cursorMap.select;
+      }
+      this.cursorStyle[mouseOverSymbol] = this.id;
+    } else if (this.cursorStyle?.[mouseOverSymbol] === this.id) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      delete this.cursorStyle[mouseOverSymbol];
+    }
+  }
+
+  destroy(): void {
+    this.reset();
+    super.destroy();
+  }
+}
+
+export default SelectFeatureMouseOverInteraction;

package/src/util/editor/interactions/selectMultiFeatureInteraction.ts

@@ -0,0 +1,135 @@
+import type { Feature } from 'ol/index.js';
+import type { Cesium3DTileFeature } from '@vcmap-cesium/engine';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import FeatureStoreLayer, {
+  isTiledFeature,
+} from '../../../layer/featureStoreLayer.js';
+import type { SelectFeatureInteraction } from '../editorHelpers.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+import { SelectableFeatureType } from '../editorHelpers.js';
+
+/**
+ * Interaction to create a selection set from the given layer.
+ * Will use CTRL modifier key to add more features to the set.
+ * Clears the set if not clicking a feature
+ * Creates a new set when clicking a feature
+ * FeatureStore features will be converted to their dynamic state on selection.
+ */
+class SelectMultiFeatureInteraction
+  extends AbstractInteraction
+  implements SelectFeatureInteraction
+{
+  private _layer: VectorLayer;
+
+  private _selectedFeatures: Map<string | number, Feature> = new Map();
+
+  /**
+   * Event raised when the feature selection changes. Will be called with an array of features or an empty array, when no feature is selected
+   */
+  readonly featuresChanged = new VcsEvent<Feature[]>();
+
+  constructor(layer: VectorLayer) {
+    super(EventType.CLICK, ModificationKeyType.NONE | ModificationKeyType.CTRL);
+    this._layer = layer;
+    this.setActive();
+  }
+
+  get selected(): Feature[] {
+    return [...this._selectedFeatures.values()];
+  }
+
+  /**
+   * Checks if a feature with a spicific id is selected.
+   */
+  hasFeatureId(id: string | number): boolean {
+    return this._selectedFeatures.has(id);
+  }
+
+  async pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && event.feature[vcsLayerName] === this._layer.name) {
+      if (event.key & ModificationKeyType.CTRL) {
+        event.stopPropagation = true;
+        await this._modifySelectionSet(event.feature as SelectableFeatureType);
+      } else if (
+        !this._selectedFeatures.has(event.feature.getId() as number | string) ||
+        (this._selectedFeatures.has(event.feature.getId() as number | string) &&
+          this._selectedFeatures.size > 1)
+      ) {
+        event.stopPropagation = true;
+        await this.setSelected([event.feature as SelectableFeatureType]);
+      }
+    } else if (!(event.key & ModificationKeyType.CTRL)) {
+      this.clear();
+    }
+    return event;
+  }
+
+  async setSelected(
+    features: SelectableFeatureType[] | SelectableFeatureType,
+  ): Promise<void> {
+    this._selectedFeatures.clear();
+    const featureArray = Array.isArray(features) ? features : [features];
+    const olFeatures = await Promise.all(
+      featureArray.map((f) => {
+        if ((f as Cesium3DTileFeature)[isTiledFeature]) {
+          return (
+            this._layer as FeatureStoreLayer
+          ).switchStaticFeatureToDynamic(
+            f.getId() as number | string,
+          ) as Promise<Feature>;
+        }
+        return f as Feature;
+      }),
+    );
+    olFeatures.forEach((f) => {
+      this._selectedFeatures.set(f.getId() as string | number, f);
+    });
+
+    this.featuresChanged.raiseEvent(this.selected);
+  }
+
+  private async _modifySelectionSet(
+    feature: SelectableFeatureType,
+  ): Promise<void> {
+    const id = feature.getId() as string | number;
+    if (this._selectedFeatures.has(id)) {
+      this._selectedFeatures.delete(id);
+    } else {
+      let olFeature = feature;
+      if ((feature as Cesium3DTileFeature)[isTiledFeature]) {
+        olFeature = (await (
+          this._layer as FeatureStoreLayer
+        ).switchStaticFeatureToDynamic(id)) as Feature;
+      }
+      this._selectedFeatures.set(id, olFeature as Feature);
+    }
+
+    this.featuresChanged.raiseEvent(this.selected);
+  }
+
+  /**
+   * Clears the interaction, removing all features and calling the featureChange event with an empty array
+   */
+  clear(): void {
+    if (this._selectedFeatures.size > 0) {
+      this._selectedFeatures.clear();
+      this.featuresChanged.raiseEvent([]);
+    }
+  }
+
+  destroy(): void {
+    this._selectedFeatures.clear();
+    this.featuresChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default SelectMultiFeatureInteraction;

package/src/util/editor/interactions/selectSingleFeatureInteraction.ts

@@ -0,0 +1,108 @@
+import type { Feature } from 'ol/index.js';
+import { Cesium3DTileFeature } from '@vcmap-cesium/engine';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import FeatureStoreLayer, {
+  isTiledFeature,
+} from '../../../layer/featureStoreLayer.js';
+import type {
+  SelectableFeatureType,
+  SelectFeatureInteraction,
+} from '../editorHelpers.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+
+/**
+ * Class to select features for editing.
+ * Static FeatureStore features will be converted into their dynamic form
+ */
+class SelectSingleFeatureInteraction
+  extends AbstractInteraction
+  implements SelectFeatureInteraction
+{
+  private _layer: VectorLayer;
+
+  private _selectedFeature: Feature | null = null;
+
+  /**
+   * Event called when the feature changes. Called with null if the selection is cleared.
+   */
+  readonly featureChanged = new VcsEvent<Feature | null>();
+
+  constructor(layer: VectorLayer) {
+    super(EventType.CLICK, ModificationKeyType.NONE);
+
+    this._layer = layer;
+    this.setActive();
+  }
+
+  get selected(): Feature[] {
+    return this._selectedFeature ? [this._selectedFeature] : [];
+  }
+
+  async pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && event.feature[vcsLayerName] === this._layer.name) {
+      if (
+        !(
+          this._selectedFeature &&
+          event.feature.getId() === this._selectedFeature.getId()
+        )
+      ) {
+        event.stopPropagation = true;
+        await this.setSelected(event.feature as SelectableFeatureType);
+      }
+    } else {
+      this.clear();
+    }
+    return event;
+  }
+
+  /**
+   * Selects the given feature. if passed in a tiled feature store feature, it will be converted. Do not pass in uneditable features (feature which do not
+   * belong to the layer for which this interaction was created)
+   */
+  async setSelected(
+    feature: SelectableFeatureType[] | SelectableFeatureType,
+  ): Promise<void> {
+    let olFeature = Array.isArray(feature) ? feature[0] : feature;
+    if ((feature as Cesium3DTileFeature)[isTiledFeature]) {
+      olFeature = (await (
+        this._layer as FeatureStoreLayer
+      ).switchStaticFeatureToDynamic(olFeature.getId() as string)) as Feature;
+    }
+
+    this._selectedFeature = olFeature as Feature;
+    this.featureChanged.raiseEvent(this._selectedFeature);
+  }
+
+  /**
+   * Checks if a feature with a spicific id is selected.
+   */
+  hasFeatureId(id: string | number): boolean {
+    return this._selectedFeature?.getId() === id;
+  }
+
+  /**
+   * Clears the current selection, if there is one.
+   */
+  clear(): void {
+    if (this._selectedFeature) {
+      this._selectedFeature = null;
+      this.featureChanged.raiseEvent(null);
+    }
+  }
+
+  destroy(): void {
+    this._selectedFeature = null;
+    this.featureChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default SelectSingleFeatureInteraction;

package/src/util/editor/interactions/translateVertexInteraction.ts

@@ -0,0 +1,51 @@
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { vertexSymbol } from '../editorSymbols.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { Vertex } from '../editorHelpers.js';
+
+/**
+ * Class to translate a vertex. Will call the passed in vertex changed event with the changed vertex.
+ * Will modify the vertex in place
+ */
+class TranslateVertexInteraction extends AbstractInteraction {
+  readonly vertexChanged = new VcsEvent<Vertex>();
+
+  private _vertex: Vertex | null = null;
+
+  constructor() {
+    super(EventType.DRAGEVENTS);
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (this._vertex) {
+      this._vertex.getGeometry()!.setCoordinates(event.positionOrPixel);
+      this.vertexChanged.raiseEvent(this._vertex);
+
+      if (event.type & EventType.DRAGEND) {
+        this._vertex.unset('olcs_allowPicking');
+        this._vertex = null;
+      }
+      event.stopPropagation = true;
+    } else if (
+      event.type & EventType.DRAGSTART &&
+      event.feature &&
+      (event.feature as Vertex)[vertexSymbol]
+    ) {
+      this._vertex = event.feature as Vertex;
+      this._vertex.set('olcs_allowPicking', false);
+      event.stopPropagation = true;
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this.vertexChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default TranslateVertexInteraction;