@vcmap/core 6.0.0-rc.9 → 6.0.0

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

@@ -6,9 +6,8 @@ import {
   EventType,
   ModificationKeyType,
 } from '../../../interaction/interactionType.js';
-import { vertexSymbol } from '../editorSymbols.js';
 import VcsEvent from '../../../vcsEvent.js';
-import { Vertex } from '../editorHelpers.js';
+import { isVertex, Vertex } from '../editorHelpers.js';
 import { emptyStyle } from '../../../style/styleHelpers.js';
 
 /**
@@ -42,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);
   }

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

@@ -16,8 +16,8 @@ import {
   SnapType,
   snapTypes,
 } from '../snappingHelpers.js';
-import { vertexIndexSymbol, vertexSymbol } from '../editorSymbols.js';
-import { Vertex } from '../editorHelpers.js';
+import { vertexIndexSymbol } from '../editorSymbols.js';
+import { isVertex } from '../editorHelpers.js';
 import {
   alreadySnapped,
   SnappingInteractionEvent,
@@ -149,9 +149,9 @@ export default class TranslationSnapping extends AbstractInteraction {
       this._lastCoordinate = undefined;
     } else if (
       event.key !== ModificationKeyType.CTRL &&
-      (event.feature as Vertex | undefined)?.[vertexSymbol]
+      isVertex(event.feature)
     ) {
-      const index = (event.feature as Vertex)[vertexIndexSymbol];
+      const index = event.feature[vertexIndexSymbol];
       if (event.type === EventType.DRAGSTART) {
         this._setCoordinates(index);
       }

package/src/util/featureconverter/clampedPrimitive.ts

@@ -1,6 +1,7 @@
 import {
   Cartesian3,
   Cartographic,
+  ClassificationPrimitive,
   HeightReference,
   Matrix4,
   Model,
@@ -37,19 +38,66 @@ function getUpdateHeightCallback(
   };
 }
 
+function getUpdateClassificationHeightCallback(
+  primitive: ClassificationPrimitive,
+  originalPosition: Cartesian3,
+): (cartographic: Cartographic) => void {
+  return function updatePrimitiveHeight(clampedPosition: Cartographic) {
+    Cartographic.toCartesian(
+      clampedPosition,
+      undefined,
+      scratchUpdateHeightCartesian,
+    );
+
+    Cartesian3.subtract(
+      scratchUpdateHeightCartesian,
+      originalPosition,
+      scratchUpdateHeightCartesian,
+    );
+
+    if (primitive.ready) {
+      // eslint-disable-next-line no-underscore-dangle
+      const innerPrimitive = primitive._primitive as Primitive;
+
+      const { modelMatrix } = innerPrimitive;
+      innerPrimitive.modelMatrix = Matrix4.setTranslation(
+        modelMatrix,
+        scratchUpdateHeightCartesian,
+        new Matrix4(),
+      );
+    } else {
+      // eslint-disable-next-line no-underscore-dangle
+      primitive._primitiveOptions!.modelMatrix = Matrix4.setTranslation(
+        Matrix4.IDENTITY,
+        scratchUpdateHeightCartesian,
+        new Matrix4(),
+      );
+    }
+  };
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export function setupClampedPrimitive(
   scene: Scene,
-  primitive: Primitive | Model,
+  primitive: Primitive | Model | ClassificationPrimitive,
   origin: [number, number],
   heightReference: HeightReference,
 ): void {
   const destroy = primitive.destroy.bind(primitive);
   const originCartographic = mercatorToCartographic(origin);
-  const callback = getUpdateHeightCallback(
-    primitive,
-    Cartographic.toCartesian(originCartographic),
-  );
+  let callback;
+  if (primitive instanceof ClassificationPrimitive) {
+    callback = getUpdateClassificationHeightCallback(
+      primitive,
+      Cartographic.toCartesian(originCartographic),
+    );
+  } else {
+    callback = getUpdateHeightCallback(
+      primitive,
+      Cartographic.toCartesian(originCartographic),
+    );
+  }
+
   const callbackHandler = scene.updateHeight(
     originCartographic,
     callback,

package/src/util/featureconverter/convert.ts

@@ -324,12 +324,23 @@ function getPrimitiveBatches(
 
 function getClampedPrimitiveBatches(
   options: CesiumGeometryOption<'solid' | 'outline' | 'line' | 'fill'>[],
+  feature: Feature,
+  vectorProperties: VectorProperties,
+  scene: Scene,
 ): PrimitiveBatches {
   const batches = createPrimitiveBatches();
+  const classification = vectorProperties.getClassificationType(feature);
+  const classificationSupported = ClassificationPrimitive.isSupported(scene);
 
   options.forEach((item) => {
     if (item.type === 'solid' || item.type === 'fill') {
-      batches.solidPrimitive.push(item);
+      if (classification != null) {
+        if (classificationSupported) {
+          batches.classificationPrimitive.push(item);
+        }
+      } else {
+        batches.solidPrimitive.push(item);
+      }
     } else if (item.type === 'outline') {
       batches.outlinePrimitive.push(item);
     } else if (item.type === 'line') {
@@ -414,7 +425,12 @@ function batchPrimitives(
 
   batches.clampedPrimitives.forEach((options, originHash) => {
     const [x, y, heightReference] = originHash.split(':').map(Number);
-    const clampedBatches = getClampedPrimitiveBatches(options);
+    const clampedBatches = getClampedPrimitiveBatches(
+      options,
+      feature,
+      vectorProperties,
+      scene,
+    );
     const clampedItems = batchPrimitives(
       clampedBatches,
       feature,

package/src/util/geometryHelpers.ts

@@ -221,7 +221,62 @@ export function from3Dto2DLayout(geometry: Geometry): void {
  * @param scene
  * @param heightReference - clamp to ground will use `scene.getHeightMostDetailed`, terrain will use `sampleTerrainMostDetailed` using the scenes terrain provider
  */
