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

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

@@ -0,0 +1,88 @@
+import { Color } from '@vcmap-cesium/engine';
+
+/**
+ * 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(Array<import("ol").Feature>):void} setFeatures - Sets transformation handle features. The handler is located in the center of the features.
+ * @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/engine").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
+  );
+}

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

@@ -0,0 +1,263 @@
+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 {
+  createCameraVerticalPlane,
+  getCartographicFromPlane,
+  getClosestPointOn2DLine,
+} from '../editorHelpers.js';
+import VcsEvent from '../../../vcsEvent.js';
+import Projection, { mercatorProjection } from '../../projection.js';
+import { cartographicToWgs84, mercatorToCartesian } from '../../math.js';
+import { AXIS_AND_PLANES, is1DAxis, is2DAxis } from './transformationTypes.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * A class to handle events on a {@see TransformationHandler}. Should be used with {@see TransformationHandler} created for mode TransformationMode.TRANSLATE.
+ * If the rings are dragged, the translated event will be raised.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class TranslateInteraction extends AbstractInteraction {
+  /**
+   * @param {TransformationHandler} transformationHandler
+   */
+  constructor(transformationHandler) {
+    super(EventType.DRAGEVENTS);
+    /**
+     * @type {TransformationHandler}
+     */
+    this._transformationHandler = transformationHandler;
+    /**
+     * @type {VcsEvent<Array<number>>}
+     */
+    this._translated = new VcsEvent();
+    /**
+     * @type {null|function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("ol/coordinate").Coordinate}
+     * @private
+     */
+    this._getTranslateEvent = null;
+  }
+
+  /**
+   * Event raised if the handlers are dragged. The resulting array is of type [dx, dy, dz] where all numbers
+   * are considered to be deltas to the previous event (where 0 means no translating).
+   * @type {VcsEvent<Array<number>>}
+   * @readonly
+   */
+  get translated() {
+    return this._translated;
+  }
+
+  /**
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (this._getTranslateEvent) {
+      this._translated.raiseEvent(
+        this._getTranslateEvent(event.positionOrPixel, event.windowPosition),
+      );
+      if (event.type === EventType.DRAGEND) {
+        this._getTranslateEvent = 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) {
+          if (is1DAxis(axis)) {
+            this._getTranslateEvent = this._dragAlongAxis3D(axis, event);
+          } else if (is2DAxis(axis)) {
+            this._getTranslateEvent = this._dragAlongPlane3D(axis, event);
+          }
+        } else if (is1DAxis(axis)) {
+          this._getTranslateEvent = this._dragAlongAxis2D(axis, event);
+        } else if (is2DAxis(axis)) {
+          this._getTranslateEvent = 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):import("ol/coordinate").Coordinate}
+   * @private
+   */
+  _dragAlongAxis3D(axis, event) {
+    const scene = /** @type {import("@vcmap/core").CesiumMap} */ (
+      event.map
+    ).getScene();
+    if (axis !== AXIS_AND_PLANES.Z) {
+      const center = mercatorToCartesian(this._transformationHandler.center);
+      let plane = Plane.clone(Plane.ORIGIN_XY_PLANE);
+      plane = Plane.transform(
+        plane,
+        Transforms.eastNorthUpToFixedFrame(center),
+        plane,
+      );
+      let cartographic = getCartographicFromPlane(
+        plane,
+        scene.camera,
+        event.windowPosition,
+      );
+      let currentPosition = Projection.wgs84ToMercator(
+        cartographicToWgs84(cartographic),
+      );
+      return (c, windowPosition) => {
+        cartographic = getCartographicFromPlane(
+          plane,
+          scene.camera,
+          windowPosition,
+        );
+        const newPosition = Projection.wgs84ToMercator(
+          cartographicToWgs84(cartographic),
+        );
+        const translate =
+          axis === AXIS_AND_PLANES.X
+            ? [newPosition[0] - currentPosition[0], 0, 0]
+            : [0, newPosition[1] - currentPosition[1], 0];
+
+        currentPosition = newPosition;
+        return translate;
+      };
+    } else {
+      const plane = createCameraVerticalPlane(
+        this._transformationHandler.center.slice(),
+        scene,
+      );
+      let currentHeight = getCartographicFromPlane(
+        plane,
+        scene.camera,
+        event.windowPosition,
+      ).height;
+      return (c, windowPosition) => {
+        const newHeight = getCartographicFromPlane(
+          plane,
+          scene.camera,
+          windowPosition,
+        ).height;
+        const translate = [0, 0, newHeight - currentHeight];
+        currentHeight = newHeight;
+        return translate;
+      };
+    }
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("ol/coordinate").Coordinate}
+   * @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.YZ) {
+      plane = Plane.clone(Plane.ORIGIN_YZ_PLANE);
+    } else if (axis === AXIS_AND_PLANES.XZ) {
+      plane = Plane.clone(Plane.ORIGIN_ZX_PLANE);
+    } else {
+      plane = Plane.clone(Plane.ORIGIN_XY_PLANE);
+    }
+    plane = Plane.transform(
+      plane,
+      Transforms.eastNorthUpToFixedFrame(center),
+      plane,
+    );
+    let cartographic = getCartographicFromPlane(
+      plane,
+      scene.camera,
+      event.windowPosition,
+    );
+    let currentPosition = Projection.wgs84ToMercator(
+      cartographicToWgs84(cartographic),
+    );
+    return (c, windowPosition) => {
+      cartographic = getCartographicFromPlane(
+        plane,
+        scene.camera,
+        windowPosition,
+      );
+      const newPosition = Projection.wgs84ToMercator(
+        cartographicToWgs84(cartographic),
+      );
+
+      const translate = [
+        newPosition[0] - currentPosition[0],
+        newPosition[1] - currentPosition[1],
+        newPosition[2] - currentPosition[2],
+      ];
+      currentPosition = newPosition;
+      return translate;
+    };
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("ol/coordinate").Coordinate}
+   * @private
+   */
+  _dragAlongAxis2D(axis, event) {
+    const center = this._transformationHandler.center.slice();
+    const mercatorExtent = mercatorProjection.proj.getExtent();
+    const end =
+      axis === AXIS_AND_PLANES.X
+        ? [mercatorExtent[0], center[1], center[2]]
+        : [center[0], mercatorExtent[1], center[2]];
+
+    let lastPointOnAxis = getClosestPointOn2DLine(
+      center,
+      end,
+      event.positionOrPixel,
+    );
+    return (coords) => {
+      const newPointOnAxis = getClosestPointOn2DLine(center, end, coords);
+      const translate =
+        axis === AXIS_AND_PLANES.X
+          ? [newPointOnAxis[0] - lastPointOnAxis[0], 0, 0]
+          : [0, newPointOnAxis[1] - lastPointOnAxis[1], 0];
+
+      lastPointOnAxis = newPointOnAxis;
+      return translate;
+    };
+  }
+
+  /**
+   * @param {AXIS_AND_PLANES} axis
+   * @param {InteractionEvent} event
+   * @returns {function(import("ol/coordinate").Coordinate, import("@vcmap-cesium/engine").Cartesian2):import("ol/coordinate").Coordinate}
+   * @private
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _dragAlongPlane2D(axis, event) {
+    let current = event.positionOrPixel.slice();
+    return (coords) => {
+      const translate = [coords[0] - current[0], coords[1] - current[1], 0];
+      current = coords.slice();
+      return translate;
+    };
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._transformationHandler = null;
+    this._translated.destroy();
+  }
+}
+
+export default TranslateInteraction;

package/src/util/editor/validateGeoemetry.js

@@ -0,0 +1,24 @@
+import { validateLineString } from '../featureconverter/lineStringToCesium.js';
+import { validatePolygon } from '../featureconverter/polygonToCesium.js';
+import { validatePoint } from '../featureconverter/pointToCesium.js';
+import { validateCircle } from '../featureconverter/circleToCesium.js';
+
+/**
+ * @param {import("ol/geom").Geometry} geometry
+ * @returns {boolean}
+ */
+export default function geometryIsValid(geometry) {
+  const type = geometry.getType();
+  if (type === 'LineString') {
+    return validateLineString(
+      /** @type {import("ol/geom").LineString} */ (geometry),
+    );
+  } else if (type === 'Polygon') {
+    return validatePolygon(/** @type {import("ol/geom").Polygon} */ (geometry));
+  } else if (type === 'Point') {
+    return validatePoint(/** @type {import("ol/geom").Point} */ (geometry));
+  } else if (type === 'Circle') {
+    return validateCircle(/** @type {import("ol/geom").Circle} */ (geometry));
+  }
+  return false;
+}

