@vcmap/core 5.0.0-rc.3 → 5.0.0-rc.30

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

@@ -0,0 +1,106 @@
+import AbstractInteraction 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 { AXIS_AND_PLANES } from './transformationTypes.js';
+
+/**
+ * A class to handle events on a {@see TransformationHandler}. Should be used with {@see 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 {@see CesiumMap} is the active map.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class ExtrudeInteraction extends AbstractInteraction {
+  /**
+   * @param {TransformationHandler} transformationHandler
+   */
+  constructor(transformationHandler) {
+    super(EventType.DRAGEVENTS);
+    /**
+     * @type {TransformationHandler}
+     * @private
+     */
+    this._transformationHandler = transformationHandler;
+    /**
+     * @type {VcsEvent<number>}
+     * @private
+     */
+    this._extruded = new VcsEvent();
+    /**
+     * @type {null|function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):number}
+     * @private
+     */
+    this._getExtrudeEvent = null;
+  }
+
+  /**
+   * Event raised with the extrusion delta to the last event fired.
+   * @type {VcsEvent<number>}
+   * @readonly
+   */
+  get extruded() {
+    return this._extruded;
+  }
+
+  /**
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (this._getExtrudeEvent) {
+      this._extruded.raiseEvent(
+        this._getExtrudeEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getExtrudeEvent = null;
+        this._transformationHandler.showAxis = AXIS_AND_PLANES.NONE;
+      }
+    } else if (
+      event.type === EventType.DRAGSTART &&
+      event?.feature?.[handlerSymbol]
+    ) {
+      const axis = event.feature[handlerSymbol];
+      if (axis === AXIS_AND_PLANES.Z) {
+        const scene = /** @type {import("@vcmap/core").CesiumMap} */ (
+          event.map
+        ).getScene();
+        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) => {
+          const newHeight = getCartographicFromPlane(
+            plane,
+            scene.camera,
+            windowPosition,
+          ).height;
+          const extrude = newHeight - currentHeight;
+          currentHeight = newHeight;
+          return extrude;
+        };
+      }
+    }
+    return event;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._transformationHandler = null;
+    this._extruded.destroy();
+  }
+}
+
+export default ExtrudeInteraction;

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

