@vcmap/core 5.0.0-rc.23 → 5.0.0-rc.24

package/src/util/editor/editFeaturesSession.js

@@ -0,0 +1,315 @@
+import { Circle, Fill, Style, Stroke } from 'ol/style.js';
+import { getLogger } from '@vcsuite/logger';
+
+import VcsEvent from '../../vcsEvent.js';
+import { SessionType, setupInteractionChain, setupScratchLayer } from './editorSessionHelpers.js';
+import SelectMultiFeatureInteraction from './interactions/selectMultiFeatureInteraction.js';
+import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
+import createTransformationHandler from './transformation/transformationHandler.js';
+import { TransformationMode } from './transformation/transformationTypes.js';
+import MapInteractionController from './interactions/mapInteractionController.js';
+import TranslateInteraction from './transformation/translateInteraction.js';
+import RotateInteraction from './transformation/rotateInteraction.js';
+import ScaleInteraction from './transformation/scaleInteraction.js';
+import { createSync, obliqueGeometry } from '../../layer/vectorSymbols.js';
+import ExtrudeInteraction from './transformation/extrudeInteraction.js';
+import { ModificationKeyType } from '../../interaction/interactionType.js';
+import ObliqueMap from '../../map/obliqueMap.js';
+import { ensureFeatureAbsolute } from './editorHelpers.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import EnsureHandlerSelectionInteraction from './interactions/ensureHandlerSelectionInteraction.js';
+
+/**
+ * @typedef {EditorSession} EditFeaturesSession
+ * @property {SelectMultiFeatureInteraction} featureSelection
+ * @property {TransformationMode} mode - read only access to the current mode
+ * @property {function(TransformationMode):void} setMode
+ * @property {import("@vcmap/core").VcsEvent<TransformationMode>} modeChanged
+ */
+
+/**
+ * Creates a selection set from the selected features. This maintains `createSync` symbol, highlight and allow picking on
+ * currently selected features and listens to changes until stopped.
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {SelectMultiFeatureInteraction} selectFeatureInteraction
+ * @param {import("ol/style").Style} highlightStyle
+ * @param {import("@vcmap/core").EventHandler} eventHandler
+ * @returns {function():void} un-highlight all and stop listening to changes
+ */
+function createSelectionSet(layer, selectFeatureInteraction, highlightStyle, eventHandler) {
+  let currentIds = new Set();
+  /** @type {Map<string|number, boolean|undefined>} */
+  const allowPickingMap = new Map();
+  const modifierChangedListener = eventHandler.modifierChanged.addEventListener((mod) => { // CTRL is used to modify the current selection set, we must allow picking again so you can deselect a feature
+    const allowPicking = mod === ModificationKeyType.CTRL;
+    selectFeatureInteraction.selectedFeatures.forEach((f) => { f.set('olcs_allowPicking', allowPicking); });
+  });
+
+  const clearFeature = (f) => {
+    delete f[createSync];
+    const allowPicking = allowPickingMap.get(f.getId());
+    if (allowPicking != null) {
+      f.set('olcs_allowPicking', allowPicking);
+    } else {
+      f.unset('olcs_allowPicking');
+    }
+  };
+
+  const featureChangedListener = selectFeatureInteraction.featuresChanged.addEventListener((newFeatures) => {
+    const newIds = new Set(newFeatures.map((f) => {
+      const id = f.getId();
+      if (!allowPickingMap.has(id)) {
+        allowPickingMap.set(id, f.get('olcs_allowPicking'));
+      }
+      f[createSync] = true;
+      f.set('olcs_allowPicking', false);
+      return id;
+    }));
+    const idsToHighlight = [];
+    newIds.forEach((id) => {
+      if (!currentIds.has(id)) {
+        idsToHighlight.push(id);
+      }
+    });
+
+    const idsToUnHighlight = [];
+    currentIds.forEach((id) => {
+      if (!newIds.has(id)) {
+        idsToUnHighlight.push(id);
+      }
+    });
+
+    layer.featureVisibility.unHighlight(idsToUnHighlight);
+    layer.featureVisibility.highlight(Object.fromEntries(idsToHighlight.map(id => [id, highlightStyle])));
+    layer.getFeaturesById(idsToUnHighlight)
+      .forEach(clearFeature);
+
+    currentIds = newIds;
+  });
+
+  return () => {
+    modifierChangedListener();
+    featureChangedListener();
+    if (currentIds.size > 0) {
+      const idsToUnHighlight = [...currentIds];
+      layer.getFeaturesById(idsToUnHighlight)
+        .forEach(clearFeature);
+      layer.featureVisibility.unHighlight(idsToUnHighlight);
+    }
+  };
+}
+
+/**
+ * @returns {import("ol/style").Style}
+ */
+function getDefaultHighlightStyle() {
+  const fill = new Fill({ color: 'rgba(76,175,80,0.2)' });
+  const stroke = new Stroke({ color: '#4CAF50', width: 2 });
+
+  return new Style({
+    fill,
+    stroke,
+    image: new Circle({
+      fill,
+      stroke,
+      radius: 14,
+    }),
+  });
+}
+
+/**
+ * Creates an editor session to select, translate, rotate & scale the feature on a given layer
+ * @param {import("@vcmap/core").VcsApp} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {TransformationMode=} [initialMode=TransformationMode.TRANSLATE]
+ * @param {import("ol/style").Style=} [highlightStyle]
+ * @returns {EditFeaturesSession}
+ */
+function startEditFeaturesSession(
+  app,
+  layer,
+  initialMode = TransformationMode.TRANSLATE,
+  highlightStyle = getDefaultHighlightStyle(),
+) {
+  const scratchLayer = setupScratchLayer(app.layers);
+  /** @type {VcsEvent<void>} */
+  const stopped = new VcsEvent();
+  const {
+    interactionChain,
+    removed: interactionRemoved,
+    destroy: destroyInteractionChain,
+  } = setupInteractionChain(app.maps.eventHandler);
+  const selectFeatureInteraction = new SelectMultiFeatureInteraction(layer);
+  const destroySelectionSet = createSelectionSet(
+    layer,
+    selectFeatureInteraction,
+    highlightStyle,
+    app.maps.eventHandler,
+  );
+  interactionChain.addInteraction(selectFeatureInteraction);
+  interactionChain.addInteraction(new EnsureHandlerSelectionInteraction(selectFeatureInteraction));
+
+  const mapInteractionController = new MapInteractionController();
+  interactionChain.addInteraction(mapInteractionController);
+
+  const mouseOverInteraction = new EditFeaturesMouseOverInteraction(
+    layer.name,
+    selectFeatureInteraction,
+  );
+  interactionChain.addInteraction(mouseOverInteraction);
+
+  let mode = initialMode;
+  let destroyTransformation = () => {};
+  const createTransformations = () => {
+    destroyTransformation();
+    const transformationHandler = createTransformationHandler(
+      app.maps.activeMap,
+      layer,
+      selectFeatureInteraction,
+      scratchLayer,
+      mode,
+    );
+
+    let interaction;
+    if (mode === TransformationMode.TRANSLATE) {
+      interaction = new TranslateInteraction(transformationHandler);
+      interaction.translated.addEventListener(([dx, dy, dz]) => {
+        transformationHandler.translate(dx, dy, dz);
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.applyTransform((input, output) => {
+            const inputLength = input.length;
+            for (let i = 0; i < inputLength; i += 3) {
+              output[i] = input[i] + dx;
+              output[i + 1] = input[i + 1] + dy;
+              output[i + 2] = input[i + 2] + dz;
+            }
+            return output;
+          });
+        });
+      });
+    } else if (mode === TransformationMode.EXTRUDE) {
+      interaction = new ExtrudeInteraction(transformationHandler);
+      interaction.extruded.addEventListener((dz) => {
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          ensureFeatureAbsolute(f, layer, app.maps.activeMap);
+          let extrudedHeight = f.get('olcs_extrudedHeight') ?? 0;
+          extrudedHeight += dz;
+          f.set('olcs_extrudedHeight', extrudedHeight);
+        });
+      });
+    } else if (mode === TransformationMode.ROTATE) {
+      interaction = new RotateInteraction(transformationHandler);
+      interaction.rotated.addEventListener(({ angle }) => {
+        const { center } = transformationHandler;
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.rotate(angle, center);
+        });
+      });
+    } else if (mode === TransformationMode.SCALE) {
+      interaction = new ScaleInteraction(transformationHandler);
+      interaction.scaled.addEventListener(([sx, sy]) => {
+        const { center } = transformationHandler;
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.scale(sx, sy, center);
+        });
+      });
+    } else {
+      throw new Error(`Unknown transformation mode ${mode}`);
+    }
+
+    interactionChain.addInteraction(interaction);
+
+    destroyTransformation = () => {
+      interactionChain.removeInteraction(interaction);
+      interaction.destroy();
+      transformationHandler.destroy();
+    };
+  };
+
+  /**
+   * @type {VcsEvent<TransformationMode>}
+   */
+  const modeChanged = new VcsEvent();
+  const setMode = (newMode) => {
+    if (newMode !== mode) {
+      if (newMode === TransformationMode.EXTRUDE && !(app.maps.activeMap instanceof CesiumMap)) {
+        getLogger('EditFeaturesSession').warning('Cannot set extrude mode if map is not a CesiumMap');
+      } else {
+        mode = newMode;
+        createTransformations();
+        modeChanged.raiseEvent(mode);
+      }
+    }
+  };
+  /**
+   * @type {ObliqueMap|null}
+   */
+  let obliqueMap = null;
+  /**
+   * @type {function():void}
+   */
+  let obliqueImageChangedListener = () => {};
+  const mapChanged = (map) => {
+    obliqueImageChangedListener();
+    if (map instanceof ObliqueMap) {
+      selectFeatureInteraction.clear();
+      obliqueImageChangedListener = map.imageChanged.addEventListener(() => {
+        selectFeatureInteraction.clear();
+        createTransformations();
+      });
+      obliqueMap = map;
+    } else {
+      if (obliqueMap) {
+        selectFeatureInteraction.clear();
+      }
+      obliqueMap = null;
+      obliqueImageChangedListener = () => {};
+    }
+    if (mode === TransformationMode.EXTRUDE && !(map instanceof CesiumMap)) {
+      setMode(TransformationMode.TRANSLATE);
+    } else {
+      createTransformations();
+    }
+  };
+  const mapChangedListener = app.maps.mapActivated.addEventListener(mapChanged);
+  mapChanged(app.maps.activeMap);
+
+  selectFeatureInteraction.featuresChanged.addEventListener((selectedFeatures) => {
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = selectedFeatures.length === 0;
+    }
+  });
+
+  const stop = () => {
+    obliqueImageChangedListener();
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = true;
+    }
+    mapChangedListener();
+    destroyTransformation();
+    destroySelectionSet();
+    app.layers.remove(scratchLayer);
+    destroyInteractionChain();
+    stopped.raiseEvent();
+    stopped.destroy();
+    modeChanged.destroy();
+  };
+  interactionRemoved.addEventListener(stop);
+
+  return {
+    type: SessionType.EDIT_FEATURES,
+    featureSelection: selectFeatureInteraction,
+    stopped,
+    stop,
+    get mode() {
+      return mode;
+    },
+    modeChanged,
+    setMode,
+  };
+}
+
+export default startEditFeaturesSession;

