@vcmap/core 5.0.0-rc.23 → 5.0.0-rc.24

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

@@ -0,0 +1,188 @@
+import {
+  Cartesian2,
+  Plane,
+  Transforms,
+} from '@vcmap/cesium';
+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").Cartesian2} start
+ * @param {import("@vcmap/cesium").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").Cartesian2):import("@vcmap/cesium").Cartesian2} getPosition
+ * @param {InteractionEvent} event
+ * @param {AXIS_AND_PLANES} axis
+ * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap/cesium").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").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").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").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,185 @@
+import {
+  Plane,
+  Transforms,
+} from '@vcmap/cesium';
+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").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").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").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").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").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,168 @@
+import { HeightReference } from '@vcmap/cesium';
+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").SelectMultiFeatureInteraction} selectMultiFeatureInteraction
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @param {import("@vcmap/core").TransformationMode} mode
+ * @returns {TransformationHandler}
+ */
+export default function createTransformationHandler(
+  map,
+  layer,
+  selectMultiFeatureInteraction,
+  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 handleFeaturesChanged = async () => {
+    cancelAsyncSetting();
+    const { selectedFeatures } = selectMultiFeatureInteraction;
+    const show = selectedFeatures.length > 0;
+    if (show) {
+      const { center: newCenter, someClamped, someNoTerrain } = getCenterFromFeatures(selectedFeatures);
+      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;
+  }
+  handleFeaturesChanged();
+  const featuresChangedListener = selectMultiFeatureInteraction.featuresChanged.addEventListener(handleFeaturesChanged);
+
+  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);
+    },
+    destroy() {
+      cancelAsyncSetting();
+      featuresChangedListener();
+      handlerFeatures.destroy();
+      scratchLayer.removeAllFeatures();
+    },
+  };
+}

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

@@ -0,0 +1,83 @@
+import { Color } from '@vcmap/cesium';
+
+/**
+ * Handlers are map specific transformation handlers wich enable the use of the transformation interactions.
+ * There visualization is {@see TransformationMode} specific. It is not adviced to create these handlers yourself,
+ * use {@see createTransformationHandler} instead.
+ * @typedef {Object} Handlers
+ * @property {boolean} show - whether to show or hide all handlers
+ * @property {function(import("ol/coordinate").Coordinate):void} setCenter - update the center of the handlers
+ * @property {AXIS_AND_PLANES} showAxis - highlight the given axis
+ * @property {boolean} greyOutZ - display Z axis handlers in grey and do not allow them to be picked
+ * @property {function():void} destroy - destroy the handlers, removing any resources created by create2DHandlers or create3DHandlers
+ */
+
+/**
+ * This interface provides an abstraction from the other {@see Handlers} interface.
+ * @typedef {Object} TransformationHandler
+ * @property {function(number, number, number):void} translate - translate the center of the underlying handlers
+ * @property {import("ol/coordinate").Coordinate} center - readonly current center of the handler. this is a copy, not a reference
+ * @property {AXIS_AND_PLANES} showAxis - highlight the given axis
+ * @property {boolean} showing - readonly value indicating whether the handlers are showing (proxy for: features are selected)
+ * @property {function():void} destroy - destroy the handler and any resources created by it
+ */
+
+/**
+ * @enum {string}
+ * @property {string} X
+ * @property {string} Y
+ * @property {string} Z
+ * @property {string} XY
+ * @property {string} XZ
+ * @property {string} YZ
+ * @property {string} NONE
+ */
+export const AXIS_AND_PLANES = {
+  X: 'X',
+  Y: 'Y',
+  Z: 'Z',
+  XY: 'XY',
+  XZ: 'XZ',
+  YZ: 'YZ',
+  NONE: 'NONE',
+};
+
+/**
+ * @enum {string}
+ * @property {string} TRANSLATE
+ * @property {string} ROTATE
+ * @property {string} SCALE
+ * @property {string} EXTRUDE
+ */
+export const TransformationMode = {
+  TRANSLATE: 'translate',
+  ROTATE: 'rotate',
+  SCALE: 'scale',
+  EXTRUDE: 'extrude',
+};
+
+/**
+ * @const
+ * @type {import("@vcmap/cesium").Color}
+ */
+export const greyedOutColor = Color.GRAY.withAlpha(0.5);
+
+/**
+ * @param {AXIS_AND_PLANES} axis
+ * @returns {boolean}
+ */
+export function is1DAxis(axis) {
+  return axis === AXIS_AND_PLANES.X ||
+    axis === AXIS_AND_PLANES.Y ||
+    axis === AXIS_AND_PLANES.Z;
+}
+
+/**
+ * @param {AXIS_AND_PLANES} axis
+ * @returns {boolean}
+ */
+export function is2DAxis(axis) {
+  return axis === AXIS_AND_PLANES.XY ||
+    axis === AXIS_AND_PLANES.XZ ||
+    axis === AXIS_AND_PLANES.YZ;
+}