@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/util/editor/transformation/extrudeInteraction.ts

@@ -0,0 +1,87 @@
+import type { Cartesian2, Scene } from '@vcmap-cesium/engine';
+import type { Feature } from 'ol/index.js';
+import type { Coordinate } from 'ol/coordinate.js';
+
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { handlerSymbol } from '../editorSymbols.js';
+import {
+  createCameraVerticalPlane,
+  getCartographicFromPlane,
+} from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { AxisAndPlanes, TransformationHandler } from './transformationTypes.js';
+import type CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * A class to handle events on a {@link TransformationHandler}. Should be used with {@link TransformationHandler} created for mode TransformationMode.EXTRUDE.
+ * If the Z handler is dragged, the extruded event will be raised with a delta in Z direction. This
+ * interaction only works if a {@link CesiumMap} is the active map.
+ */
+class ExtrudeInteraction extends AbstractInteraction {
+  private _transformationHandler: TransformationHandler | null;
+
+  private _getExtrudeEvent:
+    | null
+    | ((coord: Coordinate, windowPosition: Cartesian2) => number) = null;
+
+  /**
+   * Event raised with the extrusion delta to the last event fired.
+   */
+  readonly extruded = new VcsEvent<number>();
+
+  constructor(transformationHandler: TransformationHandler) {
+    super(EventType.DRAGEVENTS);
+    this._transformationHandler = transformationHandler;
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (this._getExtrudeEvent) {
+      this.extruded.raiseEvent(
+        this._getExtrudeEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getExtrudeEvent = null;
+        this._transformationHandler!.showAxis = AxisAndPlanes.NONE;
+      }
+    } else if (
+      event.type === EventType.DRAGSTART &&
+      (event?.feature as Feature)?.[handlerSymbol]
+    ) {
+      const axis = (event.feature as Feature)[handlerSymbol];
+      if (axis === AxisAndPlanes.Z) {
+        const scene = (event.map as CesiumMap).getScene() as Scene;
+        this._transformationHandler!.showAxis = axis;
+        const plane = createCameraVerticalPlane(
+          this._transformationHandler!.center.slice(),
+          scene,
+        );
+        let currentHeight = getCartographicFromPlane(
+          plane,
+          scene.camera,
+          event.windowPosition,
+        ).height;
+        this._getExtrudeEvent = (_c, windowPosition): number => {
+          const newHeight = getCartographicFromPlane(
+            plane,
+            scene.camera,
+            windowPosition,
+          ).height;
+          const extrude = newHeight - currentHeight;
+          currentHeight = newHeight;
+          return extrude;
+        };
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  destroy(): void {
+    this._transformationHandler = null;
+    this.extruded.destroy();
+  }
+}
+
+export default ExtrudeInteraction;

package/src/util/editor/transformation/rotateInteraction.ts

@@ -0,0 +1,177 @@
+import { Cartesian2, Plane, Scene, Transforms } from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Feature } from 'ol/index.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { handlerSymbol } from '../editorSymbols.js';
+import { getCartographicFromPlane } from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+import Projection from '../../projection.js';
+import { cartographicToWgs84, mercatorToCartesian } from '../../math.js';
+import { AxisAndPlanes, TransformationHandler } from './transformationTypes.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+export type RotationEvent = {
+  angle: number;
+  axis: AxisAndPlanes;
+};
+
+function determineOrientation(
+  start: Cartesian2,
+  end: Cartesian2,
+  angle: number,
+): number {
+  const orientation = start.x * end.y - start.y * end.x;
+  return orientation > 0 ? angle : angle * -1;
+}
+
+type GetRotationEventCallback = (
+  coord: Coordinate,
+  windowPosition: Cartesian2,
+) => RotationEvent;
+
+function createGetRotationEvent(
+  getPosition: (coords: Coordinate, windowPosition: Cartesian2) => Cartesian2,
+  event: EventAfterEventHandler,
+  axis: AxisAndPlanes,
+): GetRotationEventCallback {
+  let currentPosition = getPosition(
+    event.positionOrPixel,
+    event.windowPosition,
+  );
+
+  return (coordinate, windowPosition) => {
+    const newPosition = getPosition(coordinate, windowPosition);
+    const angle = determineOrientation(
+      currentPosition,
+      newPosition,
+      Cartesian2.angleBetween(currentPosition, newPosition),
+    );
+    currentPosition = newPosition;
+    return { angle, axis };
+  };
+}
+
+/**
+ * A class to handle events on a {@link TransformationHandler}. Should be used with {@link TransformationHandler} created for mode TransformationMode.ROTATE.
+ * If the rings are dragged, the rotated event will be raised.
+ */
+class RotateInteraction extends AbstractInteraction {
+  private _transformationHandler: TransformationHandler | null;
+
+  /**
+   * The event raised, if the rings are dragged. Event is raised with the angle delta to the last event in radians.
+   */
+  readonly rotated = new VcsEvent<RotationEvent>();
+
+  private _getRotationEvent: null | GetRotationEventCallback = null;
+
+  constructor(transformationHandler: TransformationHandler) {
+    super(EventType.DRAGEVENTS);
+    this._transformationHandler = transformationHandler;
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (this._getRotationEvent) {
+      this.rotated.raiseEvent(
+        this._getRotationEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getRotationEvent = null;
+      }
+    } else if (
+      event.type === EventType.DRAGSTART &&
+      (event?.feature as Feature)?.[handlerSymbol]
+    ) {
+      const axis = (event.feature as Feature)[handlerSymbol] as AxisAndPlanes;
+      if (axis !== AxisAndPlanes.NONE) {
+        if (event.map instanceof CesiumMap) {
+          this._getRotationEvent = this._dragAlongPlane3D(axis, event);
+        } else {
+          this._getRotationEvent = this._dragAlongPlane2D(axis, event);
+        }
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  private _dragAlongPlane3D(
+    axis: AxisAndPlanes,
+    event: EventAfterEventHandler,
+  ): (
+    coords: Coordinate,
+    windowPosition: Cartesian2,
+  ) => { angle: number; axis: AxisAndPlanes } {
+    const scene = (event.map as CesiumMap).getScene() as Scene;
+    const center = mercatorToCartesian(this._transformationHandler!.center);
+    let plane: Plane;
+    if (axis === AxisAndPlanes.X) {
+      plane = Plane.clone(Plane.ORIGIN_YZ_PLANE);
+    } else if (axis === AxisAndPlanes.Y) {
+      plane = Plane.clone(Plane.ORIGIN_ZX_PLANE);
+    } else {
+      plane = Plane.clone(Plane.ORIGIN_XY_PLANE);
+    }
+    plane = Plane.transform(
+      plane,
+      Transforms.eastNorthUpToFixedFrame(center),
+      plane,
+    );
+
+    return createGetRotationEvent(
+      (_c, windowPosition) => {
+        const cartographic = getCartographicFromPlane(
+          plane,
+          scene.camera,
+          windowPosition,
+        );
+        const centeredCoordinates = Projection.wgs84ToMercator(
+          cartographicToWgs84(cartographic),
+        );
+        const currentCenter = this._transformationHandler!.center;
+        centeredCoordinates[0] = currentCenter[0] - centeredCoordinates[0];
+        centeredCoordinates[1] = currentCenter[1] - centeredCoordinates[1];
+        centeredCoordinates[2] = currentCenter[2] - centeredCoordinates[2];
+        if (axis === AxisAndPlanes.Z) {
+          return Cartesian2.fromArray(centeredCoordinates);
+        }
+        if (axis === AxisAndPlanes.X) {
+          return new Cartesian2(centeredCoordinates[1], centeredCoordinates[2]);
+        }
+        return new Cartesian2(centeredCoordinates[0], centeredCoordinates[2]);
+      },
+      event,
+      axis,
+    );
+  }
+
+  private _dragAlongPlane2D(
+    axis: AxisAndPlanes,
+    event: EventAfterEventHandler,
+  ): (
+    coords: Coordinate,
+    windowPosition: Cartesian2,
+  ) => { angle: number; axis: AxisAndPlanes } {
+    return createGetRotationEvent(
+      (c) => {
+        const centeredCoordinates = c.slice();
+        const { center } = this._transformationHandler!;
+        centeredCoordinates[0] = center[0] - centeredCoordinates[0];
+        centeredCoordinates[1] = center[1] - centeredCoordinates[1];
+        centeredCoordinates[2] = center[2] - centeredCoordinates[2];
+        return Cartesian2.fromArray(centeredCoordinates);
+      },
+      event,
+      axis,
+    );
+  }
+
+  destroy(): void {
+    this._transformationHandler = null;
+    this.rotated.destroy();
+  }
+}
+
+export default RotateInteraction;

package/src/util/editor/transformation/scaleInteraction.ts

@@ -0,0 +1,185 @@
+import { Cartesian2, Plane, Scene, Transforms } from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Feature } from 'ol/index.js';
+
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { handlerSymbol } from '../editorSymbols.js';
+import { getCartographicFromPlane } from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+import Projection from '../../projection.js';
+import {
+  cartesian2DDistance,
+  cartographicToWgs84,
+  mercatorToCartesian,
+} from '../../math.js';
+import { AxisAndPlanes, TransformationHandler } from './transformationTypes.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * [dx, dy, dz]
+ */
+export type ScaleEvent = [number, number, number];
+
+type GetScaleCallback = (
+  coords: Coordinate,
+  windowPosition: Cartesian2,
+) => ScaleEvent;
+
+function createGetScaledEvent(
+  getPosition: (coords: Coordinate, windowPosition: Cartesian2) => Coordinate,
+  event: EventAfterEventHandler,
+  transformationHandler: TransformationHandler,
+  axis: AxisAndPlanes,
+): GetScaleCallback {
+  const { center } = transformationHandler;
+  let flippedX = false;
+  let flippedY = false;
+
+  const getDistance = (
+    coordinate: Coordinate,
+    windowPosition: Cartesian2,
+  ): { distance: number; dx: number; dy: number } => {
+    const position = getPosition(coordinate, windowPosition);
+    const dx = position[0] - center[0];
+    const dy = position[1] - center[1];
+    let distance;
+    if (axis === AxisAndPlanes.X) {
+      distance = Math.abs(dx);
+    } else if (axis === AxisAndPlanes.Y) {
+      distance = Math.abs(dy);
+    } else {
+      distance = cartesian2DDistance(center, position);
+    }
+    return { distance, dx, dy };
+  };
+
+  const { distance: initialDistance } = getDistance(
+    event.positionOrPixel,
+    event.windowPosition,
+  );
+  let currentDistance = initialDistance;
+  return (coordinate, windowPosition) => {
+    const { distance, dx, dy } = getDistance(coordinate, windowPosition);
+
+    const distanceDelta = distance / currentDistance;
+    const currentFlippedX = dx < 0;
+    const currentFlippedY = dy < 0;
+    let sx = distanceDelta;
+    let sy = distanceDelta;
+    if (currentFlippedX !== flippedX) {
+      flippedX = currentFlippedX;
+      sx *= -1;
+    }
+
+    if (currentFlippedY !== flippedY) {
+      flippedY = currentFlippedY;
+      sy *= -1;
+    }
+
+    currentDistance = distance;
+    if (axis === AxisAndPlanes.X) {
+      return [sx, 1, 1];
+    } else if (axis === AxisAndPlanes.Y) {
+      return [1, sy, 1];
+    } else {
+      return [sx, sy, 1];
+    }
+  };
+}
+
+/**
+ * A class to handle events on a {@link TransformationHandler}. Should be used with {@link TransformationHandler} created for mode TransformationMode.SCALE..
+ * If the handlers are dragged, the scaled event will be raised.
+ */
+class ScaleInteraction extends AbstractInteraction {
+  private _transformationHandler: TransformationHandler | null;
+
+  /**
+   * Event raised if the handlers are dragged. The resulting array is of type [sx, sy, sz] where all numbers
+   * are considered to be deltas to the previous event (where 1 means no scaling).
+   */
+  readonly scaled = new VcsEvent<ScaleEvent>();
+
+  private _getScaleEvent: null | GetScaleCallback = null;
+
+  constructor(transformationHandler: TransformationHandler) {
+    super(EventType.DRAGEVENTS);
+    this._transformationHandler = transformationHandler;
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (this._getScaleEvent) {
+      this.scaled.raiseEvent(
+        this._getScaleEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getScaleEvent = null;
+        this._transformationHandler!.showAxis = AxisAndPlanes.NONE;
+      }
+    } else if (
+      event.type === EventType.DRAGSTART &&
+      (event?.feature as Feature)?.[handlerSymbol]
+    ) {
+      const axis = (event.feature as Feature)[handlerSymbol] as AxisAndPlanes;
+      if (axis !== AxisAndPlanes.NONE) {
+        this._transformationHandler!.showAxis = axis;
+        if (event.map instanceof CesiumMap) {
+          this._getScaleEvent = this._dragAlongPlane3D(axis, event);
+        } else {
+          this._getScaleEvent = this._dragAlongPlane2D(axis, event);
+        }
+      }
+    }
+    return Promise.resolve(event);
+  }
+
+  private _dragAlongPlane3D(
+    axis: AxisAndPlanes,
+    event: EventAfterEventHandler,
+  ): GetScaleCallback {
+    const scene = (event.map as CesiumMap).getScene() as Scene;
+    const center = mercatorToCartesian(this._transformationHandler!.center);
+    let plane = Plane.clone(Plane.ORIGIN_XY_PLANE);
+    plane = Plane.transform(
+      plane,
+      Transforms.eastNorthUpToFixedFrame(center),
+      plane,
+    );
+
+    return createGetScaledEvent(
+      (_c, windowPosition) => {
+        const cartographic = getCartographicFromPlane(
+          plane,
+          scene.camera,
+          windowPosition,
+        );
+        return Projection.wgs84ToMercator(cartographicToWgs84(cartographic));
+      },
+      event,
+      this._transformationHandler!,
+      axis,
+    );
+  }
+
+  private _dragAlongPlane2D(
+    axis: AxisAndPlanes,
+    event: EventAfterEventHandler,
+  ): GetScaleCallback {
+    return createGetScaledEvent(
+      (c) => c.slice(),
+      event,
+      this._transformationHandler!,
+      axis,
+    );
+  }
+
+  destroy(): void {
+    this._transformationHandler = null;
+    this.scaled.destroy();
+  }
+}
+
+export default ScaleInteraction;

package/src/util/editor/transformation/transformationHandler.ts

@@ -0,0 +1,174 @@
+import type { Feature } from 'ol/index.js';
+import type { SimpleGeometry } from 'ol/geom.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import { HeightReference } from '@vcmap-cesium/engine';
+import {
+  createEmpty as createEmptyExtent,
+  extend as extendExtent,
+  getCenter as getExtentCenter,
+} from 'ol/extent.js';
+import Extent3D from '../../featureconverter/extent3D.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+import BaseOLMap from '../../../map/baseOLMap.js';
+import create3DHandlers from './create3DHandlers.js';
+import create2DHandlers from './create2DHandlers.js';
+import { obliqueGeometry } from '../../../layer/vectorSymbols.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+import {
+  AxisAndPlanes,
+  Handlers,
+  TransformationHandler,
+  TransformationMode,
+} from './transformationTypes.js';
+import type VcsMap from '../../../map/vcsMap.js';
+
+type FeatureCenterInfo = {
+  center: import('ol/coordinate.js').Coordinate;
+  someClamped: boolean;
+  someNoTerrain: boolean;
+};
+
+function getCenterFromFeatures3D(
+  layer: VectorLayer,
+  features: Feature[],
+): FeatureCenterInfo {
+  const extent3D = new Extent3D();
+  let someClamped = false;
+  let someNoTerrain = false;
+  const layerIsClamped =
+    layer.vectorProperties.altitudeMode === HeightReference.CLAMP_TO_GROUND;
+
+  features.forEach((f) => {
+    const geometry = f.getGeometry() as SimpleGeometry;
+    extent3D.extendWithGeometry(geometry);
+    if (!someNoTerrain) {
+      const firstCoordinates = geometry.getFirstCoordinate();
+      if (!firstCoordinates[2]) {
+        someNoTerrain = true;
+      }
+    }
+
+    if (!someClamped) {
+      const altitudeMode = f.get('olcs_altitudeMode') as string;
+      someClamped =
+        altitudeMode === 'clampToGround' || (!altitudeMode && layerIsClamped);
+    }
+  });
+  const center = extent3D.getCenter();
+  return {
+    center,
+    someClamped,
+    someNoTerrain,
+  };
+}
+
+function getCenterFromFeatures2D(features: Feature[]): FeatureCenterInfo {
+  const extent = createEmptyExtent();
+
+  features.forEach((f) => {
+    const geometry = f[obliqueGeometry] ?? f.getGeometry();
+    extendExtent(extent, geometry!.getExtent());
+  });
+
+  return {
+    center: [...getExtentCenter(extent), 0],
+    someClamped: false,
+    someNoTerrain: false,
+  };
+}
+
+/**
+ * The transformation handler is a set of handlers used for transformation interactions. these handlers are centered at the
+ * origin of the currently selected features and are rendered depending on a) the current mode and b) the current selections
+ * sets capabilities. if one or more selected features are clamp to ground, no Z manipulations will be available and
+ * they will be greyed out. updates to the selection set are handled by the handler. updates to the features (for instance
+ * setting the olcs_altitudeMode on a currently selected feature) is currently not handled.
+ * transformation handlers are only valid for the currently active map (and oblique image).
+ * it is up to the creator to re-create them as needed (map change, image change, external geometry or property change to a selected feature).
+ * In most scenarios, this function must not be called directly and the startEditFeatureSession used instead.
+ * @param  map
+ * @param  layer
+ * @param  scratchLayer
+ * @param  mode
+ */
+export default function createTransformationHandler(
+  map: VcsMap,
+  layer: VectorLayer,
+  scratchLayer: VectorLayer,
+  mode: TransformationMode,
+): TransformationHandler {
+  let handlerFeatures: Handlers;
+  let center: Coordinate = [0, 0, 0];
+  let getCenterFromFeatures: (features: Feature[]) => FeatureCenterInfo;
+  let cesiumMap: CesiumMap | null = null;
+
+  let cancelAsyncSetting = (): void => {};
+  const setFeatures = async (features: Feature[]): Promise<void> => {
+    cancelAsyncSetting();
+    const show = features.length > 0;
+    if (show) {
+      const {
+        center: newCenter,
+        someClamped,
+        someNoTerrain,
+      } = getCenterFromFeatures(features);
+      center = newCenter;
+      if (!cesiumMap || !someNoTerrain) {
+        // only set center sync, if updating will not change it too drastically (to avoid jumps)
+        handlerFeatures.show = true;
+        handlerFeatures.setCenter(center);
+      }
+      handlerFeatures.greyOutZ = someClamped;
+      if (cesiumMap && (someClamped || someNoTerrain)) {
+        let cancel = false;
+        cancelAsyncSetting = (): void => {
+          cancel = true;
+        };
+        await cesiumMap.getHeightFromTerrain([center]);
+        if (!cancel) {
+          handlerFeatures.show = true;
+          handlerFeatures.setCenter(center);
+        }
+      }
+    } else {
+      handlerFeatures.show = false;
+    }
+  };
+
+  if (map instanceof CesiumMap) {
+    handlerFeatures = create3DHandlers(map, mode);
+    getCenterFromFeatures = getCenterFromFeatures3D.bind(null, layer);
+    cesiumMap = map;
+  } else if (map instanceof BaseOLMap) {
+    handlerFeatures = create2DHandlers(map, scratchLayer, mode);
+    getCenterFromFeatures = getCenterFromFeatures2D;
+  }
+
+  return {
+    get showing(): boolean {
+      return handlerFeatures.show;
+    },
+    get center(): Coordinate {
+      return center.slice();
+    },
+    get showAxis(): AxisAndPlanes {
+      return handlerFeatures.showAxis;
+    },
+    set showAxis(axis) {
+      handlerFeatures.showAxis = axis;
+    },
+    translate(dx, dy, dz): void {
+      center[0] += dx;
+      center[1] += dy;
+      center[2] += dz;
+      handlerFeatures.setCenter(center);
+    },
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    setFeatures,
+    destroy(): void {
+      cancelAsyncSetting();
+      handlerFeatures.destroy();
+      scratchLayer.removeAllFeatures();
+    },
+  };
+}

package/src/util/editor/transformation/transformationTypes.ts

@@ -0,0 +1,71 @@
+import { Color } from '@vcmap-cesium/engine';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Feature } from 'ol/index.js';
+
+/**
+ * Handlers are map specific transformation handlers wich enable the use of the transformation interactions.
+ * There visualization is {@link TransformationMode} specific. Do not create these handlers yourself
+ * use {@link createTransformationHandler} instead.
+ */
+export type Handlers = {
+  show: boolean;
+  /**
+   * update the center of the handlers
+   */
+  setCenter(center: Coordinate): void;
+  /**
+   * highlight the given axis
+   */
+  showAxis: AxisAndPlanes;
+  /**
+   * display Z axis handlers in grey and do not allow them to be picked
+   */
+  greyOutZ: boolean;
+  destroy(): void;
+};
+
+export type TransformationHandler = {
+  translate(x: number, y: number, z: number): void;
+  /**
+   * Copy of the handlers current center
+   */
+  readonly center: Coordinate;
+  showAxis: AxisAndPlanes;
+  showing: boolean;
+  setFeatures(feature: Feature[]): void;
+  destroy(): void;
+};
+
+export enum AxisAndPlanes {
+  X = 'X',
+  Y = 'Y',
+  Z = 'Z',
+  XY = 'XY',
+  XZ = 'XZ',
+  YZ = 'YZ',
+  NONE = 'NONE',
+}
+export enum TransformationMode {
+  TRANSLATE = 'translate',
+  ROTATE = 'rotate',
+  SCALE = 'scale',
+  EXTRUDE = 'extrude',
+}
+
+export const greyedOutColor = Color.GRAY.withAlpha(0.5);
+
+export function is1DAxis(axis: AxisAndPlanes): boolean {
+  return (
+    axis === AxisAndPlanes.X ||
+    axis === AxisAndPlanes.Y ||
+    axis === AxisAndPlanes.Z
+  );
+}
+
+export function is2DAxis(axis: AxisAndPlanes): boolean {
+  return (
+    axis === AxisAndPlanes.XY ||
+    axis === AxisAndPlanes.XZ ||
+    axis === AxisAndPlanes.YZ
+  );
+}