-export async function placeGeometryOnGround(
+export async function placeGeometryOnSurface(
+  geometry: Geometry,
+  scene: Scene,
+  heightReference:
+    | HeightReference.CLAMP_TO_GROUND
+    | HeightReference.CLAMP_TO_TERRAIN,
+): Promise<void> {
+  const layout = geometry.getLayout();
+  const coordinates = geometry.getCoordinates() as any[];
+  const flatCoordinates = getFlatCoordinateReferences(geometry, coordinates);
+  const drapedCartographics = flatCoordinates.map((c) =>
+    mercatorToCartographic(c),
+  );
+  if (heightReference === HeightReference.CLAMP_TO_GROUND) {
+    await scene.sampleHeightMostDetailed(drapedCartographics);
+  } else if (scene.terrainProvider.availability) {
+    await sampleTerrainMostDetailed(scene.terrainProvider, drapedCartographics);
+  } else {
+    drapedCartographics.forEach((c) => {
+      c.height = 0;
+    });
+  }
+  if (layout === 'XY' || layout === 'XYM') {
+    const height = Math.max(...drapedCartographics.map((c) => c.height));
+    flatCoordinates.forEach((c, index) => {
+      if (layout === 'XYM') {
+        flatCoordinates[index][3] = c[2];
+      }
+      flatCoordinates[index][2] = height;
+    });
+  } else {
+    const maxDiff = flatCoordinates.reduce((acc, coord, index) => {
+      const current = drapedCartographics[index].height - coord[2];
+      return Math.max(current, acc);
+    }, -Infinity);
+    if (Number.isFinite(maxDiff) && maxDiff !== 0) {
+      flatCoordinates.forEach((_c, index) => {
+        flatCoordinates[index][2] += maxDiff;
+      });
+    }
+  }
+
+  geometry.setCoordinates(
+    coordinates,
+    layout === 'XYM' || layout === 'XYZM' ? 'XYZM' : 'XYZ',
+  );
+}
+
+/**
+ * Drape a geometry on to the ground (or terrain). The geometry is changed in place. This function
+ * will set the layout to a respective 3D layout.
+ * @param geometry
+ * @param scene
+ * @param heightReference - clamp to ground will use `scene.getHeightMostDetailed`, terrain will use `sampleTerrainMostDetailed` using the scenes terrain provider
+ */
+export async function drapeGeometryOnSurface(
   geometry: Geometry,
   scene: Scene,
   heightReference:
@@ -234,8 +289,12 @@ export async function placeGeometryOnGround(
   const cartographics = flatCoordinates.map((c) => mercatorToCartographic(c));
   if (heightReference === HeightReference.CLAMP_TO_GROUND) {
     await scene.sampleHeightMostDetailed(cartographics);
-  } else {
+  } else if (scene.terrainProvider.availability) {
     await sampleTerrainMostDetailed(scene.terrainProvider, cartographics);
+  } else {
+    cartographics.forEach((c) => {
+      c.height = 0;
+    });
   }
 
   cartographics.forEach((c, index) => {
@@ -268,7 +327,7 @@ export async function from2Dto3DLayout(
     | HeightReference.CLAMP_TO_TERRAIN,
 ): Promise<void> {
   if (is2DLayout(geometry.getLayout())) {
-    await placeGeometryOnGround(geometry, scene, heightReference);
+    await drapeGeometryOnSurface(geometry, scene, heightReference);
   }
 }
 
@@ -316,7 +375,7 @@ export async function createAbsoluteFeature(
     if (groundLevel != null) {
       setZCoordinate(geometry, groundLevel);
     } else {
-      await placeGeometryOnGround(
+      await drapeGeometryOnSurface(
         geometry,
         scene,
         altitudeMode !== HeightReference.CLAMP_TO_TERRAIN

package/src/util/math.ts

@@ -4,6 +4,7 @@ import {
   Cartographic,
 } from '@vcmap-cesium/engine';
 import type { Coordinate } from 'ol/coordinate.js';
+import { getDistance as haversineDistance } from 'ol/sphere.js';
 import Projection from './projection.js';
 
 /**
@@ -225,3 +226,30 @@ export function cartesian2Intersection(
 
   return [lineA[0][0] + s * A[0], lineA[0][1] + s * A[1]];
 }
+
+/**
+ * calculates the haversine distance between two mercator coordinates.
+ * @param p1 - in mercator
+ * @param p2 - in mercator
+ */
+export function spherical2Distance(p1: Coordinate, p2: Coordinate): number {
+  return haversineDistance(
+    Projection.mercatorToWgs84(p1),
+    Projection.mercatorToWgs84(p2),
+  );
+}
+
+let ecefDistanceScratch1 = new Cartesian3();
+let ecefDistanceScratch2 = new Cartesian3();
+
+/**
+ * calculates the 3D distance in ECEF between two mercator coordinates.
+ * @param p1 - in mercator
+ * @param p2 - in mercator
+ */
+export function ecef3DDistance(p1: Coordinate, p2: Coordinate): number {
+  ecefDistanceScratch1 = mercatorToCartesian(p1, ecefDistanceScratch1);
+  ecefDistanceScratch2 = mercatorToCartesian(p2, ecefDistanceScratch2);
+
+  return Cartesian3.distance(ecefDistanceScratch1, ecefDistanceScratch2);
+}

package/src/util/projection.ts

@@ -48,7 +48,7 @@ function parseEPSGCode(value?: string | number, prefix = 'EPSG:'): string {
     const regex = new RegExp(`^(?:${prefix})?(\\d+)`, 'i');
     const matches = `${value}`.match(regex);
     if (matches && matches[1]) {
-      return `${prefix}${matches[1]}`;
+      return prefix ? `${prefix}${matches[1]}` : matches[1];
     }
   }
   return '';