@@ -0,0 +1,201 @@
+import { Cartesian2, Plane, Transforms } from '@vcmap-cesium/engine';
+import AbstractInteraction 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 { AXIS_AND_PLANES } from './transformationTypes.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * @typedef {Object} RotationEvent
+ * @property {number} angle - in radians
+ * @property {AXIS_AND_PLANES} axis - the axis of rotation
+ */
+
+/**
+ * @param {import("@vcmap-cesium/engine").Cartesian2} start
+ * @param {import("@vcmap-cesium/engine").Cartesian2} end
+ * @param {number} angle
+ * @returns {number}
+ */
+function determineOrientation(start, end, angle) {
+  const orientation = start.x * end.y - start.y * end.x;
+  return orientation > 0 ? angle : angle * -1;
+}
+
+/**
+ * @param {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("@vcmap-cesium/engine").Cartesian2} getPosition
+ * @param {InteractionEvent} event
+ * @param {AXIS_AND_PLANES} axis
+ * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):RotationEvent}
+ */
+function createGetRotationEvent(getPosition, event, axis) {
+  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 {@see TransformationHandler}. Should be used with {@see TransformationHandler} created for mode TransformationMode.ROTATE.
+ * If the rings are dragged, the rotated event will be raised.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class RotateInteraction extends AbstractInteraction {
+  /**
+   * @param {TransformationHandler} transformationHandler
+   */
+  constructor(transformationHandler) {
+    super(EventType.DRAGEVENTS);
+    /**
+     * @type {TransformationHandler}
+     * @private
+     */
+    this._transformationHandler = transformationHandler;
+    /**
+     * @type {VcsEvent<RotationEvent>}
+     * @private
+     */
+    this._rotated = new VcsEvent();
+    /**
+     * @type {null|function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):{angle: number, axis: AXIS_AND_PLANES}}
+     * @private
+     */
+    this._getRotationEvent = null;
+  }
+
+  /**
+   * The event raised, if the rings are dragged. Event is raised with the angle delta to the last event in radians.
+   * @type {VcsEvent<RotationEvent>}
+   * @readonly
+   */
+  get rotated() {
+    return this._rotated;
+  }
+
+  /**
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    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?.[handlerSymbol]
+    ) {
+      const axis = event.feature[handlerSymbol];
+      if (axis !== AXIS_AND_PLANES.NONE) {
+        if (event.map instanceof CesiumMap) {
+          this._getRotationEvent = this._dragAlongPlane3D(axis, event);
+        } else {
+          this._getRotationEvent = this._dragAlongPlane2D(axis, event);
+        }
+      }
+    }
+    return event;
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):{angle: number, axis: AXIS_AND_PLANES}}
+   * @private
+   */
+  _dragAlongPlane3D(axis, event) {
+    const scene = /** @type {import("@vcmap/core").CesiumMap} */ (
+      event.map
+    ).getScene();
+    const center = mercatorToCartesian(this._transformationHandler.center);
+    let plane;
+    if (axis === AXIS_AND_PLANES.X) {
+      plane = Plane.clone(Plane.ORIGIN_YZ_PLANE);
+    } else if (axis === AXIS_AND_PLANES.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 { center: currentCenter } = this._transformationHandler;
+        centeredCoordinates[0] = currentCenter[0] - centeredCoordinates[0];
+        centeredCoordinates[1] = currentCenter[1] - centeredCoordinates[1];
+        centeredCoordinates[2] = currentCenter[2] - centeredCoordinates[2];
+        if (axis === AXIS_AND_PLANES.Z) {
+          return Cartesian2.fromArray(centeredCoordinates);
+        }
+        if (axis === AXIS_AND_PLANES.X) {
+          return new Cartesian2(centeredCoordinates[1], centeredCoordinates[2]);
+        }
+        return new Cartesian2(centeredCoordinates[0], centeredCoordinates[2]);
+      },
+      event,
+      axis,
+    );
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):{angle: number, axis: AXIS_AND_PLANES}}
+   * @private
+   */
+  _dragAlongPlane2D(axis, event) {
+    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,
+    );
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._transformationHandler = null;
+    this._rotated.destroy();
+  }
+}
+
+export default RotateInteraction;

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

@@ -0,0 +1,201 @@
+import { Plane, Transforms } from '@vcmap-cesium/engine';
+import AbstractInteraction 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 { AXIS_AND_PLANES } from './transformationTypes.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * @param {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("ol/coordinate").Coordinate} getPosition
+ * @param {InteractionEvent} event
+ * @param {TransformationHandler} transformationHandler
+ * @param {AXIS_AND_PLANES} axis
+ * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):Array<number>}
+ */
+function createGetScaledEvent(getPosition, event, transformationHandler, axis) {
+  const { center } = transformationHandler;
+  let flippedX = false;
+  let flippedY = false;
+
+  const getDistance = (coordinate, windowPosition) => {
+    const position = getPosition(coordinate, windowPosition);
+    const dx = position[0] - center[0];
+    const dy = position[1] - center[1];
+    let distance;
+    if (axis === AXIS_AND_PLANES.X) {
+      distance = Math.abs(dx);
+    } else if (axis === AXIS_AND_PLANES.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 === AXIS_AND_PLANES.X) {
+      return [sx, 1, 1];
+    } else if (axis === AXIS_AND_PLANES.Y) {
+      return [1, sy, 1];
+    } else {
+      return [sx, sy, 1];
+    }
+  };
+}
+
+/**
+ * A class to handle events on a {@see TransformationHandler}. Should be used with {@see TransformationHandler} created for mode TransformationMode.SCALE..
+ * If the handlers are dragged, the scaled event will be raised.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class ScaleInteraction extends AbstractInteraction {
+  /**
+   * @param {TransformationHandler} transformationHandler
+   */
+  constructor(transformationHandler) {
+    super(EventType.DRAGEVENTS);
+    /**
+     * @type {TransformationHandler}
+     */
+    this._transformationHandler = transformationHandler;
+    /**
+     * @type {VcsEvent<Array<number>>}
+     */
+    this._scaled = new VcsEvent();
+    /**
+     * @type {null|function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):Array<number>}
+     * @private
+     */
+    this._getScaleEvent = 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).
+   * @type {VcsEvent<Array<number>>}
+   * @readonly
+   */
+  get scaled() {
+    return this._scaled;
+  }
+
+  /**
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (this._getScaleEvent) {
+      this._scaled.raiseEvent(
+        this._getScaleEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getScaleEvent = null;
+        this._transformationHandler.showAxis = AXIS_AND_PLANES.NONE;
+      }
+    } else if (
+      event.type === EventType.DRAGSTART &&
+      event?.feature?.[handlerSymbol]
+    ) {
+      const axis = event.feature[handlerSymbol];
+      if (axis !== AXIS_AND_PLANES.NONE) {
+        this._transformationHandler.showAxis = axis;
+        if (event.map instanceof CesiumMap) {
+          this._getScaleEvent = this._dragAlongPlane3D(axis, event);
+        } else {
+          this._getScaleEvent = this._dragAlongPlane2D(axis, event);
+        }
+      }
+    }
+    return event;
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):Array<number>}
+   * @private
+   */
+  _dragAlongPlane3D(axis, event) {
+    const scene = /** @type {import("@vcmap/core").CesiumMap} */ (
+      event.map
+    ).getScene();
+    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,
+    );
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):Array<number>}
+   * @private
+   */
+  _dragAlongPlane2D(axis, event) {
+    return createGetScaledEvent(
+      (c) => c.slice(),
+      event,
+      this._transformationHandler,
+      axis,
+    );
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._transformationHandler = null;
+    this._scaled.destroy();
+  }
+}
+
+export default ScaleInteraction;

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

