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

package/src/{vcs/vcm/interaction → interaction}/eventHandler.js

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { Cartesian2 } from '@vcmap/cesium';
+import { Cartesian2 } from '@vcmap-cesium/engine';
 
 import { check, checkMaybe } from '@vcsuite/check';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
@@ -7,9 +7,13 @@ import AbstractInteraction from './abstractInteraction.js';
 import InteractionChain from './interactionChain.js';
 import CoordinateAtPixel from './coordinateAtPixel.js';
 import FeatureAtPixelInteraction from './featureAtPixelInteraction.js';
-import { EventType, PointerEventType } from './interactionType.js';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerEventType,
+} from './interactionType.js';
 import FeatureProviderInteraction from './featureProviderInteraction.js';
-import VcsEvent from '../event/vcsEvent.js';
+import VcsEvent from '../vcsEvent.js';
 
 /**
  * @namespace interaction
@@ -27,18 +31,18 @@ import VcsEvent from '../event/vcsEvent.js';
  * @typedef {Object} MapEvent
  * @property {PointerEventType} pointerEvent
  * @property {import("@vcmap/core").VcsMap} map
- * @property {import("@vcmap/cesium").Cartesian2} windowPosition
+ * @property {import("@vcmap-cesium/engine").Cartesian2} windowPosition
  * @property {import("@vcmap/core").ModificationKeyType} key
  * @property {import("@vcmap/core").PointerKeyType} pointer
  * @property {import("ol/coordinate").Coordinate|undefined} position - position in web mercator coordinates
- * @property {import("ol/coordinate").Coordinate|undefined} positionOrPixel - position in web mercator coordinates or image coordinates in Oblique Map Mode
+ * @property {import("ol/coordinate").Coordinate|undefined} positionOrPixel - position in web mercator coordinates or image coordinates in ObliqueMap Map Mode
  * @property {boolean|undefined} multipleTouch - vcs:undocumented
  * @property {number|null|undefined} time - vcs:undocumented
  */
 
 /**
  * @typedef {Object} LastClick
- * @property {import("@vcmap/cesium").Cartesian2} windowPosition - vcs:undocumented
+ * @property {import("@vcmap-cesium/engine").Cartesian2} windowPosition - vcs:undocumented
  * @property {number|null} time - vcs:undocumented
  * @api
  */
@@ -47,7 +51,7 @@ import VcsEvent from '../event/vcsEvent.js';
  * @returns {import("@vcsuite/logger").Logger}
  */
 function getLogger() {
-  return getLoggerByName('vcs.vcm.interaction.EventHandler');
+  return getLoggerByName('EventHandler');
 }
 
 /**
@@ -105,6 +109,20 @@ class EventHandler {
       windowPosition: new Cartesian2(),
     };
 
+    /**
+     * @type {Map<ModificationKeyType, boolean>}
+     * @private
+     */
+    this._lastKeyEventModifiers = new Map();
+    this._lastKeyEventModifiers.set(ModificationKeyType.SHIFT, false);
+    this._lastKeyEventModifiers.set(ModificationKeyType.ALT, false);
+    this._lastKeyEventModifiers.set(ModificationKeyType.CTRL, false);
+    /**
+     * @type {ModificationKeyType}
+     * @private
+     */
+    this._lastDispatchedModifier = ModificationKeyType.NONE;
+
     /**
      * @type {null|MapEvent}
      * @private
@@ -146,6 +164,19 @@ class EventHandler {
      * @api
      */
     this.exclusiveAdded = new VcsEvent();
+    /**
+     * @type {function(KeyboardEvent):void}
+     * @private
+     */
+    this._boundKeyListener = this._keyListener.bind(this);
+    window.addEventListener('keydown', this._boundKeyListener);
+    window.addEventListener('keyup', this._boundKeyListener);
+
+    /**
+     * @type {VcsEvent<ModificationKeyType>}
+     * @private
+     */
+    this._modifierChanged = new VcsEvent();
   }
 
   /**
@@ -153,21 +184,27 @@ class EventHandler {
    * @readonly
    * @api
    */
