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

package/src/util/editor/editFeaturesSession.js

@@ -1,197 +1,193 @@
-import { Circle, Fill, Style, Stroke } from 'ol/style.js';
+import { extend as extendExtent, createEmpty as createEmptyExtent, getCenter, isEmpty } from 'ol/extent.js';
 import { getLogger } from '@vcsuite/logger';
 
 import VcsEvent from '../../vcsEvent.js';
-import { SessionType, setupInteractionChain, setupScratchLayer } from './editorSessionHelpers.js';
-import SelectMultiFeatureInteraction from './interactions/selectMultiFeatureInteraction.js';
-import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
+import { setupInteractionChain, SessionType, setupScratchLayer } from './editorSessionHelpers.js';
 import createTransformationHandler from './transformation/transformationHandler.js';
 import { TransformationMode } from './transformation/transformationTypes.js';
 import MapInteractionController from './interactions/mapInteractionController.js';
 import TranslateInteraction from './transformation/translateInteraction.js';
 import RotateInteraction from './transformation/rotateInteraction.js';
 import ScaleInteraction from './transformation/scaleInteraction.js';
-import { createSync, obliqueGeometry } from '../../layer/vectorSymbols.js';
+import { obliqueGeometry } from '../../layer/vectorSymbols.js';
 import ExtrudeInteraction from './transformation/extrudeInteraction.js';
-import { ModificationKeyType } from '../../interaction/interactionType.js';
 import ObliqueMap from '../../map/obliqueMap.js';
 import { ensureFeatureAbsolute } from './editorHelpers.js';
 import CesiumMap from '../../map/cesiumMap.js';
 import EnsureHandlerSelectionInteraction from './interactions/ensureHandlerSelectionInteraction.js';
+import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
+import { ModificationKeyType } from '../../interaction/interactionType.js';
 
 /**
- * @typedef {EditorSession} EditFeaturesSession
- * @property {SelectMultiFeatureInteraction} featureSelection
- * @property {TransformationMode} mode - read only access to the current mode
- * @property {function(TransformationMode):void} setMode
- * @property {import("@vcmap/core").VcsEvent<TransformationMode>} modeChanged
+ * Saves the original allowPicking settings and sets them to false if CTRL is not pressed.
+ * @param {import("ol").Feature} feature
+ * @param {Map<string|number, boolean|undefined>} allowPickingMap A map containing the original allowPicking settings for the features. Id is key, setting is value.
+ * @param {ModificationKeyType} currentModificationKey The modification key that is currently pressed.
  */
+function setAllowPicking(feature, allowPickingMap, currentModificationKey) {
+  if (!allowPickingMap.has(feature.getId())) {
+    allowPickingMap.set(feature.getId(), feature.get('olcs_allowPicking'));
+  }
+  if (currentModificationKey !== ModificationKeyType.CTRL) {
+    feature.set('olcs_allowPicking', false);
+  }
+}
 
 /**
- * Creates a selection set from the selected features. This maintains `createSync` symbol, highlight and allow picking on
- * currently selected features and listens to changes until stopped.
- * @param {import("@vcmap/core").VectorLayer} layer
- * @param {SelectMultiFeatureInteraction} selectFeatureInteraction
- * @param {import("ol/style").Style} highlightStyle
- * @param {import("@vcmap/core").EventHandler} eventHandler
- * @returns {function():void} un-highlight all and stop listening to changes
+ * Restores the original allowPicking settings for the feature.
+ * @param {import("ol").Feature} feature
+ * @param {Map<string|number, boolean|undefined>} allowPickingMap A map containing the original allowPicking settings for the features. Id is key, setting is value.
  */
