@vcmap/core 5.0.0-rc.9 → 5.0.1

package/src/util/editor/interactions/createCircleInteraction.ts

@@ -0,0 +1,102 @@
+import Circle from 'ol/geom/Circle.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import {
+  actuallyIsCircle,
+  alreadyTransformedToImage,
+  alreadyTransformedToMercator,
+} from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import type { CreateInteraction } from '../createFeatureSession.js';
+
+/**
+ * Interaction to create a circle geometry.
+ * @extends {AbstractInteraction}
+ * @implements {CreateInteraction<import("ol/geom").Circle>}
+ */
+class CreateCircleInteraction
+  extends AbstractInteraction
+  implements CreateInteraction<Circle>
+{
+  private _geometry: Circle | null = null;
+
+  private _coordinates: Coordinate[] = [];
+
+  private _lastCoordinate: Coordinate | null = null;
+
+  finished = new VcsEvent<Circle | null>();
+
+  created = new VcsEvent<Circle>();
+
+  constructor() {
+    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    this.setActive();
+  }
+
+  /**
+   * Sets the geometry coordinates based on the interactions coordinates
+   */
+  private _setCoordinates(): void {
+    if (this._geometry) {
+      this._geometry.setCoordinates(this._coordinates);
+    }
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.type & EventType.CLICKMOVE && this._geometry) {
+      this._lastCoordinate!.splice(
+        0,
+        event.positionOrPixel.length,
+        ...event.positionOrPixel,
+      );
+      this._setCoordinates();
+    }
+
+    if (event.type & EventType.CLICK) {
+      if (this._geometry) {
+        this.finish();
+      } else {
+        this._geometry = new Circle(event.positionOrPixel, 20, 'XYZ');
+        this._geometry[actuallyIsCircle] = event.map instanceof ObliqueMap;
+        if (event.map instanceof ObliqueMap) {
+          this._geometry[alreadyTransformedToImage] = true;
+        } else {
+          this._geometry[alreadyTransformedToMercator] = true;
+        }
+        this.created.raiseEvent(this._geometry);
+        this._coordinates = this._geometry.getCoordinates();
+        this._lastCoordinate = this._coordinates[1];
+      }
+    }
+
+    if (event.type & EventType.DBLCLICK) {
+      this.finish();
+    }
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Finish the current creation. Calls finish and sets the interaction to be inactive
+   */
+  finish(): void {
+    if (this.active !== EventType.NONE) {
+      this._setCoordinates();
+      this.setActive(false);
+      this.finished.raiseEvent(this._geometry);
+    }
+  }
+
+  destroy(): void {
+    this._geometry = null;
+    this._coordinates = [];
+    this.finished.destroy();
+    this.created.destroy();
+    super.destroy();
+  }
+}
+
+export default CreateCircleInteraction;

package/src/util/editor/interactions/createLineStringInteraction.ts

@@ -0,0 +1,103 @@
+import LineString from 'ol/geom/LineString.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import {
+  alreadyTransformedToImage,
+  alreadyTransformedToMercator,
+} from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import { CreateInteraction } from '../createFeatureSession.js';
+
+/**
+ * @extends {AbstractInteraction}
+ * @implements {CreateInteraction<import("ol/geom").LineString>}
+ */
+class CreateLineStringInteraction
+  extends AbstractInteraction
+  implements CreateInteraction<LineString>
+{
+  private _geometry: LineString | null = null;
+
+  private _coordinates: Coordinate[] = [];
+
+  private _lastCoordinate: Coordinate | null = null;
+
+  finished = new VcsEvent<LineString | null>();
+
+  created = new VcsEvent<LineString>();
+
+  constructor() {
+    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    this.setActive();
+  }
+
+  /**
+   * Sets the coordiantes on the geometry
+   * @private
+   */
+  private _setCoordinates(): void {
+    if (this._geometry) {
+      this._geometry.setCoordinates(this._coordinates);
+    }
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.type & EventType.CLICKMOVE && this._geometry) {
+      this._lastCoordinate!.splice(
+        0,
+        event.positionOrPixel.length,
+        ...event.positionOrPixel,
+      );
+      this._setCoordinates();
+    }
+
+    if (event.type & EventType.CLICK) {
+      if (!this._geometry) {
+        this._geometry = new LineString([event.positionOrPixel], 'XYZ');
+        if (event.map instanceof ObliqueMap) {
+          this._geometry[alreadyTransformedToImage] = true;
+        } else {
+          this._geometry[alreadyTransformedToMercator] = true;
+        }
+        this.created.raiseEvent(this._geometry);
+        this._coordinates = [event.positionOrPixel.slice()];
+        this._lastCoordinate = this._coordinates[0].slice();
+        this._coordinates.push(this._lastCoordinate);
+      } else {
+        this._lastCoordinate = [...(this._lastCoordinate as Coordinate)];
+        this._coordinates.push(this._lastCoordinate);
+      }
+    }
+
+    if (event.type & EventType.DBLCLICK) {
+      this.finish();
+    }
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Finish the current creation. Calls finish and sets the interaction to be inactive
+   */
+  finish(): void {
+    if (this.active !== EventType.NONE) {
+      this._coordinates.pop();
+      this._setCoordinates();
+      this.setActive(false);
+      this.finished.raiseEvent(this._geometry);
+    }
+  }
+
+  destroy(): void {
+    this._geometry = null;
+    this._coordinates = [];
+    this.finished.destroy();
+    this.created.destroy();
+    super.destroy();
+  }
+}
+
+export default CreateLineStringInteraction;

