@vcmap/core 6.0.0-rc.4 → 6.0.0-rc.6

package/src/util/editor/createFeatureSession.ts

@@ -1,6 +1,6 @@
 import { check, ofEnum } from '@vcsuite/check';
 import { Feature } from 'ol';
-import type { Geometry } from 'ol/geom.js';
+import type { Geometry, LineString, Polygon } from 'ol/geom.js';
 import { unByKey } from 'ol/Observable.js';
 import VcsEvent from '../../vcsEvent.js';
 import {
@@ -10,6 +10,7 @@ import {
   GeometryType,
   SessionType,
   setupInteractionChain,
+  setupScratchLayer,
 } from './editorSessionHelpers.js';
 import CreateLineStringInteraction from './interactions/createLineStringInteraction.js';
 import CreateCircleInteraction from './interactions/createCircleInteraction.js';
@@ -23,6 +24,10 @@ import geometryIsValid from './validateGeoemetry.js';
 import ObliqueMap from '../../map/obliqueMap.js';
 import { cursorMap } from './interactions/editGeometryMouseOverInteraction.js';
 import { AltitudeModeType } from '../../layer/vectorProperties.js';
+import CreationSnapping from './interactions/creationSnapping.js';
+import { syncScratchLayerVectorProperties } from './editorHelpers.js';
+import LayerSnapping from './interactions/layerSnapping.js';
+import { SnapType, snapTypes } from './snappingHelpers.js';
 
 export type CreateFeatureSession<T extends GeometryType> =
   EditorSession<SessionType.CREATE> & {
@@ -30,6 +35,7 @@ export type CreateFeatureSession<T extends GeometryType> =
     featureAltitudeMode: AltitudeModeType | undefined;
     featureCreated: VcsEvent<Feature<GeometryToType<T>>>;
     creationFinished: VcsEvent<Feature<GeometryToType<T>> | null>;
+    snapToLayers: VectorLayer[];
     finish(): void;
   };
 
@@ -91,6 +97,8 @@ export interface CreateInteraction<T extends Geometry> {
  * @param  layer
  * @param  geometryType
  * @param initialAltitudeMode - whether to use the layers altitude mode or set this on the feature
+ * @param [initialSnapToLayers=[layer]] - the layers to initially snap to. defaults to the provided layer
+ * @param [snapTo] - what to snap to, by default all snaps are active
  * @group Editor
  */
 function startCreateFeatureSession<T extends GeometryType>(
@@ -98,6 +106,8 @@ function startCreateFeatureSession<T extends GeometryType>(
   layer: VectorLayer,
   geometryType: T,
   initialAltitudeMode?: AltitudeModeType,
+  initialSnapToLayers: VectorLayer[] = [layer],
+  snapTo: SnapType[] = [...snapTypes],
 ): CreateFeatureSession<T> {
   check(app, VcsApp);
   check(layer, VectorLayer);
@@ -108,6 +118,7 @@ function startCreateFeatureSession<T extends GeometryType>(
     removed: interactionRemoved,
     destroy: destroyInteractionChain,
   } = setupInteractionChain(app.maps.eventHandler);
+  const scratchLayer = setupScratchLayer(app.layers);
 
   const featureCreated = new VcsEvent<Feature<GeometryToType<T>>>();
   const creationFinished = new VcsEvent<Feature<GeometryToType<T>> | null>();
@@ -116,6 +127,9 @@ function startCreateFeatureSession<T extends GeometryType>(
 
   let currentInteraction: InteractionOfGeometryType<T> | null = null;
   let currentFeature: Feature<GeometryToType<T>> | null = null;
+  let snappingInteraction: CreationSnapping | null = null;
+  let layerSnappingInteraction: LayerSnapping | null = null;
+  let snapToLayers: VectorLayer[] = initialSnapToLayers?.slice() ?? [];
 
   /**
    * Ture if the currently active map is an ObliqueMap. set in setupActiveMap
@@ -131,16 +145,19 @@ function startCreateFeatureSession<T extends GeometryType>(
     const altitudeModeInUse =
       layer.vectorProperties.getAltitudeMode(altitudeModeFeature);
 
+    scratchLayer.vectorProperties.altitudeMode = altitudeModeInUse;
     pickingBehavior.setForAltitudeMode(altitudeModeInUse);
   };
 
-  const vectorPropertiesListener =
-    layer.vectorProperties.propertyChanged.addEventListener((properties) => {
-      if (properties.includes('altitudeMode') && !featureAltitudeMode) {
+  const vectorPropertiesListener = syncScratchLayerVectorProperties(
+    scratchLayer,
+    layer,
+    () => {
+      if (!featureAltitudeMode) {
         altitudeModeChanged();
       }
-    });
-
+    },
+  );
   altitudeModeChanged();
 
   let currentFeatureListener = (): void => {};
@@ -152,6 +169,16 @@ function startCreateFeatureSession<T extends GeometryType>(
       currentInteraction.destroy();
       currentInteraction = null;
     }
+    if (snappingInteraction) {
+      interactionChain.removeInteraction(snappingInteraction);
+      snappingInteraction.destroy();
+      snappingInteraction = null;
+    }
+    if (layerSnappingInteraction) {
+      interactionChain.removeInteraction(layerSnappingInteraction);
+      layerSnappingInteraction.destroy();
+      layerSnappingInteraction = null;
+    }
     interactionListeners.forEach((cb) => {
       cb();
     });
@@ -161,6 +188,18 @@ function startCreateFeatureSession<T extends GeometryType>(
   const createInteraction = (): void => {
     destroyCurrentInteraction();
     currentInteraction = createInteractionForGeometryType(geometryType);
+    layerSnappingInteraction = new LayerSnapping(
+      snapToLayers,
+      scratchLayer,
+      (f) => currentFeature !== f,
+      snapTo,
+    );
+    if (
+      geometryType === GeometryType.Polygon ||
+      geometryType === GeometryType.LineString
+    ) {
+      snappingInteraction = new CreationSnapping(scratchLayer, snapTo);
+    }
 
     interactionListeners = [
       currentInteraction.created.addEventListener((geometry) => {
@@ -187,6 +226,9 @@ function startCreateFeatureSession<T extends GeometryType>(
         };
         layer.addFeatures([currentFeature]);
         featureCreated.raiseEvent(currentFeature);
+        if (snappingInteraction) {
+          snappingInteraction.setGeometry(geometry as LineString | Polygon);
+        }
       }),
       currentInteraction.finished.addEventListener((geometry) => {
         if (isOblique) {
@@ -214,6 +256,10 @@ function startCreateFeatureSession<T extends GeometryType>(
         }
       }),
     ];
+    interactionChain.addInteraction(layerSnappingInteraction);
+    if (snappingInteraction) {
+      interactionChain.addInteraction(snappingInteraction);
+    }
     interactionChain.addInteraction(currentInteraction);
   };
   createInteraction();
@@ -252,6 +298,9 @@ function startCreateFeatureSession<T extends GeometryType>(
 
   const stop = (): void => {
     isStopped = true; // setting stopped true immediately, to prevent the recreation of the interaction chain on finished
+    app.layers.remove(scratchLayer);
+    scratchLayer.destroy();
+
     if (app.maps.target) {
       app.maps.target.style.cursor = cursorMap.auto;
     }
@@ -292,6 +341,15 @@ function startCreateFeatureSession<T extends GeometryType>(
         }
       }
     },
+    get snapToLayers(): VectorLayer[] {
+      return snapToLayers.slice();
+    },
+    set snapToLayers(layers: VectorLayer[]) {
+      snapToLayers = layers.slice();
+      if (layerSnappingInteraction) {
+        layerSnappingInteraction.layers = snapToLayers;
+      }
+    },
     featureCreated,
     creationFinished,
     stopped,

package/src/util/editor/editFeaturesSession.ts

@@ -8,6 +8,7 @@ import type { Feature } from 'ol/index.js';
 import type { EventsKey } from 'ol/events.js';
 import { unByKey } from 'ol/Observable.js';
 import { getLogger } from '@vcsuite/logger';
+import { Math as CesiumMath } from '@vcmap-cesium/engine';
 
 import VcsEvent from '../../vcsEvent.js';
 import {
@@ -18,6 +19,7 @@ import {
 } from './editorSessionHelpers.js';
 import createTransformationHandler from './transformation/transformationHandler.js';
 import {
+  AxisAndPlanes,
   TransformationHandler,
   TransformationMode,
 } from './transformation/transformationTypes.js';
@@ -28,7 +30,7 @@ import ScaleInteraction from './transformation/scaleInteraction.js';
 import { createSync, obliqueGeometry } from '../../layer/vectorSymbols.js';
 import ExtrudeInteraction from './transformation/extrudeInteraction.js';
 import ObliqueMap from '../../map/obliqueMap.js';
-import { ensureFeatureAbsolute, geometryChangeKeys } from './editorHelpers.js';
+import { geometryChangeKeys } from './editorHelpers.js';
 import CesiumMap from '../../map/cesiumMap.js';
 import EnsureHandlerSelectionInteraction from './interactions/ensureHandlerSelectionInteraction.js';
 import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
@@ -112,12 +114,18 @@ function clearCreateSync(
 export type EditFeaturesSession = EditorSession<SessionType.EDIT_FEATURES> & {
   readonly mode: TransformationMode;
   /**
-   * Function for rotating features. Takes angle in radians as parameter.
+   * Function for rotating features. Takes angle in radians as parameter. you can provide an axis to rotate around for features & primitives
    * @param angle - in radians
+   * @param axis - optional axis. only has effect when rotating a single model or primitive
    */
-  rotate(angle: number): void;
+  rotate(angle: number, axis?: AxisAndPlanes): void;
   translate(dx: number, dy: number, dz: number): void;
-  scale(sx: number, sy: number): void;
+  /**
+   * @param sx
+   * @param sy
+   * @param sz - optional sz. only has effect when rotating a single model or primitive
+   */
+  scale(sx: number, sy: number, sz?: number): void;
   setMode(mode: TransformationMode): void;
   modeChanged: VcsEvent<TransformationMode>;
   setFeatures(features: Feature[]): void;
@@ -204,16 +212,22 @@ function startEditFeaturesSession(
   let destroyTransformation = (): void => {};
   let transformationHandler: TransformationHandler | undefined;
   const translate = (dx: number, dy: number, dz: number): void => {
-    transformationHandler?.translate?.(dx, dy, dz);
+    transformationHandler?.translate?.(dx, dy, dz); // XXX should we changes this in 2D to change the layout to XY?
     currentFeatures.forEach((f) => {
       const geometry = f[obliqueGeometry] ?? f.getGeometry(); // XXX wont work in oblqiue
       geometry!.applyTransform(
-        (input: number[], output: number[] | undefined): number[] => {
+        (
+          input: number[],
+          output: number[] | undefined,
+          stride = 2,
+        ): number[] => {
           const inputLength = input.length;
-          for (let i = 0; i < inputLength; i += 3) {
+          for (let i = 0; i < inputLength; i += stride) {
             output![i] = input[i] + dx;
             output![i + 1] = input[i + 1] + dy;
-            output![i + 2] = input[i + 2] + dz;
+            if (stride > 2) {
+              output![i + 2] = input[i + 2] + dz;
+            }
           }
           return output!;
         },
@@ -221,39 +235,92 @@ function startEditFeaturesSession(
     });
   };
 
-  const rotate = (angle: number): void => {
-    let center = transformationHandler?.center;
-    if (!center) {
-      const extent = createEmptyExtent();
+  const rotate = (
+    angle: number,
+    axis: AxisAndPlanes = AxisAndPlanes.Z,
+  ): void => {
+    if (
+      currentFeatures.length === 1 &&
+      currentFeatures[0].getGeometry()?.getType() === 'Point' &&
+      layer.vectorProperties.renderAs(currentFeatures[0]) !== 'geometry'
+    ) {
+      if (axis === AxisAndPlanes.Z) {
+        const currentRotation = layer.vectorProperties.getModelHeading(
+          currentFeatures[0],
+        );
+        currentFeatures[0].set(
+          'olcs_modelHeading',
+          currentRotation - CesiumMath.toDegrees(angle),
+        );
+      } else if (axis === AxisAndPlanes.X) {
+        const currentRotation = layer.vectorProperties.getModelPitch(
+          currentFeatures[0],
+        );
+        currentFeatures[0].set(
+          'olcs_modelPitch',
+          currentRotation - CesiumMath.toDegrees(angle),
+        );
+      } else if (axis === AxisAndPlanes.Y) {
+        const currentRotation = layer.vectorProperties.getModelRoll(
+          currentFeatures[0],
+        );
+        currentFeatures[0].set(
+          'olcs_modelRoll',
+          currentRotation - CesiumMath.toDegrees(angle),
+        );
+      }
+    } else {
+      let center = transformationHandler?.center;
+      if (!center) {
+        const extent = createEmptyExtent();
+        currentFeatures.forEach((f) => {
+          extendExtent(extent, f.getGeometry()!.getExtent()); // XXX wont work in oblqiue
+        });
+        if (!isEmpty(extent)) {
+          center = getCenter(extent);
+        }
+      }
       currentFeatures.forEach((f) => {
-        extendExtent(extent, f.getGeometry()!.getExtent()); // XXX wont work in oblqiue
+        const geometry = f[obliqueGeometry] ?? f.getGeometry(); // XXX wont work in oblqiue
+        geometry!.rotate(angle, center!);
       });
-      if (!isEmpty(extent)) {
-        center = getCenter(extent);
-      }
     }
-    currentFeatures.forEach((f) => {
-      const geometry = f[obliqueGeometry] ?? f.getGeometry(); // XXX wont work in oblqiue
-      geometry!.rotate(angle, center!);
-    });
   };
 
-  const scale = (sx: number, sy: number): void => {
-    let center = transformationHandler?.center;
-    if (!center) {
-      // XXX copy paste
-      const extent = createEmptyExtent();
+  const scale = (sx: number, sy: number, sz?: number): void => {
+    if (
+      currentFeatures.length === 1 &&
+      currentFeatures[0].getGeometry()?.getType() === 'Point' &&
+      layer.vectorProperties.renderAs(currentFeatures[0]) !== 'geometry'
+    ) {
+      const feature = currentFeatures[0];
+      const scaleX = layer.vectorProperties.getModelScaleX(feature);
+      const scaleY = layer.vectorProperties.getModelScaleY(feature);
+      const scaleZ = layer.vectorProperties.getModelScaleZ(feature);
+      currentFeatures[0].set('olcs_modelScaleX', scaleX * sx);
+      currentFeatures[0].set('olcs_modelScaleY', scaleY * sy);
+      let usedSz = sz;
+      if (usedSz == null) {
+        usedSz = sx === sy ? sx : 1;
+      }
+      currentFeatures[0].set('olcs_modelScaleZ', scaleZ * usedSz);
+    } else {
+      let center = transformationHandler?.center;
+      if (!center) {
+        // XXX copy paste
+        const extent = createEmptyExtent();
+        currentFeatures.forEach((f) => {
+          extendExtent(extent, f.getGeometry()!.getExtent());
+        });
+        if (!isEmpty(extent)) {
+          center = getCenter(extent);
+        }
+      }
       currentFeatures.forEach((f) => {
-        extendExtent(extent, f.getGeometry()!.getExtent());
+        const geometry = f[obliqueGeometry] ?? f.getGeometry();
+        geometry!.scale(sx, sy, center);
       });
-      if (!isEmpty(extent)) {
-        center = getCenter(extent);
-      }
     }
-    currentFeatures.forEach((f) => {
-      const geometry = f[obliqueGeometry] ?? f.getGeometry();
-      geometry!.scale(sx, sy, center);
-    });
   };
 
   const createTransformations = (): void => {
@@ -281,8 +348,6 @@ function startEditFeaturesSession(
       interaction = new ExtrudeInteraction(transformationHandler);
       interaction.extruded.addEventListener((dz) => {
         currentFeatures.forEach((f) => {
-          // eslint-disable-next-line no-void
-          void ensureFeatureAbsolute(f, layer, app.maps.activeMap as CesiumMap);
           let extrudedHeight =
             (f.get('olcs_extrudedHeight') as number | undefined) ?? 0;
           extrudedHeight += dz;
@@ -291,13 +356,13 @@ function startEditFeaturesSession(
       });
     } else if (mode === TransformationMode.ROTATE) {
       interaction = new RotateInteraction(transformationHandler);
-      interaction.rotated.addEventListener(({ angle }) => {
-        rotate(angle);
+      interaction.rotated.addEventListener(({ angle, axis }) => {
+        rotate(angle, axis);
       });
     } else if (mode === TransformationMode.SCALE) {
       interaction = new ScaleInteraction(transformationHandler);
-      interaction.scaled.addEventListener(([sx, sy]) => {
-        scale(sx, sy);
+      interaction.scaled.addEventListener(([sx, sy, sz]) => {
+        scale(sx, sy, sz);
       });
     } else {
       throw new Error(`Unknown transformation mode ${String(mode)}`);
@@ -378,6 +443,7 @@ function startEditFeaturesSession(
     });
     allowPickingMap.clear();
     app.layers.remove(scratchLayer);
+    scratchLayer.destroy();
     modeChanged.destroy();
     removeRightClickStart();
     rightClickStart.destroy();