Merge pull request #228 from Dataport/fix/separate-stacked-drawings

fix that drawings on top of each other were glued

Author: warm-coolguy

packages/plugins/Draw/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Feature: Add new configuration parameter `measureOptions` to allow users to select a measurement mode when drawing a feature. This way, a length / area in the selected unit is added to the drawn feature.
 - Fix: Update initial value of `drawMode` to a selectable value if the default `Point` is not a drawable option.
 - Fix: Adjust type `DrawGetters` regarding its keys `selectableDrawModes` and `selectableModes` to correctly reflect that they represent objects.
+- Fix: Stacked geometries can be separated with the "Edit" operation again. [Thanks to mike-000](https://github.com/openlayers/openlayers/issues/16593#issuecomment-2624257614).
 - Chore: Add `@polar/core` as a dependency as the component `RadioCard.vue` has been moved from this package to `@polar/core`.
 
 ## 2.0.0

packages/plugins/Draw/src/store/actions.ts

@@ -130,7 +130,11 @@ export const makeActions = () => {
       getters: { selectedFeature },
       rootGetters: { map },
     }) {
-      interactions.forEach((interaction) => map.removeInteraction(interaction))
+      interactions.forEach(
+        (interaction) =>
+          // @ts-expect-error | "un on removal" riding piggyback as _onRemove
+          map.removeInteraction(interaction) && interaction._onRemove?.()
+      )
       if (interactions.some((interaction) => interaction instanceof Select)) {
         if (selectedFeature && selectedFeature.get('text') === '') {
           // text nodes without text are considered deleted

packages/plugins/Draw/src/store/createInteractions/createModifyInteractions.ts

@@ -1,10 +1,54 @@
 import { Modify, Select, Snap } from 'ol/interaction'
 import Interaction from 'ol/interaction/Interaction'
 import { PolarActionContext } from '@polar/lib-custom-types'
+import { Collection, Feature, Map, MapBrowserEvent } from 'ol'
 import { CreateInteractionsPayload, DrawGetters, DrawState } from '../../types'
 
+const createModify = (
+  map: Map,
+  drawLayer: CreateInteractionsPayload['drawLayer']
+) => {
+  let active = false
+  const features: Collection<Feature> = new Collection()
+  const modify = new Modify({ features })
+  modify.on('modifystart', () => {
+    active = true
+  })
+  modify.on('modifyend', () => {
+    active = false
+  })
+
+  const localSelector = (e: MapBrowserEvent<UIEvent>) => {
+    if (!active) {
+      map.forEachFeatureAtPixel(
+        e.pixel,
+        (f) => {
+          if (f !== features.item(0)) {
+            features.setAt(0, f as Feature)
+          }
+          return true
+        },
+        {
+          layerFilter: (l) => l === drawLayer,
+        }
+      )
+    }
+  }
+
+  map.on('pointermove', localSelector)
+  // @ts-expect-error | "un on removal" riding piggyback as _onRemove
+  modify._onRemove = () => map.un('pointermove', localSelector)
+
+  return modify
+}
+
 export default function (
-  { commit, dispatch, getters }: PolarActionContext<DrawState, DrawGetters>,
+  {
+    commit,
+    dispatch,
+    getters,
+    rootGetters,
+  }: PolarActionContext<DrawState, DrawGetters>,
   { drawSource, drawLayer }: CreateInteractionsPayload
 ): Interaction[] {
   const { drawMode } = getters
@@ -40,7 +84,7 @@ export default function (
   })
 
   return [
-    new Modify({ source: drawSource }),
+    createModify(rootGetters.map, drawLayer),
     new Snap({ source: drawSource }),
     select,
   ]