@vcmap/core 5.3.3 → 6.0.0-rc.10

package/src/util/editor/editorSessionHelpers.ts

@@ -1,5 +1,4 @@
 import type { Point, Polygon, Circle, LineString } from 'ol/geom.js';
-import { HeightReference } from '@vcmap-cesium/engine';
 import VectorLayer from '../../layer/vectorLayer.js';
 import { mercatorProjection } from '../projection.js';
 import InteractionChain from '../../interaction/interactionChain.js';
@@ -10,6 +9,13 @@ import { markVolatile } from '../../vcsModule.js';
 import { PrimitiveOptionsType } from '../../layer/vectorProperties.js';
 import EventHandler from '../../interaction/eventHandler.js';
 import type VcsApp from '../../vcsApp.js';
+import { InteractionEvent } from '../../interaction/abstractInteraction.js';
+
+export const alreadySnapped = Symbol('alreadySnapped');
+
+export type SnappingInteractionEvent = InteractionEvent & {
+  [alreadySnapped]?: boolean;
+};
 
 export enum SessionType {
   CREATE = 'create',
@@ -138,27 +144,14 @@ export type GeometryToType<T extends GeometryType> =
     ? Circle
     : never;
 
-export type PickingBehavior = {
-  setForAltitudeMode(altitudeMode: HeightReference): void;
-  reset(): void;
-};
-
-export function createPickingBehavior(app: VcsApp): PickingBehavior {
+export function setupPickingBehavior(app: VcsApp): () => void {
   const initialPickPosition =
     app.maps.eventHandler.featureInteraction.pickPosition;
 
-  return {
-    setForAltitudeMode(altitudeMode: HeightReference): void {
-      if (altitudeMode === HeightReference.NONE) {
-        app.maps.eventHandler.featureInteraction.pickPosition =
-          EventType.CLICKMOVE | EventType.DRAGEVENTS;
-      } else {
-        app.maps.eventHandler.featureInteraction.pickPosition = EventType.NONE;
-      }
-    },
-    reset(): void {
-      app.maps.eventHandler.featureInteraction.pickPosition =
-        initialPickPosition;
-    },
+  app.maps.eventHandler.featureInteraction.pickPosition =
+    EventType.CLICKMOVE | EventType.DRAGEVENTS;
+
+  return () => {
+    app.maps.eventHandler.featureInteraction.pickPosition = initialPickPosition;
   };
 }

package/src/util/editor/editorSymbols.ts

@@ -5,7 +5,7 @@ export const vertexSymbol = Symbol('Vertex');
 /**
  * Symbol to denote the vertexes index in the vertices array. This is important for snapping & bbox operations
  */
-export const vertexIndex = Symbol('VertexIndex');
+export const vertexIndexSymbol = 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 {@link AxisAndPlanes}

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

@@ -13,6 +13,7 @@ import {
 } from '../../../layer/vectorSymbols.js';
 import ObliqueMap from '../../../map/obliqueMap.js';
 import type { CreateInteraction } from '../createFeatureSession.js';
+import { is2DLayout } from '../../geometryHelpers.js';
 
 /**
  * Offset to prevent bbox from collapsing
@@ -32,6 +33,8 @@ class CreateBBoxInteraction
 
   private _lastCoordinate: Coordinate | null = null;
 
+  private _is3D = false;
+
   finished = new VcsEvent<Polygon | null>();
 
   created = new VcsEvent<Polygon>();
@@ -56,27 +59,32 @@ class CreateBBoxInteraction
         this._lastCoordinate[1] += precisionOffset;
       }
 
-      this._lastCoordinate[2] = this._origin[2];
-      let ringCoordinates;
+      if (this._is3D) {
+        this._lastCoordinate[2] = this._origin[2];
+      }
+
+      let lowerRight: Coordinate;
+      let upperLeft: Coordinate;
+
       if (
         (originXHigher && originYHigher) ||
         (!originXHigher && !originYHigher)
       ) {
-        ringCoordinates = [
-          this._origin,
-          [this._lastCoordinate[0], this._origin[1], this._origin[2]],
-          this._lastCoordinate,
-          [this._origin[0], this._lastCoordinate[1], this._origin[2]],
-        ];
+        lowerRight = [this._lastCoordinate[0], this._origin[1]];
+        upperLeft = [this._origin[0], this._lastCoordinate[1]];
       } else {
-        ringCoordinates = [
-          this._origin,
-          [this._origin[0], this._lastCoordinate[1], this._origin[2]],
-          this._lastCoordinate,
-          [this._lastCoordinate[0], this._origin[1], this._origin[2]],
-        ];
+        lowerRight = [this._origin[0], this._lastCoordinate[1]];
+        upperLeft = [this._lastCoordinate[0], this._origin[1]];
       }
-      this._geometry.setCoordinates([ringCoordinates]);
+
+      if (this._is3D) {
+        lowerRight.push(this._origin[2]);
+        upperLeft.push(this._origin[2]);
+      }
+
+      this._geometry.setCoordinates([
+        [this._origin, lowerRight, this._lastCoordinate, upperLeft],
+      ]);
     }
   }
 
@@ -94,8 +102,9 @@ class CreateBBoxInteraction
       if (this._geometry) {
         this.finish();
       } else {
-        this._geometry = new Polygon([[event.positionOrPixel.slice()]], 'XYZ');
+        this._geometry = new Polygon([[event.positionOrPixel.slice()]]);
         this._geometry.set('_vcsGeomType', GeometryType.BBox);
+        this._is3D = !is2DLayout(this._geometry.getLayout());
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;
         } else {

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

@@ -60,7 +60,7 @@ class CreateCircleInteraction
       if (this._geometry) {
         this.finish();
       } else {
-        this._geometry = new Circle(event.positionOrPixel, 20, 'XYZ');
+        this._geometry = new Circle(event.positionOrPixel, 20);
         this._geometry[actuallyIsCircle] = event.map instanceof ObliqueMap;
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;

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

@@ -3,7 +3,10 @@ import type { Coordinate } from 'ol/coordinate.js';
 import AbstractInteraction, {
   EventAfterEventHandler,
 } from '../../../interaction/abstractInteraction.js';
-import { EventType } from '../../../interaction/interactionType.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
 import VcsEvent from '../../../vcsEvent.js';
 import {
   alreadyTransformedToImage,
@@ -31,7 +34,10 @@ class CreateLineStringInteraction
   created = new VcsEvent<LineString>();
 
   constructor() {
-    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    super(
+      EventType.CLICKMOVE | EventType.DBLCLICK,
+      ModificationKeyType.NONE | ModificationKeyType.CTRL,
+    );
     this.setActive();
   }
 
@@ -57,7 +63,7 @@ class CreateLineStringInteraction
 
     if (event.type & EventType.CLICK) {
       if (!this._geometry) {
-        this._geometry = new LineString([event.positionOrPixel], 'XYZ');
+        this._geometry = new LineString([event.positionOrPixel]);
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;
         } else {

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

@@ -31,7 +31,7 @@ class CreatePointInteraction
   }
 
   pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
-    this._geometry = new Point(event.positionOrPixel, 'XYZ');
+    this._geometry = new Point(event.positionOrPixel);
     if (event.map instanceof ObliqueMap) {
       this._geometry[alreadyTransformedToImage] = true;
     } else {

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

@@ -3,7 +3,10 @@ import type { Coordinate } from 'ol/coordinate.js';
 import AbstractInteraction, {
   EventAfterEventHandler,
 } from '../../../interaction/abstractInteraction.js';
-import { EventType } from '../../../interaction/interactionType.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
 import VcsEvent from '../../../vcsEvent.js';
 import {
   alreadyTransformedToImage,
@@ -12,6 +15,11 @@ import {
 import ObliqueMap from '../../../map/obliqueMap.js';
 import { CreateInteraction } from '../createFeatureSession.js';
 
+/**
+ * Set on polygon geometries which have a validity placeholder active
+ */
+export const validityPlaceholder = Symbol('validityPlaceholder');
+
 class CreatePolygonInteraction
   extends AbstractInteraction
   implements CreateInteraction<Polygon>
@@ -34,7 +42,10 @@ class CreatePolygonInteraction
   created = new VcsEvent<Polygon>();
 
   constructor() {
-    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    super(
+      EventType.CLICKMOVE | EventType.DBLCLICK,
+      ModificationKeyType.NONE | ModificationKeyType.CTRL,
+    );
     this.setActive();
   }
 
@@ -60,12 +71,13 @@ class CreatePolygonInteraction
 
     if (event.type & EventType.CLICK) {
       if (!this._geometry) {
-        this._geometry = new Polygon([[event.positionOrPixel.slice()]], 'XYZ');
+        this._geometry = new Polygon([[event.positionOrPixel.slice()]]);
         if (event.map instanceof ObliqueMap) {
           this._geometry[alreadyTransformedToImage] = true;
         } else {
           this._geometry[alreadyTransformedToMercator] = true;
         }
+        this._geometry[validityPlaceholder] = true;
         this.created.raiseEvent(this._geometry);
         this._coordinates = [event.positionOrPixel.slice()];
         this._lastCoordinate = [...event.positionOrPixel];
@@ -76,6 +88,7 @@ class CreatePolygonInteraction
         this._lastCoordinate = [...(this._lastCoordinate as Coordinate)];
         this._coordinates.splice(2, 1, this._lastCoordinate);
         this._validityPlaceHolder = null;
+        this._geometry[validityPlaceholder] = false;
       } else {
         this._lastCoordinate = [...(this._lastCoordinate as Coordinate)];
         this._coordinates.push(this._lastCoordinate);

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

@@ -0,0 +1,226 @@
+import { LineString, Polygon } from 'ol/geom.js';
+import { Coordinate } from 'ol/coordinate.js';
+import { unByKey } from 'ol/Observable.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import {
+  getSnappedCoordinateForResults,
+  getAngleSnapResult,
+  setSnappingFeatures,
+  SnapResult,
+  getGeometrySnapResult,
+  SnapType,
+  snapTypes,
+} from '../snappingHelpers.js';
+import { getCartesianBearing } from '../../math.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+import { validityPlaceholder } from './createPolygonInteraction.js';
+import {
+  alreadySnapped,
+  SnappingInteractionEvent,
+} from '../editorSessionHelpers.js';
+
+function getBearings(coordinates: Coordinate[]): number[] {
+  // we dont want to take into account the last bearing, since that would be our own
+  const length = coordinates.length - 2;
+  if (length > 0) {
+    const bearings = new Array<number>(length);
+    for (let i = 0; i < length; i++) {
+      bearings[i] = getCartesianBearing(coordinates[i], coordinates[i + 1]);
+    }
+    return bearings;
+  }
+
+  return [];
+}
+
+export default class CreationSnapping extends AbstractInteraction {
+  private _coordinates: Coordinate[] = [];
+
+  private _bearings: number[] = [];
+
+  private _scratchLayer: VectorLayer;
+
+  private _isPolygon = false;
+
+  private _coordinatesDirty = false;
+
+  private _geometryLister: (() => void) | undefined;
+
+  private _removeFeatures: (() => void) | undefined;
+
+  private _snappingGeometry: LineString | undefined;
+
+  private _snapToVertex = true;
+
+  private _snapToEdge = true;
+
+  private _snapOrthogonal = true;
+
+  private _snapParallel = true;
+
+  constructor(scratchLayer: VectorLayer, snapTo: SnapType[] = [...snapTypes]) {
+    super(
+      EventType.CLICKMOVE | EventType.DBLCLICK,
+      ModificationKeyType.NONE | ModificationKeyType.CTRL,
+    );
+
+    this._scratchLayer = scratchLayer;
+    this.snapTo = snapTo;
+  }
+
+  get snapTo(): SnapType[] {
+    const snapTo: SnapType[] = [];
+    if (this._snapToVertex) {
+      snapTo.push('vertex');
+    }
+
+    if (this._snapToEdge) {
+      snapTo.push('edge');
+    }
+
+    if (this._snapOrthogonal) {
+      snapTo.push('orthogonal');
+    }
+
+    if (this._snapParallel) {
+      snapTo.push('parallel');
+    }
+
+    return snapTo;
+  }
+
+  set snapTo(snapTo: SnapType[]) {
+    this._snapToVertex = snapTo.includes('vertex');
+    this._snapToEdge = snapTo.includes('edge');
+    this._snapOrthogonal = snapTo.includes('orthogonal');
+    this._snapParallel = snapTo.includes('parallel');
+  }
+
+  private _setCoordinates(coordinates: Coordinate[]): void {
+    this._coordinates = coordinates;
+    this._bearings = getBearings(this._coordinates);
+    if (this._coordinates.length > 2) {
+      this._snappingGeometry = new LineString(
+        this._coordinates.slice(0, this._coordinates.length - 1),
+      );
+    }
+  }
+
+  setGeometry(geometry: LineString | Polygon): void {
+    this._geometryLister?.();
+    this._snappingGeometry = undefined;
+    let setCoordinates: () => void;
+    if (geometry instanceof Polygon) {
+      this._isPolygon = true;
+      setCoordinates = (): void => {
+        if (!geometry[validityPlaceholder]) {
+          this._setCoordinates(geometry.getCoordinates()[0]);
+        }
+      };
+    } else {
+      this._isPolygon = false;
+      setCoordinates = (): void => {
+        this._setCoordinates(geometry.getCoordinates());
+      };
+    }
+    setCoordinates();
+    const key = geometry.on('change', () => {
+      if (this._coordinatesDirty) {
+        setCoordinates();
+        this._coordinatesDirty = false;
+      }
+    });
+    this._geometryLister = (): void => {
+      unByKey(key);
+    };
+  }
+
+  pipe(event: SnappingInteractionEvent): Promise<SnappingInteractionEvent> {
+    this._removeFeatures?.();
+    if (event.type === EventType.CLICK) {
+      event.chainEnded?.addEventListener(() => {
+        this._coordinatesDirty = true;
+      });
+    }
+    if (
+      !event[alreadySnapped] &&
+      event.key !== ModificationKeyType.CTRL &&
+      this._coordinates.length >= 3
+    ) {
+      const results = new Array<SnapResult | undefined>(2);
+      const maxDistanceSquared =
+        (event.map.getCurrentResolution(event.positionOrPixel!) * 12) ** 2;
+
+      if (this._snappingGeometry) {
+        results[0] = getGeometrySnapResult(
+          [this._snappingGeometry],
+          event.positionOrPixel!,
+          maxDistanceSquared,
+          this._snapToVertex,
+          this._snapToEdge,
+        );
+      }
+
+      if (!results[0] && (this._snapOrthogonal || this._snapParallel)) {
+        results[0] = getAngleSnapResult(
+          event.positionOrPixel!,
+          this._coordinates.at(-2)!,
+          this._coordinates.at(-3)!,
+          this._bearings,
+          this._coordinates.length - 2,
+          maxDistanceSquared,
+          this._snapOrthogonal,
+          this._snapParallel,
+        );
+
+        if (this._isPolygon) {
+          const newCandidate = results[0]?.snapped ?? event.positionOrPixel!;
+          results[1] = getAngleSnapResult(
+            newCandidate,
+            this._coordinates.at(0)!,
+            this._coordinates.at(1)!,
+            this._bearings,
+            0,
+            maxDistanceSquared,
+            this._snapOrthogonal,
+            this._snapParallel,
+          );
+        }
+      }
+
+      const lastResult = getSnappedCoordinateForResults(
+        results,
+        this._coordinates,
+        maxDistanceSquared,
+      );
+
+      if (lastResult) {
+        if (event.positionOrPixel!.length > lastResult.length) {
+          lastResult[2] = event.positionOrPixel![2];
+        } else if (event.positionOrPixel!.length < lastResult.length) {
+          lastResult.pop();
+        }
+
+        event.positionOrPixel = lastResult;
+
+        this._removeFeatures = setSnappingFeatures(
+          results,
+          this._coordinates,
+          this._scratchLayer,
+        );
+      }
+    }
+
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this._geometryLister?.();
+    this._removeFeatures?.();
+    super.destroy();
+  }
+}

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

@@ -1,4 +1,4 @@
-import { mouseOverSymbol, vertexSymbol } from '../editorSymbols.js';
+import { mouseOverSymbol } from '../editorSymbols.js';
 import AbstractInteraction, {
   EventAfterEventHandler,
 } from '../../../interaction/abstractInteraction.js';
@@ -6,7 +6,7 @@ import {
   ModificationKeyType,
   EventType,
 } from '../../../interaction/interactionType.js';
-import { Vertex } from '../editorHelpers.js';
+import { isVertex, Vertex } from '../editorHelpers.js';
 
 const pointerSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
   <g id="pen">
@@ -46,17 +46,18 @@ class EditGeometryMouseOverInteraction extends AbstractInteraction {
   constructor(denyRemoval?: boolean) {
     super(
       EventType.MOVE,
-      denyRemoval
+      (denyRemoval
         ? ModificationKeyType.NONE
-        : ModificationKeyType.NONE | ModificationKeyType.SHIFT,
+        : ModificationKeyType.NONE | ModificationKeyType.SHIFT) |
+        ModificationKeyType.CTRL,
     );
 
     this.setActive();
   }
 
   pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
-    if (event.feature && (event.feature as Vertex)[vertexSymbol]) {
-      this._currentVertex = event.feature as Vertex;
+    if (isVertex(event.feature)) {
+      this._currentVertex = event.feature;
     } else {
       this._currentVertex = null;
     }

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

@@ -7,7 +7,7 @@ import {
   EventType,
   ModificationKeyType,
 } from '../../../interaction/interactionType.js';
-import { cartesian2DDistance } from '../../math.js';
+import { cartesian2DDistanceSquared } from '../../math.js';
 import {
   createVertex,
   getOlcsPropsFromFeature,
@@ -16,6 +16,9 @@ import {
   type Vertex,
 } from '../editorHelpers.js';
 import VcsEvent from '../../../vcsEvent.js';
+import { is2DLayout } from '../../geometryHelpers.js';
+import { isClampedHeightReference } from '../../featureconverter/vectorHeightInfo.js';
+import VectorProperties from '../../../layer/vectorProperties.js';
 
 export type VertexInsertedEvent = {
   vertex: Vertex;
@@ -31,6 +34,8 @@ class InsertVertexInteraction extends AbstractInteraction {
 
   private _isLinearRing: boolean;
 
+  private _vectorProperties: VectorProperties;
+
   /**
    * @param  feature
    * @param  geometry
@@ -38,11 +43,13 @@ class InsertVertexInteraction extends AbstractInteraction {
   constructor(
     feature: Feature<LineString | Polygon>,
     geometry: LineString | LinearRing,
+    vectorProperties: VectorProperties,
   ) {
     super(EventType.CLICK, ModificationKeyType.NONE);
 
     this._feature = feature;
     this._geometry = geometry;
+    this._vectorProperties = vectorProperties;
     this._isLinearRing = this._geometry instanceof LinearRing;
     this.setActive();
   }
@@ -56,15 +63,27 @@ class InsertVertexInteraction extends AbstractInteraction {
       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 distanceSquared = cartesian2DDistanceSquared(
+        closestCoord,
+        coordinate,
+      ); // todo respect altitude mode here. e.g. distance3D
+      const is2DLine =
+        is2DLayout(this._geometry.getLayout()) ||
+        isClampedHeightReference(
+          this._vectorProperties.getAltitudeMode(this._feature),
+        );
+
+      // XXX how to handle relative to ground height references?
+      if (
+        distanceSquared <
+        (event.map.getCurrentResolution(coordinate) * 5) ** 2
+      ) {
         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);
+          const onLine = is2DLine
+            ? pointOnLine2D(lineCoords[i], lineCoords[i + 1], closestCoord)
+            : pointOnLine3D(lineCoords[i], lineCoords[i + 1], closestCoord);
           if (onLine) {
             break;
           }
@@ -78,6 +97,7 @@ class InsertVertexInteraction extends AbstractInteraction {
           vertex: createVertex(
             closestCoord,
             getOlcsPropsFromFeature(this._feature),
+            -1,
           ),
           index,
         });