package/src/util/editor/interactions/createPointInteraction.ts

@@ -0,0 +1,62 @@
+import Point from 'ol/geom/Point.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import VcsEvent from '../../../vcsEvent.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import {
+  alreadyTransformedToImage,
+  alreadyTransformedToMercator,
+} from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import { CreateInteraction } from '../createFeatureSession.js';
+
+/**
+ * @extends {AbstractInteraction}
+ * @implements {CreateInteraction<import("ol/geom").Point>}
+ */
+class CreatePointInteraction
+  extends AbstractInteraction
+  implements CreateInteraction<Point>
+{
+  private _geometry: Point | null = null;
+
+  finished = new VcsEvent<Point | null>();
+
+  created = new VcsEvent<Point>();
+
+  constructor() {
+    super(EventType.CLICK);
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    this._geometry = new Point(event.positionOrPixel, 'XYZ');
+    if (event.map instanceof ObliqueMap) {
+      this._geometry[alreadyTransformedToImage] = true;
+    } else {
+      this._geometry[alreadyTransformedToMercator] = true;
+    }
+    this.created.raiseEvent(this._geometry);
+    this.finish();
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Finish the current creation. Calls finish and sets the interaction to be inactive
+   */
+  finish(): void {
+    if (this.active !== EventType.NONE) {
+      this.setActive(false);
+      this.finished.raiseEvent(this._geometry);
+    }
+  }
+
+  destroy(): void {
+    this.finished.destroy();
+    this.created.destroy();
+    super.destroy();
+  }
+}
+
+export default CreatePointInteraction;

package/src/util/editor/interactions/createPolygonInteraction.ts

@@ -0,0 +1,115 @@
+import { Polygon } from 'ol/geom.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import VcsEvent from '../../../vcsEvent.js';
+import {
+  alreadyTransformedToImage,
+  alreadyTransformedToMercator,
+} from '../../../layer/vectorSymbols.js';
+import ObliqueMap from '../../../map/obliqueMap.js';
+import { CreateInteraction } from '../createFeatureSession.js';
+
+class CreatePolygonInteraction
+  extends AbstractInteraction
+  implements CreateInteraction<Polygon>
+{
+  private _geometry: Polygon | null = null;
+
+  private _coordinates: Coordinate[] = [];
+
+  private _lastCoordinate: Coordinate | null = null;
+
+  /**
+   * This coordinate is added together with the first click to ensure a valid geometry
+   * so the user has feedback. On the second click, this coordinate gets sliced to no longer be in
+   * sync with the last coordinate.
+   */
+  private _validityPlaceHolder: Coordinate | null = null;
+
+  finished = new VcsEvent<Polygon | null>();
+
+  created = new VcsEvent<Polygon>();
+
+  constructor() {
+    super(EventType.CLICKMOVE | EventType.DBLCLICK);
+    this.setActive();
+  }
+
+  /**
+   * Sets the coordiantes on the geometry
+   * @private
+   */
+  private _setCoordinates(): void {
+    if (this._geometry) {
+      this._geometry.setCoordinates([this._coordinates]);
+    }
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.type & EventType.CLICKMOVE && this._geometry) {
+      this._lastCoordinate!.splice(
+        0,
+        event.positionOrPixel.length,
+        ...event.positionOrPixel,
+      );
+      this._setCoordinates();
+    }
+
+    if (event.type & EventType.CLICK) {
+      if (!this._geometry) {
+        this._geometry = new Polygon([[event.positionOrPixel.slice()]], 'XYZ');
+        if (event.map instanceof ObliqueMap) {
+          this._geometry[alreadyTransformedToImage] = true;
+        } else {
+          this._geometry[alreadyTransformedToMercator] = true;
+        }
+        this.created.raiseEvent(this._geometry);
+        this._coordinates = [event.positionOrPixel.slice()];
+        this._lastCoordinate = [...event.positionOrPixel];
+        this._validityPlaceHolder = event.positionOrPixel.slice() as Coordinate;
+        this._coordinates.push(this._lastCoordinate);
+        this._coordinates.push(this._validityPlaceHolder);
+      } else if (this._validityPlaceHolder) {
+        this._lastCoordinate = [...(this._lastCoordinate as Coordinate)];
+        this._coordinates.splice(2, 1, this._lastCoordinate);
+        this._validityPlaceHolder = null;
+      } else {
+        this._lastCoordinate = [...(this._lastCoordinate as Coordinate)];
+        this._coordinates.push(this._lastCoordinate);
+      }
+    }
+
+    if (event.type & EventType.DBLCLICK) {
+      this.finish();
+    }
+    return Promise.resolve(event);
+  }
+
+  /**
+   * Finish the current creation. Calls finish and sets the interaction to be inactive
+   */
+  finish(): void {
+    if (this.active !== EventType.NONE) {
+      this._coordinates.pop();
+      if (this._validityPlaceHolder) {
+        this._coordinates.pop();
+      }
+      this._setCoordinates();
+      this.setActive(false);
+      this.finished.raiseEvent(this._geometry);
+    }
+  }
+
+  destroy(): void {
+    this._geometry = null;
+    this._coordinates = [];
+    this.finished.destroy();
+    this.created.destroy();
+    super.destroy();
+  }
+}
+
+export default CreatePolygonInteraction;