-function createSelectionSet(layer, selectFeatureInteraction, highlightStyle, eventHandler) {
-  let currentIds = new Set();
-  /** @type {Map<string|number, boolean|undefined>} */
-  const allowPickingMap = new Map();
-  const modifierChangedListener = eventHandler.modifierChanged.addEventListener((mod) => { // CTRL is used to modify the current selection set, we must allow picking again so you can deselect a feature
-    const allowPicking = mod === ModificationKeyType.CTRL;
-    selectFeatureInteraction.selectedFeatures.forEach((f) => { f.set('olcs_allowPicking', allowPicking); });
-  });
-
-  const clearFeature = (f) => {
-    delete f[createSync];
-    const allowPicking = allowPickingMap.get(f.getId());
-    if (allowPicking != null) {
-      f.set('olcs_allowPicking', allowPicking);
-    } else {
-      f.unset('olcs_allowPicking');
-    }
-  };
-
-  const featureChangedListener = selectFeatureInteraction.featuresChanged.addEventListener((newFeatures) => {
-    const newIds = new Set(newFeatures.map((f) => {
-      const id = f.getId();
-      if (!allowPickingMap.has(id)) {
-        allowPickingMap.set(id, f.get('olcs_allowPicking'));
-      }
-      f[createSync] = true;
-      f.set('olcs_allowPicking', false);
-      return id;
-    }));
-    const idsToHighlight = [];
-    newIds.forEach((id) => {
-      if (!currentIds.has(id)) {
-        idsToHighlight.push(id);
-      }
-    });
-
-    const idsToUnHighlight = [];
-    currentIds.forEach((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(clearFeature);
-
-    currentIds = newIds;
-  });
-
-  return () => {
-    modifierChangedListener();
-    featureChangedListener();
-    if (currentIds.size > 0) {
-      const idsToUnHighlight = [...currentIds];
-      layer.getFeaturesById(idsToUnHighlight)
-        .forEach(clearFeature);
-      layer.featureVisibility.unHighlight(idsToUnHighlight);
-    }
-  };
+function clearAllowPicking(feature, allowPickingMap) {
+  const allowPicking = allowPickingMap.get(feature.getId());
+  if (allowPicking != null) {
+    feature.set('olcs_allowPicking', allowPicking);
+  } else {
+    feature.unset('olcs_allowPicking');
+  }
 }
 
 /**
- * @returns {import("ol/style").Style}
+ * @typedef {EditorSession} EditFeaturesSession
+ * @property {TransformationMode} mode - read only access to the current mode
+ * @property {function(number):void} rotate - Function for rotating features. Takes angle in radians as parameter.
+ * @property {function(number, number, number):void} translate - Function for translating features. Takes Δx, Δy, Δz as parameters.
+ * @property {function(number, number):void} scale - Function for scaling features. Takes sx, sy as parameters.
+ * @property {function(TransformationMode):void} setMode
+ * @property {import("@vcmap/core").VcsEvent<TransformationMode>} modeChanged
+ * @property {function(Array<import("ol").Feature>):void} setFeatures - Sets the features for the edit session.
+ * @property {Array<import("ol").Feature>} features - Gets the features of the edit session.
  */
-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,
-    }),
-  });
-}
 
 /**
  * Creates an editor session to select, translate, rotate & scale the feature on a given layer
  * @param {import("@vcmap/core").VcsApp} app
  * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {string} [interactionId] id for registering mutliple exclusive interaction. Needed to run a selection session at the same time as a edit features session.
  * @param {TransformationMode=} [initialMode=TransformationMode.TRANSLATE]
- * @param {import("ol/style").Style=} [highlightStyle]
  * @returns {EditFeaturesSession}
  */
 function startEditFeaturesSession(
   app,
   layer,
+  interactionId,
   initialMode = TransformationMode.TRANSLATE,
-  highlightStyle = getDefaultHighlightStyle(),
+
 ) {
-  const scratchLayer = setupScratchLayer(app.layers);
-  /** @type {VcsEvent<void>} */
+  /**
+   * @type {VcsEvent<void>}
+   */
   const stopped = new VcsEvent();
+
+  /**
+   * The features that are set for the edit session.
+   * @type {Array<import("ol").Feature>}
+   */
+  const currentFeatures = [];
+
+  // The allow picking prop needs to be set false for the selected features to make sure that the transformation handler can always be selected.
+  /**
+   * @type {Map<string|number, boolean|undefined>}
+   */
+  const allowPickingMap = new Map();
+  let modificationKey;
+  /** Callback to remove the modifier changed listener. */
+  const modifierChangedListener = app.maps.eventHandler.modifierChanged.addEventListener((mod) => { // CTRL is used to modify the current selection set, we must allow picking again so you can deselect a feature
+    modificationKey = mod;
+    const allowPicking = modificationKey === ModificationKeyType.CTRL;
+    currentFeatures.forEach((feature) => { feature.set('olcs_allowPicking', allowPicking); });
+  });
+
+  const scratchLayer = setupScratchLayer(app.layers);
+
   const {
     interactionChain,
     removed: interactionRemoved,
     destroy: destroyInteractionChain,
-  } = setupInteractionChain(app.maps.eventHandler);
-  const selectFeatureInteraction = new SelectMultiFeatureInteraction(layer);
-  const destroySelectionSet = createSelectionSet(
-    layer,
-    selectFeatureInteraction,
-    highlightStyle,
-    app.maps.eventHandler,
-  );
-  interactionChain.addInteraction(selectFeatureInteraction);
-  interactionChain.addInteraction(new EnsureHandlerSelectionInteraction(selectFeatureInteraction));
+  } = setupInteractionChain(app.maps.eventHandler, interactionId);
+
+  const mouseOverInteraction = new EditFeaturesMouseOverInteraction();
+  interactionChain.addInteraction(mouseOverInteraction);
+
+  interactionChain.addInteraction(new EnsureHandlerSelectionInteraction(currentFeatures));
 
   const mapInteractionController = new MapInteractionController();
   interactionChain.addInteraction(mapInteractionController);
 