-  get positionInteraction() { return this._positionInteraction; }
+  get positionInteraction() {
+    return this._positionInteraction;
+  }
 
   /**
    * @type {FeatureAtPixelInteraction}
    * @readonly
    * @api
    */
-  get featureInteraction() { return this._featureInteraction; }
+  get featureInteraction() {
+    return this._featureInteraction;
+  }
 
   /**
    * @api
    * @readonly
    * @type {FeatureProviderInteraction}
    */
-  get featureProviderInteraction() { return this._featureProviderInteraction; }
+  get featureProviderInteraction() {
+    return this._featureProviderInteraction;
+  }
 
   /**
    * A copy of all the EventHandler interactions
@@ -175,24 +212,35 @@ class EventHandler {
    * @type {AbstractInteraction[]}
    * @api
    */
-  get interactions() { return this._interactionChain.chain.slice(); }
+  get interactions() {
+    return this._interactionChain.chain.slice();
+  }
+
+  /**
+   * An event called, when the modifier changes. Order of precedence, if more then one key is pressed: SHIFT, ALT, CTRL
+   * @type {VcsEvent<ModificationKeyType>}
+   * @readonly
+   */
+  get modifierChanged() {
+    return this._modifierChanged;
+  }
 
   /**
    * Add a dynamic interaction to the interaction chain. This is the default methodology for
    * user map interactions, such as drawing or measuring. If another exclusive interaction is added,
    * this interaction is removed and a provided callback is called. Use the id parameter to add multiple interactions
-   * from the same source (if you don't wish to provide an {@link InteractionChain}
+   * from the same source (if you don't wish to provide an {@link InteractionChain})
    * @param {AbstractInteraction} interaction
    * @param {Function} removed - the callback for when the interaction is forcefully removed.
-   * @param {number=} [index=3] - the position at which to push the interaction
+   * @param {number=} index - the position at which to push the interaction. If no index is provided, the interaction is pushed at the end and therefore is executed last.
    * @param {string=} id - an id to allow for multiple interactions to belong to the same exclusive registerer
    * @returns {Function} function to remove the interaction with. returns number of removed interactions (0|1)
    * @api
    */
