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

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

@@ -0,0 +1,60 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { vertexSymbol } from '../editorSymbols.js';
+import VcsEvent from '../../../vcsEvent.js';
+
+/**
+ * Class to translate a vertex. Will call the passed in vertex changed event with the changed vertex.
+ * Will modify the vertex in place
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class TranslateVertexInteraction extends AbstractInteraction {
+  constructor() {
+    super(EventType.DRAGEVENTS);
+    /**
+     * @type {import("@vcmap/core").VcsEvent<Vertex>}
+     */
+    this.vertexChanged = new VcsEvent();
+    /**
+     * @type {Vertex|null}
+     * @private
+     */
+    this._vertex = null;
+    this.setActive();
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (this._vertex) {
+      this._vertex.getGeometry().setCoordinates(event.positionOrPixel);
+      this.vertexChanged.raiseEvent(this._vertex);
+
+      if (event.type & EventType.DRAGEND) {
+        this._vertex.unset('olcs_allowPicking');
+        this._vertex = null;
+      }
+      event.stopPropagation = true;
+    } else if (
+      event.type & EventType.DRAGSTART &&
+      event.feature &&
+      event.feature[vertexSymbol]
+    ) {
+      this._vertex = /** @type {Vertex} */ (event.feature);
+      this._vertex.set('olcs_allowPicking', false);
+      event.stopPropagation = true;
+    }
+    return event;
+  }
+
+  destroy() {
+    this.vertexChanged.destroy();
+    super.destroy();
+  }
+}
+
+export default TranslateVertexInteraction;

package/src/util/editor/selectFeaturesSession.js