package/src/util/editor/interactions/editFeaturesMouseOverInteraction.ts

@@ -0,0 +1,74 @@
+import type { Feature } from 'ol/index.js';
+import { handlerSymbol, mouseOverSymbol } from '../editorSymbols.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  ModificationKeyType,
+  EventType,
+} from '../../../interaction/interactionType.js';
+import { cursorMap } from './editGeometryMouseOverInteraction.js';
+
+/**
+ * A class to handle mouse over effects on features for editor sessions.
+ * @extends {AbstractInteraction}
+ */
+class EditFeaturesMouseOverInteraction extends AbstractInteraction {
+  private _currentHandler: Feature | null = null;
+
+  cursorStyle: CSSStyleDeclaration | undefined;
+
+  constructor() {
+    super(EventType.MOVE, ModificationKeyType.NONE);
+
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && (event.feature as Feature)[handlerSymbol]) {
+      this._currentHandler = event.feature as Feature;
+    } else {
+      this._currentHandler = null;
+    }
+    if (!this.cursorStyle && event.map?.target) {
+      this.cursorStyle = event.map.target.style;
+    }
+    this._evaluate();
+    return Promise.resolve(event);
+  }
+
+  setActive(active?: boolean | number): void {
+    super.setActive(active);
+    this.reset();
+  }
+
+  /**
+   * Reset the cursorStyle to auto
+   */
+  reset(): void {
+    if (this.cursorStyle && this.cursorStyle.cursor) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      this.cursorStyle = undefined;
+    }
+  }
+
+  private _evaluate(): void {
+    if (!this.cursorStyle) {
+      return;
+    }
+    if (this._currentHandler) {
+      this.cursorStyle.cursor = cursorMap.translate;
+      this.cursorStyle[mouseOverSymbol] = this.id;
+    } else if (this.cursorStyle?.[mouseOverSymbol] === this.id) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      delete this.cursorStyle[mouseOverSymbol];
+    }
+  }
+
+  destroy(): void {
+    this.reset();
+    super.destroy();
+  }
+}
+
+export default EditFeaturesMouseOverInteraction;

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