-  addExclusiveInteraction(interaction, removed, index = 3, id) {
+  addExclusiveInteraction(interaction, removed, index, id) {
     check(interaction, AbstractInteraction);
     check(removed, Function);
-    check(index, Number);
+    checkMaybe(index, Number);
     checkMaybe(id, String);
 
     if (this._exclusiveInteraction && this._exclusiveInteraction.id !== id) {
@@ -210,7 +258,11 @@ class EventHandler {
       };
     }
     this.exclusiveAdded.raiseEvent();
-    return this._exclusiveUnListen.bind(this, interaction, this._exclusiveInteraction.id);
+    return this._exclusiveUnListen.bind(
+      this,
+      interaction,
+      this._exclusiveInteraction.id,
+    );
   }
 
   /**
@@ -220,12 +272,12 @@ class EventHandler {
   removeExclusive() {
     if (this._exclusiveInteraction) {
       this._exclusiveInteraction.interactions
-        .filter(i => i)
+        .filter((i) => i)
         .forEach((i) => {
           this._interactionChain.removeInteraction(i);
         });
       this._exclusiveInteraction.cb
-        .filter(cb => cb)
+        .filter((cb) => cb)
         .forEach((cb) => {
           cb();
         });
@@ -242,17 +294,21 @@ class EventHandler {
    * @private
    */
   _exclusiveUnListen(interaction, id) {
-    if (!this._exclusiveInteraction || (this._exclusiveInteraction && this._exclusiveInteraction.id !== id)) {
+    if (
+      !this._exclusiveInteraction ||
+      (this._exclusiveInteraction && this._exclusiveInteraction.id !== id)
+    ) {
       return 0;
     }
     const removed = this._interactionChain.removeInteraction(interaction);
-    const index = this._exclusiveInteraction.interactions
-      .findIndex(candidate => candidate && candidate.id === interaction.id);
+    const index = this._exclusiveInteraction.interactions.findIndex(
+      (candidate) => candidate && candidate.id === interaction.id,
+    );
     if (index > -1) {
       this._exclusiveInteraction.interactions.splice(index, 1, undefined);
       this._exclusiveInteraction.cb.splice(index, 1, undefined);
     }
-    if (this._exclusiveInteraction.interactions.every(i => i === undefined)) {
+    if (this._exclusiveInteraction.interactions.every((i) => i === undefined)) {
       this._exclusiveInteraction = null;
     }
     if (removed > -1) {
@@ -274,7 +330,8 @@ class EventHandler {
     check(index, Number);
 
     this._interactionChain.addInteraction(interaction, index);
-    return () => (this._interactionChain.removeInteraction(interaction) !== -1 ? 1 : 0);
+    return () =>
+      this._interactionChain.removeInteraction(interaction) !== -1 ? 1 : 0;
   }
 
   /**
@@ -334,13 +391,19 @@ class EventHandler {
       if (
         this._lastClick.time &&
         Date.now() - this._lastClick.time < this.clickDuration &&
-        Cartesian2.distanceSquared(this._lastClick.windowPosition, actualEvent.windowPosition) < 12
+        Cartesian2.distanceSquared(
+          this._lastClick.windowPosition,
+          actualEvent.windowPosition,
+        ) < 12
       ) {
         this._lastClick.time = null;
         actualEvent.type = EventType.DBLCLICK;
       } else {
         this._lastClick.time = Date.now();
-        Cartesian2.clone(actualEvent.windowPosition, this._lastClick.windowPosition);
+        Cartesian2.clone(
+          actualEvent.windowPosition,
+          this._lastClick.windowPosition,
+        );
         actualEvent.type = EventType.CLICK;
       }
       this._startChain(actualEvent);
@@ -361,7 +424,10 @@ class EventHandler {
         actualEvent.key = this._dragging.key;
         actualEvent.pointer = this._dragging.pointer;
         this._startChain(actualEvent, true);
-      } else if (!this._dragging && Date.now() - this._lastDown.time > this.dragDuration) {
+      } else if (
+        !this._dragging &&
+        Date.now() - this._lastDown.time > this.dragDuration
+      ) {
         actualEvent = { type: EventType.DRAGSTART, ...this._lastDown };
         this._dragging = actualEvent;
         this._startChain(actualEvent, true);
@@ -372,6 +438,43 @@ class EventHandler {
     }
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  _keyListener(event) {
+    if (event.key === 'Shift' || event.key === 'Alt') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (
+      this._lastKeyEventModifiers.get(ModificationKeyType.SHIFT) !==
+        event.shiftKey ||
+      this._lastKeyEventModifiers.get(ModificationKeyType.ALT) !==
+        event.altKey ||
+      this._lastKeyEventModifiers.get(ModificationKeyType.CTRL) !==
+        event.ctrlKey
+    ) {
+      this._lastKeyEventModifiers.set(
+        ModificationKeyType.SHIFT,
+        event.shiftKey,
+      );
+      this._lastKeyEventModifiers.set(ModificationKeyType.ALT, event.altKey);
+      this._lastKeyEventModifiers.set(ModificationKeyType.CTRL, event.ctrlKey);
+      const modifier =
+        [...this._lastKeyEventModifiers.keys()].find((k) =>
+          this._lastKeyEventModifiers.get(k),
+        ) || ModificationKeyType.NONE;
+
+      if (modifier !== this._lastDispatchedModifier) {
+        this._interactionChain.modifierChanged(modifier);
+        this._lastDispatchedModifier = modifier;
+        this._modifierChanged.raiseEvent(modifier);
+      }
+    }
+  }
+
   /**
    * @param {InteractionEvent} event
    * @param {boolean=} discardOnRunning if true the event will discarded if an eventHandler is already Running
@@ -419,6 +522,8 @@ class EventHandler {
     this._featureInteraction.destroy();
     this._featureInteraction = null;
     this._eventQueue = [];
+    window.removeEventListener('keydown', this._boundKeyListener);
+    window.removeEventListener('keyup', this._boundKeyListener);
   }
 }
 

package/src/{vcs/vcm/interaction → interaction}/featureAtPixelInteraction.js

@@ -1,8 +1,19 @@
-import { Cartographic, Cartesian3, Math as CesiumMath, Cesium3DTileFeature, Cesium3DTilePointFeature } from '@vcmap/cesium';
+import {
+  Cartographic,
+  Cartesian3,
+  Math as CesiumMath,
+  Cesium3DTileFeature,
+  Cesium3DTilePointFeature,
+  Entity,
+} from '@vcmap-cesium/engine';
 
 import AbstractInteraction from './abstractInteraction.js';
 import Projection from '../util/projection.js';
-import { EventType, ModificationKeyType } from './interactionType.js';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerKeyType,
+} from './interactionType.js';
 import { vcsLayerName } from '../layer/layerSymbols.js';
 import { originalFeatureSymbol } from '../layer/vectorSymbols.js';
 
@@ -12,7 +23,11 @@ import { originalFeatureSymbol } from '../layer/vectorSymbols.js';
  */
 class FeatureAtPixelInteraction extends AbstractInteraction {
   constructor() {
-    super();
+    super(
+      EventType.ALL ^ EventType.MOVE,
+      ModificationKeyType.ALL,
+      PointerKeyType.ALL,
+    );
     /**
      * @type {EventType|number}
      * @private
@@ -47,19 +62,6 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
      */
     this.hitTolerance = 10;
 
-    /**
-     * @inheritDoc
-     * @type {ModificationKeyType|number}
-     * @protected
-     */
-    this._defaultModificationKey = ModificationKeyType.ALL;
-    /**
-     * @inheritDoc
-     * @type {ModificationKeyType|number}
-     * @protected
-     */
-    this._defaultActive = EventType.ALL ^ EventType.MOVE;
-
     /**
      * @type {import("ol").Feature<import("ol/geom/Geometry").default>|Object|null}
      * @private
@@ -73,7 +75,9 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
    * @type {number}
    * @api
    */
-  get pickPosition() { return this._pickPosition; }
+  get pickPosition() {
+    return this._pickPosition;
+  }
 
   /**
    * @param {number} position
@@ -87,7 +91,9 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
    * @type {number}
    * @api
    */
-  get excludedPickPositionEvents() { return ~this._pickPositionMask; }
+  get excludedPickPositionEvents() {
+    return ~this._pickPositionMask;
+  }
 
   /**
    * @param {number} position
@@ -113,11 +119,11 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
       this._draggingFeature = null;
     }
 
-    if (event.map.className === 'vcs.vcm.maps.Openlayers') {
+    if (event.map.className === 'OpenlayersMap') {
       await this._openlayersHandler(event);
-    } else if (event.map.className === 'vcs.vcm.maps.Oblique') {
+    } else if (event.map.className === 'ObliqueMap') {
       await this._obliqueHandler(event);
-    } else if (event.map.className === 'vcs.vcm.maps.Cesium') {
+    } else if (event.map.className === 'CesiumMap') {
       await this._cesiumHandler(event);
     }
     if (event.type & EventType.DRAGSTART && event.feature) {
@@ -152,14 +158,26 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
     let found = null;
     /** @type {null|import("ol/layer/Layer").default} */
     let foundLayer = null;
-    /** @type {import("@vcmap/core").Openlayers} */ (event.map).olMap
-      .forEachFeatureAtPixel([event.windowPosition.x, event.windowPosition.y], (feat, layer) => {
-        if (feat && (feat.get('olcs_allowPicking') == null || feat.get('olcs_allowPicking') === true)) {
-          found = /** @type {import("ol").Feature<import("ol/geom/Geometry").default>} */ (feat);
+    /** @type {import("@vcmap/core").OpenlayersMap} */ (
+      event.map
+    ).olMap.forEachFeatureAtPixel(
+      [event.windowPosition.x, event.windowPosition.y],
+      (feat, layer) => {
+        if (
+          feat &&
+          (feat.get('olcs_allowPicking') == null ||
+            feat.get('olcs_allowPicking') === true)
+        ) {
+          found =
+            /** @type {import("ol").Feature<import("ol/geom/Geometry").default>} */ (
+              feat
+            );
           foundLayer = layer;
         }
         return true;
-      }, { hitTolerance: this.hitTolerance });
+      },
+      { hitTolerance: this.hitTolerance },
+    );
     if (found && foundLayer) {
       event.feature = found;
       if (found.get('features')) {
@@ -180,14 +198,19 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
     let found = null;
     /** @type {null|import("ol/layer/Layer").default} */
     let foundLayer = null;
-    /** @type {import("@vcmap/core").Oblique} */ (event.map).olMap
-      .forEachFeatureAtPixel([event.windowPosition.x, event.windowPosition.y], (feat, layer) => {
+    /** @type {import("@vcmap/core").ObliqueMap} */ (
+      event.map
+    ).olMap.forEachFeatureAtPixel(
+      [event.windowPosition.x, event.windowPosition.y],
+      (feat, layer) => {
         if (feat) {
           found = feat[originalFeatureSymbol] || feat;
         }
         foundLayer = layer;
         return true;
-      }, { hitTolerance: this.hitTolerance });
+      },
+      { hitTolerance: this.hitTolerance },
+    );
 
     if (found && foundLayer) {
       event.feature = found;
@@ -205,10 +228,16 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
    * @private
    */
   _cesiumHandler(event) {
-    const cesiumMap = /** @type {import("@vcmap/core").CesiumMap} */ (event.map);
+    const cesiumMap = /** @type {import("@vcmap/core").CesiumMap} */ (
+      event.map
+    );
     const scene = cesiumMap.getScene();
 
-    const object = scene.pick(event.windowPosition, this.hitTolerance, this.hitTolerance);
+    const object = scene.pick(
+      event.windowPosition,
+      this.hitTolerance,
+      this.hitTolerance,
+    );
 
     let scratchCartographic = new Cartographic();
     let scratchCartesian = new Cartesian3();
@@ -221,44 +250,63 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
         return Promise.resolve(event);
       }
       if (this.pullPickedPosition && event.ray) {
-        scratchPullCartesian = Cartesian3
-          .multiplyByScalar(event.ray.direction, this.pullPickedPosition, scratchPullCartesian);
+        scratchPullCartesian = Cartesian3.multiplyByScalar(
+          event.ray.direction,
+          this.pullPickedPosition,
+          scratchPullCartesian,
+        );
 
-        scratchCartesian = Cartesian3.subtract(scratchCartesian, scratchPullCartesian, scratchCartesian);
+        scratchCartesian = Cartesian3.subtract(
+          scratchCartesian,
+          scratchPullCartesian,
+          scratchCartesian,
+        );
       }
-      scratchCartographic = Cartographic
-        .fromCartesian(scratchCartesian, scene.globe.ellipsoid, scratchCartographic);
-      event.position = Projection.wgs84ToMercator([
-        CesiumMath.toDegrees(scratchCartographic.longitude),
-        CesiumMath.toDegrees(scratchCartographic.latitude),
-        scratchCartographic.height,
-      ], true);
+      scratchCartographic = Cartographic.fromCartesian(
+        scratchCartesian,
+        scene.globe.ellipsoid,
+        scratchCartographic,
+      );
+      event.position = Projection.wgs84ToMercator(
+        [
+          CesiumMath.toDegrees(scratchCartographic.longitude),
+          CesiumMath.toDegrees(scratchCartographic.latitude),
+          scratchCartographic.height,
+        ],
+        true,
+      );
       event.positionOrPixel = event.position;
       scene.pickTranslucentDepth = pickTranslucentDepth;
       return Promise.resolve(event);
     };
 
     if (object) {
-      if (object.primitive && object.primitive.olFeature) { // vector & vectorCluster
+      if (object.primitive && object.primitive.olFeature) {
+        // vector & vectorCluster
         event.feature = object.primitive.olFeature;
       } else if (
         object.primitive &&
         object.primitive[vcsLayerName] &&
-        (object instanceof Cesium3DTileFeature || object instanceof Cesium3DTilePointFeature)
-      ) { // building
+        (object instanceof Cesium3DTileFeature ||
+          object instanceof Cesium3DTilePointFeature)
+      ) {
+        // building
         event.feature = object;
         const symbols = Object.getOwnPropertySymbols(object.primitive);
         const symbolLength = symbols.length;
         for (let i = 0; i < symbolLength; i++) {
           event.feature[symbols[i]] = object.primitive[symbols[i]];
         }
-      } else if (object.id && object.id.olFeature) { // cluster size === 1
+      } else if (object.id && object.id.olFeature) {
+        // cluster size === 1
         event.feature = object.id.olFeature;
-      } else if (object.id && object.id[vcsLayerName]) { // entity
-        event.feature = object;
-        event.feature[vcsLayerName] = object.id[vcsLayerName];
-      } else {
-        event.feature = object;
+      } else if (
+        object.id &&
+        object.id[vcsLayerName] &&
+        object.id instanceof Entity
+      ) {
+        // entity
+        event.feature = object.id;
       }
 
       if (!(event.type & this.pickPosition)) {
@@ -269,13 +317,20 @@ class FeatureAtPixelInteraction extends AbstractInteraction {
         if (
           object.primitive &&
           this.pickTranslucent &&
-          !(object.primitive.pointCloudShading && object.primitive.pointCloudShading.attenuation)
-        ) { // XXX should this always be on, also for non vector?
+          !(
+            object.primitive.pointCloudShading &&
+            object.primitive.pointCloudShading.attenuation
+          )
+        ) {
+          // XXX should this always be on, also for non vector?
           scene.pickTranslucentDepth = true;
           scene.render(cesiumMap.getCesiumWidget().clock.currentTime);
           event.exactPosition = true;
         }
-        scratchCartesian = scene.pickPosition(event.windowPosition, scratchCartesian);
+        scratchCartesian = scene.pickPosition(
+          event.windowPosition,
+          scratchCartesian,
+        );
         return handlePick();
       }
     }

package/src/interaction/featureProviderInteraction.js

@@ -0,0 +1,58 @@
+import AbstractInteraction from './abstractInteraction.js';
+import {
+  EventType,
+  ModificationKeyType,
+  PointerKeyType,
+} from './interactionType.js';
+
+/**
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class FeatureProviderInteraction extends AbstractInteraction {
+  constructor() {
+    super(EventType.CLICK, ModificationKeyType.ALL, PointerKeyType.ALL);
+
+    this.setActive();
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  async pipe(event) {
+    if (!event.feature) {
+      const layersWithProvider = [...event.map.layerCollection].filter((l) => {
+        return (
+          l.featureProvider &&
+          l.active &&
+          l.isSupported(event.map) &&
+          l.featureProvider.isSupported(event.map)
+        );
+      });
+
+      if (layersWithProvider.length > 0) {
+        const resolution = event.map.getCurrentResolution(event.position);
+        const features = (
+          await Promise.all(
+            layersWithProvider.map((l) =>
+              l.featureProvider.getFeaturesByCoordinate(
+                event.position,
+                resolution,
+              ),
+            ),
+          )
+        ).flat();
+
+        if (features.length > 0) {
+          event.feature = features[0];
+        }
+      }
+    }
+    return event;
+  }
+}
+
+export default FeatureProviderInteraction;