@vcmap/core 5.0.0-rc.27 → 5.0.0-rc.28

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

@@ -0,0 +1,143 @@
+import AbstractInteraction from '../../../interaction/abstractInteraction.js';
+import { EventType, ModificationKeyType } from '../../../interaction/interactionType.js';
+import SelectMultiFeatureInteraction from './selectMultiFeatureInteraction.js';
+import SelectSingleFeatureInteraction from './selectSingleFeatureInteraction.js';
+import { cursorMap } from './editGeometryMouseOverInteraction.js';
+import { vcsLayerName } from '../../../layer/layerSymbols.js';
+import { mouseOverSymbol } from '../editorSymbols.js';
+
+/**
+ * Enumeration of editor selection modes.
+ * @enum {string}
+ * @property {string} SINGLE
+ * @property {string} MULTI
+ */
+export const SelectionMode = {
+  SINGLE: 'single',
+  MULTI: 'multi',
+};
+
+/**
+ * A class to handle mouse over effects on features for select sessions.
+ * @class
+ * @extends {AbstractInteraction}
+ */
+class SelectFeatureMouseOverInteraction extends AbstractInteraction {
+  /**
+   * @param {string} layerName Name of the layer for which the mouse over effect should accur.
+   * @param {SelectSingleFeatureInteraction | SelectMultiFeatureInteraction} selectFeatureInteraction The select feature interaction that handles the feature selection. Supports both, single and multi selection.
+   */
+  constructor(layerName, selectFeatureInteraction) {
+    let modkeys;
+    let selectionMode;
+    if (selectFeatureInteraction instanceof SelectSingleFeatureInteraction) {
+      modkeys = ModificationKeyType.NONE;
+      selectionMode = SelectionMode.SINGLE;
+    } else if (selectFeatureInteraction instanceof SelectMultiFeatureInteraction) {
+      modkeys = ModificationKeyType.NONE | ModificationKeyType.CTRL;
+      selectionMode = SelectionMode.MULTI;
+    } else {
+      throw new Error('This interaction is not supported');
+    }
+
+    super(EventType.MOVE, modkeys);
+    /** @type {SelectSingleFeatureInteraction | SelectMultiFeatureInteraction} */
+    this._selectFeatureInteraction = selectFeatureInteraction;
+    /** @type {SelectionMode} */
+    this.selectionMode = selectionMode;
+    /**
+     * The feature that is currently hovered and belongs to the layer with the layerName.
+     * @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|null}
+     * @private
+     */
+    this._currentFeature = null;
+    /**
+     * The layer name to react to
+     * @type {string}
+     */
+    this.layerName = layerName;
+    /**
+     * @type {CSSStyleDeclaration}
+     * @private
+     */
+    this.cursorStyle = document.body.style;
+  }
+
+  /**
+   * @inheritDoc
+   * @param {InteractionEvent} event
+   * @returns {Promise<InteractionEvent>}
+   */
+  async pipe(event) {
+    if (
+      event.feature &&
+      (event.feature[vcsLayerName] === this.layerName)
+    ) {
+      this._currentFeature = /** @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} */
+        (event.feature);
+    } else {
+      this._currentFeature = null;
+    }
+    this._evaluate(event.key);
+    return event;
+  }
+
+  /**
+   * @inheritDoc
+   * @param {ModificationKeyType} modifier
+   */
+  modifierChanged(modifier) {
+    this._evaluate(modifier);
+  }
+
+  /**
+   * @inheritDoc
+   * @param {(boolean|number)=} active
+   */
+  setActive(active) {
+    super.setActive(active);
+    this.reset();
+  }
+
+  /**
+   * Reset the cursorStyle to auto
+   */
+  reset() {
+    if (this.cursorStyle && this.cursorStyle.cursor) {
+      this.cursorStyle.cursor = cursorMap.auto;
+    }
+  }
+
+  /**
+   * @param {ModificationKeyType} modifier
+   * @private
+   */
+  _evaluate(modifier) {
+    if (this._currentFeature) {
+      const isCtrlPressed = this.selectionMode === SelectionMode.MULTI && (modifier & ModificationKeyType.CTRL);
+      const isSelected = this._selectFeatureInteraction.hasFeatureId(this._currentFeature.getId());
+
+      if (isCtrlPressed) {
+        this.cursorStyle.cursor = isSelected ? cursorMap.removeFromSelection : cursorMap.addToSelection;
+      } else {
+        this.cursorStyle.cursor = cursorMap.select;
+      }
+
+      this.cursorStyle[mouseOverSymbol] = this.id;
+    } else if (this.cursorStyle?.[mouseOverSymbol] === this.id) {
+      this.cursorStyle.cursor = cursorMap.auto;
+      delete this.cursorStyle[mouseOverSymbol];
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this.reset();
+    this.cursorStyle = null;
+    super.destroy();
+  }
+}
+
+export default SelectFeatureMouseOverInteraction;

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

@@ -12,6 +12,7 @@ import { isTiledFeature } from '../../../layer/featureStoreLayer.js';
  * FeatureStore features will be converted to their dynamic state on selection.
  * @class
  * @extends {AbstractInteraction}
+ * @implements {SelectFeatureInteraction}
  */
 class SelectMultiFeatureInteraction extends AbstractInteraction {
   /**
@@ -47,16 +48,17 @@ class SelectMultiFeatureInteraction extends AbstractInteraction {
   /**
    * @returns {Array<import("ol").Feature>}
    */
-  get selectedFeatures() {
+  get selected() {
     return [...this._selectedFeatures.values()];
   }
 
   /**
-   * @param {string} featureId
+   * Checks if a feature with a spicific id is selected.
+   * @param {string | number} id
    * @returns {boolean}
    */
-  hasFeatureId(featureId) {
-    return this._selectedFeatures.has(featureId);
+  hasFeatureId(id) {
+    return this._selectedFeatures.has(id);
   }
 
   /**
@@ -72,9 +74,12 @@ class SelectMultiFeatureInteraction extends AbstractInteraction {
       if (event.key & ModificationKeyType.CTRL) {
         event.stopPropagation = true;
         await this._modifySelectionSet(event.feature);
-      } else if (!this._selectedFeatures.has(event.feature.getId())) {
+      } else if (
+        !this._selectedFeatures.has(event.feature.getId()) ||
+        (this._selectedFeatures.has(event.feature.getId()) && this._selectedFeatures.size > 1)
+      ) {
         event.stopPropagation = true;
-        await this.setSelectionSet([event.feature]);
+        await this.setSelected([event.feature]);
       }
     } else if (!(event.key & ModificationKeyType.CTRL)) {
       this.clear();
@@ -83,12 +88,13 @@ class SelectMultiFeatureInteraction extends AbstractInteraction {
   }
 
   /**
-   * @param {Array<import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity>} features
+   * @param {Array<import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity> | import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} features
    * @returns {Promise<void>}
    */
-  async setSelectionSet(features) {
+  async setSelected(features) {
     this._selectedFeatures.clear();
-    const olFeatures = await Promise.all(features.map((f) => {
+    const featureArray = Array.isArray(features) ? features : [features];
+    const olFeatures = await Promise.all(featureArray.map((f) => {
       if (f[isTiledFeature]) {
         return /** @type {import("@vcmap/core").FeatureStoreLayer} */ (this._layer)
           .switchStaticFeatureToDynamic(f.getId());
@@ -99,7 +105,7 @@ class SelectMultiFeatureInteraction extends AbstractInteraction {
       this._selectedFeatures.set(f.getId(), f);
     });
 
-    this._featuresChanged.raiseEvent(this.selectedFeatures);
+    this._featuresChanged.raiseEvent(this.selected);
   }
 
   /**
@@ -120,7 +126,7 @@ class SelectMultiFeatureInteraction extends AbstractInteraction {
       this._selectedFeatures.set(id, /** @type {import("ol").Feature} */ (olFeature));
     }
 
-    this._featuresChanged.raiseEvent(this.selectedFeatures);
+    this._featuresChanged.raiseEvent(this.selected);
   }
 
   /**

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

@@ -9,6 +9,7 @@ import { isTiledFeature } from '../../../layer/featureStoreLayer.js';
  * Static FeatureStore features will be converted into their dynamic form
  * @class
  * @extends {AbstractInteraction}
+ * @implements {SelectFeatureInteraction}
  */
 class SelectSingleFeatureInteraction extends AbstractInteraction {
   /**
@@ -35,10 +36,10 @@ class SelectSingleFeatureInteraction extends AbstractInteraction {
   }
 
   /**
-   * @returns {import("ol").Feature|null}
+   * @returns {Array<import("ol").Feature>}
    */
-  get selectedFeature() {
-    return this._selectedFeature;
+  get selected() {
+    return this._selectedFeature ? [this._selectedFeature] : [];
   }
 
   /**
@@ -53,7 +54,7 @@ class SelectSingleFeatureInteraction extends AbstractInteraction {
     ) {
       if (!(this._selectedFeature && event.feature.getId() === this._selectedFeature.getId())) {
         event.stopPropagation = true;
-        await this.selectFeature(
+        await this.setSelected(
           /** @type {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} */
           (event.feature),
         );
@@ -67,20 +68,29 @@ class SelectSingleFeatureInteraction extends AbstractInteraction {
   /**
    * Selects the given feature. if passed in a tiled feature store feature, it will be converted. Do not pass in uneditable features (feature which do not
    * belong to the layer for which this interaction was created)
-   * @param {import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @param {Array<import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity> | import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature|import("@vcmap-cesium/engine").Entity} feature
    * @returns {Promise<void>}
    */
-  async selectFeature(feature) {
-    let olFeature = feature;
+  async setSelected(feature) {
+    let olFeature = Array.isArray(feature) ? feature[0] : feature;
     if (feature[isTiledFeature]) {
       olFeature = await /** @type {import("@vcmap/core").FeatureStoreLayer} */ (this._layer)
-        .switchStaticFeatureToDynamic(feature.getId());
+        .switchStaticFeatureToDynamic(olFeature.getId());
     }
 
     this._selectedFeature = /** @type {import("ol").Feature} */ (olFeature);
     this.featureChanged.raiseEvent(this._selectedFeature);
   }
 
+  /**
+   * Checks if a feature with a spicific id is selected.
+   * @param {string | number} id
+   * @returns {boolean}
+   */
+  hasFeatureId(id) {
+    return this._selectedFeature?.getId() === id;
+  }
+
   /**
    * Clears the current selection, if there is one.
    */
@@ -90,6 +100,15 @@ class SelectSingleFeatureInteraction extends AbstractInteraction {
       this.featureChanged.raiseEvent(null);
     }
   }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._selectedFeature = null;
+    this.featureChanged.destroy();
+    super.destroy();
+  }
 }
 
 export default SelectSingleFeatureInteraction;

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

@@ -1,7 +1,6 @@
 import AbstractInteraction from '../../../interaction/abstractInteraction.js';
 import { EventType } from '../../../interaction/interactionType.js';
 import { vertexSymbol } from '../editorSymbols.js';
-import { emptyStyle } from '../../../style/styleHelpers.js';
 import VcsEvent from '../../../vcsEvent.js';
 
 /**
@@ -36,7 +35,7 @@ class TranslateVertexInteraction extends AbstractInteraction {
       this.vertexChanged.raiseEvent(this._vertex);
 
       if (event.type & EventType.DRAGEND) {
-        this._vertex.setStyle(null);
+        this._vertex.unset('olcs_allowPicking');
         this._vertex = null;
       }
       event.stopPropagation = true;
@@ -46,7 +45,7 @@ class TranslateVertexInteraction extends AbstractInteraction {
       event.feature[vertexSymbol]
     ) {
       this._vertex = /** @type {Vertex} */ (event.feature);
-      this._vertex.setStyle(emptyStyle);
+      this._vertex.set('olcs_allowPicking', false);
       event.stopPropagation = true;
     }
     return event;

package/src/util/editor/selectFeaturesSession.js

@@ -0,0 +1,287 @@
+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/transformationHandler.js

@@ -83,7 +83,6 @@ function getCenterFromFeatures2D(features) {
  * In most scenarios, this function must not be called directly and the startEditFeatureSession used instead.
  * @param {import("@vcmap/core").VcsMap} map
  * @param {import("@vcmap/core").VectorLayer} layer
- * @param {import("@vcmap/core").SelectMultiFeatureInteraction} selectMultiFeatureInteraction
  * @param {import("@vcmap/core").VectorLayer} scratchLayer
  * @param {import("@vcmap/core").TransformationMode} mode
  * @returns {TransformationHandler}
@@ -91,7 +90,6 @@ function getCenterFromFeatures2D(features) {
 export default function createTransformationHandler(
   map,
   layer,
-  selectMultiFeatureInteraction,
   scratchLayer,
   mode,
 ) {
@@ -106,12 +104,11 @@ export default function createTransformationHandler(
   let cesiumMap = null;
 
   let cancelAsyncSetting = () => {};
-  const handleFeaturesChanged = async () => {
+  const setFeatures = async (features) => {
     cancelAsyncSetting();
-    const { selectedFeatures } = selectMultiFeatureInteraction;
-    const show = selectedFeatures.length > 0;
+    const show = features.length > 0;
     if (show) {
-      const { center: newCenter, someClamped, someNoTerrain } = getCenterFromFeatures(selectedFeatures);
+      const { center: newCenter, someClamped, someNoTerrain } = getCenterFromFeatures(features);
       center = newCenter;
       if (!cesiumMap || !someNoTerrain) { // only set center sync, if updating will not change it too drastically (to avoid jumps)
         handlerFeatures.show = true;
@@ -140,8 +137,6 @@ export default function createTransformationHandler(
     handlerFeatures = create2DHandlers(map, scratchLayer, mode);
     getCenterFromFeatures = getCenterFromFeatures2D;
   }
-  handleFeaturesChanged();
-  const featuresChangedListener = selectMultiFeatureInteraction.featuresChanged.addEventListener(handleFeaturesChanged);
 
   return {
     get showing() { return handlerFeatures.show; },
@@ -158,9 +153,9 @@ export default function createTransformationHandler(
       center[2] += dz;
       handlerFeatures.setCenter(center);
     },
+    setFeatures,
     destroy() {
       cancelAsyncSetting();
-      featuresChangedListener();
       handlerFeatures.destroy();
       scratchLayer.removeAllFeatures();
     },

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

@@ -19,6 +19,7 @@ import { Color } from '@vcmap-cesium/engine';
  * @property {import("ol/coordinate").Coordinate} center - readonly current center of the handler. this is a copy, not a reference
  * @property {AXIS_AND_PLANES} showAxis - highlight the given axis
  * @property {boolean} showing - readonly value indicating whether the handlers are showing (proxy for: features are selected)
+ * @property {function(Array<import("ol").Feature>):void} setFeatures - Sets transformation handle features. The handler is located in the center of the features.
  * @property {function():void} destroy - destroy the handler and any resources created by it
  */
 

package/src/util/featureconverter/convert.js

@@ -71,7 +71,7 @@ export function getStylesArray(style, feature, resolution = 1) {
 
 /**
  * function to convert a feature to an array of Cesium.Primitives given a style and default properties. the resulting primitives
- * must be added to the contexts collections here
+ * must be added to the modules collections here
  * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
  * @param {import("ol/style/Style").StyleLike} style
  * @param {import("@vcmap/core").VectorProperties} vectorProperties