package/src/util/editor/editGeometrySession.js

@@ -14,6 +14,7 @@ import geometryIsValid from './validateGeoemetry.js';
 import ObliqueMap from '../../map/obliqueMap.js';
 import { emptyStyle } from '../../style/styleHelpers.js';
 import MapInteractionController from './interactions/mapInteractionController.js';
+import { originalStyle } from '../../layer/featureVisibility.js';
 
 /**
  * @typedef {EditorSession} EditGeometrySession
@@ -228,6 +229,7 @@ function createEditSimplePolygonInteraction(feature, scratchLayer) {
 function createEditPointInteraction(feature, scratchLayer) {
   const vertex = createVertex(feature.getGeometry().getCoordinates());
   const featureStyle = feature.getStyle();
+  feature[originalStyle] = featureStyle;
   feature.setStyle(emptyStyle);
   scratchLayer.addFeatures([vertex]);
   const translateVertex = new TranslateVertexInteraction();
@@ -255,7 +257,7 @@ function createEditPointInteraction(feature, scratchLayer) {
  * @param {import("@vcmap/core").VectorLayer} layer
  * @returns {EditGeometrySession}
  */
-export default function startEditGeometrySession(app, layer) {
+function startEditGeometrySession(app, layer) {
   const {
     interactionChain,
     removed: interactionRemoved,
@@ -399,3 +401,5 @@ export default function startEditGeometrySession(app, layer) {
     stop,
   };
 }
+
+export default startEditGeometrySession;

package/src/util/editor/editorHelpers.js

@@ -1,7 +1,16 @@
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
-import { Cartesian2, Cartesian3, Math as CesiumMath, Plane } from '@vcmap/cesium';
-import Projection from '../projection.js';
+import {
+  Cartesian2,
+  Cartesian3,
+  Math as CesiumMath,
+  Plane,
+  Ray, IntersectionTests, Cartographic, HeightReference,
+} from '@vcmap/cesium';
+
+import { mercatorToCartesian } from '../math.js';
+import { getFlatCoordinatesFromGeometry } from '../geometryHelpers.js';
+import CesiumMap from '../../map/cesiumMap.js';
 import { vertexSymbol } from './editorSymbols.js';
 import Vector from '../../layer/vectorLayer.js';
 
@@ -27,14 +36,33 @@ let scratchCartesian31 = new Cartesian3();
 let scratchCartesian32 = new Cartesian3();
 let scratchCartesian33 = new Cartesian3();
 
+/**
+ * Returns the closest point on a 2D line. the Z index is taken from the point.
+ * @param {import("ol/coordinate").Coordinate} start - line segment start
+ * @param {import("ol/coordinate").Coordinate} end - line segment end
+ * @param {import("ol/coordinate").Coordinate} point - point to project
+ * @returns {!import("ol/coordinate").Coordinate}
+ */
+export function getClosestPointOn2DLine(start, end, point) {
+  scratchCartesian21 = Cartesian2.fromElements(end[0] - start[0], end[1] - start[1], scratchCartesian21);
+  if (scratchCartesian21.equals(Cartesian2.ZERO)) {
+    scratchCartesian21 = Cartesian2.fromElements(1, 1, scratchCartesian21);
+  }
+  scratchCartesian21 = Cartesian2.normalize(scratchCartesian21, scratchCartesian21);
+  scratchCartesian22 = Cartesian2.fromElements(point[0] - start[0], point[1] - start[1], scratchCartesian22);
+  const lambda = Cartesian2.dot(scratchCartesian21, scratchCartesian22);
+  scratchCartesian21 = Cartesian2.multiplyByScalar(scratchCartesian21, lambda, scratchCartesian21);
+  return [scratchCartesian21.x + start[0], scratchCartesian21.y + start[1], point[2]];
+}
+
 /**
  * @param {import("ol/coordinate").Coordinate} start - line segment start
  * @param {import("ol/coordinate").Coordinate} end - line segment end
  * @param {import("ol/coordinate").Coordinate} point - the point to project
- * @param {number=} [epsilon=CesiumMath.EPSILON5]
+ * @param {number=} epsilon
  * @returns {boolean}
  */
-export function pointOnLine3D(start, end, point, epsilon = CesiumMath.EPSILON5) {
+export function pointOnLine3D(start, end, point, epsilon) {
   scratchCartesian31 = Cartesian3
     .fromElements(end[0] - start[0], end[1] - start[1], end[2] - start[2], scratchCartesian31);
   scratchCartesian32 = Cartesian3
@@ -51,18 +79,17 @@ export function pointOnLine3D(start, end, point, epsilon = CesiumMath.EPSILON5)
 
   scratchCartesian31 = Cartesian3.normalize(scratchCartesian31, scratchCartesian31);
   scratchCartesian32 = Cartesian3.normalize(scratchCartesian32, scratchCartesian32);
-  return scratchCartesian31.equalsEpsilon(scratchCartesian32, epsilon);
+  return scratchCartesian31.equalsEpsilon(scratchCartesian32, epsilon || CesiumMath.EPSILON5);
 }
 
-
 /**
  * @param {import("ol/coordinate").Coordinate} start - line segment start
  * @param {import("ol/coordinate").Coordinate} end - line segment end
  * @param {import("ol/coordinate").Coordinate} point - the point to project
- * @param {number=} [epsilon=CesiumMath.EPSILON5]
+ * @param {number=} epsilon
  * @returns {boolean}
  */
-export function pointOnLine2D(start, end, point, epsilon = CesiumMath.EPSILON5) {
+export function pointOnLine2D(start, end, point, epsilon) {
   scratchCartesian21 = Cartesian2.fromElements(end[0] - start[0], end[1] - start[1], scratchCartesian21);
   scratchCartesian22 = Cartesian2.fromElements(point[0] - start[0], point[1] - start[1], scratchCartesian22);
   scratchCartesian23 = Cartesian2.fromElements(point[0] - end[0], point[1] - end[1], scratchCartesian23);
@@ -77,7 +104,7 @@ export function pointOnLine2D(start, end, point, epsilon = CesiumMath.EPSILON5)
   scratchCartesian21 = Cartesian2.normalize(scratchCartesian21, scratchCartesian21);
   scratchCartesian22 = Cartesian2.normalize(scratchCartesian22, scratchCartesian22);
 
-  return scratchCartesian21.equalsEpsilon(scratchCartesian22, epsilon);
+  return scratchCartesian21.equalsEpsilon(scratchCartesian22, epsilon || CesiumMath.EPSILON5);
 }
 
 /**
@@ -85,9 +112,8 @@ export function pointOnLine2D(start, end, point, epsilon = CesiumMath.EPSILON5)
  * @param {import("@vcmap/cesium").Scene} scene
  * @returns {!import("@vcmap/cesium").Plane}
  */
-export function createVerticalPlane(originCoordinates, scene) {
-  const wgs84 = Projection.mercatorToWgs84(originCoordinates);
-  scratchCartesian31 = Cartesian3.fromDegrees(wgs84[0], wgs84[1], wgs84[2]);
+export function createCameraVerticalPlane(originCoordinates, scene) {
+  scratchCartesian31 = mercatorToCartesian(originCoordinates, scratchCartesian31);
   scratchCartesian32 = scene.globe.ellipsoid.geodeticSurfaceNormal(scratchCartesian31, scratchCartesian32);
   scratchCartesian32 = Cartesian3.cross(scene.camera.rightWC, scratchCartesian32, scratchCartesian32);
   scratchCartesian32 = Cartesian3.normalize(scratchCartesian32, scratchCartesian32);
@@ -101,9 +127,87 @@ export function createVerticalPlane(originCoordinates, scene) {
  * @returns {!import("@vcmap/cesium").Plane}
  */
 export function createHorizontalPlane(originCoordinates, scene) {
-  const wgs84 = Projection.mercatorToWgs84(originCoordinates);
-  scratchCartesian31 = Cartesian3.fromDegrees(wgs84[0], wgs84[1], wgs84[2]);
+  scratchCartesian31 = mercatorToCartesian(originCoordinates, scratchCartesian31);
   scratchCartesian32 = scene.globe.ellipsoid.geodeticSurfaceNormal(scratchCartesian31, scratchCartesian32);
 
   return Plane.fromPointNormal(scratchCartesian31, scratchCartesian32);
 }
+
+/**
+ * @param {import("@vcmap/cesium").Plane} plane
+ * @param {import("@vcmap/cesium").Camera} camera
+ * @param {import("@vcmap/cesium").Cartesian2} windowPosition
+ * @returns {import("@vcmap/cesium").Cartographic}
+ */
+export function getCartographicFromPlane(plane, camera, windowPosition) {
+  const ray = camera.getPickRay(windowPosition, new Ray());
+  const intersection = IntersectionTests.rayPlane(ray, plane);
+  if (intersection) {
+    return Cartographic.fromCartesian(intersection);
+  }
+  return Cartographic.ZERO;
+}
+
+/**
+ * Drapes a geometry onto the terrain by placing each coordinate at its height.
+ * @param {import("ol/geom").Geometry} geometry
+ * @param {import("@vcmap/core").VcsMap} map
+ * @returns {Promise<void>}
+ */
+export async function drapeGeometryOnTerrain(geometry, map) {
+  if (map instanceof CesiumMap) {
+    const coordinates = geometry.getCoordinates();
+    const flats = getFlatCoordinatesFromGeometry(geometry, coordinates);
+    await map.getHeightFromTerrain(flats);
+    geometry.setCoordinates(coordinates);
+  }
+}
+
+/**
+ * Places a geometry onto the terrain at its lowest point.
+ * @param {import("ol/geom").Geometry} geometry
+ * @param {import("@vcmap/core").VcsMap} map
+ * @returns {Promise<void>}
+ */
+export async function placeGeometryOnTerrain(geometry, map) {
+  if (map instanceof CesiumMap) {
+    const coordinates = geometry.getCoordinates();
+    const flats = getFlatCoordinatesFromGeometry(geometry, coordinates);
+    await map.getHeightFromTerrain(flats);
+    let minHeight = Infinity;
+    flats.forEach((coord) => {
+      if (minHeight > coord[2]) {
+        minHeight = coord[2];
+      }
+    });
+    flats.forEach((coord) => {
+      coord[2] = minHeight;
+    });
+    geometry.setCoordinates(coordinates);
+  }
+}
+
+/**
+ * @param {import("ol").Feature} feature
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {import("@vcmap/core").VcsMap} cesiumMap
+ * @returns {Promise<void>}
+ */
+export async function ensureFeatureAbsolute(feature, layer, cesiumMap) {
+  const layerIsClamped = layer.vectorProperties.altitudeMode === HeightReference.CLAMP_TO_GROUND;
+  const altitudeMode = feature.get('olcs_altitudeMode');
+  if (altitudeMode === 'clampToGround' || (!altitudeMode && layerIsClamped)) {
+    feature.set('olcs_altitudeMode', 'absolute', true);
+    const geometry = feature.getGeometry();
+    if (geometry) {
+      await placeGeometryOnTerrain(geometry, cesiumMap);
+    }
+  }
+}
+
+/**
+ * @param {import("ol").Feature} feature
+ */
+export function clampFeature(feature) {
+  feature.set('olcs_altitudeMode', 'clampToGround');
+}

package/src/util/editor/editorSessionHelpers.js

@@ -5,6 +5,7 @@ import VcsEvent from '../../vcsEvent.js';
 import { EventType } from '../../interaction/interactionType.js';
 import { maxZIndex } from '../layerCollection.js';
 import { markVolatile } from '../../context.js';
+import { PrimitiveOptionsType } from '../../layer/vectorProperties.js';
 
 /**
  * An editor session is a currently set of interactions to create or edit geometries & features.
@@ -19,6 +20,9 @@ import { markVolatile } from '../../context.js';
 
 /**
  * @enum {string}
+ * @property {string} CREATE
+ * @property {string} EDIT_GEOMETRY
+ * @property {string} EDIT_FEATURES
  */
 export const SessionType = {
   CREATE: 'create',
@@ -38,6 +42,14 @@ export function setupScratchLayer(layerCollection) { // IDEA pass in stopped and
     vectorProperties: {
       altitudeMode: 'clampToGround',
       eyeOffset: [0, 0, -1],
+      primitiveOptions: {
+        type: PrimitiveOptionsType.SPHERE,
+        geometryOptions: {
+          radius: 4,
+        },
+        depthFailColor: 'rgba(255,255,255,0.47)',
+      },
+      modelAutoScale: true,
     },
     isDynamic: true,
     zIndex: maxZIndex,

package/src/util/editor/editorSymbols.js

@@ -8,3 +8,9 @@ export const vertexSymbol = Symbol('Vertex');
  * @type {symbol}
  */
 export const vertexIndex = Symbol('VertexIndex');
+/**
+ * Symbol added to primitives and features to denote that these are handlers. It is expected, that the value of the symobl is
+ * equal to an {@see AXIS_AND_PLANES}
+ * @type {symbol}
+ */
+export const handlerSymbol = Symbol('Handler');

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

@@ -0,0 +1,120 @@
+import { handlerSymbol } from '../editorSymbols.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { ModificationKeyType, EventType } from '../../../interaction/interactionType.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { cursorMap } from './editGeometryMouseOverInteraction.js';
+
+/**
+ * A class to handle mouse over effects on features for editor sessions.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class EditFeaturesMouseOverInteraction extends AbstractInteraction {
+  /**
+   * @param {string} layerName - the layer name of the currently editing layer
+   * @param {import("@vcmap/core").SelectMultiFeatureInteraction} selectMultiFeatureInteraction
+   */
+  constructor(layerName, selectMultiFeatureInteraction) {
+    super(EventType.MOVE, ModificationKeyType.ALL);
+    /**
+     * @type {import("ol").Feature|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|null}
+     * @private
+     */
+    this._lastFeature = null;
+    /**
+     * @type {import("@vcmap/core").SelectMultiFeatureInteraction}
+     * @private
+     */
+    this._selectMultiFeatureInteraction = selectMultiFeatureInteraction;
+    /**
+     * The layer name to react to
+     * @type {string}
+     */
+    this.layerName = layerName;
+    /**
+     * @type {CSSStyleDeclaration}
+     */
+    this.cursorStyle = document.body.style;
+
+    this.setActive();
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (
+      event.feature &&
+      (event.feature[vcsLayerName] === this.layerName || event.feature[handlerSymbol])
+    ) {
+      this._lastFeature = /** @type {import("ol").Feature|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature} */
+        (event.feature);
+    } else {
+      this._lastFeature = 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._lastFeature) {
+      if (this._lastFeature[handlerSymbol]) {
+        this.cursorStyle.cursor = cursorMap.select;
+      } else if (modifier === ModificationKeyType.CTRL) {
+        if (!this._selectMultiFeatureInteraction.hasFeatureId(/** @type {string} */ (this._lastFeature.getId()))) {
+          this.cursorStyle.cursor = cursorMap.addToSelection;
+        } else {
+          this.cursorStyle.cursor = cursorMap.removeFromSelection;
+        }
+      } else if (!this._selectMultiFeatureInteraction.hasFeatureId(/** @type {string} */ (this._lastFeature.getId()))) {
+        this.cursorStyle.cursor = cursorMap.select;
+      } else {
+        this.cursorStyle.cursor = cursorMap.auto;
+      }
+    } else {
+      this.cursorStyle.cursor = cursorMap.auto;
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this.cursorStyle = null;
+    super.destroy();
+  }
+}
+
+export default EditFeaturesMouseOverInteraction;