@vcmap/core 5.3.3 → 6.0.0-rc.10

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

@@ -0,0 +1,136 @@
+import { Feature } from 'ol';
+import VectorSource from 'ol/source/Vector.js';
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import VectorLayer from '../../../layer/vectorLayer.js';
+import { originalFeatureSymbol } from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import type VectorObliqueImpl from '../../../layer/oblique/vectorObliqueImpl.js';
+import {
+  alreadySnapped,
+  SnappingInteractionEvent,
+} from '../editorSessionHelpers.js';
+import {
+  setSnappingFeatures,
+  getGeometrySnapResult,
+  SnapType,
+} from '../snappingHelpers.js';
+
+export default class LayerSnapping extends AbstractInteraction {
+  layers: VectorLayer[];
+
+  private _scratchLayer: VectorLayer;
+
+  private _removeFeatures: (() => void) | undefined;
+
+  private _filter: (f: Feature) => boolean;
+
+  private _snapToVertex = true;
+
+  private _snapToEdge = true;
+
+  constructor(
+    layers: VectorLayer[],
+    scratchLayer: VectorLayer,
+    filter: (f: Feature) => boolean,
+    snapTo: SnapType[] = ['vertex', 'edge'],
+    type: EventType = EventType.CLICKMOVE | EventType.DBLCLICK,
+  ) {
+    super(type, ModificationKeyType.NONE | ModificationKeyType.CTRL);
+
+    this.layers = layers;
+    this._scratchLayer = scratchLayer;
+    this._filter = filter;
+    this.snapTo = snapTo;
+  }
+
+  get snapTo(): SnapType[] {
+    const snapTo: SnapType[] = [];
+    if (this._snapToVertex) {
+      snapTo.push('vertex');
+    }
+
+    if (this._snapToEdge) {
+      snapTo.push('edge');
+    }
+
+    return snapTo;
+  }
+
+  set snapTo(snapTo: SnapType[]) {
+    this._snapToVertex = snapTo.includes('vertex');
+    this._snapToEdge = snapTo.includes('edge');
+  }
+
+  pipe(event: SnappingInteractionEvent): Promise<SnappingInteractionEvent> {
+    this._removeFeatures?.();
+    if (event.key !== ModificationKeyType.CTRL) {
+      const coordinate = event.positionOrPixel!;
+      const bufferDistance = event.map.getCurrentResolution(coordinate) * 12;
+      const maxDistanceSquared = bufferDistance ** 2;
+
+      const isOblique = event.map instanceof ObliqueMap;
+
+      const geometries = this.layers
+        .flatMap((layer) => {
+          let source: VectorSource;
+
+          if (isOblique) {
+            source = (
+              layer.getImplementationsForMap(event.map)[0] as VectorObliqueImpl
+            )
+              .getOLLayer()
+              .getSource() as VectorSource;
+          } else {
+            source = layer.getSource();
+          }
+
+          return source.getFeaturesInExtent([
+            coordinate[0] - bufferDistance,
+            coordinate[1] - bufferDistance,
+            coordinate[0] + bufferDistance,
+            coordinate[1] + bufferDistance,
+          ]);
+        })
+        .filter((feature) => {
+          const originalFeature = feature[originalFeatureSymbol] ?? feature;
+          return this._filter(originalFeature);
+        })
+        .map((f) => f.getGeometry()!);
+
+      const result = getGeometrySnapResult(
+        geometries,
+        coordinate,
+        maxDistanceSquared,
+        this._snapToVertex,
+        this._snapToEdge,
+      );
+
+      if (result) {
+        const closest = result.snapped;
+        if (coordinate.length > closest.length) {
+          closest[2] = coordinate[2];
+        } else if (coordinate.length < closest.length) {
+          closest.pop();
+        }
+        event.positionOrPixel = closest;
+        event[alreadySnapped] = true;
+        this._removeFeatures = setSnappingFeatures(
+          [result],
+          [result.snapped],
+          this._scratchLayer,
+        );
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this._removeFeatures?.();
+    this.layers = [];
+    super.destroy();
+  }
+}

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

@@ -5,9 +5,8 @@ import {
   EventType,
   ModificationKeyType,
 } from '../../../interaction/interactionType.js';
-import { vertexSymbol } from '../editorSymbols.js';
 import VcsEvent from '../../../vcsEvent.js';
-import type { Vertex } from '../editorHelpers.js';
+import { isVertex, Vertex } from '../editorHelpers.js';
 
 /**
  * This interaction will raise the passed in event for each feature clicked with the vertex symbol
@@ -22,8 +21,8 @@ class RemoveVertexInteraction extends AbstractInteraction {
   }
 
   pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
-    if (event.feature && (event.feature as Vertex)[vertexSymbol]) {
-      this.vertexRemoved.raiseEvent(event.feature as Vertex);
+    if (isVertex(event.feature)) {
+      this.vertexRemoved.raiseEvent(event.feature);
     }
     return Promise.resolve(event);
   }

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

@@ -0,0 +1,227 @@
+import { Circle, LineString, Point, Polygon } from 'ol/geom.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import { Style, Text as OLText } from 'ol/style.js';
+import { Feature } from 'ol';
+import { HeightReference } from '@vcmap-cesium/engine';
+import AbstractInteraction, {
+  InteractionEvent,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
+import { isVertex } from '../editorHelpers.js';
+import { vertexIndexSymbol } from '../editorSymbols.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+import { is2DLayout } from '../../geometryHelpers.js';
+
+import { ecef3DDistance, getMidPoint, spherical2Distance } from '../../math.js';
+import { validityPlaceholder } from './createPolygonInteraction.js';
+import { createSync } from '../../../layer/vectorSymbols.js';
+
+type Segment = [Coordinate, Coordinate];
+
+function getSegmentForCoordinateIndex(
+  geometry: LineString | Polygon | Circle,
+  index: number,
+): Segment[] {
+  if (geometry instanceof Circle) {
+    return [geometry.getCoordinates() as Segment];
+  }
+  const flats = geometry.getFlatCoordinates();
+  let end;
+  let isPolygon = false;
+  if (geometry instanceof Polygon) {
+    isPolygon = true;
+    end = geometry.getEnds()[0];
+  } else {
+    end = flats.length;
+  }
+  const stride = geometry.getStride();
+  const layout = geometry.getLayout();
+
+  if (flats.length < stride * 2) {
+    return [];
+  }
+
+  let flatIndex = Math.round(index * stride);
+  if (index === -1) {
+    flatIndex = end - stride;
+  }
+
+  if (flats.length < flatIndex + stride) {
+    return [];
+  }
+
+  const previousIndex = index === 0 ? stride : flatIndex - stride;
+  let nextIndex;
+
+  if (isPolygon && !(geometry as Polygon)[validityPlaceholder]) {
+    if (flatIndex === 0) {
+      nextIndex = end - stride;
+    } else if (flatIndex + stride === end) {
+      nextIndex = 0;
+    } else {
+      nextIndex = flatIndex + stride;
+    }
+  } else if (flatIndex > 0 && flatIndex + stride < end) {
+    nextIndex = flatIndex + stride;
+  }
+
+  const getCoordinateFromIndex = is2DLayout(layout)
+    ? (i: number): Coordinate => {
+        return [flats[i], flats[i + 1]];
+      }
+    : (i: number): Coordinate => {
+        return [flats[i], flats[i + 1], flats[i + 2]];
+      };
+
+  const segments: Segment[] = [
+    [getCoordinateFromIndex(flatIndex), getCoordinateFromIndex(previousIndex)],
+  ];
+
+  if (nextIndex != null && flats.length >= nextIndex + stride) {
+    segments.push([
+      getCoordinateFromIndex(flatIndex),
+      getCoordinateFromIndex(nextIndex),
+    ]);
+  }
+
+  return segments;
+}
+
+function createSegmentsLabels(
+  segments: Segment[],
+  layer: VectorLayer,
+  is3D: boolean,
+): () => void {
+  const features = segments.map((segment) => {
+    const midPoint = getMidPoint(segment[0], segment[1]);
+    const feature = new Feature({
+      geometry: new Point(midPoint),
+    });
+
+    const segmentLength = is3D
+      ? ecef3DDistance(segment[0], segment[1])
+      : spherical2Distance(segment[0], segment[1]);
+
+    feature.setStyle(
+      new Style({
+        text: new OLText({
+          text: `${segmentLength.toFixed(2)} m`,
+          font: '16px Helvetica, sans-serif',
+        }),
+      }),
+    );
+    feature[createSync] = true;
+
+    return feature;
+  });
+  layer.addFeatures(features);
+
+  return () => {
+    layer.removeFeaturesById(features.map((f) => f.getId()!));
+    features.splice(0);
+  };
+}
+
+function createSegmentGeometry(
+  segment: Segment,
+  layer: VectorLayer,
+): () => void {
+  const feature = new Feature({
+    geometry: new LineString(segment),
+  });
+  feature[createSync] = true;
+
+  const features = [feature];
+  layer.addFeatures(features);
+
+  return () => {
+    layer.removeFeaturesById(features.map((f) => f.getId()!));
+    features.splice(0);
+  };
+}
+
+export default class SegmentLengthInteraction extends AbstractInteraction {
+  private _scratchLayer: VectorLayer;
+
+  private _geometry: Polygon | LineString | Circle | undefined;
+
+  private _isCircle = false;
+
+  // eslint-disable-next-line class-methods-use-this
+  private _removeLabels = (): void => {};
+
+  // eslint-disable-next-line class-methods-use-this
+  private _vectorPropertiesListener = (): void => {};
+
+  private _is3D = false;
+
+  creation: boolean;
+
+  constructor(scratchLayer: VectorLayer, creation: boolean) {
+    super(
+      creation ? EventType.MOVE : EventType.DRAGEVENTS,
+      ModificationKeyType.CTRL | ModificationKeyType.NONE,
+    );
+
+    this._scratchLayer = scratchLayer;
+    this._is3D =
+      scratchLayer.vectorProperties.altitudeMode === HeightReference.NONE;
+    this._vectorPropertiesListener =
+      scratchLayer.vectorProperties.propertyChanged.addEventListener(() => {
+        this._is3D =
+          scratchLayer.vectorProperties.altitudeMode === HeightReference.NONE;
+      });
+
+    this.creation = creation;
+  }
+
+  pipe(event: InteractionEvent): Promise<InteractionEvent> {
+    this._removeLabels();
+
+    if (this._geometry) {
+      let index: number | undefined;
+      if (this.creation) {
+        index = -1;
+      } else if (isVertex(event.feature)) {
+        index = event.feature[vertexIndexSymbol];
+      }
+
+      if (index != null) {
+        const segments = getSegmentForCoordinateIndex(this._geometry, index);
+        let removeLabels = createSegmentsLabels(
+          segments,
+          this._scratchLayer,
+          this._is3D,
+        );
+        if (this._isCircle) {
+          const removeTextLabels = removeLabels;
+          const removeSegment = createSegmentGeometry(
+            segments[0],
+            this._scratchLayer,
+          );
+          removeLabels = (): void => {
+            removeTextLabels();
+            removeSegment();
+          };
+        }
+        this._removeLabels = removeLabels;
+      }
+    }
+
+    return Promise.resolve(event);
+  }
+
+  setGeometry(geometry: LineString | Polygon | Circle): void {
+    this._geometry = geometry;
+    this._isCircle = geometry instanceof Circle;
+  }
+
+  destroy(): void {
+    this._removeLabels();
+    this._vectorPropertiesListener();
+    super.destroy();
+  }
+}

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

@@ -2,10 +2,12 @@ import Feature from 'ol/Feature.js';
 import AbstractInteraction, {
   EventAfterEventHandler,
 } from '../../../interaction/abstractInteraction.js';
-import { EventType } from '../../../interaction/interactionType.js';
-import { vertexSymbol } from '../editorSymbols.js';
+import {
+  EventType,
+  ModificationKeyType,
+} from '../../../interaction/interactionType.js';
 import VcsEvent from '../../../vcsEvent.js';
-import { Vertex } from '../editorHelpers.js';
+import { isVertex, Vertex } from '../editorHelpers.js';
 import { emptyStyle } from '../../../style/styleHelpers.js';
 
 /**
@@ -20,7 +22,10 @@ class TranslateVertexInteraction extends AbstractInteraction {
   private _feature: Feature;
 
   constructor(feature: Feature) {
-    super(EventType.DRAGEVENTS);
+    super(
+      EventType.DRAGEVENTS,
+      ModificationKeyType.NONE | ModificationKeyType.CTRL,
+    );
     this._feature = feature;
     this.setActive();
   }
@@ -36,17 +41,11 @@ class TranslateVertexInteraction extends AbstractInteraction {
         this._vertex.setStyle(undefined);
         this._vertex = null;
       }
-      event.stopPropagation = true;
-    } else if (
-      event.type & EventType.DRAGSTART &&
-      event.feature &&
-      (event.feature as Vertex)[vertexSymbol]
-    ) {
-      this._vertex = event.feature as Vertex;
+    } else if (event.type & EventType.DRAGSTART && isVertex(event.feature)) {
+      this._vertex = event.feature;
       this._vertex.set('olcs_allowPicking', false);
       this._feature.set('olcs_allowPicking', false);
       this._vertex.setStyle(emptyStyle);
-      event.stopPropagation = true;
     }
     return Promise.resolve(event);
   }