-  const mouseOverInteraction = new EditFeaturesMouseOverInteraction(
-    layer.name,
-    selectFeatureInteraction,
-  );
-  interactionChain.addInteraction(mouseOverInteraction);
-
   let mode = initialMode;
   let destroyTransformation = () => {};
+  let transformationHandler;
+  const translate = (dx, dy, dz) => {
+    transformationHandler?.translate?.(dx, dy, dz);
+    currentFeatures.forEach((f) => {
+      const geometry = f[obliqueGeometry] ?? f.getGeometry(); // XXX wont work in oblqiue
+      geometry.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] + dz;
+        }
+        return output;
+      });
+    });
+  };
+
+  const rotate = (angle) => {
+    let center = transformationHandler?.center;
+    if (!center) {
+      const extent = createEmptyExtent();
+      currentFeatures.forEach((f) => {
+        extendExtent(extent, f.getGeometry().getExtent()); // XXX wont work in oblqiue
+      });
+      if (!isEmpty(extent)) {
+        center = getCenter(extent);
+      }
+    }
+    currentFeatures.forEach((f) => {
+      const geometry = f[obliqueGeometry] ?? f.getGeometry(); // XXX wont work in oblqiue
+      geometry.rotate(angle, center);
+    });
+  };
+
+  const scale = (sx, sy) => {
+    let center = transformationHandler?.center;
+    if (!center) { // XXX copy paste
+      const extent = createEmptyExtent();
+      currentFeatures.forEach((f) => {
+        extendExtent(extent, f.getGeometry().getExtent());
+      });
+      if (!isEmpty(extent)) {
+        center = getCenter(extent);
+      }
+    }
+    currentFeatures.forEach((f) => {
+      const geometry = f[obliqueGeometry] ?? f.getGeometry();
+      geometry.scale(sx, sy, center);
+    });
+  };
+
   const createTransformations = () => {
     destroyTransformation();
-    const transformationHandler = createTransformationHandler(
+
+    transformationHandler = createTransformationHandler(
       app.maps.activeMap,
       layer,
-      selectFeatureInteraction,
       scratchLayer,
       mode,
     );
+    transformationHandler.setFeatures(currentFeatures);
 
     let interaction;
     if (mode === TransformationMode.TRANSLATE) {
       interaction = new TranslateInteraction(transformationHandler);
       interaction.translated.addEventListener(([dx, dy, dz]) => {
-        transformationHandler.translate(dx, dy, dz);
-        selectFeatureInteraction.selectedFeatures.forEach((f) => {
-          const geometry = f[obliqueGeometry] ?? f.getGeometry();
-          geometry.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] + dz;
-            }
-            return output;
-          });
-        });
+        translate(dx, dy, dz);
       });
     } else if (mode === TransformationMode.EXTRUDE) {
       interaction = new ExtrudeInteraction(transformationHandler);
       interaction.extruded.addEventListener((dz) => {
-        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+        currentFeatures.forEach((f) => {
           ensureFeatureAbsolute(f, layer, app.maps.activeMap);
           let extrudedHeight = f.get('olcs_extrudedHeight') ?? 0;
           extrudedHeight += dz;
@@ -201,20 +197,12 @@ function startEditFeaturesSession(
     } else if (mode === TransformationMode.ROTATE) {
       interaction = new RotateInteraction(transformationHandler);
       interaction.rotated.addEventListener(({ angle }) => {
-        const { center } = transformationHandler;
-        selectFeatureInteraction.selectedFeatures.forEach((f) => {
-          const geometry = f[obliqueGeometry] ?? f.getGeometry();
-          geometry.rotate(angle, center);
-        });
+        rotate(angle);
       });
     } else if (mode === TransformationMode.SCALE) {
       interaction = new ScaleInteraction(transformationHandler);
       interaction.scaled.addEventListener(([sx, sy]) => {
-        const { center } = transformationHandler;
-        selectFeatureInteraction.selectedFeatures.forEach((f) => {
-          const geometry = f[obliqueGeometry] ?? f.getGeometry();
-          geometry.scale(sx, sy, center);
-        });
+        scale(sx, sy);
       });
     } else {
       throw new Error(`Unknown transformation mode ${mode}`);
@@ -225,7 +213,8 @@ function startEditFeaturesSession(
     destroyTransformation = () => {
       interactionChain.removeInteraction(interaction);
       interaction.destroy();
-      transformationHandler.destroy();
+      transformationHandler?.destroy();
+      transformationHandler = null;
     };
   };
 
@@ -244,10 +233,6 @@ function startEditFeaturesSession(
       }
     }
   };
-  /**
-   * @type {ObliqueMap|null}
-   */
-  let obliqueMap = null;
   /**
    * @type {function():void}
    */
@@ -255,17 +240,10 @@ function startEditFeaturesSession(
   const mapChanged = (map) => {
     obliqueImageChangedListener();
     if (map instanceof ObliqueMap) {
-      selectFeatureInteraction.clear();
       obliqueImageChangedListener = map.imageChanged.addEventListener(() => {
-        selectFeatureInteraction.clear();
         createTransformations();
       });
-      obliqueMap = map;
     } else {
-      if (obliqueMap) {
-        selectFeatureInteraction.clear();
-      }
-      obliqueMap = null;
       obliqueImageChangedListener = () => {};
     }
     if (mode === TransformationMode.EXTRUDE && !(map instanceof CesiumMap)) {
@@ -277,31 +255,24 @@ function startEditFeaturesSession(
   const mapChangedListener = app.maps.mapActivated.addEventListener(mapChanged);
   mapChanged(app.maps.activeMap);
 
-  selectFeatureInteraction.featuresChanged.addEventListener((selectedFeatures) => {
-    if (obliqueMap) {
-      obliqueMap.switchEnabled = selectedFeatures.length === 0;
-    }
-  });
-
   const stop = () => {
+    destroyTransformation();
+    destroyInteractionChain();
     obliqueImageChangedListener();
-    if (obliqueMap) {
-      obliqueMap.switchEnabled = true;
-    }
     mapChangedListener();
-    destroyTransformation();
-    destroySelectionSet();
+    modifierChangedListener();
+    currentFeatures.forEach(feature => clearAllowPicking(feature, allowPickingMap));
+    allowPickingMap.clear();
     app.layers.remove(scratchLayer);
-    destroyInteractionChain();
+    modeChanged.destroy();
     stopped.raiseEvent();
     stopped.destroy();
-    modeChanged.destroy();
   };
+
   interactionRemoved.addEventListener(stop);
 
   return {
     type: SessionType.EDIT_FEATURES,
-    featureSelection: selectFeatureInteraction,
     stopped,
     stop,
     get mode() {
@@ -309,6 +280,19 @@ function startEditFeaturesSession(
     },
     modeChanged,
     setMode,
+    rotate,
+    translate,
+    scale,
+    setFeatures(features) {
+      currentFeatures.forEach(feature => clearAllowPicking(feature, allowPickingMap));
+      currentFeatures.length = 0;
+      currentFeatures.push(...features);
+      currentFeatures.forEach(feature => setAllowPicking(feature, allowPickingMap, modificationKey));
+      transformationHandler?.setFeatures(features);
+    },
+    get features() {
+      return currentFeatures;
+    },
   };
 }