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

package/src/util/editor/interactions/editGeometryMouseOverInteraction.js

@@ -108,10 +108,8 @@ class EditGeometryMouseOverInteraction extends AbstractInteraction {
       if (this._lastFeature[vertexSymbol]) {
         if (modifier === ModificationKeyType.SHIFT) {
           this.cursorStyle.cursor = cursorMap.removeVertex;
-        } else if (modifier === ModificationKeyType.ALT) {
-          this.cursorStyle.cursor = cursorMap.translateVertex;
         } else {
-          this.cursorStyle.cursor = cursorMap.auto;
+          this.cursorStyle.cursor = cursorMap.translateVertex;
         }
       } else {
         this.cursorStyle.cursor = cursorMap.select;

package/src/util/editor/interactions/ensureHandlerSelectionInteraction.js

@@ -0,0 +1,48 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { handlerSymbol } from '../../../../index.js';
+import CesiumMap from '../../../map/cesiumMap.js';
+
+/**
+ * This interaction ensure a potential handler is dragged in 3D when it is obscured by a transparent feature.
+ * It uses drillPick on MOVE if: the map is 3D, there is a feature at said position, there is a feature selected in
+ * the feature selection & the feature at the position is _not_ a handler
+ * @class
+ */
+class EnsureHandlerSelectionInteraction extends AbstractInteraction {
+  /**
+   * @param {import("@vcmap/core").SelectMultiFeatureInteraction} selectMultiFeatureInteraction
+   */
+  constructor(selectMultiFeatureInteraction) {
+    super(EventType.DRAGSTART | EventType.MOVE);
+    /**
+     * @type {import("@vcmap/core").SelectMultiFeatureInteraction}
+     * @private
+     */
+    this._featureSelection = selectMultiFeatureInteraction;
+  }
+
+  /**
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (
+      event.feature &&
+      this._featureSelection.selectedFeatures.length > 0 &&
+      !event.feature[handlerSymbol] &&
+      event.map instanceof CesiumMap
+    ) {
+      const handler = event.map.getScene().drillPick(event.windowPosition, undefined, 10, 10)
+        .find((p) => {
+          return p?.primitive?.olFeature?.[handlerSymbol];
+        });
+      if (handler) {
+        event.feature = handler.primitive.olFeature;
+      }
+    }
+    return event;
+  }
+}
+
+export default EnsureHandlerSelectionInteraction;

package/src/util/editor/interactions/mapInteractionController.js

@@ -1,6 +1,6 @@
 import DragPan from 'ol/interaction/DragPan.js';
 import { EventType, ModificationKeyType } from '../../../interaction/interactionType.js';
-import { vertexSymbol } from '../editorSymbols.js';
+import { handlerSymbol, vertexSymbol } from '../editorSymbols.js';
 import AbstractInteraction from '../../../interaction/abstractInteraction.js';
 
 /**
@@ -75,7 +75,10 @@ class MapInteractionController extends AbstractInteraction {
    */
   async pipe(event) {
     this.reset();
-    if (event.feature && event.feature[vertexSymbol]) {
+    if (
+      event.feature &&
+      (event.feature[vertexSymbol] || event.feature[handlerSymbol])
+    ) {
       if (event.map.className === 'CesiumMap') {
         this._clear = suspendCesiumMap(/** @type {import("@vcmap/core").CesiumMap} */ (event.map));
       } else {

package/src/util/editor/interactions/selectMultiFeatureInteraction.js

@@ -0,0 +1,146 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { EventType, ModificationKeyType } from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { isTiledFeature } from '../../../layer/featureStoreLayer.js';
+
+/**
+ * Interaction to create a selection set from the given layer.
+ * Will use CTRL modifier key to add more features to the set.
+ * Clears the set if not clicking a feature
+ * Creates a new set when clicking a feature
+ * FeatureStore features will be converted to their dynamic state on selection.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class SelectMultiFeatureInteraction extends AbstractInteraction {
+  /**
+   * @param {import("@vcmap/core").VectorLayer} layer
+   */
+  constructor(layer) {
+    super(EventType.CLICK, ModificationKeyType.NONE | ModificationKeyType.CTRL);
+    /**
+     * @type {import("@vcmap/core").VectorLayer|import("@vcmap/core").FeatureStoreLayer}
+     * @private
+     */
+    this._layer = layer;
+    /**
+     * @type {Map<string|number, import("ol").Feature>}
+     * @private
+     */
+    this._selectedFeatures = new Map();
+    /**
+     * @type {VcsEvent<Array<import("ol").Feature>>}
+     * @private
+     */
+    this._featuresChanged = new VcsEvent();
+    this.setActive();
+  }
+
+  /**
+   * Event raised when the feature selection changes. Will be called with an array of features or an empty array, when no feature is selected
+   * @type {VcsEvent<Array<import("ol").Feature>>}
+   * @readonly
+   */
+  get featuresChanged() { return this._featuresChanged; }
+
+  /**
+   * @returns {Array<import("ol").Feature>}
+   */
+  get selectedFeatures() {
+    return [...this._selectedFeatures.values()];
+  }
+
+  /**
+   * @param {string} featureId
+   * @returns {boolean}
+   */
+  hasFeatureId(featureId) {
+    return this._selectedFeatures.has(featureId);
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (
+      event.feature &&
+      event.feature[vcsLayerName] === this._layer.name
+    ) {
+      if (event.key & ModificationKeyType.CTRL) {
+        event.stopPropagation = true;
+        await this._modifySelectionSet(event.feature);
+      } else if (!this._selectedFeatures.has(event.feature.getId())) {
+        event.stopPropagation = true;
+        await this.setSelectionSet([event.feature]);
+      }
+    } else if (!(event.key & ModificationKeyType.CTRL)) {
+      this.clear();
+    }
+    return event;
+  }
+
+  /**
+   * @param {Array<import("ol").Feature|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|import("@vcmap/cesium").Entity>} features
+   * @returns {Promise<void>}
+   */
+  async setSelectionSet(features) {
+    this._selectedFeatures.clear();
+    const olFeatures = await Promise.all(features.map((f) => {
+      if (f[isTiledFeature]) {
+        return /** @type {import("@vcmap/core").FeatureStoreLayer} */ (this._layer)
+          .switchStaticFeatureToDynamic(f.getId());
+      }
+      return f;
+    }));
+    olFeatures.forEach(/** @param {import("ol").Feature} f */ (f) => {
+      this._selectedFeatures.set(f.getId(), f);
+    });
+
+    this._featuresChanged.raiseEvent(this.selectedFeatures);
+  }
+
+  /**
+   * @param {import("ol").Feature|import("@vcmap/cesium").Cesium3DTileFeature|import("@vcmap/cesium").Cesium3DTilePointFeature|import("@vcmap/cesium").Entity} feature
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _modifySelectionSet(feature) {
+    const id = feature.getId();
+    if (this._selectedFeatures.has(id)) {
+      this._selectedFeatures.delete(id);
+    } else {
+      let olFeature = feature;
+      if (feature[isTiledFeature]) {
+        olFeature = await /** @type {import("@vcmap/core").FeatureStoreLayer} */ (this._layer)
+          .switchStaticFeatureToDynamic(id);
+      }
+      this._selectedFeatures.set(id, /** @type {import("ol").Feature} */ (olFeature));
+    }
+
+    this._featuresChanged.raiseEvent(this.selectedFeatures);
+  }
+
+  /**
+   * Clears the interaction, removing all features and calling the featureChange event with an empty array
+   */
+  clear() {
+    if (this._selectedFeatures.size > 0) {
+      this._selectedFeatures.clear();
+      this._featuresChanged.raiseEvent([]);
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._selectedFeatures.clear();
+    this._featuresChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default SelectMultiFeatureInteraction;

package/src/util/editor/interactions/translateVertexInteraction.js

@@ -1,5 +1,5 @@
 import AbstractInteraction from '../../../interaction/abstractInteraction.js';
-import { EventType, ModificationKeyType } from '../../../interaction/interactionType.js';
+import { EventType } from '../../../interaction/interactionType.js';
 import { vertexSymbol } from '../editorSymbols.js';
 import { emptyStyle } from '../../../style/styleHelpers.js';
 import VcsEvent from '../../../vcsEvent.js';
@@ -12,7 +12,7 @@ import VcsEvent from '../../../vcsEvent.js';
  */
 class TranslateVertexInteraction extends AbstractInteraction {
   constructor() {
-    super(EventType.DRAGEVENTS, ModificationKeyType.ALT);
+    super(EventType.DRAGEVENTS);
     /**
      * @type {import("@vcmap/core").VcsEvent<Vertex>}
      */

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

@@ -0,0 +1,294 @@
+import { Feature } from 'ol';
+import { Circle, LineString, Point, Polygon } from 'ol/geom.js';
+import { Fill, Icon, Stroke, Style } from 'ol/style.js';
+import { Color } from '@vcmap/cesium';
+import { unByKey } from 'ol/Observable.js';
+import { handlerSymbol } from '../editorSymbols.js';
+import { AXIS_AND_PLANES, greyedOutColor, is1DAxis, is2DAxis, TransformationMode } from './transformationTypes.js';
+import { mercatorProjection } from '../../projection.js';
+import Vector from '../../../layer/vectorLayer.js';
+
+/**
+ * @param {import("ol/coordinate").Coordinate} center
+ * @param {AXIS_AND_PLANES} axis
+ * @param {import("ol/extent").Extent} extent
+ * @returns {Array<import("ol/coordinate").Coordinate>}
+ */
+function createAxisPositions(center, axis, extent) {
+  if (axis === AXIS_AND_PLANES.X) {
+    return [
+      [extent[0], center[1], center[2]],
+      [center[0], center[1], center[2]],
+      [extent[2], center[1], center[2]],
+    ];
+  }
+
+  return [
+    [center[0], extent[1], center[2]],
+    [center[0], center[1], center[2]],
+    [center[0], extent[3], center[2]],
+  ];
+}
+
+/**
+ * Creates a function to add axis to the scratch layer. To cleanup features created by this function, you can call
+ * it with AXIS_AND_PLANES.NONE.
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @param {import("ol/extent").Extent} [projectionExtent]
+ * @returns {function(AXIS_AND_PLANES, import("ol/coordinate").Coordinate):void}
+ */
+function createShowAxisFeatures(scratchLayer, projectionExtent) {
+  let featureIds;
+  const extent = projectionExtent ?? mercatorProjection.proj.getExtent();
+
+  return (axis, center) => {
+    if (featureIds) {
+      scratchLayer.removeFeaturesById(featureIds);
+      featureIds = null;
+    }
+    if (axis !== AXIS_AND_PLANES.NONE) {
+      const features = [];
+      if (axis === AXIS_AND_PLANES.X || axis === AXIS_AND_PLANES.XY) {
+        const feature = new Feature({
+          geometry: new LineString(createAxisPositions(center, AXIS_AND_PLANES.X, extent)),
+        });
+        feature.setStyle(new Style({
+          stroke: new Stroke({ color: Color.RED.withAlpha(0.5).toCssColorString(), width: 1 }),
+        }));
+        features.push(feature);
+      }
+      if (axis === AXIS_AND_PLANES.Y || axis === AXIS_AND_PLANES.XY) {
+        const feature = new Feature({
+          geometry: new LineString(createAxisPositions(center, AXIS_AND_PLANES.Y, extent)),
+        });
+        feature.setStyle(new Style({
+          stroke: new Stroke({ color: Color.GREEN.withAlpha(0.5).toCssColorString(), width: 1 }),
+        }));
+        features.push(feature);
+      }
+      features.forEach((f) => {
+        const geometry = f.getGeometry();
+        geometry[Vector.alreadyTransformedToImage] = true;
+        geometry[Vector.doNotTransform] = true;
+      });
+      featureIds = scratchLayer.addFeatures(features);
+    }
+  };
+}
+
+/**
+ * @param {AXIS_AND_PLANES} axis
+ * @param {TransformationMode} mode
+ * @param {string=} [colorOverride]
+ * @returns {Array<import("ol").Feature>}
+ */
+function createLineAxisFeatures(axis, mode, colorOverride) {
+  let color;
+  let coordinates;
+  let rotation = 0;
+
+  if (axis === AXIS_AND_PLANES.X) {
+    color = Color.RED.toCssColorString();
+    coordinates = [[0, 0, 0], [1, 0, 0]];
+    rotation = Math.PI / 2;
+  } else {
+    color = Color.GREEN.toCssColorString();
+    coordinates = [[0, 0, 0], [0, 1, 0]];
+  }
+  color = colorOverride ?? color;
+  let src;
+  if (mode === TransformationMode.TRANSLATE) {
+    src = '<svg height="13" width="13" xmlns="http://www.w3.org/2000/svg"><polygon points="0,13 13,13 6,0" style="fill:white;" /></svg>'; // an arrow svg
+  } else {
+    src = '<svg height="13" width="13" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 13,0 13,13 0,13" style="fill:white" /></svg>'; // a cube svg
+  }
+  src = `data:image/svg+xml,${encodeURIComponent(src)}`;
+
+  const features = [
+    new Feature({
+      geometry: new Point(coordinates[1].slice()),
+      axis,
+    }),
+    new Feature({
+      geometry: new LineString(coordinates),
+      axis,
+    }),
+  ];
+  features[0].setStyle(new Style({
+    image: new Icon({
+      src,
+      anchor: [0.5, 1],
+      color,
+      rotation,
+    }),
+  }));
+  features[1].setStyle(new Style({ stroke: new Stroke({ color, width: 4 }) }));
+
+  return features;
+}
+
+/**
+ * @param {string=} [colorOverride]
+ * @returns {import("ol").Feature<Polygon>}
+ */
+function createPlaneFeature(colorOverride) {
+  const feature = new Feature({
+    geometry: new Polygon([[
+      [0.2, 0.2, 0],
+      [0.2, 0.4, 0],
+      [0.4, 0.4, 0],
+      [0.4, 0.2, 0],
+      [0.2, 0.2, 0],
+    ]]),
+    axis: AXIS_AND_PLANES.XY,
+  });
+  const color = colorOverride ?? Color.BLUE.toCssColorString();
+  feature.setStyle(new Style({ fill: new Fill({ color }) }));
+  return feature;
+}
+
+/**
+ * Creates a function to add a shadow (greyed out clone of a handler) to the scratch layer. To cleanup features created by this function, you can call
+ * it with AXIS_AND_PLANES.NONE.
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @returns {function(AXIS_AND_PLANES, TransformationMode, import("ol/coordinate").Coordinate, number):void}
+ */
+function createShowShadowFeatures(scratchLayer) {
+  let featureIds;
+  const color = greyedOutColor.toCssColorString();
+
+  return (axis, mode, center, scale) => {
+    if (featureIds) {
+      scratchLayer.removeFeaturesById(featureIds);
+      featureIds = null;
+    }
+    if (axis !== AXIS_AND_PLANES.NONE) {
+      let features = [];
+      if (is1DAxis(axis)) {
+        features = createLineAxisFeatures(axis, mode, color);
+      } else if (is2DAxis(axis)) {
+        features = [createPlaneFeature(color)];
+      }
+      features.forEach((f) => {
+        f.getGeometry().applyTransform((input, output) => {
+          const inputLength = input.length;
+          for (let i = 0; i < inputLength; i += 3) {
+            output[i] = (input[i] * scale) + center[0];
+            output[i + 1] = (input[i + 1] * scale) + center[1];
+            output[i + 2] = 0;
+          }
+          return output;
+        });
+      });
+      featureIds = scratchLayer.addFeatures(features);
+    }
+  };
+}
+
+/**
+ * The function will create 2D handlers for the {@see OpenlayerMap} and the {@see ObliqueMap} depending on the provided mode.
+ * In most scenarios, handlers must not be created using this function, but using the startEditFeaturesSession or for lower
+ * level access the createTransformationHandler instead.
+ * @param {import("@vcmap/core").BaseOLMap} map
+ * @param {import("@vcmap/core").VectorLayer} scratchLayer
+ * @param {TransformationMode} mode
+ * @returns {Handlers}
+ */
+export default function create2DHandlers(map, scratchLayer, mode) {
+  let center = [0, 0, 0];
+  let scale = 1;
+  let features = [];
+  if (mode === TransformationMode.TRANSLATE || mode === TransformationMode.SCALE) {
+    features = [
+      ...createLineAxisFeatures(AXIS_AND_PLANES.X, mode),
+      ...createLineAxisFeatures(AXIS_AND_PLANES.Y, mode),
+      createPlaneFeature(),
+    ];
+  } else if (mode === TransformationMode.ROTATE) {
+    features = [
+      new Feature({
+        geometry: new Circle([0, 0, 0], 0.5),
+        axis: AXIS_AND_PLANES.Z,
+      }),
+    ];
+    features[0].setStyle(new Style({ stroke: new Stroke({ color: Color.BLUE.toCssColorString(), width: 2 }) }));
+  }
+
+  features.forEach((f) => {
+    const geometry = f.getGeometry();
+    geometry[Vector.alreadyTransformedToImage] = true;
+    geometry[Vector.doNotTransform] = true;
+    f[handlerSymbol] = f.get('axis');
+  });
+
+  const postRenderListenerKey = map.olMap.on('postrender', () => {
+    if (!(center[0] === 0 && center[1] === 0 && center[2] === 0)) {
+      const res = map.getCurrentResolution(center) * 60;
+      const factor = res / scale;
+      if (factor !== 1) {
+        features.forEach((f) => {
+          f.getGeometry().applyTransform((input, output) => {
+            const inputLength = input.length;
+            for (let i = 0; i < inputLength; i += 3) {
+              output[i] = ((input[i] - center[0]) * factor) + center[0];
+              output[i + 1] = ((input[i + 1] - center[1]) * factor) + center[1];
+              output[i + 2] = 0;
+            }
+            return output;
+          });
+        });
+      }
+
+      scale = res;
+    }
+  });
+
+  let showAxis = AXIS_AND_PLANES.NONE;
+  const showAxisFeatures = createShowAxisFeatures(scratchLayer);
+  const showShadowFeatures = createShowShadowFeatures(scratchLayer);
+
+  let showing = false;
+
+  return {
+    get show() { return showing; },
+    set show(show) {
+      if (show !== showing) {
+        showing = show;
+        if (!show) {
+          scratchLayer.removeFeaturesById(features.map(f => f.getId()));
+        } else {
+          scratchLayer.addFeatures(features);
+        }
+      }
+    },
+    get showAxis() { return showAxis; },
+    set showAxis(axis) {
+      showAxis = axis;
+      showAxisFeatures(axis, center);
+      showShadowFeatures(axis, mode, center, scale);
+    },
+    greyOutZ: false,
+    setCenter(newCenter) {
+      const dx = newCenter[0] - center[0];
+      const dy = newCenter[1] - center[1];
+      features.forEach((f) => {
+        f.getGeometry().applyTransform((input, output) => {
+          const inputLength = input.length;
+          for (let i = 0; i < inputLength; i += 3) {
+            output[i] = input[i] + dx;
+            output[i + 1] = input[i + 1] + dy;
+            output[i + 2] = input[i + 2];
+          }
+          return output;
+        });
+      });
+      center = newCenter.slice();
+    },
+    destroy() {
+      unByKey(postRenderListenerKey);
+      showAxisFeatures(AXIS_AND_PLANES.NONE, center);
+      showShadowFeatures(AXIS_AND_PLANES.NONE, mode, center, scale);
+      scratchLayer.removeFeaturesById(features.map(f => f.getId()).filter(id => id));
+    },
+  };
+}