@vcmap/core 5.0.0-rc.21 → 5.0.0-rc.22

package/src/util/editor/editGeometrySession.js

@@ -0,0 +1,401 @@
+import { getLogger } from '@vcsuite/logger';
+import { GeometryType, SessionType, setupInteractionChain, setupScratchLayer } from './editorSessionHelpers.js';
+import SelectSingleFeatureInteraction from './interactions/selectSingleFeatureInteraction.js';
+import InteractionChain from '../../interaction/interactionChain.js';
+import VcsEvent from '../../vcsEvent.js';
+import TranslateVertexInteraction from './interactions/translateVertexInteraction.js';
+import RemoveVertexInteraction from './interactions/removeVertexInteraction.js';
+import { createVertex } from './editorHelpers.js';
+import InsertVertexInteraction from './interactions/insertVertexInteraction.js';
+import EditGeometryMouseOverInteraction from './interactions/editGeometryMouseOverInteraction.js';
+import { cartesian2DDistance, modulo } from '../math.js';
+import { createSync, obliqueGeometry } from '../../layer/vectorSymbols.js';
+import geometryIsValid from './validateGeoemetry.js';
+import ObliqueMap from '../../map/obliqueMap.js';
+import { emptyStyle } from '../../style/styleHelpers.js';
+import MapInteractionController from './interactions/mapInteractionController.js';
+
+/**
+ * @typedef {EditorSession} EditGeometrySession
+ * @property {SelectSingleFeatureInteraction} featureSelection - the feature selection for this session.
+ */
+
+/**
+ * @typedef {Object} EditGeometryInteraction
+ * @property {InteractionChain} interactionChain
+ * @property {function():void} destroy
+ * @private
+ */
+
+/**
+ * Create the editing interaction for a feature with a line geometry
+ * @param {import("ol").Feature<import("ol/geom").LineString>} feature
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {EditGeometryInteraction}
+ */
+function createEditLineStringGeometryInteraction(feature, scratchLayer) {
+  const geometry = feature[obliqueGeometry] ?? feature.getGeometry();
+  const vertices = geometry.getCoordinates().map(createVertex);
+  scratchLayer.addFeatures(vertices);
+  const resetGeometry = () => {
+    geometry.setCoordinates(vertices.map(f => f.getGeometry().getCoordinates()));
+  };
+  const translateVertex = new TranslateVertexInteraction();
+  translateVertex.vertexChanged.addEventListener(resetGeometry);
+
+  const insertVertex = new InsertVertexInteraction(feature, geometry);
+  insertVertex.vertexInserted.addEventListener(({ vertex, index }) => {
+    scratchLayer.addFeatures([vertex]);
+    vertices.splice(index, 0, vertex);
+    resetGeometry();
+  });
+
+  const removeVertex = new RemoveVertexInteraction();
+  removeVertex.vertexRemoved.addEventListener((vertex) => {
+    scratchLayer.removeFeaturesById([vertex.getId()]);
+    const index = vertices.indexOf(vertex);
+    if (index > -1) {
+      vertices.splice(index, 1);
+      resetGeometry();
+    }
+  });
+
+  const interactionChain = new InteractionChain([
+    translateVertex,
+    insertVertex,
+    removeVertex,
+  ]);
+
+  return {
+    interactionChain,
+    destroy: () => {
+      scratchLayer.removeFeaturesById(vertices.map(v => v.getId()));
+      interactionChain.destroy();
+    },
+  };
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom").Circle>} feature
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {EditGeometryInteraction}
+ */
+function createEditCircleGeometryInteraction(feature, scratchLayer) {
+  const geometry = feature[obliqueGeometry] ?? feature.getGeometry();
+  const vertices = geometry.getCoordinates().map(createVertex);
+  scratchLayer.addFeatures(vertices);
+
+  const translateVertex = new TranslateVertexInteraction();
+  translateVertex.vertexChanged.addEventListener((vertex) => {
+    if (vertices.indexOf(vertex) === 1) {
+      const coords = geometry.getCoordinates();
+      coords[1] = vertex.getGeometry().getCoordinates();
+      const newRadius = cartesian2DDistance(coords[0], coords[1]);
+      geometry.setRadius(newRadius);
+    } else {
+      geometry.setCenter(vertex.getGeometry().getCoordinates());
+      vertices[1].getGeometry().setCoordinates(geometry.getCoordinates()[1]);
+    }
+  });
+
+  const interactionChain = new InteractionChain([translateVertex]);
+
+  return {
+    interactionChain,
+    destroy: () => {
+      scratchLayer.removeFeaturesById(vertices.map(v => v.getId()));
+      interactionChain.destroy();
+    },
+  };
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom").Polygon>} feature
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {EditGeometryInteraction}
+ */
+function createEditBBoxGeometryInteraction(feature, scratchLayer) {
+  const geometry = feature[obliqueGeometry] ?? feature.getGeometry();
+  const vertices = geometry.getCoordinates()[0].map(createVertex);
+  scratchLayer.addFeatures(vertices);
+
+  const translateVertex = new TranslateVertexInteraction();
+  translateVertex.vertexChanged.addEventListener((vertex) => {
+    const vertexIndex = vertices.indexOf(vertex);
+    const originIndex = modulo(vertexIndex + 2, 4);
+    const rightOfIndex = modulo(vertexIndex + 1, 4);
+    const leftOfIndex = modulo(vertexIndex - 1, 4);
+
+    const originCoords = vertices[originIndex].getGeometry().getCoordinates();
+    const vertexCoords = vertex.getGeometry().getCoordinates();
+    let preventCollapse = false;
+    if (originCoords[0] === vertexCoords[0]) {
+      vertexCoords[0] += 1e-8;
+      preventCollapse = true;
+    }
+    if (originCoords[1] === vertexCoords[1]) {
+      vertexCoords[1] += 1e-8;
+      preventCollapse = true;
+    }
+
+    if (preventCollapse) {
+      vertex.getGeometry().setCoordinates(vertexCoords);
+    }
+    const updateOtherVertex = (otherVertexIndex) => {
+      const otherVertexGeometry = vertices[otherVertexIndex].getGeometry();
+      const otherVertexCoords = otherVertexGeometry.getCoordinates();
+      if (otherVertexCoords[0] === originCoords[0]) {
+        otherVertexCoords[1] = vertexCoords[1];
+      } else {
+        otherVertexCoords[0] = vertexCoords[0];
+      }
+      otherVertexGeometry.setCoordinates(otherVertexCoords);
+    };
+
+    updateOtherVertex(rightOfIndex);
+    updateOtherVertex(leftOfIndex);
+
+    geometry.setCoordinates([vertices.map(f => f.getGeometry().getCoordinates())]);
+  });
+
+  const interactionChain = new InteractionChain([translateVertex]);
+
+  return {
+    interactionChain,
+    destroy: () => {
+      scratchLayer.removeFeaturesById(vertices.map(v => v.getId()));
+      interactionChain.destroy();
+    },
+  };
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom").Polygon>} feature
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {EditGeometryInteraction}
+ */
+function createEditSimplePolygonInteraction(feature, scratchLayer) {
+  const geometry = feature[obliqueGeometry] ?? feature.getGeometry();
+  const linearRing = geometry.getLinearRing(0);
+  const vertices = linearRing.getCoordinates().map(createVertex);
+  scratchLayer.addFeatures(vertices);
+  const resetGeometry = () => {
+    const coordinates = vertices.map(f => f.getGeometry().getCoordinates());
+    linearRing.setCoordinates(coordinates); // update linear ring for proper vertex insertion
+    geometry.setCoordinates([vertices.map(f => f.getGeometry().getCoordinates())]); // update actual geometry, since linear ring is a clone and not a ref
+  };
+
+  const translateVertex = new TranslateVertexInteraction();
+  translateVertex.vertexChanged.addEventListener(resetGeometry);
+
+  const insertVertex = new InsertVertexInteraction(feature, linearRing);
+  insertVertex.vertexInserted.addEventListener(({ vertex, index }) => {
+    scratchLayer.addFeatures([vertex]);
+    vertices.splice(index, 0, vertex);
+    resetGeometry();
+  });
+
+  const removeVertex = new RemoveVertexInteraction();
+  removeVertex.vertexRemoved.addEventListener((vertex) => {
+    scratchLayer.removeFeaturesById([vertex.getId()]);
+    const index = vertices.indexOf(vertex);
+    if (index > -1) {
+      vertices.splice(index, 1);
+      resetGeometry();
+    }
+  });
+
+  const interactionChain = new InteractionChain([
+    translateVertex,
+    insertVertex,
+    removeVertex,
+  ]);
+
+  return {
+    interactionChain,
+    destroy: () => {
+      scratchLayer.removeFeaturesById(vertices.map(v => v.getId()));
+      interactionChain.destroy();
+    },
+  };
+}
+
+/**
+ * @param {import("ol").Feature<import("ol/geom").Point>} feature
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {EditGeometryInteraction}
+ */
+function createEditPointInteraction(feature, scratchLayer) {
+  const vertex = createVertex(feature.getGeometry().getCoordinates());
+  const featureStyle = feature.getStyle();
+  feature.setStyle(emptyStyle);
+  scratchLayer.addFeatures([vertex]);
+  const translateVertex = new TranslateVertexInteraction();
+  translateVertex.vertexChanged.addEventListener(() => {
+    feature.getGeometry().setCoordinates(vertex.getGeometry().getCoordinates());
+  });
+
+  const interactionChain = new InteractionChain([
+    translateVertex,
+  ]);
+
+  return {
+    interactionChain,
+    destroy: () => {
+      interactionChain.destroy();
+      scratchLayer.removeFeaturesById([vertex.getId()]);
+      feature.setStyle(featureStyle);
+    },
+  };
+}
+
+/**
+ * Creates the edit geometry session.
+ * @param {import("@vcmap/core").VcsApp} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @returns {EditGeometrySession}
+ */
+export default function startEditGeometrySession(app, layer) {
+  const {
+    interactionChain,
+    removed: interactionRemoved,
+    destroy: destroyInteractionChain,
+  } = setupInteractionChain(app.maps.eventHandler);
+
+  const scratchLayer = setupScratchLayer(app.layers);
+
+  const selectFeatureInteraction = new SelectSingleFeatureInteraction(layer);
+  interactionChain.addInteraction(selectFeatureInteraction);
+
+  const mapInteractionController = new MapInteractionController();
+  interactionChain.addInteraction(mapInteractionController);
+
+  const mouseOverInteraction = new EditGeometryMouseOverInteraction(layer.name);
+  interactionChain.addInteraction(mouseOverInteraction);
+
+  /**
+   * @type {VcsEvent<void>}
+   */
+  const stopped = new VcsEvent();
+
+  /**
+   * @type {EditGeometryInteraction|null}
+   */
+  let currentInteractionSet = null;
+  let currentFeature = null;
+  /**
+   * @type {ObliqueMap|null}
+   */
+  let obliqueMap = null;
+
+  const destroyCurrentInteractionSet = () => {
+    if (currentInteractionSet) {
+      interactionChain.removeInteraction(currentInteractionSet.interactionChain);
+      currentInteractionSet.destroy();
+      currentInteractionSet = null;
+    }
+
+    if (currentFeature) {
+      delete currentFeature[createSync];
+      if (!geometryIsValid(currentFeature.getGeometry())) {
+        layer.removeFeaturesById([currentFeature.getId()]);
+      }
+    }
+    currentFeature = null;
+
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = true;
+    }
+  };
+
+  selectFeatureInteraction.featureChanged.addEventListener((feature) => {
+    destroyCurrentInteractionSet();
+    if (feature) {
+      if (obliqueMap) {
+        obliqueMap.switchEnabled = false;
+      }
+      currentFeature = feature;
+      currentFeature[createSync] = true;
+      const geometry = feature[obliqueGeometry] ?? feature.getGeometry();
+      const geometryType = geometry.getType();
+      if (geometryType === GeometryType.Polygon) {
+        if (geometry.get('_vcsGeomType') === GeometryType.BBox) {
+          currentInteractionSet = createEditBBoxGeometryInteraction(
+            /** @type {import("ol").Feature<import("ol/geom").Polygon>} */ (feature),
+            scratchLayer,
+          );
+        } else if (/** @type {import("ol/geom").Polygon} */ (geometry).getLinearRingCount() === 1) {
+          currentInteractionSet = createEditSimplePolygonInteraction(
+            /** @type {import("ol").Feature<import("ol/geom").Polygon>} */ (feature),
+            scratchLayer,
+          );
+        }
+      } else if (geometryType === GeometryType.LineString) {
+        currentInteractionSet = createEditLineStringGeometryInteraction(
+          /** @type {import("ol").Feature<import("ol/geom").LineString>} */ (feature),
+          scratchLayer,
+        );
+      } else if (geometryType === GeometryType.Point) {
+        currentInteractionSet = createEditPointInteraction(
+          /** @type {import("ol").Feature<import("ol/geom").Point>} */ (feature),
+          scratchLayer,
+        );
+      } else if (geometryType === GeometryType.Circle) {
+        currentInteractionSet = createEditCircleGeometryInteraction(
+          /** @type {import("ol").Feature<import("ol/geom").Circle>} */ (feature),
+          scratchLayer,
+        );
+      }
+
+      if (currentInteractionSet) {
+        interactionChain.addInteraction(currentInteractionSet.interactionChain);
+      } else {
+        getLogger('EditGeometrySession').warning(`Geometry of type ${geometryType} is currently not supported`);
+        currentFeature[createSync] = false;
+        currentFeature = null;
+        selectFeatureInteraction.clear();
+      }
+    }
+  });
+
+  let obliqueImageChangedListener = () => {};
+  const setupActiveMap = () => {
+    mapInteractionController.reset();
+    mouseOverInteraction.reset();
+    selectFeatureInteraction.clear();
+    obliqueImageChangedListener();
+    const { activeMap } = app.maps;
+    if (activeMap instanceof ObliqueMap) {
+      obliqueMap = activeMap;
+      obliqueImageChangedListener = /** @type {ObliqueMap} */ (activeMap).imageChanged
+        .addEventListener(() => {
+          selectFeatureInteraction.clear();
+        });
+    } else {
+      obliqueMap = null;
+      obliqueImageChangedListener = () => {};
+    }
+  };
+  const mapActivatedListener = app.maps.mapActivated.addEventListener(setupActiveMap);
+  setupActiveMap();
+
+  const stop = () => {
+    app.layers.remove(scratchLayer);
+    obliqueImageChangedListener();
+    mapActivatedListener();
+    mapInteractionController.reset();
+    mouseOverInteraction.reset();
+    destroyCurrentInteractionSet();
+    destroyInteractionChain();
+    stopped.raiseEvent();
+    stopped.destroy();
+  };
+  interactionRemoved.addEventListener(stop);
+
+  return {
+    type: SessionType.EDIT_GEOMETRY,
+    featureSelection: selectFeatureInteraction,
+    stopped,
+    stop,
+  };
+}

package/src/util/editor/editorHelpers.js

@@ -0,0 +1,109 @@
+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 { vertexSymbol } from './editorSymbols.js';
+import Vector from '../../layer/vectorLayer.js';
+
+/**
+ * @param {import("ol/coordinate").Coordinate} coordinate
+ * @returns {Vertex}
+ */
+export function createVertex(coordinate) {
+  const geometry = new Point(coordinate);
+  geometry[Vector.alreadyTransformedToImage] = true;
+  const vertex = new Feature({
+    geometry,
+  });
+  vertex[vertexSymbol] = true;
+  vertex[Vector.doNotTransform] = true;
+  return vertex;
+}
+
+let scratchCartesian21 = new Cartesian2();
+let scratchCartesian22 = new Cartesian2();
+let scratchCartesian23 = new Cartesian2();
+let scratchCartesian31 = new Cartesian3();
+let scratchCartesian32 = new Cartesian3();
+let scratchCartesian33 = new Cartesian3();
+
+/**
+ * @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]
+ * @returns {boolean}
+ */
+export function pointOnLine3D(start, end, point, epsilon = CesiumMath.EPSILON5) {
+  scratchCartesian31 = Cartesian3
+    .fromElements(end[0] - start[0], end[1] - start[1], end[2] - start[2], scratchCartesian31);
+  scratchCartesian32 = Cartesian3
+    .fromElements(point[0] - start[0], point[1] - start[1], point[2] - start[2], scratchCartesian32);
+  scratchCartesian33 = Cartesian3
+    .fromElements(point[0] - end[0], point[1] - end[1], point[2] - point[2], scratchCartesian33);
+  const mag1 = Cartesian3.magnitude(scratchCartesian31);
+  if (
+    mag1 < Cartesian3.magnitude(scratchCartesian32) ||
+    mag1 < Cartesian3.magnitude(scratchCartesian33)
+  ) {
+    return false;
+  }
+
+  scratchCartesian31 = Cartesian3.normalize(scratchCartesian31, scratchCartesian31);
+  scratchCartesian32 = Cartesian3.normalize(scratchCartesian32, scratchCartesian32);
+  return scratchCartesian31.equalsEpsilon(scratchCartesian32, epsilon);
+}
+
+
+/**
+ * @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]
+ * @returns {boolean}
+ */
+export function pointOnLine2D(start, end, point, epsilon = CesiumMath.EPSILON5) {
+  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);
+  const mag1 = Cartesian2.magnitude(scratchCartesian21);
+  if (
+    mag1 < Cartesian2.magnitude(scratchCartesian22) ||
+    mag1 < Cartesian2.magnitude(scratchCartesian23)
+  ) {
+    return false;
+  }
+
+  scratchCartesian21 = Cartesian2.normalize(scratchCartesian21, scratchCartesian21);
+  scratchCartesian22 = Cartesian2.normalize(scratchCartesian22, scratchCartesian22);
+
+  return scratchCartesian21.equalsEpsilon(scratchCartesian22, epsilon);
+}
+
+/**
+ * @param {import("ol/coordinate").Coordinate} originCoordinates
+ * @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]);
+  scratchCartesian32 = scene.globe.ellipsoid.geodeticSurfaceNormal(scratchCartesian31, scratchCartesian32);
+  scratchCartesian32 = Cartesian3.cross(scene.camera.rightWC, scratchCartesian32, scratchCartesian32);
+  scratchCartesian32 = Cartesian3.normalize(scratchCartesian32, scratchCartesian32);
+
+  return Plane.fromPointNormal(scratchCartesian31, scratchCartesian32);
+}
+
+/**
+ * @param {import("ol/coordinate").Coordinate} originCoordinates
+ * @param {import("@vcmap/cesium").Scene} 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]);
+  scratchCartesian32 = scene.globe.ellipsoid.geodeticSurfaceNormal(scratchCartesian31, scratchCartesian32);
+
+  return Plane.fromPointNormal(scratchCartesian31, scratchCartesian32);
+}

package/src/util/editor/editorSessionHelpers.js

@@ -80,7 +80,7 @@ export function setupInteractionChain(eventHandler) {
 
   return {
     interactionChain,
-    destroy: () => {
+    destroy() {
       listener();
       removed.destroy();
       interactionChain.destroy();
@@ -97,7 +97,6 @@ export function setupInteractionChain(eventHandler) {
  * @property {string} LineString
  * @property {string} Polygon
  * @property {string} BBox
- * @property {string} Rectangle
  */
 export const GeometryType = {
   Point: 'Point',

package/src/util/editor/editorSymbols.js

@@ -0,0 +1,10 @@
+/**
+ * Symbol to identify a {@see Vertex}
+ * @type {symbol}
+ */
+export const vertexSymbol = Symbol('Vertex');
+/**
+ * Symbol to denote the vertexes index in the vertices array. This is important for snapping & bbox operations
+ * @type {symbol}
+ */
+export const vertexIndex = Symbol('VertexIndex');

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

@@ -0,0 +1,133 @@
+import { vertexSymbol } from '../editorSymbols.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { ModificationKeyType, EventType } from '../../../interaction/interactionType.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+
+/**
+ * only exported for tests
+ * @type {Object}
+ */
+export const cursorMap = { // TODO these can now be designed custom. IE11 no linger required
+  auto: 'auto',
+  scaleNESW: 'nesw-resize',
+  scaleNWSE: 'nwse-resize',
+  rotate: 'crosshair',
+  translate: 'move',
+  select: 'pointer',
+  edit: 'pointer', // fa pencil
+  translateVertex: 'move', // fa-stack pointer-move
+  removeVertex: 'pointer', // fa-stack pencil-minus
+  insertVertex: 'cell', // fa-stack pencil-plus
+  addToSelection: 'cell', // fa-stack pointer-black
+  removeFromSelection: 'not-allowed',
+};
+
+/**
+ * A class to handle mouse over effects on features for editor sessions.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class EditGeometryMouseOverInteraction extends AbstractInteraction {
+  /**
+   * @param {string} layerName - the layer name of the currently editing layer
+   */
+  constructor(layerName) {
+    super(EventType.MOVE, ModificationKeyType.ALL);
+    /**
+     * @type {import("ol").Feature|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|null}
+     * @private
+     */
+    this._lastFeature = null;
+    /**
+     * 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[vertexSymbol]
+      )
+    ) {
+      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[vertexSymbol]) {
+        if (modifier === ModificationKeyType.SHIFT) {
+          this.cursorStyle.cursor = cursorMap.removeVertex;
+        } else if (modifier === ModificationKeyType.ALT) {
+          this.cursorStyle.cursor = cursorMap.translateVertex;
+        } else {
+          this.cursorStyle.cursor = cursorMap.auto;
+        }
+      } else {
+        this.cursorStyle.cursor = cursorMap.select;
+      }
+    } else {
+      this.cursorStyle.cursor = cursorMap.auto;
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this.cursorStyle = null;
+    super.destroy();
+  }
+}
+
+export default EditGeometryMouseOverInteraction;