@defra/interactive-map 0.0.31-alpha → 0.0.33-alpha

package/plugins/beta/draw-ml/src/DrawInit.jsx

@@ -35,6 +35,14 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
     return () => remove()
   }, [mapState.isMapReady, appState.mode])
 
+  // Keep draw instance aware of the crossHair API so draw modes can use show/hide
+  // (rather than direct DOM manipulation which conflicts with React's controlled display style)
+  useEffect(() => {
+    if (mapProvider.draw) {
+      mapProvider.draw._crossHair = crossHair
+    }
+  }, [mapProvider.draw, crossHair])
+
   // Show crosshair immediately on touch/keyboard when entering draw mode
   useEffect(() => {
     if (['draw_polygon', 'draw_line'].includes(pluginState.mode) && isTouchOrKeyboard) {
@@ -48,6 +56,17 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
     }
   }, [pluginState.mode, appState.interfaceType])
 
+  // Keep edit mode in sync with the global interface type so the touch
+  // offset target shows/hides immediately when the input device changes
+  // (e.g. switching between stylus/touch and mouse on a Surface tablet).
+  useEffect(() => {
+    if (pluginState.mode !== 'edit_vertex' || !mapProvider.map) {
+      return undefined
+    }
+    mapProvider.map.fire('draw.interfacetypechange', { interfaceType: appState.interfaceType })
+    return undefined
+  }, [appState.interfaceType, pluginState.mode])
+
   // Attach events when plgin state changes
   useEffect(() => {
     if (!mapProvider.draw) {

package/plugins/beta/draw-ml/src/api/newLine.js

@@ -56,6 +56,7 @@ export const newLine = ({ appState, appConfig, pluginConfig, pluginState, mapPro
     vertexMarkerId: `${appConfig.id}-cross-hair`,
     addVertexButtonId: `${appConfig.id}-draw-add-point`,
     interfaceType: appState.interfaceType,
+    crossHair: draw._crossHair,
     getSnapEnabled: () => mapProvider.snapEnabled === true,
     featureId,
     ...modeOptions,

package/plugins/beta/draw-ml/src/api/newPolygon.js

@@ -56,6 +56,7 @@ export const newPolygon = ({ appState, appConfig, pluginConfig, pluginState, map
     vertexMarkerId: `${appConfig.id}-cross-hair`,
     addVertexButtonId: `${appConfig.id}-draw-add-point`,
     interfaceType: appState.interfaceType,
+    crossHair: draw._crossHair,
     getSnapEnabled: () => mapProvider.snapEnabled === true,
     featureId,
     ...modeOptions,

package/plugins/beta/draw-ml/src/modes/createDrawMode.js

@@ -1,4 +1,4 @@
-import createVertex from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/create_vertex.js'
+import createVertex from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/create_vertex.js' // NOSONAR
 
 import {
   getSnapInstance,
@@ -23,7 +23,7 @@ import {
  * @param {Function} config.validateClick - Validation function for clicks
  * @param {Function} config.createVertices - Function to create vertex display features
  */
-export const createDrawMode = (ParentMode, config) => {
+export const createDrawMode = (ParentMode, config) => { // NOSONAR — factory returns a single cohesive mode object; splitting across files would obscure the event flow
   const {
     featureProp,
     geometryType,
@@ -35,6 +35,7 @@ export const createDrawMode = (ParentMode, config) => {
   } = config
 
   const getFeature = (state) => state[featureProp]
+  const RUBBER_BAND_OFFSET = 2 // ring is [...placed, last_placed, rubber_band]; splice(-2,1) removes last_placed
 
   return {
     ...ParentMode,
@@ -45,7 +46,7 @@ export const createDrawMode = (ParentMode, config) => {
       // Some parent modes (DrawLineString) interpret featureId as "continue existing"
       // rather than "use this ID for new feature"
       const parentOptions = excludeFeatureIdFromSetup
-        ? { ...options, featureId: undefined }
+        ? { ...options, featureId: null }
         : options
 
       const state = {
@@ -56,17 +57,22 @@ export const createDrawMode = (ParentMode, config) => {
       // Add initial props
       state[featureProp].properties = options.properties
 
-      const { container, interfaceType, vertexMarkerId } = state
+      const { container, vertexMarkerId, getInterfaceType } = state
+      const currentInterfaceType = getInterfaceType ? getInterfaceType() : state.interfaceType
+      state.interfaceType = currentInterfaceType
       const vertexMarker = container.querySelector(`#${vertexMarkerId}`)
-      vertexMarker.style.display = ['touch', 'keyboard'].includes(interfaceType) ? 'block' : 'none'
       state.vertexMarker = vertexMarker
+      if (['touch', 'keyboard'].includes(currentInterfaceType)) {
+        this._showCrossHair(state)
+      } else {
+        this._hideCrossHair(state)
+      }
 
       // Bind all handlers once
       const bind = (name, fn) => (this[name] = fn.bind(this, state))
       const handlers = {
         keydownHandler: this.onKeydown,
         keyupHandler: this.onKeyup,
-        focusHandler: this.onFocus,
         blurHandler: this.onBlur,
         createHandler: this.onCreate,
         moveHandler: this.onMove,
@@ -83,7 +89,6 @@ export const createDrawMode = (ParentMode, config) => {
         [window, 'keydown', this.keydownHandler],
         [window, 'keyup', this.keyupHandler],
         [window, 'click', this.vertexButtonClickHandler],
-        [container, 'focus', this.focusHandler],
         [container, 'blur', this.blurHandler],
         [container, 'pointermove', this.pointermoveHandler],
         [container, 'pointerup', this.pointerupHandler],
@@ -118,9 +123,10 @@ export const createDrawMode = (ParentMode, config) => {
       }
       const coordsBefore = getCoords(getFeature(state)).length
       ParentMode.onClick.call(this, state, e)
-      // Push undo if a vertex was added
+      // Push undo and update count if a vertex was added
       if (getCoords(getFeature(state)).length > coordsBefore) {
         this.pushDrawUndo(state)
+        this.dispatchVertexChange(getCoords(getFeature(state)))
       }
     },
 
@@ -168,7 +174,7 @@ export const createDrawMode = (ParentMode, config) => {
     },
 
     dispatchVertexChange (coords) {
-      // Subtract 1 to exclude the rubber-band vertex that mapbox-gl-draw always appends
+      // Both polygon ring and LineString store [v0...vN, rubber_band] during drawing — subtract 1 to get placed vertex count
       this.map.fire('draw.vertexchange', {
         numVertecies: Math.max(0, coords.length - 1)
       })
@@ -230,6 +236,7 @@ export const createDrawMode = (ParentMode, config) => {
           featureId,
           container: state.container,
           interfaceType: state.interfaceType,
+          crossHair: state.crossHair,
           vertexMarkerId: state.vertexMarkerId,
           addVertexButtonId: state.addVertexButtonId,
           getSnapEnabled: state.getSnapEnabled,
@@ -269,7 +276,7 @@ export const createDrawMode = (ParentMode, config) => {
     _removeLastVertex (state, feature, coords) {
       // Structure during drawing: [v1, v2, ..., vN, rubber_band]
       const ring = geometryType === 'Polygon' ? feature.coordinates[0] : coords
-      ring.splice(ring.length - 2, 1)
+      ring.splice(-RUBBER_BAND_OFFSET, 1)
 
       // Snap rubber band to new last vertex position
       const newLastVertex = ring[ring.length - 2]
@@ -338,10 +345,18 @@ export const createDrawMode = (ParentMode, config) => {
       this.map.fire('draw.geometrychange', state.polygon || state.line)
     },
 
+    _showCrossHair (state) {
+      if (state.crossHair) { state.crossHair.show() } else { state.vertexMarker.style.display = 'block' }
+    },
+
+    _hideCrossHair (state) {
+      if (state.crossHair) { state.crossHair.hide() } else { state.vertexMarker.style.display = 'none' }
+    },
+
     _setInterface (state, type, show = true) {
       state.interfaceType = type
       if (show) {
-        state.vertexMarker.style.display = 'block'
+        this._showCrossHair(state)
       }
     },
 
@@ -370,32 +385,36 @@ export const createDrawMode = (ParentMode, config) => {
       this.onMove(state, e)
     },
 
+    _handleUndoKeydown (state, e) {
+      const tag = document.activeElement?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA') {
+        return
+      }
+      e.preventDefault()
+      e.stopPropagation()
+      const undoStack = this.map._undoStack
+      if (undoStack && undoStack.length > 0) {
+        const operation = undoStack.pop()
+        if (operation?.type === 'draw_vertex') {
+          // Set flag to prevent click interference during undo
+          this.map._undoInProgress = true
+          setTimeout(() => { this.map._undoInProgress = false }, 100)
+          this.undoVertex(state)
+        }
+      }
+    },
+
     onKeydown (state, e) {
-      // Undo with Cmd/Ctrl+Z (works without viewport focus, but not in input fields)
       if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
-        const tag = document.activeElement?.tagName
-        if (tag === 'INPUT' || tag === 'TEXTAREA') {
-          return
-        }
-        e.preventDefault()
-        e.stopPropagation()
-        const undoStack = this.map._undoStack
-        if (undoStack && undoStack.length > 0) {
-          const operation = undoStack.pop()
-          if (operation?.type === 'draw_vertex') {
-            // Set flag to prevent click interference during undo
-            this.map._undoInProgress = true
-            setTimeout(() => { this.map._undoInProgress = false }, 100)
-            this.undoVertex(state)
-          }
-        }
+        this._handleUndoKeydown(state, e)
         return
       }
       if (document.activeElement !== state.container) {
         return
       }
       if (e.key === 'Escape') {
-        return e.preventDefault()
+        e.preventDefault()
+        return
       }
       if (e.key === 'Enter') {
         state.isActive = true
@@ -449,13 +468,9 @@ export const createDrawMode = (ParentMode, config) => {
       }
     },
 
-    onFocus (state) {
-      state.vertexMarker.style.display = ['touch', 'keyboard'].includes(state.interfaceType) ? 'block' : 'none'
-    },
-
     onBlur (state, e) {
       if (e.target !== state.container) {
-        state.vertexMarker.style.display = 'none'
+        this._hideCrossHair(state)
       }
     },
 
@@ -505,13 +520,13 @@ export const createDrawMode = (ParentMode, config) => {
 
     onPointerdown (state, e) {
       if (e.pointerType !== 'touch') {
-        this._setInterface(state, 'pointer', false)
+        this._setInterface(state, 'mouse', false)
       }
     },
 
     onPointermove (state, e) {
       if (e.pointerType !== 'touch') {
-        state.vertexMarker.style.display = 'none'
+        this._hideCrossHair(state)
       }
     },
 
@@ -531,7 +546,7 @@ export const createDrawMode = (ParentMode, config) => {
     onStop (state) {
       ParentMode.onStop.call(this, state)
       this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
-      state.vertexMarker.style.display = 'none'
+      this._hideCrossHair(state)
     }
   }
 }

package/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js

@@ -43,7 +43,7 @@ export const touchHandlers = {
   },
 
   onPointerevent (state, e) {
-    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'pointer'
+    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'mouse'
     state.isPanEnabled = true
     if (e.pointerType === 'touch' && e.type === 'pointermove' && !isOnSVG(e.target.parentNode) && !state._ignorePointermoveDeselect) {
       this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, coordPath: null })

package/plugins/beta/draw-ml/src/modes/editVertex/vertexOperations.js

@@ -119,11 +119,12 @@ export const vertexOperations = {
     const deletedPosition = [...state.vertecies[state.selectedVertexIndex]]
     const deletedIndex = state.selectedVertexIndex
 
-    this._ctx.api.trash()
-
-    // Clear DirectSelect's coordinate selection to prevent visual artifacts
+    // Remove the coordinate directly rather than via this._ctx.api.trash(), which routes through
+    // DirectSelect.trash() and calls onSetup({ featureId }) with incomplete options, crashing event registration.
+    const coordPath = [...result.segment.path, result.localIdx].join('.')
+    feature.removeCoordinate(coordPath)
+    this.fireUpdate()
     this.clearSelectedCoordinates()
-    // Force feature re-render to clear vertex highlights
     feature.changed()
     this._ctx.store.render()
 

package/plugins/beta/draw-ml/src/modes/editVertexMode.js

@@ -1,4 +1,4 @@
-import DirectSelect from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/direct_select.js'
+import DirectSelect from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/direct_select.js' // NOSONAR
 import {
   getSnapInstance, isSnapActive, isSnapEnabled, getSnapLngLat,
   getSnapRadius, triggerSnapAtPoint, clearSnapIndicator, clearSnapState
@@ -44,25 +44,7 @@ export const EditVertexMode = {
     state.midpoints = this.getMidpoints(state.featureId)
     this.setupEventListeners(state)
 
-    if (options.selectedVertexType === 'midpoint') {
-      // Clear any vertex selection when switching to midpoint
-      state.selectedCoordPaths = []
-      this.clearSelectedCoordinates()
-      // Force feature re-render to clear vertex highlights
-      if (state.feature) {
-        state.feature.changed()
-      }
-      this._ctx.store.render()
-      this.updateMidpoint(state.midpoints[options.selectedVertexIndex - state.vertecies.length])
-    } else if (options.selectedVertexIndex === -1) {
-      // Explicitly clear selection when re-entering with no vertex selected
-      state.selectedCoordPaths = []
-      this.clearSelectedCoordinates()
-      if (state.feature) {
-        state.feature.changed()
-      }
-      this._ctx.store.render()
-    }
+    this.applyVertexSelection(state, options)
     this.map._drawEditContainer = options.container
     this.addTouchVertexTarget(state)
 
@@ -104,7 +86,8 @@ export const EditVertexMode = {
       selectionchange: bind(this.onSelectionChange),
       scalechange: bind(this.onScaleChange),
       update: bind(this.onUpdate),
-      move: bind(this.onMove)
+      move: bind(this.onMove),
+      interfacetypechange: bind(this.onInterfaceTypeChange)
     }
 
     window.addEventListener('keydown', h.keydown, { capture: true })
@@ -120,9 +103,30 @@ export const EditVertexMode = {
     this.map.on('draw.scalechange', h.scalechange)
     this.map.on('draw.update', h.update)
     this.map.on('move', h.move)
+    this.map.on('draw.interfacetypechange', h.interfacetypechange)
+  },
+
+  applyVertexSelection (state, options) {
+    if (options.selectedVertexType === 'midpoint') {
+      state.selectedCoordPaths = []
+      this.clearSelectedCoordinates()
+      if (state.feature) { state.feature.changed() }
+      this._ctx.store.render()
+      this.updateMidpoint(state.midpoints[options.selectedVertexIndex - state.vertecies.length])
+      return
+    }
+    if (options.selectedVertexIndex === -1) {
+      state.selectedCoordPaths = []
+      this.clearSelectedCoordinates()
+      if (state.feature) { state.feature.changed() }
+      this._ctx.store.render()
+    }
   },
 
   onSelectionChange (state, e) {
+    // Refresh vertex list so numVertecies reflects the latest geometry (e.g. after midpoint insertion)
+    this.syncVertices(state)
+
     const vertexCoord = e.points[e.points.length - 1]?.geometry.coordinates
 
     // Only update selectedVertexIndex from event if not keyboard mode AND event has valid vertex
@@ -151,6 +155,12 @@ export const EditVertexMode = {
     state.scale = e.scale
   },
 
+  onInterfaceTypeChange (state, e) {
+    state.interfaceType = e.interfaceType
+    const vertex = state.selectedVertexIndex >= 0 ? state.vertecies[state.selectedVertexIndex] : null
+    this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
+  },
+
   onUpdate (state) {
     const prev = new Set(state.vertecies.map(c => JSON.stringify(c)))
     if (prev.size === state.vertecies.length) {
@@ -168,6 +178,10 @@ export const EditVertexMode = {
     state.interfaceType = 'keyboard'
     this.hideTouchVertexIndicator(state)
 
+    if (e.key === ' ') {
+      e.preventDefault()
+    }
+
     if (e.key === ' ' && state.selectedVertexIndex < 0) {
       // Clear snap indicator when starting keyboard selection
       const snap = getSnapInstance(this.map)
@@ -321,6 +335,21 @@ export const EditVertexMode = {
     }
   },
 
+  onClick (state, e) { // NOSONAR — complexity accumulated from object-level context; single guard clause, see feedback_mgl_click_vs_mouseup.md
+    if (state._isInsertingVertex && state._insertedVertexIndex !== undefined) {
+      const insertedIndex = state._insertedVertexIndex
+      this.syncVertices(state)
+      this.pushUndo({ type: 'insert_vertex', featureId: state.featureId, vertexIndex: insertedIndex })
+      state.selectedVertexIndex = insertedIndex
+      state.selectedVertexType = 'vertex'
+      state._isInsertingVertex = false
+      state._insertedVertexIndex = undefined
+      this.map.fire('draw.vertexselection', { index: insertedIndex, numVertecies: state.vertecies.length })
+      return
+    }
+    DirectSelect.onClick.call(this, state, e)
+  },
+
   onMouseUp (state, e) {
     clearSnapState(getSnapInstance(this.map))
 
@@ -372,6 +401,8 @@ export const EditVertexMode = {
           vertexIndex: state._moveStartIndex,
           previousPosition: state._moveStartPosition
         })
+      } else {
+        // No action
       }
     }
 
@@ -454,6 +485,7 @@ export const EditVertexMode = {
     this.map.off('draw.scalechange', h.scalechange)
     this.map.off('draw.update', h.update)
     this.map.off('move', h.move)
+    this.map.off('draw.interfacetypechange', h.interfacetypechange)
     this.map.dragPan.enable()
     window.removeEventListener('click', h.click)
     window.removeEventListener('keydown', h.keydown, { capture: true })

package/plugins/beta/draw-ol/dist/esm/DrawMode.js

@@ -1 +1 @@
-import e from"ol/interaction/Draw.js";import{c as t,p as r,g as n}from"./geometryHelpers.js";var o=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),a=e=>{var n,{drawInteraction:a,options:i}=e,{container:d,addVertexButtonId:s,mapProvider:l,snap:p,onUndo:c}=i,g=i.interfaceType,v=null,u=null;a.on("drawstart",e=>{v=e.feature,u=null}),a.on("drawend",()=>{v=null,u=null}),a.on("drawabort",()=>{v=null,u=null});var y=(e=>{var{container:t,addVertexButtonId:r,olView:n,onUndo:a,getInterfaceType:i,setInterfaceType:d,clearLastCoord:s,updateRubberbanding:l,placeVertex:p}=e,c=()=>{"pointer"!==i()&&l()};null==n||n.on("change:center",c);var g=e=>{t.contains(document.activeElement)&&(o.has(e.key)?d("keyboard"):("Enter"===e.key&&(e.preventDefault(),d("keyboard"),p()),"z"===e.key&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),null==a||a())))},v=e=>{r&&e.target.closest("#".concat(r))&&p()},u=e=>{"touch"!==e.pointerType&&(d("pointer"),s())},y=()=>{d("touch")},m=()=>{"pointer"!==i()&&l()};return globalThis.addEventListener("keydown",g),globalThis.addEventListener("click",v),t.addEventListener("pointerdown",u),t.addEventListener("touchstart",y,{passive:!0}),t.addEventListener("pointermove",m),{destroy(){null==n||n.un("change:center",c),globalThis.removeEventListener("keydown",g),globalThis.removeEventListener("click",v),t.removeEventListener("pointerdown",u),t.removeEventListener("touchstart",y),t.removeEventListener("pointermove",m)}}})({container:d,addVertexButtonId:s,olView:null===(n=a.getMap())||void 0===n?void 0:n.getView(),onUndo:c,getInterfaceType:()=>g,setInterfaceType:e=>{g=e},clearLastCoord:()=>{u=null},updateRubberbanding:()=>{if(v){var e=v.getGeometry();if(e.getCoordinates().length){var t=l.getCenter();((e,t)=>{if("LineString"===e.getType()){var r=[...e.getCoordinates()];r[r.length-1]=t,e.setCoordinates(r)}else if("Polygon"===e.getType()){var n=e.getCoordinates().map((e,r)=>{if(0!==r)return e;var n=[...e];return n[n.length-1]=t,n});e.setCoordinates(n)}})(e,"pointer"!==g&&p?p.apply(t):t)}}},placeVertex:()=>{var e=l.getCenter(),n="pointer"!==g&&p?p.apply(e):e;if(null==p||p.hideIndicator(),v){var o=v.getGeometry(),i=o.getCoordinates(),d="Polygon"===o.getType()?i[0]||[]:i;if(u&&u[0]===n[0]&&u[1]===n[1])return a.finishDrawing(),void(u=null);if(((e,n,o,a)=>{if("Polygon"!==a||o.length<4)return!1;var i=o[0],d=t(e,n),s=t(e,i);return!(!d||!s)&&r(d,s)<12})(a.getMap(),n,d,o.getType()))return void a.finishDrawing()}a.appendCoordinates([n]),u=n}});return{getInterfaceType:()=>g,destroy(){y.destroy()}}},i=t=>{var{map:r,manager:o,options:i}=t,{geometryType:d,featureId:s,properties:l={},container:p,interfaceType:c,addVertexButtonId:g,mapProvider:v,snap:u}=i,y=new e({type:d,style:o.styles.createSketchStyle(),stopClick:!0,snapTolerance:12});r.addInteraction(y);var m=null,f=()=>{if(m){var e=m.getGeometry(),t=n({type:d,coordinates:e.getCoordinates()}),r=Math.max(0,t.length-1);o.emit("vertexchange",{numVertices:r})}};y.on("drawstart",e=>{(m=e.feature).getGeometry().on("change",f)}),y.on("drawend",e=>{var t=e.feature;t.setId(String(s)),t.setProperties(l),o.store.source.addFeature(t);var r=o.store.toGeoJSON(t);o.emit("create",r)}),y.on("drawabort",()=>{o.emit("cancel")});var w=a({drawInteraction:y,options:{container:p,interfaceType:c,addVertexButtonId:g,mapProvider:v,snap:u,onUndo:()=>{y.removeLastPoint(),f()}}});return{done(){if(m){var e=m.getGeometry(),t=n({type:d,coordinates:e.getCoordinates()}),r="Polygon"===d?4:3;if(t.length<r)return}y.finishDrawing()},cancel(){y.abortDrawing()},undo(){y.removeLastPoint(),f()},destroy(){w.destroy(),r.removeInteraction(y),m=null}}};export{i as createDrawMode};
+import e from"ol/interaction/Draw.js";import{noModifierKeys as t}from"ol/events/condition.js";import{c as r,p as n,g as o}from"./geometryHelpers.js";var a=4,i=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),l=e=>{var t,{drawInteraction:o,options:l}=e,{container:d,addVertexButtonId:s,mapProvider:u,snap:g,onUndo:p,canFinish:c}=l,v=null!==(t=l.interfaceType)&&void 0!==t?t:"mouse",y=null,m=null;o.on("drawstart",e=>{y=e.feature,m=null}),o.on("drawend",()=>{y=null,m=null}),o.on("drawabort",()=>{y=null,m=null});var f=()=>{if(y){var e=y.getGeometry();if(e.getCoordinates().length){var t=u.getCenter();((e,t)=>{if("LineString"===e.getType()){var r=[...e.getCoordinates()];r[r.length-1]=t,e.setCoordinates(r)}else if("Polygon"===e.getType()){var n=e.getCoordinates().map((e,r)=>{if(0!==r)return e;var n=[...e];return n[n.length-1]=t,n});e.setCoordinates(n)}})(e,"mouse"!==v&&g?g.apply(t):t)}}else"mouse"!==v&&g&&g.apply(u.getCenter())},h=(e,t,i)=>{if(m&&m[0]===i[0]&&m[1]===i[1])return null!=c&&c()&&o.finishDrawing(),m=null,!0;if(((e,t,o,i)=>{if("Polygon"!==i||o.length<a)return!1;var l=o[0],d=r(e,t),s=r(e,l);return!(!d||!s)&&n(d,s)<12})(o.getMap(),i,t,e.getType()))return o.finishDrawing(),!0;var l=o.getMap(),d=(e=>{if("Polygon"===e.getType()){var t=e.getCoordinates()[0]||[];return t.length>=3?t[t.length-3]:null}var r=e.getCoordinates();return r.length>=2?r[r.length-2]:null})(e);if(d){var s=l.getPixelFromCoordinate(d),u=l.getPixelFromCoordinate(i);if(s&&u){var g=s[0]-u[0],p=s[1]-u[1];if(g*g+p*p<4)return m=i,!0}}return!1},w=o.getMap(),C=null==w?void 0:w.getView(),T=(e=>{var{container:t,addVertexButtonId:r,olView:n,onUndo:o,getInterfaceType:a,setInterfaceType:l,clearLastCoord:d,updateRubberbanding:s,placeVertex:u}=e,g=()=>{"mouse"!==a()&&s()};null==n||n.on("change:center",g);var p=e=>{t.contains(document.activeElement)&&(i.has(e.key)?l("keyboard"):("Enter"===e.key&&(e.preventDefault(),l("keyboard"),u()),"z"===e.key&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),null==o||o())))},c=e=>{r&&e.target.closest("#".concat(r))&&u()},v=e=>{"touch"!==e.pointerType&&(l("mouse"),d())},y=()=>{l("touch")},m=()=>{"mouse"!==a()&&s()};return globalThis.addEventListener("keydown",p),globalThis.addEventListener("click",c),t.addEventListener("pointerdown",v),t.addEventListener("touchstart",y,{passive:!0}),t.addEventListener("pointermove",m),{destroy(){null==n||n.un("change:center",g),globalThis.removeEventListener("keydown",p),globalThis.removeEventListener("click",c),t.removeEventListener("pointerdown",v),t.removeEventListener("touchstart",y),t.removeEventListener("pointermove",m)}}})({container:d,addVertexButtonId:s,olView:C,onUndo:p,getInterfaceType:()=>v,setInterfaceType:e=>{v=e},clearLastCoord:()=>{m=null},updateRubberbanding:f,placeVertex:()=>{var e=u.getCenter(),t="mouse"!==v&&g?g.apply(e):e;if(null==g||g.hideIndicator(),y){var r=y.getGeometry(),n=r.getCoordinates(),a="Polygon"===r.getType()?n[0]||[]:n;if(h(r,a,t))return}o.appendCoordinates([t]),m=t}}),I=()=>{"mouse"!==v&&null!=C&&C.getAnimating()&&f()};return null==w||w.on("postrender",I),{getInterfaceType:()=>v,destroy(){T.destroy(),null==w||w.un("postrender",I)}}},d={Polygon:3,LineString:2},s=(e,t)=>{if(!t)return!1;var r=t.getGeometry();return o({type:e,coordinates:r.getCoordinates()}).length-1>=d[e]},u=(e,r,n)=>o=>{if(!t(o))return!1;var a=n();if(!a||s(r,a))return!0;var i=(e=>{if("Polygon"===e.getType()){var t=e.getCoordinates()[0]||[];return t.length>=3?t[t.length-3]:null}var r=e.getCoordinates();return r.length>=2?r[r.length-2]:null})(a.getGeometry());if(!i)return!0;var l=e.getPixelFromCoordinate(i);if(!l)return!0;var d=o.pixel[0]-l[0],u=o.pixel[1]-l[1];return d*d+u*u>4},g=t=>{var{map:r,manager:n,options:a}=t,{geometryType:i,featureId:d,properties:g={},container:p,interfaceType:c,addVertexButtonId:v,mapProvider:y,snap:m}=a,f=null,h=new e({type:i,style:n.styles.createSketchStyle(),stopClick:!0,snapTolerance:12,condition:u(r,i,()=>f)});r.addInteraction(h),h.overlay_.updateWhileAnimating_=!0;var w=()=>{if(f){var e=f.getGeometry(),t=o({type:i,coordinates:e.getCoordinates()});n.emit("vertexchange",{numVertices:Math.max(0,t.length-1)})}};h.on("drawstart",e=>{(f=e.feature).getGeometry().on("change",w)}),h.on("drawend",e=>{var t=e.feature;t.setId(String(d)),t.setProperties(g),n.store.source.addFeature(t),n.emit("create",n.store.toGeoJSON(t))}),h.on("drawabort",()=>{n.emit("cancel")});var C=l({drawInteraction:h,options:{container:p,interfaceType:c,addVertexButtonId:v,mapProvider:y,snap:m,onUndo:()=>{h.removeLastPoint(),w()},canFinish:()=>s(i,f)}});return{done(){s(i,f)&&h.finishDrawing()},cancel(){h.abortDrawing()},undo(){h.removeLastPoint(),w()},destroy(){C.destroy(),r.removeInteraction(h),f=null}}};export{g as createDrawMode};

package/plugins/beta/draw-ol/dist/esm/EditMode.js

@@ -1 +1 @@
-import e from"ol/interaction/Modify.js";import t from"ol/Collection.js";import r from"ol/source/Vector.js";import n from"ol/layer/Vector.js";import o from"ol/Feature.js";import a from"ol/geom/Point.js";import{a as i,g as d,b as l,d as s,e as c,c as v,p,f as x,n as u}from"./geometryHelpers.js";var y=(e,t)=>{e&&(e.style.setProperty("--draw-halo",t.editActive),e.style.setProperty("--draw-bg",t.editHalo),e.style.setProperty("--draw-primary",t.editVertex))},g=(e,t)=>{t&&e&&(e.style.left="".concat(t.x,"px"),e.style.top="".concat(t.y,"px"),e.style.display="block")},f=e=>{e&&(e.style.display="none")},m=e=>{if(!e)return!1;var t=e.parentNode;return t instanceof globalThis.SVGElement||null!=(null==t?void 0:t.ownerSVGElement)},h=(e,t,r,n)=>{var o=r-n,a=t[o];if(!a)return null;var i=e.getGeometry(),d={type:i.getType(),coordinates:i.getCoordinates()},s=l(d),v=0;for(var p of s){var x=p.closed?p.length:p.length-1;if(o<v+x){var u=o-v+1,y=p.start+u;return c(d,p.path).splice(u,0,[...a]),i.setCoordinates(d.coordinates),{insertedIndex:y}}v+=x}return null},I=(e,t,r)=>{var n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,t);if(i){var d=c(o,i.segment.path);d[i.localIdx]=[...r],i.segment.closed&&0===i.localIdx&&(d[d.length-1]=[...r]),n.setCoordinates(o.coordinates)}},T=function(e,t,r,n){var o,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return null!==(o=function(e,t,r){var n=-1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:12;return t.forEach((t,a)=>{var i=v(e,t);if(i){var d=p(i,r);d<o&&(o=d,n=a)}}),n>=0?{index:n,type:"vertex"}:null}(e,t,n,a))&&void 0!==o?o:function(e,t,r,n){var o=-1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return t.forEach((t,n)=>{var i=v(e,t);if(i){var d=p(i,r);d<a&&(a=d,o=n)}}),o>=0?{index:n+o,type:"midpoint"}:null}(e,r,n,t.length,a)},V=e=>{var{map:t,container:r,getState:n,setState:o,onVertexMoved:a,onTap:i,colors:d,snap:l}=e,s=(e=>{var t=e.querySelector("[data-im-draw-touch-target]");return t||(e.insertAdjacentHTML("beforeend","\n  <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd'\n    style='display:none;position:absolute;top:0;left:0;margin:24px 0 0 -24px;cursor:grab'\n    class='im-draw-touch-target' data-im-draw-touch-target>\n    <circle cx='24' cy='24' r='24' fill='var(--draw-halo, #000)'/>\n    <path d=\"M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z\" fill='var(--draw-bg, #fff)'/>\n  </svg>\n"),t=e.querySelector("[data-im-draw-touch-target]")),t})(r);y(s,d);var c={scale:1,ox:0,oy:0},p=e=>({x:e.x*c.scale+c.ox,y:e.y*c.scale+c.oy}),u=()=>{var e=t.getViewport(),n=e.getBoundingClientRect(),o=r.getBoundingClientRect(),a=e.offsetWidth>0?n.width/e.offsetWidth:1,i=r.offsetWidth>0?o.width/r.offsetWidth:1;Object.assign(c,{scale:a/i,ox:(n.left-o.left)/i,oy:(n.top-o.top)/i})},h=(e=>{var{container:t,map:r,targetEl:n,olToCSS:o,cssToOl:a,getState:i,setState:d,onVertexMoved:l,onTap:s,snap:c}=e,p=null,u=null,y=null,f=null,h=null,V=e=>{var t=e.touches[0],o=m(e.target);if(h={x:t.clientX,y:t.clientY,time:Date.now(),onTarget:o},o){var{selectedVertexIndex:d,vertices:l}=i(),s=l[d];if(s){var c=r.getEventPixel({clientX:t.clientX,clientY:t.clientY}),x=v(r,s),g=getComputedStyle(n),I=a({x:Number.parseFloat(g.left),y:Number.parseFloat(g.top)});p=[...s],u=d,y={x:c[0]-x.x,y:c[1]-x.y},f={x:c[0]-I.x,y:c[1]-I.y},e.preventDefault()}}},w=e=>{if(m(e.target)&&null!=u){e.preventDefault();var t=r.getEventPixel({clientX:e.touches[0].clientX,clientY:e.touches[0].clientY}),a=x(r,{x:t[0]-y.x,y:t[1]-y.y}),l=c?c.apply(a):a;null==c||c.hideIndicator();var{olFeature:s,vertices:v}=i();s&&(I(s,u,l),d({vertices:v.map((e,t)=>t===u?l:e)}),g(n,o({x:t[0]-f.x,y:t[1]-f.y})))}},S=e=>{if(null!=u){h=null;var{vertices:t}=i();t[u]&&p&&l({vertexIndex:u,previousCoord:p}),null==c||c.hideIndicator(),p=null,u=null,y=null,f=null,e.preventDefault()}else{if(h&&!h.onTarget&&e.changedTouches.length>0){var n=e.changedTouches[0],o=Date.now()-h.time;if(Math.hypot(n.clientX-h.x,n.clientY-h.y)<10&&o<400){var a=r.getEventPixel({clientX:n.clientX,clientY:n.clientY}),d=i();null==s||s(T(r,d.vertices,d.midpoints,{x:a[0],y:a[1]},24)),e.preventDefault()}}h=null}};return t.addEventListener("touchstart",V,{passive:!1}),t.addEventListener("touchmove",w,{passive:!1}),t.addEventListener("touchend",S,{passive:!1}),{isDragging:()=>null!=u,destroy(){t.removeEventListener("touchstart",V),t.removeEventListener("touchmove",w),t.removeEventListener("touchend",S)}}})({container:r,map:t,targetEl:s,olToCSS:p,cssToOl:e=>({x:(e.x-c.ox)/c.scale,y:(e.y-c.oy)/c.scale}),getState:n,setState:o,onVertexMoved:a,onTap:i,snap:l}),V=()=>{var{selectedVertexIndex:e,vertices:r,interfaceType:o}=n();if(e<0||!r[e]||"touch"!==o)f(s);else{var a=v(t,r[e]);a?g(s,p(a)):f(s)}},w=()=>{var{selectedVertexIndex:e,interfaceType:t}=n();e>=0&&!h.isDragging()&&"touch"===t&&V()};t.on("postrender",w);var S=()=>{u(),t.once("postrender",V)};return t.on("change:size",S),u(),{updateTargetPosition:V,updateColors(e){y(s,e)},hide(){f(s)},destroy(){t.un("change:size",S),t.un("postrender",w),h.destroy(),f(s)}}},w=(e,t,r)=>{var n=t.filter(t=>{var n=Math.abs(t[0]-e[0]),o=Math.abs(t[1]-e[1]);return("ArrowUp"===r?t[1]<=e[1]&&o>=n:"ArrowDown"===r?t[1]>e[1]&&o>=n:"ArrowLeft"===r?t[0]<=e[0]&&o<n:"ArrowRight"!==r||t[0]>e[0]&&o<n)&&JSON.stringify(t)!==JSON.stringify(e)});n.length||n.push(e);var o=t=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),a=n.reduce((e,t)=>o(t)<o(e)?t:e);return t.findIndex(e=>JSON.stringify(e)===JSON.stringify(a))},S=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),C=new Set(["INPUT","TEXTAREA","BUTTON","SELECT","A"]),E=e=>{var{map:t,snap:r,getState:n,setState:o,onInserted:a}=e,i={start:null,index:null};return{nudge:e=>{var{selectedVertexIndex:d,selectedVertexType:l,vertices:s,midpoints:c,olFeature:v}=n();if(v){var p=e.shiftKey?1:5,x={ArrowUp:[0,-p],ArrowDown:[0,p],ArrowLeft:[-p,0],ArrowRight:[p,0]},[y,g]=x[e.key];if("midpoint"!==l){if(!(d<0)&&s[d]){var f=s[d];i.start||(i.start=[...f],i.index=d);var m=u(t,f,y,g),T=r?r.apply(m):m;null==r||r.hideIndicator();var V=((e,t,r,n,o,a,i)=>{if(!e)return o;var d=[n[0]-r[0],n[1]-r[1]],l=[o[0]-r[0],o[1]-r[1]],s=d[0]**2+d[1]**2;if(s>0&&(l[0]*d[0]+l[1]*d[1])/s<.5){var c=e.snapRadius+1;return u(t,r,0===a?0:Math.sign(a)*c,0===i?0:Math.sign(i)*c)}return o})(r,t,f,m,T,y,g);I(v,d,V),o({vertices:s.map((e,t)=>t===d?V:e)})}}else((e,d,l,s,c,v)=>{var p=h(e,d,l,s.length);if(p){a({insertedIndex:p.insertedIndex});var x=n().vertices,y=x[p.insertedIndex];if(y){i.start=[...y],i.index=p.insertedIndex;var g=u(t,y,c,v),f=r?r.apply(g):g;I(e,p.insertedIndex,f),o({selectedVertexIndex:p.insertedIndex,selectedVertexType:"vertex",vertices:x.map((e,t)=>t===p.insertedIndex?f:e)})}}})(v,c,d,s,y,g)}},keyMove:i}},L=e=>{var t,{map:r,snap:n,getState:o,setState:a,onVertexMoved:i,onInserted:d,onDeleted:l,onUndo:s,onKeyboardActive:c}=e,{nudge:p,keyMove:x}=E({map:r,snap:n,getState:o,setState:a,onInserted:d}),u=null!==(t=r.getViewport().closest('[role="application"]'))&&void 0!==t?t:r.getViewport(),y=()=>(e=>{var t=document.activeElement;if(!t||t===document.body)return!1;if(e.contains(t))return!1;var r=t.tagName;return C.has(r)||t.isContentEditable||t.hasAttribute("tabindex")})(u),g=e=>{e.altKey?(e.preventDefault(),e.stopPropagation(),((e,t,r,n)=>{var{selectedVertexIndex:o,vertices:a,midpoints:i}=r();if(a.length){var d,l=[...a,...i].map(e=>v(t,e)).filter(Boolean).map(e=>[e.x,e.y]),s=o>=0?l[o]:(d=v(t,t.getView().getCenter()))?[d.x,d.y]:null;if(s){var c=w(s,l,e);n({selectedVertexIndex:c,selectedVertexType:c<a.length?"vertex":"midpoint"})}}})(e.key,r,o,a)):o().selectedVertexIndex>=0&&(e.preventDefault(),e.stopPropagation(),p(e))},f=e=>{if(null==c||c()," "===e.key&&o().selectedVertexIndex<0)e.preventDefault(),((e,t,r)=>{var{vertices:n,midpoints:o}=t();if(n.length){var a=e.getView().getCenter(),i=v(e,a);if(i){var d=[...n.map(t=>v(e,t)),...o.map(t=>v(e,t))].filter(Boolean).map(e=>[e.x,e.y]),l=w([i.x,i.y],d,void 0);r({selectedVertexIndex:l,selectedVertexType:l<n.length?"vertex":"midpoint"})}}})(r,o,a);else if(S.has(e.key))g(e);else if("z"===e.key&&(e.metaKey||e.ctrlKey)){var t,n=null===(t=document.activeElement)||void 0===t?void 0:t.tagName;C.has(n)||(e.preventDefault(),e.stopPropagation(),s())}},m=e=>{y()||("Escape"===e.key&&o().selectedVertexIndex>=0?(e.preventDefault(),x.start=null,x.index=null,a({selectedVertexIndex:-1,selectedVertexType:null})):f(e))},h=e=>{y()||(S.has(e.key)&&x.start&&null!=x.index&&(null==n||n.hideIndicator(),i({vertexIndex:x.index,previousCoord:x.start}),x.start=null,x.index=null),"Delete"===e.key&&l())};return window.addEventListener("keydown",m,{capture:!0}),window.addEventListener("keyup",h,{capture:!0}),{destroy(){window.removeEventListener("keydown",m,{capture:!0}),window.removeEventListener("keyup",h,{capture:!0})}}},b=(e,t)=>{switch(t.type){case"move_vertex":return((e,t)=>{var{vertexIndex:r,previousCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)return-1;var v=c(a,d.segment.path);return v[d.localIdx]=[...n],d.segment.closed&&0===d.localIdx&&(v[v.length-1]=[...n]),o.setCoordinates(a.coordinates),r})(e,t);case"insert_vertex":return((e,t)=>{var{vertexIndex:r}=t,n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,r);if(!i)return-1;var d=c(o,i.segment.path);return d.splice(i.localIdx,1),i.segment.closed&&(d[d.length-1]=[...d[0]]),n.setCoordinates(o.coordinates),-1})(e,t);case"delete_vertex":return((e,t)=>{var{vertexIndex:r,deletedCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)for(var v of i)if(r===v.start+v.length){d={segment:v,localIdx:v.length};break}if(!d)return-1;var p=c(a,d.segment.path);return p.splice(d.localIdx,0,[...n]),d.segment.closed&&(p[p.length-1]=[...p[0]]),o.setCoordinates(a.coordinates),r})(e,t);default:return-1}},k=v=>{var{map:p,manager:x,options:u}=v,{featureId:y,container:g,interfaceType:f,deleteVertexButtonId:m,snap:I}=u,{store:w,undoStack:S}=x,C=w.getOL(y);if(!C)return null;var E=C.getStyle();C.setStyle(x.styles.editFeatureStyle);var k={olFeature:C,selectedVertexIndex:-1,selectedVertexType:null,vertices:[],midpoints:[],interfaceType:null!=f?f:"pointer"},A=()=>k,M=null,P=null,D=e=>{if(Object.assign(k,e),void 0!==e.selectedVertexIndex){var t;if(X.setSelected("vertex"===k.selectedVertexType?k.selectedVertexIndex:-1),_.setSelected("midpoint"===k.selectedVertexType?k.selectedVertexIndex-k.vertices.length:-1),k.selectedVertexIndex<0)null===(t=M)||void 0===t||t();R(),x.emit("vertexselection",{index:"vertex"===k.selectedVertexType?k.selectedVertexIndex:-1,numVertices:k.vertices.length})}if(void 0!==e.vertices){var r,n={type:C.getGeometry().getType(),coordinates:C.getGeometry().getCoordinates()};_.update(n),X.update(n),k.midpoints=_.getCoords(),R(),null===(r=P)||void 0===r||r(),p.render()}},G=()=>{var e=C.getGeometry(),t={type:e.getType(),coordinates:e.getCoordinates()};k.vertices=d(t),k.midpoints=i(t),_.update(t),X.update(t),R()},z=()=>{G(),x.emit("vertexchange",{numVertices:k.vertices.length}),x.emit("update",w.toGeoJSON(C))},N=()=>G();C.getGeometry().on("change",N);var F=new t([C]),O=new e({features:F,style:()=>[],pixelTolerance:12,condition:e=>{if("touch"===k.interfaceType)return!1;var t=p.getEventPixel(e.originalEvent);return null!==T(p,k.vertices,k.midpoints,{x:t[0],y:t[1]})}});p.addInteraction(O);var j=null;O.on("modifystart",()=>{"touch"!==k.interfaceType&&(j=k.vertices.map(e=>[...e]))}),O.on("modifyend",()=>{if("touch"!==k.interfaceType){var e=j;if(z(),e){var t=k.vertices;if(t.length>e.length){var r=t.findIndex((t,r)=>!e[r]||t[0]!==e[r][0]),n=Math.max(0,r);S.push({type:"insert_vertex",vertexIndex:n}),D({selectedVertexIndex:n,selectedVertexType:"vertex"})}else if(t.length===e.length){var o=t.findIndex((t,r)=>t[0]!==e[r][0]||t[1]!==e[r][1]);o>=0&&(S.push({type:"move_vertex",vertexIndex:o,previousCoord:e[o]}),D({selectedVertexIndex:o,selectedVertexType:"vertex"}))}j=null}}});var _=((e,t)=>{var d=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("midpointIndex")===l?null:[d],zIndex:101});return e.addLayer(c),{update(e){s.clear();var t=i(e).map((e,t)=>{var r=new o({geometry:new a(e)});return r.set("midpointIndex",t),r});s.addFeatures(t)},setSelected(e){l=e,s.changed()},updateStyle(e){d=e,s.changed()},getCoords:()=>s.getFeatures().sort((e,t)=>e.get("midpointIndex")-t.get("midpointIndex")).map(e=>e.getGeometry().getCoordinates()),remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.midpointStyle),X=((e,t)=>{var i=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("vertexIndex")===l?null:[i],zIndex:102});return e.addLayer(c),{update(e){s.clear(),d(e).forEach((e,t)=>{var r=new o({geometry:new a(e)});r.set("vertexIndex",t),s.addFeature(r)})},setSelected(e){l=e,s.changed()},updateStyle(e){i=e,s.changed()},remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.vertexStyle),Y=new r,B=new n({source:Y,zIndex:103});p.addLayer(B);var R=()=>{Y.clear();var{selectedVertexIndex:e,selectedVertexType:t,vertices:r,midpoints:n}=k;if(!(e<0)){var i,d;if("vertex"===t)i=r[e],d=x.styles.selectedVertexStyle;else{if("midpoint"!==t)return;i=n[e-r.length],d=x.styles.selectedMidpointStyle}if(i){var l=new o({geometry:new a(i)});l.setStyle(d),Y.addFeature(l)}}};z();var U=e=>{C.setStyle(e.editFeatureStyle),X.updateStyle(e.vertexStyle),_.updateStyle(e.midpointStyle),R(),Z.updateColors(x.colors)};x.on("styleschanged",U);var J=e=>{if("touch"===e.pointerType)return k.interfaceType="touch",void Z.updateTargetPosition();k.interfaceType="pointer";var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)&&D({selectedVertexIndex:n.index,selectedVertexType:"vertex"})},K=e=>{if("touch"!==k.interfaceType){var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)?D({selectedVertexIndex:n.index,selectedVertexType:"vertex"}):"midpoint"===(null==n?void 0:n.type)||D({selectedVertexIndex:-1,selectedVertexType:null})}},H=e=>{"mouse"===e.pointerType&&"pointer"!==k.interfaceType&&(k.interfaceType="pointer",Z.hide())};g.addEventListener("pointerdown",J),g.addEventListener("pointerenter",H),g.addEventListener("pointermove",H),g.addEventListener("click",K);var W=e=>{m&&e.target.closest("#".concat(m))&&q()};globalThis.addEventListener("click",W);var q=()=>{if(!("vertex"!==k.selectedVertexType||k.selectedVertexIndex<0)){var e=((e,t)=>{var r=e.getGeometry(),n={type:r.getType(),coordinates:r.getCoordinates()},o=d(n),a=l(n),i=s(a,t);if(!i)return null;var{segment:v}=i,p=v.closed?3:2;if(v.length<=p)return null;var x=[...o[t]],u=c(n,v.path);return u.splice(i.localIdx,1),v.closed&&(u[u.length-1]=[...u[0]]),r.setCoordinates(n.coordinates),{deletedIndex:t,deletedCoord:x}})(C,k.selectedVertexIndex);e&&(S.push({type:"delete_vertex",vertexIndex:e.deletedIndex,deletedCoord:e.deletedCoord}),z(),D({selectedVertexIndex:-1,selectedVertexType:null}))}},Q=()=>{var e=S.pop();if(e){var t=k.selectedVertexIndex,r=b(C,e);z();var n,o=t>=0?r:-1;if(D({selectedVertexIndex:o,selectedVertexType:o>=0?"vertex":null}),t>=0&&o>=0)null===(n=P)||void 0===n||n()}},Z=V({map:p,container:g,getState:A,setState:D,colors:x.colors,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"}),Z.updateTargetPosition()},onTap(e){if(e){if("vertex"===e.type)return D({selectedVertexIndex:e.index,selectedVertexType:"vertex"}),void Z.updateTargetPosition();if("midpoint"===e.type){var t=h(C,k.midpoints,e.index,k.vertices.length);if(!t)return;S.push({type:"insert_vertex",vertexIndex:t.insertedIndex}),z(),D({selectedVertexIndex:t.insertedIndex,selectedVertexType:"vertex"}),Z.updateTargetPosition()}}else D({selectedVertexIndex:-1,selectedVertexType:null})}});M=()=>Z.hide(),P=()=>{"touch"===k.interfaceType&&Z.updateTargetPosition()};var $=()=>{"touch"!==k.interfaceType||k.selectedVertexIndex<0||p.once("postrender",()=>Z.updateTargetPosition())};p.on("change:size",$);var ee=(e=>L(e))({map:p,getState:A,setState:D,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"})},onInserted(e){var{insertedIndex:t}=e;S.push({type:"insert_vertex",vertexIndex:t}),z()},onDeleted:q,onUndo:Q,onKeyboardActive(){"keyboard"!==k.interfaceType&&(k.interfaceType="keyboard",Z.hide(),g.focus({preventScroll:!0}))}});return{setInterfaceType(e){e!==k.interfaceType&&(k.interfaceType=e,"touch"===e?Z.updateTargetPosition():Z.hide())},done(){x.emit("editfinish",w.toGeoJSON(C))},cancel(){},undo:Q,deleteVertex:q,destroy(){C.setStyle(E),C.getGeometry().un("change",N),x.off("styleschanged",U),g.removeEventListener("pointerdown",J),g.removeEventListener("pointerenter",H),g.removeEventListener("pointermove",H),g.removeEventListener("click",K),globalThis.removeEventListener("click",W),p.un("change:size",$),p.removeInteraction(O),Y.clear(),p.removeLayer(B),_.remove(),X.remove(),Z.destroy(),ee.destroy()}}};export{k as createEditMode};
+import e from"ol/interaction/Modify.js";import t from"ol/Collection.js";import r from"ol/source/Vector.js";import n from"ol/layer/Vector.js";import o from"ol/Feature.js";import a from"ol/geom/Point.js";import{a as i,g as d,b as l,d as s,e as c,c as v,p,f as x,n as u}from"./geometryHelpers.js";var y=(e,t)=>{e&&(e.style.setProperty("--draw-halo",t.editActive),e.style.setProperty("--draw-bg",t.editHalo),e.style.setProperty("--draw-primary",t.editVertex))},g=(e,t)=>{t&&e&&(e.style.left="".concat(t.x,"px"),e.style.top="".concat(t.y,"px"),e.style.display="block")},m=e=>{e&&(e.style.display="none")},f=e=>{if(!e)return!1;var t=e.parentNode;return t instanceof globalThis.SVGElement||null!=(null==t?void 0:t.ownerSVGElement)},h=(e,t,r,n)=>{var o=r-n,a=t[o];if(!a)return null;var i=e.getGeometry(),d={type:i.getType(),coordinates:i.getCoordinates()},s=l(d),v=0;for(var p of s){var x=p.closed?p.length:p.length-1;if(o<v+x){var u=o-v+1,y=p.start+u;return c(d,p.path).splice(u,0,[...a]),i.setCoordinates(d.coordinates),{insertedIndex:y}}v+=x}return null},I=(e,t,r)=>{var n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,t);if(i){var d=c(o,i.segment.path);d[i.localIdx]=[...r],i.segment.closed&&0===i.localIdx&&(d[d.length-1]=[...r]),n.setCoordinates(o.coordinates)}},T=function(e,t,r,n){var o,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return null!==(o=function(e,t,r){var n=-1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:12;return t.forEach((t,a)=>{var i=v(e,t);if(i){var d=p(i,r);d<o&&(o=d,n=a)}}),n>=0?{index:n,type:"vertex"}:null}(e,t,n,a))&&void 0!==o?o:function(e,t,r,n){var o=-1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return t.forEach((t,n)=>{var i=v(e,t);if(i){var d=p(i,r);d<a&&(a=d,o=n)}}),o>=0?{index:n+o,type:"midpoint"}:null}(e,r,n,t.length,a)},V=e=>{var{map:t,container:r,getState:n,setState:o,onVertexMoved:a,onTap:i,colors:d,snap:l}=e,s=(e=>{var t=e.querySelector("[data-im-draw-touch-target]");return t||(e.insertAdjacentHTML("beforeend","\n  <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd'\n    style='display:none;position:absolute;top:0;left:0;margin:24px 0 0 -24px;cursor:grab'\n    class='im-draw-touch-target' data-im-draw-touch-target>\n    <circle cx='24' cy='24' r='24' fill='var(--draw-halo, #000)'/>\n    <path d=\"M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z\" fill='var(--draw-bg, #fff)'/>\n  </svg>\n"),t=e.querySelector("[data-im-draw-touch-target]")),t})(r);y(s,d);var c={scale:1,ox:0,oy:0},p=e=>({x:e.x*c.scale+c.ox,y:e.y*c.scale+c.oy}),u=()=>{var e=t.getViewport(),n=e.getBoundingClientRect(),o=r.getBoundingClientRect(),a=e.offsetWidth>0?n.width/e.offsetWidth:1,i=r.offsetWidth>0?o.width/r.offsetWidth:1;Object.assign(c,{scale:a/i,ox:(n.left-o.left)/i,oy:(n.top-o.top)/i})},h=(e=>{var{container:t,map:r,targetEl:n,olToCSS:o,cssToOl:a,getState:i,setState:d,onVertexMoved:l,onTap:s,snap:c}=e,p=null,u=null,y=null,m=null,h=null,V=e=>{var t=e.touches[0],o=f(e.target);if(h={x:t.clientX,y:t.clientY,time:Date.now(),onTarget:o},o){var{selectedVertexIndex:d,vertices:l}=i(),s=l[d];if(s){var c=r.getEventPixel({clientX:t.clientX,clientY:t.clientY}),x=v(r,s),g=getComputedStyle(n),I=a({x:Number.parseFloat(g.left),y:Number.parseFloat(g.top)});p=[...s],u=d,y={x:c[0]-x.x,y:c[1]-x.y},m={x:c[0]-I.x,y:c[1]-I.y},e.preventDefault()}}},w=e=>{if(f(e.target)&&null!=u){e.preventDefault();var t=r.getEventPixel({clientX:e.touches[0].clientX,clientY:e.touches[0].clientY}),a=x(r,{x:t[0]-y.x,y:t[1]-y.y}),l=c?c.apply(a):a;null==c||c.hideIndicator();var{olFeature:s,vertices:v}=i();s&&(I(s,u,l),d({vertices:v.map((e,t)=>t===u?l:e)}),g(n,o({x:t[0]-m.x,y:t[1]-m.y})))}},S=e=>{if(null!=u){h=null;var{vertices:t}=i();t[u]&&p&&l({vertexIndex:u,previousCoord:p}),null==c||c.hideIndicator(),p=null,u=null,y=null,m=null,e.preventDefault()}else{if(h&&!h.onTarget&&e.changedTouches.length>0){var n=e.changedTouches[0],o=Date.now()-h.time;if(Math.hypot(n.clientX-h.x,n.clientY-h.y)<10&&o<400){var a=r.getEventPixel({clientX:n.clientX,clientY:n.clientY}),d=i();null==s||s(T(r,d.vertices,d.midpoints,{x:a[0],y:a[1]},24)),e.preventDefault()}}h=null}};return t.addEventListener("touchstart",V,{passive:!1}),t.addEventListener("touchmove",w,{passive:!1}),t.addEventListener("touchend",S,{passive:!1}),{isDragging:()=>null!=u,destroy(){t.removeEventListener("touchstart",V),t.removeEventListener("touchmove",w),t.removeEventListener("touchend",S)}}})({container:r,map:t,targetEl:s,olToCSS:p,cssToOl:e=>({x:(e.x-c.ox)/c.scale,y:(e.y-c.oy)/c.scale}),getState:n,setState:o,onVertexMoved:a,onTap:i,snap:l}),V=()=>{var{selectedVertexIndex:e,vertices:r,interfaceType:o}=n();if(e<0||!r[e]||"touch"!==o)m(s);else{var a=v(t,r[e]);a?g(s,p(a)):m(s)}},w=()=>{var{selectedVertexIndex:e,interfaceType:t}=n();e>=0&&!h.isDragging()&&"touch"===t&&V()};t.on("postrender",w);var S=()=>{u(),t.once("postrender",V)};return t.on("change:size",S),u(),{updateTargetPosition:V,updateColors(e){y(s,e)},hide(){m(s)},destroy(){t.un("change:size",S),t.un("postrender",w),h.destroy(),m(s)}}},w=(e,t,r)=>{var n=t.filter(t=>{var n=Math.abs(t[0]-e[0]),o=Math.abs(t[1]-e[1]);return("ArrowUp"===r?t[1]<=e[1]&&o>=n:"ArrowDown"===r?t[1]>e[1]&&o>=n:"ArrowLeft"===r?t[0]<=e[0]&&o<n:"ArrowRight"!==r||t[0]>e[0]&&o<n)&&JSON.stringify(t)!==JSON.stringify(e)});n.length||n.push(e);var o=t=>Math.hypot(e[0]-t[0],e[1]-t[1]),a=n.reduce((e,t)=>o(t)<o(e)?t:e,n[0]);return t.findIndex(e=>JSON.stringify(e)===JSON.stringify(a))},S=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),C=new Set(["INPUT","TEXTAREA","BUTTON","SELECT","A"]),E=e=>{var{map:t,snap:r,getState:n,setState:o,onInserted:a}=e,i={start:null,index:null};return{nudge:e=>{var{selectedVertexIndex:d,selectedVertexType:l,vertices:s,midpoints:c,olFeature:v}=n();if(v){var p=e.shiftKey?1:5,x={ArrowUp:[0,-p],ArrowDown:[0,p],ArrowLeft:[-p,0],ArrowRight:[p,0]},[y,g]=x[e.key];if("midpoint"!==l){if(!(d<0)&&s[d]){var m=s[d];i.start||(i.start=[...m],i.index=d);var f=u(t,m,y,g),T=r?r.apply(f):f;null==r||r.hideIndicator();var V=((e,t,r,n,o,a,i)=>{if(!e)return o;var d=[n[0]-r[0],n[1]-r[1]],l=[o[0]-r[0],o[1]-r[1]],s=d[0]**2+d[1]**2;if(s>0&&(l[0]*d[0]+l[1]*d[1])/s<.5){var c=e.snapRadius+1;return u(t,r,0===a?0:Math.sign(a)*c,0===i?0:Math.sign(i)*c)}return o})(r,t,m,f,T,y,g);I(v,d,V),o({vertices:s.map((e,t)=>t===d?V:e)})}}else((e,d,l,s,c,v)=>{var p=h(e,d,l,s.length);if(p){a({insertedIndex:p.insertedIndex});var x=n().vertices,y=x[p.insertedIndex];if(y){i.start=[...y],i.index=p.insertedIndex;var g=u(t,y,c,v),m=r?r.apply(g):g;I(e,p.insertedIndex,m),o({selectedVertexIndex:p.insertedIndex,selectedVertexType:"vertex",vertices:x.map((e,t)=>t===p.insertedIndex?m:e)})}}})(v,c,d,s,y,g)}},keyMove:i}},L=e=>{var t,{map:r,snap:n,getState:o,setState:a,onVertexMoved:i,onInserted:d,onDeleted:l,onUndo:s,onKeyboardActive:c}=e,{nudge:p,keyMove:x}=E({map:r,snap:n,getState:o,setState:a,onInserted:d}),u=null!==(t=r.getViewport().closest('[role="application"]'))&&void 0!==t?t:r.getViewport(),y=()=>(e=>{var t=document.activeElement;if(!t||t===document.body)return!1;if(e.contains(t))return!1;var r=t.tagName;return C.has(r)||t.isContentEditable||t.hasAttribute("tabindex")})(u),g=e=>{e.altKey?(e.preventDefault(),e.stopPropagation(),((e,t,r,n)=>{var{selectedVertexIndex:o,vertices:a,midpoints:i}=r();if(a.length){var d,l=[...a,...i].map(e=>v(t,e)).filter(Boolean).map(e=>[e.x,e.y]),s=o>=0?l[o]:(d=v(t,t.getView().getCenter()))?[d.x,d.y]:null;if(s){var c=w(s,l,e);n({selectedVertexIndex:c,selectedVertexType:c<a.length?"vertex":"midpoint"})}}})(e.key,r,o,a)):o().selectedVertexIndex>=0&&(e.preventDefault(),e.stopPropagation(),p(e))},m=e=>{if(null==c||c()," "===e.key)e.preventDefault(),o().selectedVertexIndex<0&&((e,t,r)=>{var{vertices:n,midpoints:o}=t();if(n.length){var a=e.getView().getCenter(),i=v(e,a);if(i){var d=[...n.map(t=>v(e,t)),...o.map(t=>v(e,t))].filter(Boolean).map(e=>[e.x,e.y]),l=w([i.x,i.y],d,void 0);r({selectedVertexIndex:l,selectedVertexType:l<n.length?"vertex":"midpoint"})}}})(r,o,a);else if(S.has(e.key))g(e);else if("z"===e.key&&(e.metaKey||e.ctrlKey)){var t,n=null===(t=document.activeElement)||void 0===t?void 0:t.tagName;C.has(n)||(e.preventDefault(),e.stopPropagation(),s())}},f=e=>{y()||("Escape"===e.key&&o().selectedVertexIndex>=0?(e.preventDefault(),x.start=null,x.index=null,a({selectedVertexIndex:-1,selectedVertexType:null})):m(e))},h=e=>{y()||(S.has(e.key)&&x.start&&null!=x.index&&(null==n||n.hideIndicator(),i({vertexIndex:x.index,previousCoord:x.start}),x.start=null,x.index=null),"Delete"===e.key&&l())};return window.addEventListener("keydown",f,{capture:!0}),window.addEventListener("keyup",h,{capture:!0}),{destroy(){window.removeEventListener("keydown",f,{capture:!0}),window.removeEventListener("keyup",h,{capture:!0})}}},b=(e,t)=>{switch(t.type){case"move_vertex":return((e,t)=>{var{vertexIndex:r,previousCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)return-1;var v=c(a,d.segment.path);return v[d.localIdx]=[...n],d.segment.closed&&0===d.localIdx&&(v[v.length-1]=[...n]),o.setCoordinates(a.coordinates),r})(e,t);case"insert_vertex":return((e,t)=>{var{vertexIndex:r}=t,n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,r);if(!i)return-1;var d=c(o,i.segment.path);return d.splice(i.localIdx,1),i.segment.closed&&(d[d.length-1]=[...d[0]]),n.setCoordinates(o.coordinates),-1})(e,t);case"delete_vertex":return((e,t)=>{var{vertexIndex:r,deletedCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)for(var v of i)if(r===v.start+v.length){d={segment:v,localIdx:v.length};break}if(!d)return-1;var p=c(a,d.segment.path);return p.splice(d.localIdx,0,[...n]),d.segment.closed&&(p[p.length-1]=[...p[0]]),o.setCoordinates(a.coordinates),r})(e,t);default:return-1}},k=v=>{var{map:p,manager:x,options:u}=v,{featureId:y,container:g,interfaceType:m,deleteVertexButtonId:f,snap:I}=u,{store:w,undoStack:S}=x,C=w.getOL(y);if(!C)return null;var E=C.getStyle();C.setStyle(x.styles.editFeatureStyle);var k={olFeature:C,selectedVertexIndex:-1,selectedVertexType:null,vertices:[],midpoints:[],interfaceType:null!=m?m:"mouse"},A=()=>k,M=null,P=null,D=e=>{if(Object.assign(k,e),void 0!==e.selectedVertexIndex){var t;if(X.setSelected("vertex"===k.selectedVertexType?k.selectedVertexIndex:-1),_.setSelected("midpoint"===k.selectedVertexType?k.selectedVertexIndex-k.vertices.length:-1),k.selectedVertexIndex<0)null===(t=M)||void 0===t||t();R(),x.emit("vertexselection",{index:"vertex"===k.selectedVertexType?k.selectedVertexIndex:-1,numVertices:k.vertices.length})}if(void 0!==e.vertices){var r,n={type:C.getGeometry().getType(),coordinates:C.getGeometry().getCoordinates()};_.update(n),X.update(n),k.midpoints=_.getCoords(),R(),null===(r=P)||void 0===r||r(),p.render()}},G=()=>{var e=C.getGeometry(),t={type:e.getType(),coordinates:e.getCoordinates()};k.vertices=d(t),k.midpoints=i(t),_.update(t),X.update(t),R()},z=()=>{G(),x.emit("vertexchange",{numVertices:k.vertices.length}),x.emit("update",w.toGeoJSON(C))},N=()=>G();C.getGeometry().on("change",N);var F=new t([C]),O=new e({features:F,style:()=>[],pixelTolerance:12,condition:e=>{if("touch"===k.interfaceType)return!1;var t=p.getEventPixel(e.originalEvent);return null!==T(p,k.vertices,k.midpoints,{x:t[0],y:t[1]})}});p.addInteraction(O);var j=null;O.on("modifystart",()=>{"touch"!==k.interfaceType&&(j=k.vertices.map(e=>[...e]))}),O.on("modifyend",()=>{if("touch"!==k.interfaceType){var e=j;if(z(),e){var t=k.vertices;if(t.length>e.length){var r=t.findIndex((t,r)=>!e[r]||t[0]!==e[r][0]),n=Math.max(0,r);S.push({type:"insert_vertex",vertexIndex:n}),D({selectedVertexIndex:n,selectedVertexType:"vertex"})}else if(t.length===e.length){var o=t.findIndex((t,r)=>t[0]!==e[r][0]||t[1]!==e[r][1]);o>=0&&(S.push({type:"move_vertex",vertexIndex:o,previousCoord:e[o]}),D({selectedVertexIndex:o,selectedVertexType:"vertex"}))}j=null}}});var _=((e,t)=>{var d=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("midpointIndex")===l?null:[d],zIndex:101});return e.addLayer(c),{update(e){s.clear();var t=i(e).map((e,t)=>{var r=new o({geometry:new a(e)});return r.set("midpointIndex",t),r});s.addFeatures(t)},setSelected(e){l=e,s.changed()},updateStyle(e){d=e,s.changed()},getCoords:()=>s.getFeatures().sort((e,t)=>e.get("midpointIndex")-t.get("midpointIndex")).map(e=>e.getGeometry().getCoordinates()),remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.midpointStyle),X=((e,t)=>{var i=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("vertexIndex")===l?null:[i],zIndex:102});return e.addLayer(c),{update(e){s.clear(),d(e).forEach((e,t)=>{var r=new o({geometry:new a(e)});r.set("vertexIndex",t),s.addFeature(r)})},setSelected(e){l=e,s.changed()},updateStyle(e){i=e,s.changed()},remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.vertexStyle),Y=new r,B=new n({source:Y,zIndex:103});p.addLayer(B);var R=()=>{Y.clear();var{selectedVertexIndex:e,selectedVertexType:t,vertices:r,midpoints:n}=k;if(!(e<0)){var i,d;if("vertex"===t)i=r[e],d=x.styles.selectedVertexStyle;else{if("midpoint"!==t)return;i=n[e-r.length],d=x.styles.selectedMidpointStyle}if(i){var l=new o({geometry:new a(i)});l.setStyle(d),Y.addFeature(l)}}};z();var U=e=>{C.setStyle(e.editFeatureStyle),X.updateStyle(e.vertexStyle),_.updateStyle(e.midpointStyle),R(),Z.updateColors(x.colors)};x.on("styleschanged",U);var J=e=>{if("touch"===e.pointerType)return k.interfaceType="touch",void Z.updateTargetPosition();k.interfaceType="mouse";var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)&&D({selectedVertexIndex:n.index,selectedVertexType:"vertex"})},K=e=>{if("touch"!==k.interfaceType){var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)?D({selectedVertexIndex:n.index,selectedVertexType:"vertex"}):"midpoint"===(null==n?void 0:n.type)||D({selectedVertexIndex:-1,selectedVertexType:null})}},H=e=>{"mouse"===e.pointerType&&"mouse"!==k.interfaceType&&(k.interfaceType="mouse",Z.hide())};g.addEventListener("pointerdown",J),g.addEventListener("pointerenter",H),g.addEventListener("pointermove",H),g.addEventListener("click",K);var W=e=>{f&&e.target.closest("#".concat(f))&&q()};globalThis.addEventListener("click",W);var q=()=>{if(!("vertex"!==k.selectedVertexType||k.selectedVertexIndex<0)){var e=((e,t)=>{var r=e.getGeometry(),n={type:r.getType(),coordinates:r.getCoordinates()},o=d(n),a=l(n),i=s(a,t);if(!i)return null;var{segment:v}=i,p=v.closed?3:2;if(v.length<=p)return null;var x=[...o[t]],u=c(n,v.path);return u.splice(i.localIdx,1),v.closed&&(u[u.length-1]=[...u[0]]),r.setCoordinates(n.coordinates),{deletedIndex:t,deletedCoord:x}})(C,k.selectedVertexIndex);e&&(S.push({type:"delete_vertex",vertexIndex:e.deletedIndex,deletedCoord:e.deletedCoord}),z(),D({selectedVertexIndex:-1,selectedVertexType:null}))}},Q=()=>{var e=S.pop();if(e){var t=k.selectedVertexIndex,r=b(C,e);z();var n,o=t>=0?r:-1;if(D({selectedVertexIndex:o,selectedVertexType:o>=0?"vertex":null}),t>=0&&o>=0)null===(n=P)||void 0===n||n()}},Z=V({map:p,container:g,getState:A,setState:D,colors:x.colors,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"}),Z.updateTargetPosition()},onTap(e){if(e){if("vertex"===e.type)return D({selectedVertexIndex:e.index,selectedVertexType:"vertex"}),void Z.updateTargetPosition();if("midpoint"===e.type){var t=h(C,k.midpoints,e.index,k.vertices.length);if(!t)return;S.push({type:"insert_vertex",vertexIndex:t.insertedIndex}),z(),D({selectedVertexIndex:t.insertedIndex,selectedVertexType:"vertex"}),Z.updateTargetPosition()}}else D({selectedVertexIndex:-1,selectedVertexType:null})}});M=()=>Z.hide(),P=()=>{"touch"===k.interfaceType&&Z.updateTargetPosition()};var $=()=>{"touch"!==k.interfaceType||k.selectedVertexIndex<0||p.once("postrender",()=>Z.updateTargetPosition())};p.on("change:size",$);var ee=(e=>L(e))({map:p,getState:A,setState:D,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"})},onInserted(e){var{insertedIndex:t}=e;S.push({type:"insert_vertex",vertexIndex:t}),z()},onDeleted:q,onUndo:Q,onKeyboardActive(){"keyboard"!==k.interfaceType&&(k.interfaceType="keyboard",Z.hide(),g.focus({preventScroll:!0}))}});return{setInterfaceType(e){e!==k.interfaceType&&(k.interfaceType=e,"touch"===e?Z.updateTargetPosition():Z.hide())},done(){x.emit("editfinish",w.toGeoJSON(C))},cancel(){},undo:Q,deleteVertex:q,destroy(){C.setStyle(E),C.getGeometry().un("change",N),x.off("styleschanged",U),g.removeEventListener("pointerdown",J),g.removeEventListener("pointerenter",H),g.removeEventListener("pointermove",H),g.removeEventListener("click",K),globalThis.removeEventListener("click",W),p.un("change:size",$),p.removeInteraction(O),Y.clear(),p.removeLayer(B),_.remove(),X.remove(),Z.destroy(),ee.destroy()}}};export{k as createEditMode};