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

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

@@ -0,0 +1,103 @@
+import { LinearRing } from 'ol/geom.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { cartesian2DDistance } from '../../math.js';
+import {
+  createVertex,
+  pointOnLine2D,
+  pointOnLine3D,
+} from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+
+/**
+ * @typedef {Object} VertexInsertedEvent
+ * @property {import("@vcmap/core").Vertex} vertex
+ * @property {number} index
+ */
+
+/**
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class InsertVertexInteraction extends AbstractInteraction {
+  /**
+   * @param {import("ol").Feature<import("ol/geom").LineString|import("ol/geom").Polygon>} feature
+   * @param {import("ol/geom").LineString|import("ol/geom").LinearRing} geometry
+   */
+  constructor(feature, geometry) {
+    super(EventType.CLICK, ModificationKeyType.NONE);
+
+    /**
+     * @type {import("@vcmap/core").VcsEvent<VertexInsertedEvent>}
+     */
+    this.vertexInserted = new VcsEvent();
+    /**
+     * @type {import("ol").Feature<import("ol/geom").LineString|import("ol/geom").Polygon>}
+     * @private
+     */
+    this._feature = feature;
+    /**
+     * @type {import("ol/geom").LineString|import("ol/geom").LinearRing}
+     * @private
+     */
+    this._geometry = geometry;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._isLinearRing = this._geometry instanceof LinearRing;
+    this.setActive();
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    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 event;
+  }
+
+  destroy() {
+    this.vertexInserted.destroy();
+    super.destroy();
+  }
+}
+
+export default InsertVertexInteraction;

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

@@ -0,0 +1,119 @@
+import DragPan from 'ol/interaction/DragPan.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { handlerSymbol, vertexSymbol } from '../editorSymbols.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+
+/**
+ * @param {import("@vcmap/core").BaseOLMap} map
+ * @returns {function():void}
+ */
+function suspendOpenlayerMap(map) {
+  const dragPan = /** @type {import("ol/interaction").DragPan} */ (
+    map.olMap
+      .getInteractions()
+      .getArray()
+      .find((i) => i instanceof DragPan)
+  );
+
+  if (dragPan) {
+    dragPan.setActive(false);
+    return () => {
+      dragPan.setActive(true);
+    };
+  }
+  return () => {};
+}
+
+/**
+ * @param {import("@vcmap/core").CesiumMap} map
+ * @returns {function():void}
+ */
+function suspendCesiumMap(map) {
+  function getOriginalEventTypes(types) {
+    if (Array.isArray(types)) {
+      return types.slice();
+    } else if (typeof types === 'object') {
+      return { ...types };
+    }
+    return types;
+  }
+
+  const originalScreenSpaceEvents = {};
+  const { screenSpaceCameraController } = map.getScene();
+  ['lookEventTypes', 'tiltEventTypes', 'rotateEventTypes'].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 {
+  constructor() {
+    super(EventType.MOVE, ModificationKeyType.ALL);
+    /**
+     * @type {function():void}
+     * @private
+     */
+    this._clear = () => {};
+
+    this.setActive();
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    this.reset();
+    if (
+      event.feature &&
+      (event.feature[vertexSymbol] || event.feature[handlerSymbol])
+    ) {
+      if (event.map.className === 'CesiumMap') {
+        this._clear = suspendCesiumMap(
+          /** @type {import("@vcmap/core").CesiumMap} */ (event.map),
+        );
+      } else {
+        this._clear = suspendOpenlayerMap(
+          /** @type {import("@vcmap/core").OpenlayersMap|import("@vcmap/core").ObliqueMap} */ (
+            event.map
+          ),
+        );
+      }
+    }
+    return event;
+  }
+
+  /**
+   * Resets the event handlers for the currently suspended map
+   */
+  reset() {
+    this._clear();
+    this._clear = () => {};
+  }
+}
+
+export default MapInteractionController;

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

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

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

@@ -0,0 +1,152 @@
+import AbstractInteraction 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.
+ * @enum {string}
+ * @property {string} SINGLE
+ * @property {string} MULTI
+ */
+export const SelectionMode = {
+  SINGLE: 'single',
+  MULTI: 'multi',
+};
+
+/**
+ * A class to handle mouse over effects on features for select sessions.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class SelectFeatureMouseOverInteraction extends AbstractInteraction {
+  /**
+   * @param {string} layerName Name of the layer for which the mouse over effect should accur.
+   * @param {SelectSingleFeatureInteraction | SelectMultiFeatureInteraction} selectFeatureInteraction The select feature interaction that handles the feature selection. Supports both, single and multi selection.
+   */
+  constructor(layerName, selectFeatureInteraction) {
+    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);
+    /** @type {SelectSingleFeatureInteraction | SelectMultiFeatureInteraction} */
+    this._selectFeatureInteraction = selectFeatureInteraction;
+    /** @type {SelectionMode} */
+    this.selectionMode = selectionMode;
+    /**
+     * The feature that is currently hovered and belongs to the layer with the layerName.
+     * @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|null}
+     * @private
+     */
+    this._currentFeature = null;
+    /**
+     * The layer name to react to
+     * @type {string}
+     */
+    this.layerName = layerName;
+    /**
+     * @type {CSSStyleDeclaration}
+     * @private
+     */
+    this.cursorStyle = document.body.style;
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (event.feature && event.feature[vcsLayerName] === this.layerName) {
+      this._currentFeature =
+        /** @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} */
+        (event.feature);
+    } else {
+      this._currentFeature = null;
+    }
+    this._evaluate(event.key);
+    return event;
+  }
+
+  /**
+   * @inheritDoc
+   * @param {ModificationKeyType} modifier
+   */
+  modifierChanged(modifier) {
+    this._evaluate(modifier);
+  }
+
+  /**
+   * @inheritDoc
+   * @param {(boolean|number)=} active
+   */
+  setActive(active) {
+    super.setActive(active);
+    this.reset();
+  }
+
+  /**
+   * Reset the cursorStyle to auto
+   */
+  reset() {
+    if (this.cursorStyle && this.cursorStyle.cursor) {
+      this.cursorStyle.cursor = cursorMap.auto;
+    }
+  }
+
+  /**
+   * @param {ModificationKeyType} modifier
+   * @private
+   */
+  _evaluate(modifier) {
+    if (this._currentFeature) {
+      const isCtrlPressed =
+        this.selectionMode === SelectionMode.MULTI &&
+        modifier & ModificationKeyType.CTRL;
+      const isSelected = this._selectFeatureInteraction.hasFeatureId(
+        this._currentFeature.getId(),
+      );
+
+      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];
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this.reset();
+    this.cursorStyle = null;
+    super.destroy();
+  }
+}
+
+export default SelectFeatureMouseOverInteraction;

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

