@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/util/editor/editorHelpers.ts

@@ -0,0 +1,328 @@
+import Point from 'ol/geom/Point.js';
+import Feature from 'ol/Feature.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Geometry } from 'ol/geom.js';
+
+import {
+  Cartesian2,
+  Cartesian3,
+  Math as CesiumMath,
+  Plane,
+  Ray,
+  IntersectionTests,
+  Cartographic,
+  HeightReference,
+  Cesium3DTileFeature,
+  type Scene,
+  type Camera,
+} from '@vcmap-cesium/engine';
+
+import { mercatorToCartesian } from '../math.js';
+import { getFlatCoordinatesFromGeometry } from '../geometryHelpers.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import { vertexSymbol } from './editorSymbols.js';
+import {
+  alreadyTransformedToImage,
+  createSync,
+  doNotTransform,
+} from '../../layer/vectorSymbols.js';
+import type VectorLayer from '../../layer/vectorLayer.js';
+import type VcsMap from '../../map/vcsMap.js';
+
+export type Vertex = Feature<Point>;
+
+export type SelectableFeatureType = Feature | Cesium3DTileFeature;
+export interface SelectFeatureInteraction {
+  readonly selected: Array<Feature>;
+  setSelected(
+    features: SelectableFeatureType[] | SelectableFeatureType,
+  ): Promise<void>;
+  hasFeatureId(id: string): boolean;
+}
+
+export const geometryChangeKeys = [
+  'olcs_altitudeMode',
+  'olcs_groundLevel',
+  'olcs_heightAboveGround',
+];
+
+/**
+ * @param  coordinate
+ */
+export function createVertex(coordinate: Coordinate): Vertex {
+  const geometry = new Point(coordinate);
+  geometry[alreadyTransformedToImage] = true;
+  const vertex = new Feature({
+    geometry,
+  });
+  vertex[vertexSymbol] = true;
+  vertex[doNotTransform] = true;
+  vertex[createSync] = 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();
+
+/**
+ * Returns the closest point on a 2D line. the Z index is taken from the point.
+ * @param  start - line segment start
+ * @param  end - line segment end
+ * @param  point - point to project
+ */
+export function getClosestPointOn2DLine(
+  start: Coordinate,
+  end: Coordinate,
+  point: Coordinate,
+): Coordinate {
+  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],
+  ];
+}
+
+export function pointOnLine3D(
+  start: Coordinate,
+  end: Coordinate,
+  point: Coordinate,
+  epsilon?: number,
+): boolean {
+  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 || CesiumMath.EPSILON5,
+  );
+}
+
+export function pointOnLine2D(
+  start: Coordinate,
+  end: Coordinate,
+  point: Coordinate,
+  epsilon?: number,
+): boolean {
+  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 || CesiumMath.EPSILON5,
+  );
+}
+
+export function createCameraVerticalPlane(
+  originCoordinates: Coordinate,
+  scene: Scene,
+): Plane {
+  scratchCartesian31 = mercatorToCartesian(
+    originCoordinates,
+    scratchCartesian31,
+  );
+  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  originCoordinates
+ * @param  scene
+ */
+export function createHorizontalPlane(
+  originCoordinates: Coordinate,
+  scene: Scene,
+): Plane {
+  scratchCartesian31 = mercatorToCartesian(
+    originCoordinates,
+    scratchCartesian31,
+  );
+  scratchCartesian32 = scene.globe.ellipsoid.geodeticSurfaceNormal(
+    scratchCartesian31,
+    scratchCartesian32,
+  );
+
+  return Plane.fromPointNormal(scratchCartesian31, scratchCartesian32);
+}
+
+/**
+ * @param  plane
+ * @param  camera
+ * @param  windowPosition
+ */
+export function getCartographicFromPlane(
+  plane: Plane,
+  camera: Camera,
+  windowPosition: Cartesian2,
+): Cartographic {
+  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  geometry
+ * @param  map
+ */
+export async function drapeGeometryOnTerrain(
+  geometry: Geometry,
+  map: VcsMap,
+): Promise<void> {
+  if (map instanceof CesiumMap) {
+    const coordinates = geometry.getCoordinates() as any[];
+    const flats = getFlatCoordinatesFromGeometry(geometry, coordinates);
+    await map.getHeightFromTerrain(flats);
+    geometry.setCoordinates(coordinates);
+  }
+}
+
+/**
+ * Places a geometry onto the terrain at its lowest point.
+ * @param  geometry
+ * @param  map
+ */
+export async function placeGeometryOnTerrain(
+  geometry: Geometry,
+  map: VcsMap,
+): Promise<void> {
+  if (map instanceof CesiumMap) {
+    const coordinates = geometry.getCoordinates() as any[];
+    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);
+  }
+}
+
+export async function ensureFeatureAbsolute(
+  feature: Feature,
+  layer: VectorLayer,
+  cesiumMap: CesiumMap,
+): Promise<void> {
+  // XXX this does not ensure 3D coordinates
+  const layerIsClamped =
+    layer.vectorProperties.altitudeMode === HeightReference.CLAMP_TO_GROUND;
+  const altitudeMode = feature.get('olcs_altitudeMode') as string;
+  if (altitudeMode === 'clampToGround' || (!altitudeMode && layerIsClamped)) {
+    feature.set('olcs_altitudeMode', 'absolute', true);
+    const geometry = feature.getGeometry();
+    if (geometry) {
+      await placeGeometryOnTerrain(geometry, cesiumMap);
+    }
+  }
+}
+
+export function clampFeature(feature: import('ol').Feature): void {
+  feature.set('olcs_altitudeMode', 'clampToGround');
+}

package/src/util/editor/editorSessionHelpers.ts

@@ -0,0 +1,137 @@
+import type { Point, Polygon, Circle, LineString } from 'ol/geom.js';
+import VectorLayer from '../../layer/vectorLayer.js';
+import { mercatorProjection } from '../projection.js';
+import InteractionChain from '../../interaction/interactionChain.js';
+import VcsEvent from '../../vcsEvent.js';
+import { EventType } from '../../interaction/interactionType.js';
+import LayerCollection, { maxZIndex } from '../layerCollection.js';
+import { markVolatile } from '../../vcsModule.js';
+import { PrimitiveOptionsType } from '../../layer/vectorProperties.js';
+import EventHandler from '../../interaction/eventHandler.js';
+
+export enum SessionType {
+  CREATE = 'create',
+  EDIT_GEOMETRY = 'editGeometry',
+  EDIT_FEATURES = 'editFeatures',
+  SELECT = 'selectFeatures',
+}
+
+/**
+ * An editor session is a currently set of interactions to create or edit geometries & features.
+ * All editor sessions can be stopped and will be stopped, if their interactions get removed from the
+ * event handler.
+ * A stopped session will be destroyed and can no longer be used.
+ */
+export type EditorSession = {
+  type: SessionType;
+  stop(): void;
+  stopped: VcsEvent<void>;
+};
+
+/**
+ * Sets up an editor session scratch layer & activates it. Does not wait for the activation promise to resolve.
+ * Note: scratch layers are volatile.
+ */
+export function setupScratchLayer(
+  layerCollection: LayerCollection,
+): VectorLayer {
+  // IDEA pass in stopped and cleanup ourselves?
+  const layer = new VectorLayer({
+    projection: mercatorProjection.toJSON(),
+    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,
+    style: {
+      image: {
+        radius: 5,
+        fill: {
+          color: 'rgba(255,255,255,0.47)',
+        },
+        stroke: {
+          width: 1,
+          color: '#000000',
+        },
+      },
+    },
+  });
+  markVolatile(layer);
+  layerCollection.add(layer);
+  // eslint-disable-next-line no-void
+  void layer.activate();
+  return layer;
+}
+
+/**
+ * Sets up the default interaction chain for the editors. This will set the provided event handlers
+ * feature interaction to be active on CLICKMOVE & DRAGSTART. Destroying the setup will reset the interaction
+ * to its previous active state.
+ * @param  eventHandler
+ * @param  [interactionId]
+ * @private
+ */
+export function setupInteractionChain(
+  eventHandler: EventHandler,
+  interactionId?: string,
+): {
+  interactionChain: InteractionChain;
+  removed: VcsEvent<void>;
+  destroy(this: void): void;
+} {
+  const interactionChain = new InteractionChain();
+  const removed = new VcsEvent<void>();
+  const listener = eventHandler.addExclusiveInteraction(
+    interactionChain,
+    () => {
+      removed.raiseEvent();
+    },
+    undefined,
+    interactionId,
+  );
+  const currentFeatureInteractionEvent = eventHandler.featureInteraction.active;
+  eventHandler.featureInteraction.setActive(
+    EventType.CLICKMOVE | EventType.DRAGSTART,
+  );
+
+  return {
+    interactionChain,
+    destroy(): void {
+      listener();
+      removed.destroy();
+      interactionChain.destroy();
+      eventHandler.featureInteraction.setActive(currentFeatureInteractionEvent);
+    },
+    removed,
+  };
+}
+
+export enum GeometryType {
+  Point = 'Point',
+  Circle = 'Circle',
+  LineString = 'LineString',
+  Polygon = 'Polygon',
+  BBox = 'BBox',
+}
+
+export type GeometryToType<T extends GeometryType> =
+  T extends GeometryType.Point
+    ? Point
+    : T extends GeometryType.Polygon
+    ? Polygon
+    : T extends GeometryType.BBox
+    ? Polygon
+    : T extends GeometryType.LineString
+    ? LineString
+    : T extends GeometryType.Circle
+    ? Circle
+    : never;

package/src/util/editor/editorSymbols.ts

@@ -0,0 +1,17 @@
+/**
+ * Symbol to identify a {@link Vertex}
+ */
+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');
+/**
+ * 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}
+ */
+export const handlerSymbol = Symbol('Handler');
+/**
+ * Symbol to identify which was the last editor mouse over handler that edited the cursor style.
+ */
+export const mouseOverSymbol = Symbol('MouseOver');

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

@@ -0,0 +1,135 @@
+import Polygon from 'ol/geom/Polygon.js';
+import type { Coordinate } from 'ol/coordinate.js';
+
+import AbstractInteraction, {
+  type EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { GeometryType } from '../editorSessionHelpers.js';
+import {
+  alreadyTransformedToImage,
+  alreadyTransformedToMercator,
+} from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import type { CreateInteraction } from '../createFeatureSession.js';
+
+/**
+ * Offset to prevent bbox from collapsing
+ */
+const precisionOffset = 0.000001;
+
+/**
+ * This interaction allows you to create a bounding box geometry.
+ */
+class CreateBBoxInteraction
+  extends AbstractInteraction
+  implements CreateInteraction<Polygon>
+{
+  private _geometry: Polygon | null = null;
+
+  private _origin: Coordinate | null = null;
+
+  private _lastCoordinate: Coordinate | null = null;
+
+  finished = new VcsEvent<Polygon | null>();
+
+  created = new VcsEvent<Polygon>();
+
+  constructor() {
+    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    this.setActive();
+  }
+
+  /**
+   * Sets the coordinates given the last coordinate and the current origin
+   * @private
+   */
+  private _setCoordinates(): void {
+    if (this._geometry && this._origin && this._lastCoordinate) {
+      const originXHigher = this._origin[0] >= this._lastCoordinate[0];
+      const originYHigher = this._origin[1] >= this._lastCoordinate[1];
+      if (this._origin[0] === this._lastCoordinate[0]) {
+        this._lastCoordinate[0] += precisionOffset;
+      }
+      if (this._origin[1] === this._lastCoordinate[1]) {
+        this._lastCoordinate[1] += precisionOffset;
+      }
+
+      this._lastCoordinate[2] = this._origin[2];
+      let ringCoordinates;
+      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]],
+        ];
+      } else {
+        ringCoordinates = [
+          this._origin,
+          [this._origin[0], this._lastCoordinate[1], this._origin[2]],
+          this._lastCoordinate,
+          [this._lastCoordinate[0], this._origin[1], this._origin[2]],
+        ];
+      }
+      this._geometry.setCoordinates([ringCoordinates]);
+    }
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.type & EventType.CLICKMOVE && this._geometry) {
+      this._lastCoordinate!.splice(
+        0,
+        event.positionOrPixel.length,
+        ...event.positionOrPixel,
+      );
+      this._setCoordinates();
+    }
+
+    if (event.type & EventType.CLICK) {
+      if (this._geometry) {
+        this.finish();
+      } else {
+        this._geometry = new Polygon([[event.positionOrPixel.slice()]], 'XYZ');
+        this._geometry.set('_vcsGeomType', GeometryType.BBox);
+        if (event.map instanceof ObliqueMap) {
+          this._geometry[alreadyTransformedToImage] = true;
+        } else {
+          this._geometry[alreadyTransformedToMercator] = true;
+        }
+        this.created.raiseEvent(this._geometry);
+        this._origin = event.positionOrPixel.slice();
+        this._lastCoordinate = this._origin.slice();
+      }
+    }
+
+    if (event.type & EventType.DBLCLICK) {
+      this.finish();
+    }
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Finish the current creation. Calls finish and sets the interaction to be inactive
+   */
+  finish(): void {
+    if (this.active !== EventType.NONE) {
+      this._setCoordinates();
+      this.setActive(false);
+      this.finished.raiseEvent(this._geometry);
+    }
+  }
+
+  destroy(): void {
+    this._geometry = null;
+    this.finished.destroy();
+    this.created.destroy();
+    super.destroy();
+  }
+}
+
+export default CreateBBoxInteraction;