@defra/interactive-map 0.0.4-alpha → 0.0.6-alpha

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

@@ -1,33 +1,24 @@
 import DirectSelect from '../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/direct_select.js'
-import { spatialNavigate } from '../utils/spatial.js'
 import {
   getSnapInstance, isSnapActive, isSnapEnabled, getSnapLngLat,
   getSnapRadius, triggerSnapAtPoint, clearSnapIndicator, clearSnapState
 } from '../utils/snapHelpers.js'
-
-const ARROW_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
+import { getCoords, coordPathToFlatIndex } from './editVertex/geometryHelpers.js'
+import { scalePoint } from './editVertex/helpers.js'
+import { undoHandlers } from './editVertex/undoHandlers.js'
+import { touchHandlers } from './editVertex/touchHandlers.js'
+import { vertexOperations } from './editVertex/vertexOperations.js'
+import { vertexQueries } from './editVertex/vertexQueries.js'
+
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
 const ARROW_OFFSETS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
-const NUDGE = 1, STEP = 5
-
-const touchVertexTarget = `
-  <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd' style='display:none;position:absolute;top:50%;left:50%;margin:24px 0 0 -24px' class='touch-vertex-target' data-touch-vertex-target>
-    <circle cx='24' cy='24' r='24' fill='currentColor'/>
-    <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="#fff"/>
-  </svg>
-`
-
-const scalePoint = (point, scale) => ({ x: point.x * scale, y: point.y * scale })
-const isOnSVG = (el) => el instanceof window.SVGElement || el.ownerSVGElement
-
-// Helper to get flat coordinates array from feature (handles both Polygon and LineString)
-const getCoords = (feature) => feature?.type === 'LineString' ? feature.coordinates : feature?.coordinates?.flat(1)
-
-// Helper to get the modifiable coordinates array from geojson (for undo operations)
-const getModifiableCoords = (geojson) =>
-  geojson.geometry.type === 'Polygon' ? geojson.geometry.coordinates[0] : geojson.geometry.coordinates
 
 export const EditVertexMode = {
   ...DirectSelect,
+  ...undoHandlers,
+  ...touchHandlers,
+  ...vertexOperations,
+  ...vertexQueries,
 
   onSetup(options) {
     const state = DirectSelect.onSetup.call(this, options)
@@ -41,6 +32,7 @@ export const EditVertexMode = {
       featureId: state.featureId || options.featureId,
       selectedVertexIndex: options.selectedVertexIndex ?? -1,
       selectedVertexType: options.selectedVertexType,
+      coordPath: options.coordPath,
       scale: options.scale ?? 1
     })
 
@@ -53,7 +45,23 @@ export const EditVertexMode = {
     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.addTouchVertexTarget(state)
 
@@ -108,14 +116,17 @@ export const EditVertexMode = {
 
   onSelectionChange(state, e) {
     const vertexCoord = e.points[e.points.length - 1]?.geometry.coordinates
-    const geom = e.features[0].geometry
-    const coords = getCoords(geom)
-    const idx = coords.findIndex(c => vertexCoord && c[0] === vertexCoord[0] && c[1] === vertexCoord[1])
 
     // Only update selectedVertexIndex from event if not keyboard mode AND event has valid vertex
-    if (state.interfaceType !== 'keyboard' && idx >= 0) {
-      state.selectedVertexIndex = idx
+    // For keyboard mode or when we have coordPath, trust the existing selectedVertexIndex
+    if (state.interfaceType !== 'keyboard' && vertexCoord && !state.coordPath) {
+      // No coordPath available - need to search for vertex by coordinates
+      const geom = e.features[0]?.geometry
+      const coords = getCoords(geom)
+      state.selectedVertexIndex = this.findVertexIndex(coords, vertexCoord, state.selectedVertexIndex)
     }
+    // If we have coordPath, selectedVertexIndex is already correct from onTap/changeMode
+
     state.selectedVertexType ??= state.selectedVertexIndex >= 0 ? 'vertex' : null
 
     this.map.fire('draw.vertexselection', {
@@ -164,7 +175,7 @@ export const EditVertexMode = {
       return this.updateVertex(state)
     }
 
-    if (!e.altKey && ARROW_KEYS.includes(e.key) && state.selectedVertexIndex >= 0) {
+    if (!e.altKey && ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
       e.preventDefault()
       e.stopPropagation()
       if (state.selectedVertexType === 'midpoint') {
@@ -210,7 +221,7 @@ export const EditVertexMode = {
       return this.moveVertex(state, newCoord)
     }
 
-    if (e.altKey && ARROW_KEYS.includes(e.key) && state.selectedVertexIndex >= 0) {
+    if (e.altKey && ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
       e.preventDefault()
       e.stopPropagation()
       return this.updateVertex(state, e.key)
@@ -234,7 +245,7 @@ export const EditVertexMode = {
 
   onKeyup(state, e) {
     state.interfaceType = 'keyboard'
-    if (ARROW_KEYS.includes(e.key) && state.selectedVertexIndex >= 0) {
+    if (ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
       e.stopPropagation()
 
       // Push undo for keyboard move sequence
@@ -264,11 +275,13 @@ export const EditVertexMode = {
       state.dragMoving = false
       DirectSelect.onMouseDown.call(this, state, e)
 
-      // Save starting position for undo (only for vertices, not midpoints)
+      // Update selection state for vertex clicks (so onSelectionChange has correct context)
       if (meta === 'vertex' && coordPath) {
-        // Extract vertex index from coord_path (e.g., "0.2" -> 2 for Polygon, "2" -> 2 for LineString)
-        const parts = coordPath.split('.')
-        const vertexIndex = Number.parseInt(parts[parts.length - 1], 10)
+        const feature = this.getFeature(state.featureId)
+        const vertexIndex = coordPathToFlatIndex(feature, coordPath)
+        state.selectedVertexIndex = vertexIndex
+        state.selectedVertexType = 'vertex'
+        state.coordPath = coordPath
         const vertex = state.vertecies?.[vertexIndex]
         if (vertex) {
           state._moveStartPosition = [...vertex]
@@ -278,9 +291,8 @@ export const EditVertexMode = {
     }
     if (meta === 'midpoint') {
       // DirectSelect converts midpoint to vertex - track this as an insert
-      // Get the new vertex index (midpoint at position N becomes vertex at N+1)
-      const parts = coordPath.split('.')
-      const insertedIndex = Number.parseInt(parts[parts.length - 1], 10)
+      const feature = this.getFeature(state.featureId)
+      const insertedIndex = coordPathToFlatIndex(feature, coordPath)
 
       // Track this insertion for undo (will be pushed on mouseUp if drag occurred)
       state._insertedVertexIndex = insertedIndex
@@ -288,6 +300,7 @@ export const EditVertexMode = {
 
       state.selectedVertexIndex = this.getVertexIndexFromMidpoint(state, coordPath)
       state.selectedVertexType = 'vertex'
+      state.coordPath = null // Clear coordPath for midpoints
       this.map.fire('draw.vertexselection', { index: state.selectedVertexIndex, numVertecies: state.vertecies.length })
     }
   },
@@ -344,108 +357,6 @@ export const EditVertexMode = {
     DirectSelect.onMouseUp.call(this, state, e)
   },
 
-  onPointerevent(state, e) {
-    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'pointer'
-    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 })
-    }
-  },
-
-  // Empty stubs required by DirectSelect
-  onTouchStart() {},
-  onTouchMove() {},
-  onTouchEnd() {},
-
-  onTouchend(state) {
-    clearSnapState(getSnapInstance(this.map))
-    if (state?.featureId) {
-      this.syncVertices(state)
-
-      // Push undo for the move if touch actually moved
-      if (state._touchMoved && state._moveStartPosition && state._moveStartIndex !== undefined) {
-        this.pushUndo({
-          type: 'move_vertex',
-          featureId: state.featureId,
-          vertexIndex: state._moveStartIndex,
-          previousPosition: state._moveStartPosition
-        })
-      }
-      state._moveStartPosition = null
-      state._moveStartIndex = undefined
-      state._touchMoved = false
-    }
-  },
-
-  clickNoTarget(state) {
-    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, isPanEnabled: true })
-  },
-
-  onTap(state, e) {
-    // Hide snap indicator on any tap
-    const snap = getSnapInstance(this.map)
-    if (snap) {
-      clearSnapIndicator(snap, this.map)
-    }
-
-    const meta = e.featureTarget?.properties.meta
-    const coordPath = e.featureTarget?.properties.coord_path
-
-    if (meta === 'vertex') {
-      // Extract vertex index - handle both "0.1" (Polygon) and "1" (LineString) formats
-      const parts = coordPath.split('.')
-      const idx = Number.parseInt(parts[parts.length - 1], 10)
-      this.changeMode(state, {
-        selectedVertexIndex: idx,
-        selectedVertexType: 'vertex', coordPath
-      })
-    } else if (meta === 'midpoint') {
-      this.insertVertex({ ...state, selectedVertexIndex: this.getVertexIndexFromMidpoint(state, coordPath), selectedVertexType: 'midpoint' })
-    } else {
-      this.clickNoTarget(state)
-    }
-  },
-
-  onTouchstart(state, e) {
-    clearSnapState(getSnapInstance(this.map))
-    const vertex = state.vertecies?.[state.selectedVertexIndex]
-    if (!vertex || !isOnSVG(e.target.parentNode)) {
-      return
-    }
-
-    // Save starting position for undo
-    state._moveStartPosition = [...vertex]
-    state._moveStartIndex = state.selectedVertexIndex
-    state._touchMoved = false
-
-    const touch = { x: e.touches[0].clientX, y: e.touches[0].clientY }
-    const style = window.getComputedStyle(state.touchVertexTarget)
-    state.deltaTarget = { x: touch.x - Number.parseFloat(style.left), y: touch.y - Number.parseFloat(style.top) }
-    const vertexPt = this.map.project(vertex)
-    state.deltaVertex = { x: (touch.x / state.scale) - vertexPt.x, y: (touch.y / state.scale) - vertexPt.y }
-  },
-
-  onTouchmove(state, e) {
-    if (state.selectedVertexIndex < 0 || !isOnSVG(e.target.parentNode)) {
-      return
-    }
-
-    state._touchMoved = true
-
-    const touch = { x: e.touches[0].clientX, y: e.touches[0].clientY }
-    const screenPt = { x: (touch.x / state.scale) - state.deltaVertex.x, y: (touch.y / state.scale) - state.deltaVertex.y }
-
-    let finalCoord = this.map.unproject(screenPt)
-    if (isSnapEnabled(state)) {
-      const snap = getSnapInstance(this.map)
-      triggerSnapAtPoint(snap, this.map, screenPt)
-      finalCoord = getSnapLngLat(snap) || finalCoord
-    }
-
-    this.moveVertex(state, finalCoord)
-    this.updateTouchVertexTarget(state, { x: touch.x - state.deltaTarget.x, y: touch.y - state.deltaTarget.y })
-  },
-
   onDrag(state, e) {
     if (state.interfaceType === 'touch') {
       return
@@ -493,194 +404,8 @@ export const EditVertexMode = {
     }
   },
 
-  handleUndo(state) {
-    const undoStack = this.map._undoStack
-    if (!undoStack || undoStack.length === 0) {
-      return
-    }
-
-    const op = undoStack.pop()
-
-    if (op.type === 'move_vertex') {
-      this.undoMoveVertex(state, op)
-    } else if (op.type === 'insert_vertex') {
-      this.undoInsertVertex(state, op)
-    } else if (op.type === 'delete_vertex') {
-      this.undoDeleteVertex(state, op)
-    } else {
-      // No action
-    }
-  },
-
-  // Utility methods
-  getCoordPath(state, idx) {
-    // Use cached featureType or look it up
-    const type = state.featureType || this.getFeature(state.featureId)?.type
-    return type === 'LineString' ? `${idx}` : `0.${idx}`
-  },
-
-  syncVertices(state) {
-    state.vertecies = this.getVerticies(state.featureId)
-    state.midpoints = this.getMidpoints(state.featureId)
-  },
-
-  getVerticies(featureId) {
-    return getCoords(this.getFeature(featureId)) || []
-  },
-
-  getMidpoints(featureId) {
-    const feature = this.getFeature(featureId)
-    const coords = getCoords(feature)
-    if (!coords) {
-      return []
-    }
-
-    // For lines, don't create midpoint between last and first vertex
-    const count = feature.type === 'LineString' ? coords.length - 1 : coords.length
-    const midpoints = []
-    for (let i = 0; i < count; i++) {
-      const next = coords[(i + 1) % coords.length]
-      midpoints.push([(coords[i][0] + next[0]) / 2, (coords[i][1] + next[1]) / 2])
-    }
-    return midpoints
-  },
-
-  getVertexOrMidpoint(state, direction) {
-    // Ensure vertices and midpoints are populated
-    if (!state.vertecies?.length) {
-      state.vertecies = this.getVerticies(state.featureId)
-      state.midpoints = this.getMidpoints(state.featureId)
-    }
-    if (!state.vertecies?.length) {
-      return [-1, null]
-    }
-    const project = (p) => p ? Object.values(this.map.project(p)) : null
-    const pixels = [...state.vertecies.map(project), ...state.midpoints.map(project)].filter(Boolean)
-    if (!pixels.length) {
-      return [-1, null]
-    }
-    const start = pixels[state.selectedVertexIndex] || Object.values(this.map.project(this.map.getCenter()))
-    const idx = spatialNavigate(start, pixels, direction)
-    return [idx, idx < state.vertecies.length ? 'vertex' : 'midpoint']
-  },
-
-  getVertexIndexFromMidpoint(state, coordPath) {
-    // Handle both "0.1" (Polygon) and "1" (LineString) formats
-    const parts = coordPath.split('.')
-    const afterIdx = Number.parseInt(parts[parts.length - 1], 10)
-
-    // Get feature type from cache or look it up
-    const featureType = state.featureType || this.getFeature(state.featureId)?.type
-
-    // For LineString, coord_path is insertion position (1-indexed), so subtract 1 for midpoint array index
-    // For Polygon, adjust for ring wrapping
-    if (featureType === 'LineString') {
-      return state.vertecies.length + (afterIdx - 1)
-    }
-    return state.vertecies.length + ((afterIdx - 1 + state.vertecies.length) % state.vertecies.length)
-  },
-
-  addTouchVertexTarget(state) {
-    let el = state.container.querySelector('[data-touch-vertex-target]')
-    if (!el) {
-      state.container.insertAdjacentHTML('beforeend', touchVertexTarget)
-      el = state.container.querySelector('[data-touch-vertex-target]')
-    }
-    state.touchVertexTarget = el
-  },
-
-  updateTouchVertexTarget(state, point) {
-    if (point && state.interfaceType === 'touch' && state.selectedVertexIndex >= 0) {
-      Object.assign(state.touchVertexTarget.style, { display: 'block', top: `${point.y}px`, left: `${point.x}px` })
-    } else {
-      state.touchVertexTarget.style.display = 'none'
-    }
-  },
-
-  hideTouchVertexIndicator(state) {
-    state.touchVertexTarget.style.display = 'none'
-  },
-
-  updateMidpoint(coordinates) {
-    setTimeout(() => {
-      this.map.getSource('mapbox-gl-draw-hot').setData({
-        type: 'Feature',
-        properties: { meta: 'midpoint', active: 'true', id: 'active-midpoint' },
-        geometry: { type: 'Point', coordinates }
-      })
-    }, 0)
-  },
-
-  updateVertex(state, direction) {
-    const [idx, type] = this.getVertexOrMidpoint(state, direction)
-    if (idx < 0 || !type) {
-      return
-    }
-    this.changeMode(state, { selectedVertexIndex: idx, selectedVertexType: type, ...(type === 'vertex' && { coordPath: this.getCoordPath(state, idx) }) })
-  },
-
-  getOffset(coord, e) {
-    const pt = this.map.project(coord)
-    const offset = e?.shiftKey ? NUDGE : STEP
-    const [dx, dy] = e ? ARROW_OFFSETS[e.key].map(v => v * offset) : [0, 0]
-    return this.map.unproject({ x: pt.x + dx, y: pt.y + dy })
-  },
-
-  getNewCoord(state, e) {
-    return this.getOffset(getCoords(this.getFeature(state.featureId))[state.selectedVertexIndex], e)
-  },
-
-  insertVertex(state, e) {
-    const midIdx = state.selectedVertexIndex - state.vertecies.length
-    const newCoord = this.getOffset(state.midpoints[midIdx], e)
-    const geojson = this.getFeature(state.featureId).toGeoJSON()
-    const newIdx = midIdx + 1
-    getModifiableCoords(geojson).splice(newIdx, 0, [newCoord.lng, newCoord.lat])
-    this._ctx.api.add(geojson)
-
-    this.pushUndo({ type: 'insert_vertex', featureId: state.featureId, vertexIndex: newIdx })
-    this.changeMode(state, { selectedVertexIndex: newIdx, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, newIdx) })
-  },
-
-  moveVertex(state, coord, options = {}) {
-    if (options.checkSnap && state.enableSnap !== false) {
-      const snap = this.map._snapInstance
-      if (snap?.snapStatus && snap.snapCoords?.length >= 2) {
-        coord = { lng: snap.snapCoords[0], lat: snap.snapCoords[1] }
-      }
-    }
-    const geojson = this.getFeature(state.featureId).toGeoJSON()
-    getModifiableCoords(geojson)[state.selectedVertexIndex] = [coord.lng, coord.lat]
-    this._ctx.api.add(geojson)
-    state.vertecies = this.getVerticies(state.featureId)
-
-    this.map.fire('draw.geometrychange', state.feature)
-  },
-
-  deleteVertex(state) {
-    const featureType = state.featureType || this.getFeature(state.featureId)?.type
-    // Minimum vertices: 3 for Polygon, 2 for LineString
-    const minVertices = featureType === 'Polygon' ? 3 : 2
-    if (state.vertecies.length <= minVertices) {
-      return
-    }
-
-    // Save position for undo before deletion
-    const deletedPosition = [...state.vertecies[state.selectedVertexIndex]]
-    const deletedIndex = state.selectedVertexIndex
-
-    const nextIdx = state.selectedVertexIndex >= state.vertecies.length - 1 ? state.selectedVertexIndex - 1 : state.selectedVertexIndex
-    this._ctx.api.trash()
-
-    // Push undo operation
-    this.pushUndo({
-      type: 'delete_vertex',
-      featureId: state.featureId,
-      vertexIndex: deletedIndex,
-      position: deletedPosition
-    })
-
-    this.changeMode(state, { selectedVertexIndex: nextIdx, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, nextIdx) })
+  clickNoTarget(state) {
+    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, isPanEnabled: true })
   },
 
   // Prevent selecting other features
@@ -691,86 +416,6 @@ export const EditVertexMode = {
     this._ctx.api.changeMode('edit_vertex', { ...state, ...updates })
   },
 
-  // Fire geometry change event (for external listeners)
-  fireGeometryChange(state) {
-    const feature = this.getFeature(state.featureId)
-    if (feature) {
-      this.map.fire('draw.update', {
-        features: [feature.toGeoJSON()],
-        action: 'change_coordinates'
-      })
-    }
-  },
-
-  // Undo support
-  pushUndo(operation) {
-    const undoStack = this.map._undoStack
-    if (!undoStack) {
-      return
-    }
-    undoStack.push(operation)
-  },
-
-  undoMoveVertex(state, op) {
-    const { vertexIndex, previousPosition, featureId } = op
-    const feature = this.getFeature(featureId)
-    if (!feature) {
-      return
-    }
-
-    const geojson = feature.toGeoJSON()
-    getModifiableCoords(geojson)[vertexIndex] = previousPosition
-    this._applyUndoAndSync(state, geojson, featureId)
-
-    // Update touch vertex target position
-    const vertex = state.vertecies[state.selectedVertexIndex]
-    if (vertex) {
-      this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
-    }
-  },
-
-  undoInsertVertex(state, op) {
-    const { vertexIndex, featureId } = op
-    const feature = this.getFeature(featureId)
-    if (!feature) {
-      return
-    }
-
-    const geojson = feature.toGeoJSON()
-    getModifiableCoords(geojson).splice(vertexIndex, 1)
-    this._applyUndoAndSync(state, geojson, featureId)
-
-    this.hideTouchVertexIndicator(state)
-    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null })
-  },
-
-  undoDeleteVertex(state, op) {
-    const { vertexIndex, position, featureId } = op
-    const feature = this.getFeature(featureId)
-    if (!feature) {
-      return
-    }
-
-    const geojson = feature.toGeoJSON()
-    getModifiableCoords(geojson).splice(vertexIndex, 0, position)
-    this._applyUndoAndSync(state, geojson, featureId)
-
-    // Update touch vertex target to restored vertex position
-    const vertex = state.vertecies[vertexIndex]
-    if (vertex) {
-      this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
-    }
-    this.changeMode(state, { selectedVertexIndex: vertexIndex, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, vertexIndex) })
-  },
-
-  _applyUndoAndSync(state, geojson, featureId) {
-    this._ctx.api.add(geojson)
-    state.vertecies = this.getVerticies(featureId)
-    state.midpoints = this.getMidpoints(featureId)
-    this._ctx.store.render()
-    this.fireGeometryChange(state)
-  },
-
   onStop(state) {
     const h = this.handlers
     state.container.removeEventListener('pointerdown', h.pointerdown)

package/plugins/beta/draw-ml/src/utils/flattenStyleProperties.js

@@ -0,0 +1,49 @@
+const STYLE_PROPS = ['stroke', 'fill', 'strokeWidth']
+
+/**
+ * Flatten style properties that may be strings or variant objects
+ * keyed by style ID into flat GeoJSON-compatible properties.
+ *
+ * @param {object} props - Object containing style properties
+ * @returns {object} Flattened properties
+ *
+ * @example
+ * flattenStyleProperties({
+ *   stroke: { outdoor: '#e6c700', dark: '#ffd700' },
+ *   fill: 'rgba(255, 221, 0, 0.1)',
+ *   strokeWidth: 3
+ * })
+ * // Returns:
+ * // {
+ * //   stroke: '#e6c700',
+ * //   strokeOutdoor: '#e6c700',
+ * //   strokeDark: '#ffd700',
+ * //   fill: 'rgba(255, 221, 0, 0.1)',
+ * //   strokeWidth: 3
+ * // }
+ */
+export const flattenStyleProperties = (props) => {
+  if (!props) {
+    return {}
+  }
+
+  const result = {}
+
+  for (const [key, value] of Object.entries(props)) {
+    if (STYLE_PROPS.includes(key) && typeof value === 'object' && value !== null) {
+      const entries = Object.entries(value)
+      // First value as base fallback
+      if (entries.length > 0) {
+        result[key] = entries[0][1]
+      }
+      // Variant properties: e.g. strokeDark, fillOutdoor
+      for (const [styleId, styleValue] of entries) {
+        result[`${key}${styleId.charAt(0).toUpperCase() + styleId.slice(1)}`] = styleValue
+      }
+    } else {
+      result[key] = value
+    }
+  }
+
+  return result
+}

package/plugins/beta/frame/dist/esm/im-frame-plugin.js

@@ -1 +1 @@
-export const __webpack_esm_id__="im-frame-plugin";export const __webpack_esm_ids__=["im-frame-plugin"];export const __webpack_esm_modules__={"./plugins/beta/frame/src/manifest.js"(e,t,r){function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach(function(t){u(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function u(e,t,r){return(t=function(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}r.d(t,{manifest:()=>k}),r.r(t);var a={SET_FRAME:function(e,t){return i(i({},e),{},{frame:t})},SET_FRAME_REFS:function(e,t){return i(i({},e),{},{frameRefs:t})}},c=r("react");function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,a=[],c=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return f(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function p(e){var t;if(null==e||null===(t=e.geometry)||void 0===t||null===(t=t.coordinates)||void 0===t||!t[0])return null;var r=e.geometry.coordinates[0],n=1/0,o=1/0,i=-1/0,u=-1/0;return r.forEach(function(e){var t=l(e,2),r=t[0],a=t[1];r<n&&(n=r),r>i&&(i=r),a<o&&(o=a),a>u&&(u=a)}),[n,o,i,u]}var s=r("react/jsx-runtime");function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function m(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach(function(t){d(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function d(e,t,r){return(t=function(e){var t=function(e){if("object"!=y(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,a=[],c=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return g(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?g(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var O={aspectRatio:1,mobileWidth:"300px",tabletWidth:"360px",desktopWidth:"400px"};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach(function(t){w(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function w(e,t,r){return(t=function(e){var t=function(e){if("object"!=h(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=h(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==h(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(e)}function E(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function R(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach(function(t){x(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function x(e,t,r){return(t=function(e){var t=function(e){if("object"!=P(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=P(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==P(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?T(Object(r),!0).forEach(function(t){M(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):T(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function M(e,t,r){return(t=function(e){var t=function(e){if("object"!=_(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=_(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==_(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var A={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},k={reducer:{initialState:{frame:null,frameRefs:null},actions:a},InitComponent:function(e){var t,r,n,o,i=e.appState,u=e.mapState,a=e.mapProvider,l=e.pluginConfig,f=e.pluginState,p=e.services,s=e.buttonConfig,y=i.mode,b=i.breakpoint,m=i.layoutRefs,d=p.eventBus,v=s.frameDone,g=s.frameCancel,O=f.dispatch,h=f.frameRefs,j=f.frame,S=null===(t=null===(r=l.includeModes)||void 0===r?void 0:r.includes(y))||void 0===t||t,w=null!==(n=null===(o=l.excludeModes)||void 0===o?void 0:o.includes(y))&&void 0!==n&&n,P=u.isMapReady&&S&&!w;(0,c.useEffect)(function(){if(P)return v.onClick=function(){var e=function(e){var t=e.viewportEl,r=e.mapProvider,n=e.featureId,o=e.scale,i=e.frameEl.getBoundingClientRect(),u=t.getBoundingClientRect(),a={x:(i.left-u.left)/o,y:(i.top-u.top)/o},c={x:(i.right-u.left)/o,y:(i.top-u.top)/o},l={x:(i.right-u.left)/o,y:(i.bottom-u.top)/o},f={x:(i.left-u.left)/o,y:(i.bottom-u.top)/o},p={type:"Feature",geometry:{type:"Polygon",coordinates:[[r.screenToMap(a),r.screenToMap(c),r.screenToMap(l),r.screenToMap(f),r.screenToMap(a)]]},properties:{}};return n&&(p.id=n),p}({frameEl:h.displayRef.current,viewportEl:m.viewportRef.current,featureId:null==j?void 0:j.featureId,scale:{small:1,medium:1.5,large:2}[u.mapSize],mapProvider:a});O({type:"SET_FRAME",payload:null}),d.emit("frame:done",e)},g.onClick=function(){O({type:"SET_FRAME",payload:null}),d.emit("frame:cancel")},function(){v.onClick=null,g.onClick=null}},[u.isMapReady,y,b,j,h,m,a,O,d,v,g])},controls:[{id:"frame",label:"Frame",mobile:{slot:"middle"},tablet:{slot:"middle"},desktop:{slot:"middle"},render:function(e){var t,r=e.appState,n=e.mapState,o=e.pluginState,i=e.mapProvider,u=r.layoutRefs,a=u.actionsRef,l=u.mainRef,f=u.footerRef,p=u.viewportRef,y=o.dispatch,b=(0,c.useRef)(null),d=(0,c.useRef)(null),g=(0,c.useRef)(null),O=v((0,c.useState)("65px"),2),h=O[0],j=O[1],S=v((0,c.useState)(null),2),w=S[0],P=S[1];return(0,c.useEffect)(function(){y({type:"SET_FRAME_REFS",payload:{displayRef:d}})},[]),(0,c.useEffect)(function(){if(o.frame&&b.current){var e=b.current,t=function(){if(a.current&&l.current&&f.current){var t=l.current.offsetHeight,n=f.current.offsetTop,i=a.current.offsetTop,u=t-Math.min(i,n)+10;j("65px 65px ".concat(u,"px 65px"));var c=e.offsetWidth,p=e.offsetHeight;if(t-u-e.offsetTop===e.offsetHeight){var s=function(e,t,r,n){var o=Number.parseInt(r["".concat(n,"Width")]||e,10),i=Math.min(o,e),u=i/r.aspectRatio;return u>t&&(i=(u=t)*r.aspectRatio),{top:(t-u)/2,left:(e-i)/2,width:i,height:u}}(c,p,o.frame,r.breakpoint),y=s.top,b=s.left,m=s.width,d=s.height,v=y+e.offsetTop,g=b+e.offsetLeft;P({top:"".concat(v,"px"),left:"".concat(g,"px"),width:"".concat(m,"px"),height:"".concat(d,"px")})}}},n=new ResizeObserver(t);return n.observe(e),t(),function(){return n.disconnect()}}g.current=null},[o.frame,r.breakpoint,a,l,f]),(0,c.useEffect)(function(){var e;if(null!==(e=o.frame)&&void 0!==e&&e.bounds&&d.current&&p.current&&w){var t=d.current,r=p.current,u=t.getBoundingClientRect(),a=r.getBoundingClientRect(),c={small:1,medium:1.5,large:2}[n.mapSize],l={top:(u.top-a.top)/c,right:(a.right-u.right)/c,bottom:(a.bottom-u.bottom)/c,left:(u.left-a.left)/c};i.setPadding(l),i.fitToBounds(o.frame.bounds,!0)}},[null===(t=o.frame)||void 0===t?void 0:t.bounds,w,i,d,p]),o.frame?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"im-c-frame-spacer",style:{inset:h},ref:b}),w&&(0,s.jsx)("div",{ref:d,className:"im-c-frame-display",style:m({},w)})]}):null}}],buttons:[D({id:"frameDone",label:"Done",variant:"primary",hiddenWhen:function(e){return!e.pluginState.frame}},A),D({id:"frameCancel",label:"Cancel",variant:"tertiary",hiddenWhen:function(e){return!e.pluginState.frame}},A)],api:{addFrame:function(e,t){var r=e.pluginConfig,n=e.pluginState,o=e.services,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},u=n.dispatch,a=o.eventBus;u({type:"SET_FRAME",payload:S(S(S(S({},O),r),i),{},{featureId:t})}),a.emit("frame:add")},editFeature:function(e,t){var r=e.pluginConfig,n=e.pluginState,o=e.mapProvider,i=e.services,u=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=n.dispatch,c=i.eventBus,f=p(t),s=function(e,t){var r=p(e);if(!r)return null;var n=l(r,4),o=n[0],i=n[1],u=n[2],a=n[3],c=t.mapToScreen([o,a]),f=t.mapToScreen([u,i]),s=Math.abs(f.x-c.x),y=Math.abs(f.y-c.y);return 0===y?null:Math.round(s/y*1e6)/1e6}(t,o),y=R(R(R(R({},O),r),u),{},{aspectRatio:s,featureId:(null==t?void 0:t.id)||t.properties.id});a({type:"SET_FRAME",payload:R(R({},y),{},{bounds:f})}),c.emit("frame:edit")}}}}};
+export const __webpack_esm_id__="im-frame-plugin";export const __webpack_esm_ids__=["im-frame-plugin"];export const __webpack_esm_modules__={"./plugins/beta/frame/src/manifest.js"(e,t,r){function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach(function(t){u(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function u(e,t,r){return(t=function(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}r.d(t,{manifest:()=>k}),r.r(t);var a={SET_FRAME:function(e,t){return i(i({},e),{},{frame:t})},SET_FRAME_REFS:function(e,t){return i(i({},e),{},{frameRefs:t})}},c=r("react");function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,a=[],c=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return f(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function p(e){var t;if(null==e||null===(t=e.geometry)||void 0===t||null===(t=t.coordinates)||void 0===t||!t[0])return null;var r=e.geometry.coordinates[0],n=1/0,o=1/0,i=-1/0,u=-1/0;return r.forEach(function(e){var t=l(e,2),r=t[0],a=t[1];r<n&&(n=r),r>i&&(i=r),a<o&&(o=a),a>u&&(u=a)}),[n,o,i,u]}var s=r("react/jsx-runtime");function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function m(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach(function(t){d(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function d(e,t,r){return(t=function(e){var t=function(e){if("object"!=y(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,u,a=[],c=!0,l=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return g(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?g(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var O={aspectRatio:1,mobileWidth:"300px",tabletWidth:"360px",desktopWidth:"400px"};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach(function(t){w(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function w(e,t,r){return(t=function(e){var t=function(e){if("object"!=h(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=h(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==h(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(e)}function E(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function R(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach(function(t){x(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function x(e,t,r){return(t=function(e){var t=function(e){if("object"!=P(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=P(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==P(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?T(Object(r),!0).forEach(function(t){M(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):T(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function M(e,t,r){return(t=function(e){var t=function(e){if("object"!=_(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=_(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==_(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var A={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},k={reducer:{initialState:{frame:null,frameRefs:null},actions:a},InitComponent:function(e){var t,r,n,o,i=e.appState,u=e.mapState,a=e.mapProvider,l=e.pluginConfig,f=e.pluginState,p=e.services,s=e.buttonConfig,y=i.mode,b=i.breakpoint,m=i.layoutRefs,d=p.eventBus,v=s.frameDone,g=s.frameCancel,O=f.dispatch,h=f.frameRefs,j=f.frame,S=null===(t=null===(r=l.includeModes)||void 0===r?void 0:r.includes(y))||void 0===t||t,w=null!==(n=null===(o=l.excludeModes)||void 0===o?void 0:o.includes(y))&&void 0!==n&&n,P=u.isMapReady&&S&&!w;(0,c.useEffect)(function(){if(P)return v.onClick=function(){var e=function(e){var t=e.viewportEl,r=e.mapProvider,n=e.featureId,o=e.scale,i=e.frameEl.getBoundingClientRect(),u=t.getBoundingClientRect(),a={x:(i.left-u.left)/o,y:(i.top-u.top)/o},c={x:(i.right-u.left)/o,y:(i.top-u.top)/o},l={x:(i.right-u.left)/o,y:(i.bottom-u.top)/o},f={x:(i.left-u.left)/o,y:(i.bottom-u.top)/o},p={type:"Feature",geometry:{type:"Polygon",coordinates:[[r.screenToMap(a),r.screenToMap(c),r.screenToMap(l),r.screenToMap(f),r.screenToMap(a)]]},properties:{}};return n&&(p.id=n),p}({frameEl:h.displayRef.current,viewportEl:m.viewportRef.current,featureId:null==j?void 0:j.featureId,scale:{small:1,medium:1.5,large:2}[u.mapSize],mapProvider:a});O({type:"SET_FRAME",payload:null}),d.emit("frame:done",e)},g.onClick=function(){O({type:"SET_FRAME",payload:null}),d.emit("frame:cancel")},function(){v.onClick=null,g.onClick=null}},[u.isMapReady,y,b,j,h,m,a,O,d,v,g])},controls:[{id:"frame",label:"Frame",mobile:{slot:"middle"},tablet:{slot:"middle"},desktop:{slot:"middle"},render:function(e){var t,r=e.appState,n=e.mapState,o=e.pluginState,i=e.mapProvider,u=r.layoutRefs,a=u.actionsRef,l=u.mainRef,f=u.footerRef,p=u.viewportRef,y=o.dispatch,b=(0,c.useRef)(null),d=(0,c.useRef)(null),g=(0,c.useRef)(null),O=v((0,c.useState)("65px"),2),h=O[0],j=O[1],S=v((0,c.useState)(null),2),w=S[0],P=S[1];return(0,c.useEffect)(function(){y({type:"SET_FRAME_REFS",payload:{displayRef:d}})},[]),(0,c.useEffect)(function(){if(o.frame&&b.current){var e=b.current,t=function(){if(a.current&&l.current&&f.current){var t=l.current.offsetHeight,n=f.current.offsetTop,i=a.current.offsetTop,u=t-Math.min(i,n)+10;j("65px 65px ".concat(u,"px 65px"));var c=e.offsetWidth,p=e.offsetHeight;if(t-u-e.offsetTop===e.offsetHeight){var s=function(e,t,r,n){var o=Number.parseInt(r["".concat(n,"Width")]||e,10),i=Math.min(o,e),u=i/r.aspectRatio;return u>t&&(i=(u=t)*r.aspectRatio),{top:(t-u)/2,left:(e-i)/2,width:i,height:u}}(c,p,o.frame,r.breakpoint),y=s.top,b=s.left,m=s.width,d=s.height,v=y+e.offsetTop,g=b+e.offsetLeft;P({top:"".concat(v,"px"),left:"".concat(g,"px"),width:"".concat(m,"px"),height:"".concat(d,"px")})}}},n=new window.ResizeObserver(t);return n.observe(e),t(),function(){return n.disconnect()}}g.current=null},[o.frame,r.breakpoint,a,l,f]),(0,c.useEffect)(function(){var e;if(null!==(e=o.frame)&&void 0!==e&&e.bounds&&d.current&&p.current&&w){var t=d.current,r=p.current,u=t.getBoundingClientRect(),a=r.getBoundingClientRect(),c={small:1,medium:1.5,large:2}[n.mapSize],l={top:(u.top-a.top)/c,right:(a.right-u.right)/c,bottom:(a.bottom-u.bottom)/c,left:(u.left-a.left)/c};i.setPadding(l),i.fitToBounds(o.frame.bounds,!0)}},[null===(t=o.frame)||void 0===t?void 0:t.bounds,w,i,d,p]),o.frame?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"im-c-frame-spacer",style:{inset:h},ref:b}),w&&(0,s.jsx)("div",{ref:d,className:"im-c-frame-display",style:m({},w)})]}):null}}],buttons:[D({id:"frameDone",label:"Done",variant:"primary",hiddenWhen:function(e){return!e.pluginState.frame}},A),D({id:"frameCancel",label:"Cancel",variant:"tertiary",hiddenWhen:function(e){return!e.pluginState.frame}},A)],api:{addFrame:function(e,t){var r=e.pluginConfig,n=e.pluginState,o=e.services,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},u=n.dispatch,a=o.eventBus;u({type:"SET_FRAME",payload:S(S(S(S({},O),r),i),{},{featureId:t})}),a.emit("frame:add")},editFeature:function(e,t){var r=e.pluginConfig,n=e.pluginState,o=e.mapProvider,i=e.services,u=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=n.dispatch,c=i.eventBus,f=p(t),s=function(e,t){var r=p(e);if(!r)return null;var n=l(r,4),o=n[0],i=n[1],u=n[2],a=n[3],c=t.mapToScreen([o,a]),f=t.mapToScreen([u,i]),s=Math.abs(f.x-c.x),y=Math.abs(f.y-c.y);return 0===y?null:Math.round(s/y*1e6)/1e6}(t,o),y=R(R(R(R({},O),r),u),{},{aspectRatio:s,featureId:(null==t?void 0:t.id)||t.properties.id});a({type:"SET_FRAME",payload:R(R({},y),{},{bounds:f})}),c.emit("frame:edit")}}}}};