@vcmap/core 5.0.0-rc.8 → 5.0.0

package/src/util/editor/selectFeaturesSession.ts

@@ -0,0 +1,314 @@
+import { check } from '@vcsuite/check';
+import { Circle, Fill, Style, Stroke } from 'ol/style.js';
+import type { Feature } from 'ol/index.js';
+import { createSync } from '../../layer/vectorSymbols.js';
+import {
+  EditorSession,
+  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';
+import type VectorLayer from '../../layer/vectorLayer.js';
+import type VcsApp from '../../vcsApp.js';
+import type VcsMap from '../../map/vcsMap.js';
+
+type SelectionHighlightManager = {
+  highlightedFeatures: Feature[];
+  /**
+   * 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.
+   */
+  update(feature: Feature[]): void;
+  destroy(): void;
+};
+
+/**
+ * Creates the selection highlight manager. By calling update features can be highlighted.
+ * @param  layer The layer of the features to be highlighted.
+ * @param  highlightStyle Highlight style for the highlighted features.
+ * @returns  Object that manages highlighting and allowPicking property of features. Has own state for selected features.
+ */
+function createHighlightManager(
+  layer: VectorLayer,
+  highlightStyle: Style,
+): SelectionHighlightManager {
+  const currentFeaturesMap: Map<string | number, Feature> = new Map();
+
+  /**
+   * Sets the new features to be highlighted. All currently highlighted features that are not part of the new features are unhighlighted.
+   * @param newFeatures Features to be highlighted.
+   */
+  const update = (newFeatures: Feature[]): void => {
+    const newIds = new Set(
+      newFeatures.map((f) => {
+        f[createSync] = true;
+        return f.getId() as string | number;
+      }),
+    );
+    const idsToHighlight: (string | number)[] = [];
+    newIds.forEach((id) => {
+      if (!currentFeaturesMap.has(id)) {
+        idsToHighlight.push(id);
+      }
+    });
+
+    const idsToUnHighlight: (string | number)[] = [];
+    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() as string | number, feature),
+    );
+  };
+
+  return {
+    get highlightedFeatures(): Feature[] {
+      return [...currentFeaturesMap.values()];
+    },
+    update(newFeatures): void {
+      const featuresOnHighlightLayer = newFeatures.filter(
+        (feature) => feature[vcsLayerName] === layer.name,
+      );
+      update(featuresOnHighlightLayer);
+    },
+    destroy(): void {
+      if (currentFeaturesMap.size > 0) {
+        const idsToUnHighlight = [...currentFeaturesMap.keys()];
+        layer.featureVisibility.unHighlight(idsToUnHighlight);
+        layer
+          .getFeaturesById(idsToUnHighlight)
+          .forEach((feature) => delete feature[createSync]);
+        currentFeaturesMap.clear();
+      }
+    },
+  };
+}
+
+export function getDefaultHighlightStyle(): Style {
+  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,
+    }),
+  });
+}
+
+type SelectFeaturesSession = EditorSession & {
+  currentFeatures: Feature[];
+  firstFeature: Feature | null;
+  featuresChanged: VcsEvent<Feature[]>;
+  mode: SelectionMode;
+  /**
+   * Sets the selection mode. Raises modeChanged event, throws error when invalid selection mode input.
+   */
+  setMode(mode: SelectionMode): void;
+  modeChanged: VcsEvent<SelectionMode>;
+  setCurrentFeatures(features: Feature[]): Promise<void>;
+  clearSelection(): void;
+};
+
+/**
+ * @param  app
+ * @param  layer
+ * @param  [interactionId] id for registering multiple exclusive interaction.
+ * @param  [initialMode=SelectionMode.MULTI]
+ * @param  [highlightStyle]
+ * @group Editor
+ */
+function startSelectFeaturesSession(
+  app: VcsApp,
+  layer: VectorLayer,
+  interactionId?: string,
+  initialMode = SelectionMode.MULTI,
+  highlightStyle = getDefaultHighlightStyle(),
+): SelectFeaturesSession {
+  const stopped = new VcsEvent<void>();
+  const modeChanged = new VcsEvent<SelectionMode>();
+  const featuresChanged = new VcsEvent<Feature[]>();
+  let currentSelectInteraction:
+    | SelectSingleFeatureInteraction
+    | SelectMultiFeatureInteraction
+    | null = null;
+  let mouseOverInteraction: SelectFeatureMouseOverInteraction | null = null;
+  let currentSelectionMode: SelectionMode;
+  let obliqueMap: ObliqueMap | null = null;
+
+  const {
+    interactionChain,
+    removed: interactionRemoved,
+    destroy: destroyInteractionChain,
+  } = setupInteractionChain(app.maps.eventHandler, interactionId);
+
+  const highlightManager = createHighlightManager(layer, highlightStyle);
+
+  let interactionListeners: (() => void)[] = [];
+  function destroyCurrentSelectInteraction(): void {
+    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 newMode Either single or multi selection mode.
+   */
+  function createSelectInteraction(newMode: SelectionMode): void {
+    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;
+            }
+          },
+        ),
+      );
+    } else {
+      throw new Error(`Unknown selection mode ${String(newMode)}`);
+    }
+
+    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.
+      // eslint-disable-next-line no-void
+      void currentSelectInteraction.setSelected(highlightedFeatures);
+    }
+    currentSelectionMode = newMode;
+    interactionChain.addInteraction(currentSelectInteraction);
+    mouseOverInteraction = new SelectFeatureMouseOverInteraction(
+      layer.name,
+      currentSelectInteraction,
+    );
+    interactionChain.addInteraction(mouseOverInteraction);
+  }
+
+  createSelectInteraction(initialMode);
+
+  let obliqueImageChangedListener = (): void => {};
+  const mapChanged = (map: VcsMap): void => {
+    obliqueImageChangedListener();
+    if (map instanceof ObliqueMap) {
+      currentSelectInteraction!.clear();
+      obliqueImageChangedListener =
+        map.imageChanged?.addEventListener(() => {
+          currentSelectInteraction!.clear();
+        }) ?? ((): void => {});
+      obliqueMap = map;
+    } else {
+      if (obliqueMap) {
+        currentSelectInteraction!.clear();
+      }
+      obliqueMap = null;
+      obliqueImageChangedListener = (): void => {};
+    }
+  };
+  const mapChangedListener = app.maps.mapActivated.addEventListener(mapChanged);
+  mapChanged(app.maps.activeMap!);
+
+  const stop = (): void => {
+    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: Feature[]): Promise<void> {
+      return (
+        currentSelectInteraction?.setSelected(features) ?? Promise.resolve()
+      );
+    },
+    get currentFeatures(): Feature[] {
+      return currentSelectInteraction?.selected ?? [];
+    },
+    get firstFeature(): Feature | null {
+      return currentSelectInteraction?.selected[0] ?? null;
+    },
+    get mode(): SelectionMode {
+      return currentSelectionMode;
+    },
+    setMode(newMode: SelectionMode): void {
+      check(newMode, Object.values(SelectionMode));
+
+      createSelectInteraction(newMode);
+      modeChanged.raiseEvent(currentSelectionMode);
+    },
+    modeChanged,
+    featuresChanged,
+    clearSelection(): void {
+      currentSelectInteraction?.clear();
+    },
+  };
+}
+
+export default startSelectFeaturesSession;

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