@@ -0,0 +1,303 @@
+import { check } from '@vcsuite/check';
+import { Circle, Fill, Style, Stroke } from 'ol/style.js';
+import { createSync } from '../../layer/vectorSymbols.js';
+import { SessionType, setupInteractionChain } from './editorSessionHelpers.js';
+import SelectSingleFeatureInteraction from './interactions/selectSingleFeatureInteraction.js';
+import SelectMultiFeatureInteraction from './interactions/selectMultiFeatureInteraction.js';
+import SelectFeatureMouseOverInteraction, {
+  SelectionMode,
+} from './interactions/selectFeatureMouseOverInteraction.js';
+import VcsEvent from '../../vcsEvent.js';
+import ObliqueMap from '../../map/obliqueMap.js';
+import { vcsLayerName } from '../../layer/layerSymbols.js';
+
+/**
+ * @typedef {Object} SelectionHighlightManager
+ * @property {Array<import("ol").Feature>} highlightedFeatures Currently highlighted features.
+ * @property {function(Array<import("ol").Feature>):void} update Sets the new features to be highlighted. All currently highlighted features that are not part of the new features are unhighlighted. Features that are not on the highlight layer are ignored.
+ * @property {function():void} destroy Stops all listeners, unhighlights all features.
+ */
+
+/**
+ * Creates the selection highlight manager. By calling update features can be highlighted.
+ * @param {import("@vcmap/core").VectorLayer} layer The layer of the features to be highlighted.
+ * @param {import("ol/style").Style} highlightStyle Highlight style for the highlighted features.
+ * @returns {SelectionHighlightManager} Object that manages highlighting and allowPicking property of features. Has own state for selected features.
+ */
+function createHighlightManager(layer, highlightStyle) {
+  const currentFeaturesMap = new Map();
+
+  /**
+   * Sets the new features to be highlighted. All currently highlighted features that are not part of the new features are unhighlighted.
+   * @param {Array<import("ol").Feature>} newFeatures Features to be highlighted.
+   */
+  const update = (newFeatures) => {
+    const newIds = new Set(
+      newFeatures.map((f) => {
+        f[createSync] = true;
+        return f.getId();
+      }),
+    );
+    const idsToHighlight = [];
+    newIds.forEach((id) => {
+      if (!currentFeaturesMap.has(id)) {
+        idsToHighlight.push(id);
+      }
+    });
+
+    const idsToUnHighlight = [];
+    currentFeaturesMap.forEach((feature, id) => {
+      if (!newIds.has(id)) {
+        idsToUnHighlight.push(id);
+      }
+    });
+
+    layer.featureVisibility.unHighlight(idsToUnHighlight);
+    layer.featureVisibility.highlight(
+      Object.fromEntries(idsToHighlight.map((id) => [id, highlightStyle])),
+    );
+    layer
+      .getFeaturesById(idsToUnHighlight)
+      .forEach((feature) => delete feature[createSync]);
+
+    currentFeaturesMap.clear();
+    newFeatures.forEach((feature) =>
+      currentFeaturesMap.set(feature.getId(), feature),
+    );
+  };
+
+  return {
+    get highlightedFeatures() {
+      return [...currentFeaturesMap.values()];
+    },
+    update(newFeatures) {
+      const featuresOnHighlightLayer = newFeatures.filter(
+        (feature) => feature[vcsLayerName] === layer.name,
+      );
+      update(featuresOnHighlightLayer);
+    },
+    destroy() {
+      if (currentFeaturesMap.size > 0) {
+        const idsToUnHighlight = [...currentFeaturesMap.keys()];
+        layer.featureVisibility.unHighlight(idsToUnHighlight);
+        layer
+          .getFeaturesById(idsToUnHighlight)
+          .forEach((feature) => delete feature[createSync]);
+        currentFeaturesMap.clear();
+      }
+    },
+  };
+}
+
+/**
+ * @returns {import("ol/style").Style}
+ */
+export function getDefaultHighlightStyle() {
+  const fill = new Fill({ color: 'rgba(76,175,80,0.2)' });
+  const stroke = new Stroke({ color: '#4CAF50', width: 2 });
+
+  return new Style({
+    fill,
+    stroke,
+    image: new Circle({
+      fill,
+      stroke,
+      radius: 14,
+    }),
+  });
+}
+
+/**
+ * @typedef {EditorSession} SelectFeaturesSession
+ * @property {Array<import("ol").Feature>} currentFeatures
+ * @property {import("ol").Feature} firstFeature
+ * @property {VcsEvent<Array<import("ol").Feature>>} featuresChanged
+ * @property {SelectionMode} mode
+ * @property {function(SelectionMode):void} setMode Sets the selection mode. Raises modeChanged event, throws error when invalid selection mode input.
+ * @property {VcsEvent<SelectionMode>} modeChanged
+ * @property {function(Array<import("ol").Feature>): Promise<void>} setCurrentFeatures Promise that resolves when features are set.
+ * @property {function(): void} clearSelection Deselects all features.
+ */
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {string=} [interactionId] id for registering mutliple exclusive interaction.
+ * @param {SelectionMode=} [initialMode=SelectionMode.MULTI]
+ * @param {import("ol/style").Style=} [highlightStyle]
+ * @returns {SelectFeaturesSession}
+ */
+function startSelectFeaturesSession(
+  app,
+  layer,
+  interactionId,
+  initialMode = SelectionMode.MULTI,
+  highlightStyle = getDefaultHighlightStyle(),
+) {
+  /** @type {VcsEvent<void>} */
+  const stopped = new VcsEvent();
+  /** @type {VcsEvent<SelectionMode>} */
+  const modeChanged = new VcsEvent();
+  /** @type {VcsEvent<Array<import("ol").Feature>>} */
+  const featuresChanged = new VcsEvent();
+  /** @type {SelectSingleFeatureInteraction | SelectMultiFeatureInteraction | null} */
+  let currentSelectInteraction = null;
+  /** @type {SelectFeatureMouseOverInteraction} */
+  let mouseOverInteraction = null;
+  /** @type {SelectionMode} */
+  let currentSelectionMode = null;
+  /** @type {ObliqueMap|null} */
+  let obliqueMap = null;
+
+  const {
+    interactionChain,
+    removed: interactionRemoved,
+    destroy: destroyInteractionChain,
+  } = setupInteractionChain(app.maps.eventHandler, interactionId);
+
+  const highlightManager = createHighlightManager(layer, highlightStyle);
+
+  let interactionListeners = [];
+  function destroyCurrentSelectInteraction() {
+    if (currentSelectInteraction) {
+      if (currentSelectInteraction) {
+        interactionChain.removeInteraction(currentSelectInteraction);
+        currentSelectInteraction.destroy();
+        currentSelectInteraction = null;
+      }
+      if (mouseOverInteraction) {
+        interactionChain.removeInteraction(mouseOverInteraction);
+        mouseOverInteraction.destroy();
+        mouseOverInteraction = null;
+      }
+    }
+    interactionListeners.forEach((cb) => {
+      cb();
+    });
+    interactionListeners = [];
+  }
+
+  /**
+   * Destroys current selection interaction and creates new one. Sets all highlighted features as selected. If previous mode was multi and new mode is single, only first feature is selected and highlighted.
+   * @param {SelectionMode} newMode Either single or multi selection mode.
+   * @returns {void}
+   */
+  function createSelectInteraction(newMode) {
+    if (newMode === currentSelectionMode) {
+      return;
+    }
+
+    destroyCurrentSelectInteraction();
+    if (newMode === SelectionMode.SINGLE) {
+      currentSelectInteraction = new SelectSingleFeatureInteraction(layer);
+
+      interactionListeners.push(
+        currentSelectInteraction.featureChanged.addEventListener((feature) => {
+          const featureArray = feature ? [feature] : [];
+          highlightManager.update(featureArray);
+          featuresChanged.raiseEvent(featureArray);
+          if (obliqueMap) {
+            obliqueMap.switchEnabled = !feature;
+          }
+        }),
+      );
+    } else if (newMode === SelectionMode.MULTI) {
+      currentSelectInteraction = new SelectMultiFeatureInteraction(layer);
+      interactionListeners.push(
+        currentSelectInteraction.featuresChanged.addEventListener(
+          (features) => {
+            highlightManager.update(features);
+            featuresChanged.raiseEvent(features);
+            if (obliqueMap) {
+              obliqueMap.switchEnabled = features.length === 0;
+            }
+          },
+        ),
+      );
+    }
+    const { highlightedFeatures } = highlightManager;
+    if (highlightedFeatures) {
+      // if single select interaction, only one features is set. This triggers the event listener which ensures that only this feature is highlighted.
+      currentSelectInteraction.setSelected(highlightedFeatures);
+    }
+    currentSelectionMode = newMode;
+    interactionChain.addInteraction(currentSelectInteraction);
+    mouseOverInteraction = new SelectFeatureMouseOverInteraction(
+      layer.name,
+      currentSelectInteraction,
+    );
+    interactionChain.addInteraction(mouseOverInteraction);
+  }
+
+  createSelectInteraction(initialMode);
+
+  /**
+   * @type {function():void}
+   */
+  let obliqueImageChangedListener = () => {};
+  const mapChanged = (map) => {
+    obliqueImageChangedListener();
+    if (map instanceof ObliqueMap) {
+      currentSelectInteraction.clear();
+      obliqueImageChangedListener = map.imageChanged.addEventListener(() => {
+        currentSelectInteraction.clear();
+      });
+      obliqueMap = map;
+    } else {
+      if (obliqueMap) {
+        currentSelectInteraction.clear();
+      }
+      obliqueMap = null;
+      obliqueImageChangedListener = () => {};
+    }
+  };
+  const mapChangedListener = app.maps.mapActivated.addEventListener(mapChanged);
+  mapChanged(app.maps.activeMap);
+
+  const stop = () => {
+    destroyCurrentSelectInteraction();
+    destroyInteractionChain();
+    highlightManager.destroy();
+    mapChangedListener();
+    obliqueImageChangedListener();
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = true;
+    }
+    stopped.raiseEvent();
+    stopped.destroy();
+    modeChanged.destroy();
+    featuresChanged.destroy();
+  };
+  interactionRemoved.addEventListener(stop);
+
+  return {
+    type: SessionType.SELECT,
+    stopped,
+    stop,
+    setCurrentFeatures(features) {
+      return currentSelectInteraction.setSelected(features);
+    },
+    get currentFeatures() {
+      return currentSelectInteraction.selected;
+    },
+    get firstFeature() {
+      return currentSelectInteraction.selected[0] || null;
+    },
+    get mode() {
+      return currentSelectionMode;
+    },
+    setMode(newMode) {
+      check(newMode, Object.values(SelectionMode));
+
+      createSelectInteraction(newMode);
+      modeChanged.raiseEvent(currentSelectionMode);
+    },
+    modeChanged,
+    featuresChanged,
+    clearSelection() {
+      currentSelectInteraction.clear();
+    },
+  };
+}
+
+export default startSelectFeaturesSession;

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

@@ -0,0 +1,339 @@
+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/engine';
+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),
+      );
+    },
+  };
+}