@@ -0,0 +1,178 @@
+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';
+
+/**
+ * @typedef {Object} FeatureCenterInfo
+ * @property {import("ol/coordinate").Coordinate} center
+ * @property {boolean} someClamped
+ * @property {boolean} someNoTerrain
+ * @private
+ */
+
+/**
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {Array<import("ol").Feature>} features
+ * @returns {FeatureCenterInfo}
+ */
+function getCenterFromFeatures3D(layer, features) {
+  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();
+    extent3D.extendWithGeometry(geometry);
+    if (!someNoTerrain) {
+      const firstCoordinates = /** @type {import("ol/geom").SimpleGeometry} */ (
+        geometry
+      ).getFirstCoordinate();
+      if (!firstCoordinates[2]) {
+        someNoTerrain = true;
+      }
+    }
+
+    if (!someClamped) {
+      const altitudeMode = f.get('olcs_altitudeMode');
+      someClamped =
+        altitudeMode === 'clampToGround' || (!altitudeMode && layerIsClamped);
+    }
+  });
+  const center = extent3D.getCenter();
+  return {
+    center,
+    someClamped,
+    someNoTerrain,
+  };
+}
+
+/**
+ * @param {Array<import("ol").Feature>} features
+ * @returns {FeatureCenterInfo}
+ */
+function getCenterFromFeatures2D(features) {
+  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 {import("@vcmap/core").VcsMap} map
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @param {import("@vcmap/core").TransformationMode} mode
+ * @returns {TransformationHandler}
+ */
+export default function createTransformationHandler(
+  map,
+  layer,
+  scratchLayer,
+  mode,
+) {
+  /** @type {Handlers} */
+  let handlerFeatures;
+  /** @type {import("ol/coordinate").Coordinate} */
+  let center = [0, 0, 0];
+
+  /** @type {function(Array<import("ol").Feature>):FeatureCenterInfo} */
+  let getCenterFromFeatures;
+  /** @type {import("@vcmap/core").CesiumMap|null} */
+  let cesiumMap = null;
+
+  let cancelAsyncSetting = () => {};
+  const setFeatures = async (features) => {
+    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 = () => {
+          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() {
+      return handlerFeatures.show;
+    },
+    get center() {
+      return center.slice();
+    },
+    get showAxis() {
+      return handlerFeatures.showAxis;
+    },
+    set showAxis(axis) {
+      handlerFeatures.showAxis = axis;
+    },
+    translate(dx, dy, dz) {
+      center[0] += dx;
+      center[1] += dy;
+      center[2] += dz;
+      handlerFeatures.setCenter(center);
+    },
+    setFeatures,
+    destroy() {
+      cancelAsyncSetting();
+      handlerFeatures.destroy();
+      scratchLayer.removeAllFeatures();
+    },
+  };
+}