@@ -0,0 +1,368 @@
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Extent } from 'ol/extent.js';
+import type { Geometry } from 'ol/geom.js';
+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 {
+  AxisAndPlanes,
+  greyedOutColor,
+  Handlers,
+  is1DAxis,
+  is2DAxis,
+  TransformationMode,
+} from './transformationTypes.js';
+import { mercatorProjection } from '../../projection.js';
+import type VectorLayer from '../../../layer/vectorLayer.js';
+import {
+  alreadyTransformedToImage,
+  doNotTransform,
+} from '../../../layer/vectorSymbols.js';
+import type BaseOLMap from '../../../map/baseOLMap.js';
+
+function createAxisPositions(
+  center: Coordinate,
+  axis: AxisAndPlanes,
+  extent: Extent,
+): Coordinate[] {
+  if (axis === AxisAndPlanes.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  scratchLayer
+ * @param  [projectionExtent]
+ */
+function createShowAxisFeatures(
+  scratchLayer: VectorLayer,
+  projectionExtent?: Extent,
+): (ap: AxisAndPlanes, coord: Coordinate) => void {
+  let featureIds: (string | number)[] | undefined;
+  const extent = projectionExtent ?? mercatorProjection.proj.getExtent();
+
+  return (axis, center) => {
+    if (featureIds) {
+      scratchLayer.removeFeaturesById(featureIds);
+      featureIds = undefined;
+    }
+    if (axis !== AxisAndPlanes.NONE) {
+      const features = [];
+      if (axis === AxisAndPlanes.X || axis === AxisAndPlanes.XY) {
+        const feature = new Feature({
+          geometry: new LineString(
+            createAxisPositions(center, AxisAndPlanes.X, extent),
+          ),
+        });
+        feature.setStyle(
+          new Style({
+            stroke: new Stroke({
+              color: Color.RED.withAlpha(0.5).toCssColorString(),
+              width: 1,
+            }),
+          }),
+        );
+        features.push(feature);
+      }
+      if (axis === AxisAndPlanes.Y || axis === AxisAndPlanes.XY) {
+        const feature = new Feature({
+          geometry: new LineString(
+            createAxisPositions(center, AxisAndPlanes.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() as Geometry;
+        geometry[alreadyTransformedToImage] = true;
+        f[doNotTransform] = true;
+      });
+      featureIds = scratchLayer.addFeatures(features);
+    }
+  };
+}
+
+/**
+ * @param  axis
+ * @param  mode
+ * @param  [colorOverride]
+ */
+function createLineAxisFeatures(
+  axis: AxisAndPlanes,
+  mode: TransformationMode,
+  colorOverride?: string,
+): Feature[] {
+  let color;
+  let coordinates;
+  let rotation = 0;
+
+  if (axis === AxisAndPlanes.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  [colorOverride]
+ */
+function createPlaneFeature(colorOverride?: string): Feature<Polygon> {
+  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: AxisAndPlanes.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  scratchLayer
+ */
+function createShowShadowFeatures(
+  scratchLayer: VectorLayer,
+): (
+  axis: AxisAndPlanes,
+  mode: TransformationMode,
+  center: Coordinate,
+  scale: number,
+) => void {
+  let featureIds: (string | number)[] | undefined;
+  const color = greyedOutColor.toCssColorString();
+
+  return (axis, mode, center, scale) => {
+    if (featureIds) {
+      scratchLayer.removeFeaturesById(featureIds);
+      featureIds = undefined;
+    }
+    if (axis !== AxisAndPlanes.NONE) {
+      let features: Feature[] = [];
+      if (is1DAxis(axis)) {
+        features = createLineAxisFeatures(axis, mode, color);
+      } else if (is2DAxis(axis)) {
+        features = [createPlaneFeature(color)];
+      }
+      features.forEach((f) => {
+        f.getGeometry()!.applyTransform(
+          (input: number[], output: number[] | undefined): number[] => {
+            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 as number[];
+          },
+        );
+      });
+      featureIds = scratchLayer.addFeatures(features);
+    }
+  };
+}
+
+/**
+ * The function will create 2D handlers for the  and the  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  map
+ * @param  scratchLayer
+ * @param  mode
+ */
+export default function create2DHandlers(
+  map: BaseOLMap,
+  scratchLayer: VectorLayer,
+  mode: TransformationMode,
+): Handlers {
+  let center = [0, 0, 0];
+  let scale = 1;
+  let features: Feature[] = [];
+  if (
+    mode === TransformationMode.TRANSLATE ||
+    mode === TransformationMode.SCALE
+  ) {
+    features = [
+      ...createLineAxisFeatures(AxisAndPlanes.X, mode),
+      ...createLineAxisFeatures(AxisAndPlanes.Y, mode),
+      createPlaneFeature(),
+    ];
+  } else if (mode === TransformationMode.ROTATE) {
+    features = [
+      new Feature({
+        geometry: new Circle([0, 0, 0], 0.5),
+        axis: AxisAndPlanes.Z,
+      }),
+    ];
+    features[0].setStyle(
+      new Style({
+        stroke: new Stroke({ color: Color.BLUE.toCssColorString(), width: 2 }),
+      }),
+    );
+  }
+
+  features.forEach((f) => {
+    const geometry = f.getGeometry() as Geometry;
+    geometry[alreadyTransformedToImage] = true;
+    f[doNotTransform] = true;
+    f[handlerSymbol] = f.get('axis') as AxisAndPlanes;
+  });
+
+  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: number[], output: number[] | undefined): number[] => {
+              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 as number[];
+            },
+          );
+        });
+      }
+
+      scale = res;
+    }
+  });
+
+  let showAxis = AxisAndPlanes.NONE;
+  const showAxisFeatures = createShowAxisFeatures(scratchLayer);
+  const showShadowFeatures = createShowShadowFeatures(scratchLayer);
+
+  let showing = false;
+
+  return {
+    get show(): boolean {
+      return showing;
+    },
+    set show(show) {
+      if (show !== showing) {
+        showing = show;
+        if (!show) {
+          scratchLayer.removeFeaturesById(
+            features.map((f) => f.getId() as string | number),
+          );
+        } else {
+          scratchLayer.addFeatures(features);
+        }
+      }
+    },
+    get showAxis(): AxisAndPlanes {
+      return showAxis;
+    },
+    set showAxis(axis) {
+      showAxis = axis;
+      showAxisFeatures(axis, center);
+      showShadowFeatures(axis, mode, center, scale);
+    },
+    greyOutZ: false,
+    setCenter(newCenter: Coordinate): void {
+      const dx = newCenter[0] - center[0];
+      const dy = newCenter[1] - center[1];
+      features.forEach((f) => {
+        f.getGeometry()!.applyTransform(
+          (input: number[], output: number[] | undefined): number[] => {
+            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 as number[];
+          },
+        );
+      });
+      center = newCenter.slice();
+    },
+    destroy(): void {
+      unByKey(postRenderListenerKey);
+      showAxisFeatures(AxisAndPlanes.NONE, center);
+      showShadowFeatures(AxisAndPlanes.NONE, mode, center, scale);
+      scratchLayer.removeFeaturesById(
+        features.map((f) => f.getId()).filter((id) => id) as string[],
+      );
+    },
+  };
+}