@@ -0,0 +1,165 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { isTiledFeature } from '../../../layer/featureStoreLayer.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
+ * @extends {AbstractInteraction}
+ * @implements {SelectFeatureInteraction}
+ */
+class SelectMultiFeatureInteraction extends AbstractInteraction {
+  /**
+   * @param {import("@vcmap/core").VectorLayer} layer
+   */
+  constructor(layer) {
+    super(EventType.CLICK, ModificationKeyType.NONE | ModificationKeyType.CTRL);
+    /**
+     * @type {import("@vcmap/core").VectorLayer|import("@vcmap/core").FeatureStoreLayer}
+     * @private
+     */
+    this._layer = layer;
+    /**
+     * @type {Map<string|number, import("ol").Feature>}
+     * @private
+     */
+    this._selectedFeatures = new Map();
+    /**
+     * @type {VcsEvent<Array<import("ol").Feature>>}
+     * @private
+     */
+    this._featuresChanged = new VcsEvent();
+    this.setActive();
+  }
+
+  /**
+   * Event raised when the feature selection changes. Will be called with an array of features or an empty array, when no feature is selected
+   * @type {VcsEvent<Array<import("ol").Feature>>}
+   * @readonly
+   */
+  get featuresChanged() {
+    return this._featuresChanged;
+  }
+
+  /**
+   * @returns {Array<import("ol").Feature>}
+   */
+  get selected() {
+    return [...this._selectedFeatures.values()];
+  }
+
+  /**
+   * Checks if a feature with a spicific id is selected.
+   * @param {string | number} id
+   * @returns {boolean}
+   */
+  hasFeatureId(id) {
+    return this._selectedFeatures.has(id);
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (event.feature && event.feature[vcsLayerName] === this._layer.name) {
+      if (event.key & ModificationKeyType.CTRL) {
+        event.stopPropagation = true;
+        await this._modifySelectionSet(event.feature);
+      } else if (
+        !this._selectedFeatures.has(event.feature.getId()) ||
+        (this._selectedFeatures.has(event.feature.getId()) &&
+          this._selectedFeatures.size > 1)
+      ) {
+        event.stopPropagation = true;
+        await this.setSelected([event.feature]);
+      }
+    } else if (!(event.key & ModificationKeyType.CTRL)) {
+      this.clear();
+    }
+    return event;
+  }
+
+  /**
+   * @param {Array<import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity> | import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} features
+   * @returns {Promise<void>}
+   */
+  async setSelected(features) {
+    this._selectedFeatures.clear();
+    const featureArray = Array.isArray(features) ? features : [features];
+    const olFeatures = await Promise.all(
+      featureArray.map((f) => {
+        if (f[isTiledFeature]) {
+          return /** @type {import("@vcmap/core").FeatureStoreLayer} */ (
+            this._layer
+          ).switchStaticFeatureToDynamic(f.getId());
+        }
+        return f;
+      }),
+    );
+    olFeatures.forEach(
+      /** @param {import("ol").Feature} f */ (f) => {
+        this._selectedFeatures.set(f.getId(), f);
+      },
+    );
+
+    this._featuresChanged.raiseEvent(this.selected);
+  }
+
+  /**
+   * @param {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} feature
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _modifySelectionSet(feature) {
+    const id = feature.getId();
+    if (this._selectedFeatures.has(id)) {
+      this._selectedFeatures.delete(id);
+    } else {
+      let olFeature = feature;
+      if (feature[isTiledFeature]) {
+        olFeature =
+          await /** @type {import("@vcmap/core").FeatureStoreLayer} */ (
+            this._layer
+          ).switchStaticFeatureToDynamic(id);
+      }
+      this._selectedFeatures.set(
+        id,
+        /** @type {import("ol").Feature} */ (olFeature),
+      );
+    }
+
+    this._featuresChanged.raiseEvent(this.selected);
+  }
+
+  /**
+   * Clears the interaction, removing all features and calling the featureChange event with an empty array
+   */
+  clear() {
+    if (this._selectedFeatures.size > 0) {
+      this._selectedFeatures.clear();
+      this._featuresChanged.raiseEvent([]);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._selectedFeatures.clear();
+    this._featuresChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default SelectMultiFeatureInteraction;

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

@@ -0,0 +1,120 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { isTiledFeature } from '../../../layer/featureStoreLayer.js';
+
+/**
+ * Class to select features for editing.
+ * Static FeatureStore features will be converted into their dynamic form
+ * @class
+ * @extends {AbstractInteraction}
+ * @implements {SelectFeatureInteraction}
+ */
+class SelectSingleFeatureInteraction extends AbstractInteraction {
+  /**
+   * @param {import("@vcmap/core").VectorLayer} layer
+   */
+  constructor(layer) {
+    super(EventType.CLICK, ModificationKeyType.NONE);
+    /**
+     * @type {import("@vcmap/core").VectorLayer|import("@vcmap/core").FeatureStoreLayer}
+     * @private
+     */
+    this._layer = layer;
+    /**
+     * @type {import("ol").Feature|null}
+     * @private
+     */
+    this._selectedFeature = null;
+    /**
+     * Event called when the feature changes. Called with null if the selection is cleared.
+     * @type {VcsEvent<import("ol").Feature|null>}
+     */
+    this.featureChanged = new VcsEvent();
+    this.setActive();
+  }
+
+  /**
+   * @returns {Array<import("ol").Feature>}
+   */
+  get selected() {
+    return this._selectedFeature ? [this._selectedFeature] : [];
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (event.feature && event.feature[vcsLayerName] === this._layer.name) {
+      if (
+        !(
+          this._selectedFeature &&
+          event.feature.getId() === this._selectedFeature.getId()
+        )
+      ) {
+        event.stopPropagation = true;
+        await this.setSelected(
+          /** @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} */
+          (event.feature),
+        );
+      }
+    } 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)
+   * @param {Array<import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity> | import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} feature
+   * @returns {Promise<void>}
+   */
+  async setSelected(feature) {
+    let olFeature = Array.isArray(feature) ? feature[0] : feature;
+    if (feature[isTiledFeature]) {
+      olFeature = await /** @type {import("@vcmap/core").FeatureStoreLayer} */ (
+        this._layer
+      ).switchStaticFeatureToDynamic(olFeature.getId());
+    }
+
+    this._selectedFeature = /** @type {import("ol").Feature} */ (olFeature);
+    this.featureChanged.raiseEvent(this._selectedFeature);
+  }
+
+  /**
+   * Checks if a feature with a spicific id is selected.
+   * @param {string | number} id
+   * @returns {boolean}
+   */
+  hasFeatureId(id) {
+    return this._selectedFeature?.getId() === id;
+  }
+
+  /**
+   * Clears the current selection, if there is one.
+   */
+  clear() {
+    if (this._selectedFeature) {
+      this._selectedFeature = null;
+      this.featureChanged.raiseEvent(null);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._selectedFeature = null;
+    this.featureChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default SelectSingleFeatureInteraction;