@@ -0,0 +1,106 @@
+import { mouseOverSymbol, vertexSymbol } from '../editorSymbols.js';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import {
+  ModificationKeyType,
+  EventType,
+} from '../../../interaction/interactionType.js';
+import { Vertex } from '../editorHelpers.js';
+
+const pointerSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+  <g id="pen">
+    <path d=" M 14.744 18.702 L 12.814 16.772 L 16.773 12.814 L 18.703 14.744 C 19.099 15.159 19.099 15.812 18.703 16.228 L 16.228 18.702 C 15.813 19.097 15.16 19.097 14.744 18.702 Z  M 3.959 0.002 L 15.635 11.679 L 11.678 15.637 L 0 3.962 L 0 0.002 L 3.959 0.002 Z " fill="rgb(0,0,0)"/>
+    <path d=" M 0.75 0.846 L 3.641 0.846 L 14.532 11.768 L 11.641 14.659 L 0.75 3.581 L 0.75 0.846 Z " fill="rgb(255,255,255)"/>
+    <path d=" M 16.75 14.018 L 18.242 15.511 L 15.414 18.339 L 13.881 16.805 L 16.75 14.018 Z " fill="rgb(255,255,255)"/>
+  </g>
+</svg>`;
+
+export const cursorMap = {
+  // TODO these can now be designed custom. IE11 no linger required
+  auto: 'auto',
+  scaleNESW: 'nesw-resize',
+  scaleNWSE: 'nwse-resize',
+  rotate: 'crosshair',
+  translate: 'move',
+  select: 'pointer',
+  edit: `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+    pointerSvg,
+  )}"), pointer`, // fa pencil
+  translateVertex: 'move', // fa-stack pointer-move
+  removeVertex: 'no-drop', // fa-stack pencil-minus
+  insertVertex: 'cell', // fa-stack pencil-plus
+  addToSelection: 'cell', // fa-stack pointer-black
+  removeFromSelection: 'not-allowed',
+};
+
+/**
+ * A class to handle mouse over effects on features for editor sessions.
+ * @extends {AbstractInteraction}
+ */
+class EditGeometryMouseOverInteraction extends AbstractInteraction {
+  private _currentVertex: Vertex | null = null;
+
+  cursorStyle: CSSStyleDeclaration | undefined;
+
+  constructor() {
+    super(EventType.MOVE, ModificationKeyType.NONE | ModificationKeyType.SHIFT);
+
+    this.setActive();
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (event.feature && (event.feature as Vertex)[vertexSymbol]) {
+      this._currentVertex = event.feature as Vertex;
+    } else {
+      this._currentVertex = null;
+    }
+    if (!this.cursorStyle && event.map?.target) {
+      this.cursorStyle = event.map.target.style;
+    }
+    this._evaluate(event.key);
+    return Promise.resolve(event);
+  }
+
+  modifierChanged(modifier: ModificationKeyType): void {
+    this._evaluate(modifier);
+  }
+
+  setActive(active?: boolean | number): void {
+    super.setActive(active);
+    this.reset();
+  }
+
+  /**
+   * Reset the cursorStyle to auto
+   */
+  reset(): void {
+    if (this.cursorStyle && this.cursorStyle.cursor) {
+      this.cursorStyle.cursor = cursorMap.auto;
+    }
+  }
+
+  private _evaluate(modifier: ModificationKeyType): void {
+    if (!this.cursorStyle) {
+      return;
+    }
+    if (this._currentVertex) {
+      if (modifier === ModificationKeyType.SHIFT) {
+        this.cursorStyle.cursor = cursorMap.removeVertex;
+      } else {
+        this.cursorStyle.cursor = cursorMap.translateVertex;
+      }
+      this.cursorStyle[mouseOverSymbol] = this.id;
+    } else if (this.cursorStyle?.[mouseOverSymbol] === this.id) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      delete this.cursorStyle[mouseOverSymbol];
+    }
+  }
+
+  destroy(): void {
+    this.reset();
+    super.destroy();
+  }
+}
+
+export default EditGeometryMouseOverInteraction;

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

@@ -0,0 +1,52 @@
+import type { Feature } from 'ol/index.js';
+import type { Scene } from '@vcmap-cesium/engine';
+import AbstractInteraction, {
+  EventAfterEventHandler,
+} from '../../../interaction/abstractInteraction.js';
+import { EventType } from '../../../interaction/interactionType.js';
+import { handlerSymbol } from '../editorSymbols.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 EnsureHandlerSelectionInteraction extends AbstractInteraction {
+  private _featureSelection: Feature[];
+
+  /**
+   * @param  selectedFeatures Reference to the selected features.
+   */
+  constructor(selectedFeatures: Feature[]) {
+    super(EventType.DRAGSTART | EventType.MOVE);
+
+    this._featureSelection = selectedFeatures;
+  }
+
+  pipe(event: EventAfterEventHandler): Promise<EventAfterEventHandler> {
+    if (
+      event.feature &&
+      this._featureSelection.length > 0 &&
+      !(event.feature as Feature)[handlerSymbol] &&
+      event.map instanceof CesiumMap
+    ) {
+      const scene = event.map.getScene() as Scene;
+      const drillPicks = scene.drillPick(
+        event.windowPosition,
+        undefined,
+        10,
+        10,
+      ) as { primitive?: { olFeature?: Feature } }[];
+      const handler = drillPicks.find((p) => {
+        return p?.primitive?.olFeature?.[handlerSymbol];
+      });
+      if (handler) {
+        event.feature = handler.primitive!.olFeature;
+      }
+    }
+    return Promise.resolve(event);
+  }
+}
+
+export default EnsureHandlerSelectionInteraction;