package/src/{vcs/vcm/util → util}/exclusiveManager.js

@@ -66,15 +66,18 @@ class ExclusiveManager {
   handleLayerActivated(layer) {
     const { exclusiveGroups } = layer;
     if (exclusiveGroups.length > 0) {
-      const splitDirection = /** @type {SplitLayer} */ (layer).splitDirection || 0;
+      const splitDirection =
+        /** @type {SplitLayer} */ (layer).splitDirection || 0;
       exclusiveGroups.forEach((group) => {
         if (this.layers.has(group)) {
           this.layers.get(group).forEach((groupLayer) => {
             if (
-              groupLayer !== layer && !(
+              groupLayer !== layer &&
+              !(
                 splitDirection &&
                 /** @type {SplitLayer} */ (groupLayer).splitDirection &&
-                /** @type {SplitLayer} */ (groupLayer).splitDirection !== splitDirection
+                /** @type {SplitLayer} */ (groupLayer).splitDirection !==
+                  splitDirection
               )
             ) {
               groupLayer.deactivate();

package/src/{vcs/vcm/util → util}/extent.js

@@ -1,8 +1,10 @@
 import Projection from './projection.js';
 
 /**
- * @typedef {ProjectionOptions} ExtentOptions
- * @property {import("ol/extent").Extent|undefined} coordinates - if not specified, the extent of the projection is used
+ * @typedef {Object} ExtentOptions
+ * @property {string} [type]
+ * @property {import("ol/extent").Extent|undefined} [coordinates] - if not specified, the extent of the projection is used
+ * @property {ProjectionOptions} [projection] - if not specified the default projection is assumed
  * @api
  */
 
@@ -27,30 +29,25 @@ function checkExtentValidity(extent) {
   return extent[0] <= extent[2] && extent[1] <= extent[3];
 }
 
-
 /**
  * Extent Class
  * @class
- * @export
  * @api
  */
 class Extent {
   /**
    * @type {string}
    */
-  static get className() { return 'vcs.vcm.util.Extent'; }
+  static get className() {
+    return 'Extent';
+  }
 
   /**
    * @param {ExtentOptions=} options object
    */
   constructor(options = {}) {
     /** @type {Projection} */
-    this.projection = new Projection({
-      epsg: options.epsg,
-      proj4: options.proj4,
-      alias: options.alias,
-      prefix: options.prefix,
-    });
+    this.projection = new Projection(options.projection);
 
     /** @type {import("ol/extent").Extent|null} */
     this.extent = options.coordinates || this.projection.proj.getExtent();
@@ -62,12 +59,14 @@ class Extent {
    * @returns {import("ol/extent").Extent}
    */
   getCoordinatesInProjection(destination, result) {
-    if (destination.epsg === this.projection.epsg) { // TODO aliases?!
-      const extent = result ? result.splice(0, 4, ...this.extent) : this.extent.slice();
+    if (destination.epsg === this.projection.epsg) {
+      // TODO aliases?!
+      const extent = result
+        ? result.splice(0, 4, ...this.extent)
+        : this.extent.slice();
       return /** @type {import("ol/extent").Extent} */ (extent);
     }
-    const transformer = Projection
-      .getTransformer(destination, this.projection);
+    const transformer = Projection.getTransformer(destination, this.projection);
     const target = result || [];
     transformer(this.extent, target, 2);
     return /** @type {import("ol/extent").Extent} */ (target);
@@ -87,7 +86,7 @@ class Extent {
   toJSON() {
     return {
       coordinates: this.extent.slice(),
-      ...this.projection.toJSON(),
+      projection: this.projection.toJSON(),
       type: Extent.className,
     };
   }
@@ -108,10 +107,12 @@ class Extent {
       return true;
     }
 
-    return this.isValid() &&
+    return (
+      this.isValid() &&
       extent.isValid() &&
       this.extent.every((c, i) => c === extent.extent[i]) &&
-      this.projection.equals(extent.projection);
+      this.projection.equals(extent.projection)
+    );
   }
 
   /**
@@ -122,13 +123,18 @@ class Extent {
    * @api
    */
   static validateOptions(options) {
-    return Projection.validateOptions(options) && checkExtentValidity(options.coordinates);
+    return (
+      Projection.validateOptions(options.projection || {}) &&
+      checkExtentValidity(options.coordinates)
+    );
   }
 
   /**
    * @type {import("ol/extent").Extent}
    */
-  static get WGS_84_EXTENT() { return [-180, -90, 180, 90]; }
+  static get WGS_84_EXTENT() {
+    return [-180, -90, 180, 90];
+  }
 }
 
 export default Extent;

package/src/util/featureconverter/arcToCesium.js

@@ -0,0 +1,121 @@
+import { ArcType, Cartesian3, HeightReference } from '@vcmap-cesium/engine';
+import Projection from '../projection.js';
+import { addPrimitivesToContext } from './featureconverterHelper.js';
+import {
+  createFillGeometries,
+  createGroundLineGeometries,
+  createLineGeometries,
+  createOutlineGeometries,
+  createSolidGeometries,
+  validateLineString,
+  getCoordinates as getLineStringCoordinates,
+  getGeometryOptions as getLineStringGeometryOptions,
+  addArrowsToContext,
+} from './lineStringToCesium.js';
+import { featureArcStruct } from '../../style/arcStyle.js';
+
+/**
+ * Creates the positions & arcType option for the PolylineGeometry
+ * @param {Array<import("ol/coordinate").Coordinate>} coords
+ * @param {import("ol/geom/LineString").default} geometry
+ * @param {number} positionHeightAdjustment
+ * @returns {Object}
+ * @private
+ */
+export function getGeometryOptions(coords, geometry, positionHeightAdjustment) {
+  const positions = coords.map((coord) => {
+    const wgs84Coords = Projection.mercatorToWgs84(coord);
+    if (wgs84Coords[2] != null) {
+      wgs84Coords[2] += positionHeightAdjustment;
+    }
+    return Cartesian3.fromDegrees(
+      wgs84Coords[0],
+      wgs84Coords[1],
+      wgs84Coords[2],
+    );
+  });
+  return { positions, arcType: ArcType.NONE };
+}
+
+/**
+ * In this special case, the coordinates are not taken from the geometries array
+ * @param {Array<import("ol/coordinate").Coordinate>} coords
+ * @param {Array<import("ol/geom/LineString").default>} geometries
+ * @returns {Array<import("ol/coordinate").Coordinate>}
+ * @private
+ */
+// eslint-disable-next-line no-unused-vars
+export function getCoordinates(coords, geometries) {
+  return coords;
+}
+
+/**
+ * @param {Array<import("ol/coordinate").Coordinate>} arcCoords - the coordinates of the arc to use instead of the geometries coordinates if height mode is absolute
+ * @param {import("@vcmap-cesium/engine").HeightReference} altitudeMode
+ * @returns {VectorGeometryFactoryType}
+ */
+function getGeometryFactory(arcCoords, altitudeMode) {
+  return {
+    getCoordinates:
+      altitudeMode === HeightReference.NONE
+        ? getCoordinates.bind(null, arcCoords)
+        : getLineStringCoordinates,
+    getGeometryOptions:
+      altitudeMode === HeightReference.NONE
+        ? getGeometryOptions.bind(null, arcCoords)
+        : getLineStringGeometryOptions,
+    createSolidGeometries,
+    createOutlineGeometries,
+    createFillGeometries,
+    createGroundLineGeometries,
+    createLineGeometries,
+  };
+}
+
+/**
+ * converts a linestring with an ArcStyle to a a cesium primitive
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("@vcmap/core").ArcStyle} style
+ * @param {Array<import("ol/geom/LineString").default>} geometries
+ * @param {import("@vcmap/core").VectorProperties} vectorProperties
+ * @param {import("@vcmap-cesium/engine").Scene} scene
+ * @param {import("@vcmap/core").VectorContext|import("@vcmap/core").ClusterContext} context
+ */
+export default function arcToCesium(
+  feature,
+  style,
+  geometries,
+  vectorProperties,
+  scene,
+  context,
+) {
+  if (!style.getFill() && !style.getStroke()) {
+    return;
+  }
+  const altitudeMode = vectorProperties.getAltitudeMode(feature);
+  const arcGeometryFactory = getGeometryFactory(
+    feature[featureArcStruct].coordinates,
+    altitudeMode,
+  );
+  const validGeometries = geometries.filter((lineString) =>
+    validateLineString(lineString),
+  );
+  addPrimitivesToContext(
+    feature,
+    style,
+    validGeometries,
+    vectorProperties,
+    scene,
+    arcGeometryFactory,
+    context,
+  );
+  addArrowsToContext(
+    feature,
+    style,
+    validGeometries,
+    vectorProperties,
+    scene,
+    arcGeometryFactory,
+    context,
+  ); // IDEA what about labels?
+}