@defra/interactive-map 0.0.40-alpha → 0.0.41-alpha

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/pointerHandlers.js

@@ -3,8 +3,7 @@ import {
   getSnapInstance, isSnapEnabled, getSnapLngLat, triggerSnapAtPoint, clearSnapState
 } from '../../utils/snapHelpers.js'
 import { getCoords, coordPathToFlatIndex } from './geometryHelpers.js'
-
-const EVENT_VERTEX_SELECTION = 'draw.vertexselection'
+import { CUSTOM_DRAW_EVENTS } from '../../drawEvents.js'
 
 /**
  * Mouse/pointer interaction for the vertex-edit mode: vertex/midpoint mouse-down,
@@ -48,7 +47,7 @@ export const pointerHandlers = {
       state.selectedVertexIndex = this.getVertexIndexFromMidpoint(state, coordPath)
       state.selectedVertexType = 'vertex'
       state.coordPath = null // Clear coordPath for midpoints
-      this.map.fire(EVENT_VERTEX_SELECTION, { index: state.selectedVertexIndex, numVertecies: state.vertecies.length })
+      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: state.selectedVertexIndex, numVertecies: state.vertecies.length })
     }
   },
 
@@ -61,7 +60,7 @@ export const pointerHandlers = {
       state.selectedVertexType = 'vertex'
       state._isInsertingVertex = false
       state._insertedVertexIndex = null
-      this.map.fire(EVENT_VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
       return
     }
     DirectSelect.onClick.call(this, state, e)
@@ -116,7 +115,7 @@ export const pointerHandlers = {
     state._isInsertingVertex = false
     state._insertedVertexIndex = null
     // DirectSelect.onMouseUp fires draw.update but not draw.selectionchange, so broadcast the count here
-    this.map.fire(EVENT_VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
   },
 
   _recordMoveUndo (state) {

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/touchHandlers.js

@@ -1,11 +1,9 @@
-import {
-  getSnapInstance, isSnapEnabled, triggerSnapAtPoint, getSnapLngLat,
-  clearSnapState, clearSnapIndicator
-} from '../../utils/snapHelpers.js'
+import { getSnapInstance, clearSnapState, clearSnapIndicator } from '../../utils/snapHelpers.js'
 import { coordPathToFlatIndex } from './geometryHelpers.js'
-import { isOnSVG } from './helpers.js'
+import { isOnSVG, scalePoint } from './helpers.js'
 import { createTouchTarget, applyTouchTargetColors } from '../../../../utils/touchTarget.js'
 import { resolveColors } from '../../../../utils/resolveColors.js'
+import { getTouchPoint, computeTouchDragAnchors, resolveTouchDragCoord } from '../../utils/touchDragMath.js'
 
 export const applyTouchVertexColors = (el, mapStyle, pluginConfig = {}) => {
   if (!el) { return }
@@ -50,7 +48,7 @@ export const touchHandlers = {
       this.syncVertices(state)
 
       // Push undo for the move if touch actually moved
-      if (state._touchMoved && state._moveStartPosition && state._moveStartIndex !== undefined) {
+      if (state._touchMoved && state._moveStartPosition && state._moveStartIndex != null) {
         this.pushUndo({
           type: 'move_vertex',
           featureId: state.featureId,
@@ -59,8 +57,19 @@ export const touchHandlers = {
         })
       }
       state._moveStartPosition = null
-      state._moveStartIndex = undefined
+      state._moveStartIndex = null
       state._touchMoved = false
+
+      // Re-sync the target to the vertex's actual final coordinate. Mid-drag it tracks the
+      // raw finger 1:1 from its touchstart-time offset (see onTouchmove) — a mid-drag snap
+      // moves the vertex without moving the target by the same amount, leaving them out of
+      // alignment. Left uncorrected, the next onTouchstart's delta math re-anchors off that
+      // drifted position, compounding a little further with every snapped drag (same fix as
+      // editPointMode's own onTouchend, for the same reason).
+      const vertex = state.vertecies[state.selectedVertexIndex]
+      if (vertex) {
+        this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
+      }
     }
   },
 
@@ -103,11 +112,8 @@ export const touchHandlers = {
     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 }
+    const touch = getTouchPoint(e)
+    Object.assign(state, computeTouchDragAnchors(this.map, state.touchVertexTarget, touch, vertex, state.scale))
   },
 
   onTouchmove (state, e) {
@@ -117,17 +123,8 @@ export const touchHandlers = {
 
     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)
+    const touch = getTouchPoint(e)
+    this.moveVertex(state, resolveTouchDragCoord(this.map, state, touch))
     this.updateTouchVertexTarget(state, { x: touch.x - state.deltaTarget.x, y: touch.y - state.deltaTarget.y })
   }
 }

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/touchHandlers.test.js

@@ -55,6 +55,27 @@ describe('touchHandlers', () => {
     expect(map._undoStack.pop()).toMatchObject({ type: 'move_vertex', vertexIndex: 1 })
   })
 
+  // Regression: mid-drag the target tracks the raw finger 1:1 from its touchstart-time offset
+  // (see onTouchmove), so a mid-drag snap — which moves the vertex without moving the target
+  // by the same amount — leaves the two out of alignment. Re-syncing on touchend to the
+  // vertex's actual final coordinate stops that drift from compounding on the next drag.
+  test('onTouchend re-syncs the target to the selected vertex\'s actual final coordinate', () => {
+    const { ctx, state } = createHarness()
+    state.interfaceType = 'touch'
+    state.selectedVertexIndex = 1
+    ctx.moveVertex(state, { lng: 9, lat: 9 }) // as onTouchmove would have left it mid-drag
+    ctx.onTouchend(state)
+    expect(state.touchVertexTarget.style.display).toBe('block')
+    expect(state.touchVertexTarget.style.left).toBe(`${9 * 10}px`) // harness project(): coord * 10
+    expect(state.touchVertexTarget.style.top).toBe(`${9 * 10}px`)
+  })
+
+  test('onTouchend skips repositioning when nothing is selected', () => {
+    const { ctx, state } = createHarness()
+    state.selectedVertexIndex = -1
+    expect(() => ctx.onTouchend(state)).not.toThrow()
+  })
+
   test('onTouchstart captures move start state, ignoring taps off the vertex/target', () => {
     const { ctx, state } = createHarness()
     ctx.onTouchstart(state, { target: { parentNode: document.createElement('div') }, touches: [{ clientX: 1, clientY: 1 }] })
@@ -66,6 +87,9 @@ describe('touchHandlers', () => {
     expect(state._touchMoved).toBe(false)
   })
 
+  // resolveTouchDragCoord's own snap/fallback branches are covered by
+  // utils/touchDragMath.test.js — this checks onTouchmove ignores off-target moves and wires
+  // an active snap through to the selected vertex.
   test('onTouchmove moves the selected vertex, honouring snap, and ignores non-target moves', () => {
     const { ctx, state, map } = createHarness()
     state.selectedVertexIndex = 1
@@ -74,16 +98,12 @@ describe('touchHandlers', () => {
     ctx.onTouchmove(state, { target: { parentNode: document.createElement('div') }, touches: [{ clientX: 5, clientY: 5 }] })
     expect(state.vertecies[1]).toEqual([10, 0]) // off-target move ignored
     ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 30, clientY: 40 }] })
+    expect(state._touchMoved).toBe(true)
 
     state.getSnapEnabled = () => true
     map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
     ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 50, clientY: 60 }] })
     expect(state.vertecies[1]).toEqual([7, 8])
-
-    // Snap enabled but no snap point → falls back to the pointer position
-    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
-    ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 35, clientY: 45 }] })
-    expect(state._touchMoved).toBe(true)
   })
 
   test('onTap clears the snap indicator, then selects a vertex, inserts on a midpoint, or clears with no target', () => {

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/undoHandlers.js

@@ -4,8 +4,10 @@ import {
   getModifiableCoords
 } from './geometryHelpers.js'
 import { scalePoint } from './helpers.js'
+import { sharedUndoHandlers } from '../../utils/geometryValidation.js'
 
-// Map an undo-stack op type onto the geometry-change `phase` consumed by validation.
+// Map an undo-stack op type onto the geometry-change `phase` consumed by validation. Read off
+// `this` by the shared pushUndo mixin (utils/geometryValidation.js) — see that file's comment.
 const UNDO_OP_PHASE = {
   move_vertex: 'commit-move',
   insert_vertex: 'commit-insert',
@@ -21,41 +23,9 @@ const UNDO_INVERSE_PHASE = {
 }
 
 export const undoHandlers = {
-  // 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'
-      })
-    }
-  },
-
-  // Emit a commit-level geometrychange (feature + change phase + vertex index) so the
-  // validation layer can accept or reject the change. Deferred a tick to avoid
-  // re-entrancy: rejection calls draw.undo(), which must run after the current
-  // mutation (and its undo bookkeeping) has fully settled.
-  emitGeometryValidation (phase, vertexIndex, featureId) {
-    if (!phase) { return }
-    setTimeout(() => {
-      const feature = this.getFeature(featureId)
-      if (!feature) { return }
-      this.map.fire('draw.geometrychange', { feature: feature.toGeoJSON(), phase, vertexIndex })
-    }, 0)
-  },
-
-  // Undo support
-  pushUndo (operation) {
-    const undoStack = this.map._undoStack
-    if (!undoStack) {
-      return
-    }
-    undoStack.push(operation)
-    // Every edit commit (move/insert/delete, via mouse or keyboard) records an undo
-    // op here, so this is the single point that feeds commit-level validation.
-    this.emitGeometryValidation(UNDO_OP_PHASE[operation.type], operation.vertexIndex, operation.featureId)
-  },
+  ...sharedUndoHandlers,
+  UNDO_OP_PHASE,
+  UNDO_INVERSE_PHASE,
 
   handleUndo (state) {
     const undoStack = this.map._undoStack

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/undoHandlers.test.js

@@ -1,52 +1,19 @@
 import { createHarness } from './__helpers__/harness.js'
-import { createUndoStack } from '../../../../utils/undoStack.js'
 import { getRingSegments } from './geometryHelpers.js'
 
+// fireGeometryChange/emitGeometryValidation/pushUndo are the shared mixin from
+// utils/geometryValidation.js — their own behaviour is covered by
+// utils/geometryValidation.test.js. This file only tests what's specific to editVertexMode:
+// pushUndo's UNDO_OP_PHASE wiring, handleUndo's per-op-type dispatch, and the
+// undoMoveVertex/undoInsertVertex/undoDeleteVertex ring operations themselves.
 describe('undoHandlers', () => {
-  test('pushUndo is a no-op without a stack and pushes otherwise', () => {
-    const { ctx, map } = createHarness()
-    map._undoStack = null
-    expect(() => ctx.pushUndo({ type: 'move_vertex' })).not.toThrow()
-    map._undoStack = createUndoStack(() => {})
-    ctx.pushUndo({ type: 'move_vertex' })
-    expect(map._undoStack.length).toBe(1)
-  })
-
-  test('pushUndo emits a deferred commit-level geometrychange with the change phase', () => {
+  test('pushUndo maps each op type to its commit phase', () => {
     jest.useFakeTimers()
     const { ctx, map } = createHarness()
     map.fire.mockClear()
-
     ctx.pushUndo({ type: 'move_vertex', featureId: 'feat-1', vertexIndex: 2 })
-    // Deferred a tick to avoid re-entrancy — nothing fired synchronously.
-    expect(map.fire).not.toHaveBeenCalledWith('draw.geometrychange', expect.anything())
-
-    jest.runAllTimers()
-    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', expect.objectContaining({
-      phase: 'commit-move',
-      vertexIndex: 2,
-      feature: expect.any(Object)
-    }))
-    jest.useRealTimers()
-  })
-
-  test('pushUndo does not emit a geometrychange for unmapped op types', () => {
-    jest.useFakeTimers()
-    const { ctx, map } = createHarness()
-    map.fire.mockClear()
-    ctx.pushUndo({ type: 'draw_vertex', featureId: 'feat-1' })
     jest.runAllTimers()
-    expect(map.fire).not.toHaveBeenCalledWith('draw.geometrychange', expect.anything())
-    jest.useRealTimers()
-  })
-
-  test('emitGeometryValidation does not fire once the feature is gone', () => {
-    jest.useFakeTimers()
-    const { ctx, map } = createHarness()
-    map.fire.mockClear()
-    ctx.emitGeometryValidation('commit-move', 0, 'missing-feature')
-    jest.runAllTimers()
-    expect(map.fire).not.toHaveBeenCalledWith('draw.geometrychange', expect.anything())
+    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', expect.objectContaining({ phase: 'commit-move', vertexIndex: 2 }))
     jest.useRealTimers()
   })
 
@@ -82,15 +49,6 @@ describe('undoHandlers', () => {
     jest.useRealTimers()
   })
 
-  test('fireGeometryChange fires draw.update only when the feature exists', () => {
-    const { ctx, state, map } = createHarness()
-    ctx.fireGeometryChange(state)
-    expect(map.fire).toHaveBeenCalledWith('draw.update', expect.objectContaining({ action: 'change_coordinates' }))
-    map.fire.mockClear()
-    ctx.fireGeometryChange({ featureId: 'missing' })
-    expect(map.fire).not.toHaveBeenCalled()
-  })
-
   test('undoMoveVertex restores the previous position, guarding missing feature/segment', () => {
     const { ctx, state } = createHarness()
     ctx.undoMoveVertex({ ...state, featureId: 'missing' }, { vertexIndex: 0, previousPosition: [0, 0], featureId: 'missing' })

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/vertexOperations.js

@@ -4,16 +4,12 @@ import {
   getSegmentForIndex,
   getModifiableCoords
 } from './geometryHelpers.js'
-import { KEYBOARD } from '../../defaults.js'
-import {
-  getSnapInstance, isSnapActive, isSnapEnabled, getSnapLngLat,
-  getSnapRadius, triggerSnapAtPoint, clearSnapIndicator
-} from '../../utils/snapHelpers.js'
+import { sharedSnapMovement } from '../../utils/snapMovement.js'
 import { MIN_VERTICES } from '../../../../validation/rules.js'
 
-const ARROW_OFFSETS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
-
 export const vertexOperations = {
+  ...sharedSnapMovement,
+
   updateMidpoint (coordinates) {
     setTimeout(() => {
       this.map.getSource('mapbox-gl-draw-hot').setData({
@@ -32,56 +28,10 @@ export const vertexOperations = {
     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 ? KEYBOARD.nudgeAmount : KEYBOARD.stepAmount
-    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)
   },
 
-  // Explicit-delta counterpart to getOffset, driven by a unit direction vector and
-  // MoveControls' own Precision toggle rather than a KeyboardEvent — used by
-  // nudgeVertexByDelta below.
-  getOffsetByDelta (coord, dx, dy, isLargeStep) {
-    const pt = this.map.project(coord)
-    const amount = isLargeStep ? KEYBOARD.stepAmount : KEYBOARD.nudgeAmount
-    return this.map.unproject({ x: pt.x + dx * amount, y: pt.y + dy * amount })
-  },
-
-  // Resolves the destination coordinate for a vertex nudge by (dx, dy) unit
-  // direction, applying snap or breaking out of an already-active one — shared by
-  // the keyboard arrow-key path (_keyboardMoveTarget) and MoveControls'
-  // explicit-delta path (nudgeVertexByDelta) so both snap identically. dx/dy are
-  // only needed for the snap-escape offset; getCandidate computes the raw,
-  // un-snapped destination the caller would otherwise have used.
-  resolveSnapTarget (state, dx, dy, currentCoord, getCandidate) {
-    const snap = getSnapInstance(this.map)
-
-    // Break out of an active snap by moving beyond the snap radius
-    if (isSnapEnabled(state) && state._isSnapped && snap) {
-      const offset = getSnapRadius(snap) + 1
-      const pt = this.map.project(currentCoord)
-      state._isSnapped = false
-      clearSnapIndicator(snap, this.map)
-      return this.map.unproject({ x: pt.x + dx * offset, y: pt.y + dy * offset })
-    }
-
-    const newCoord = getCandidate()
-    if (isSnapEnabled(state) && snap) {
-      triggerSnapAtPoint(snap, this.map, this.map.project(newCoord))
-      if (isSnapActive(snap)) {
-        state._isSnapped = true
-        return getSnapLngLat(snap)
-      }
-    }
-    state._isSnapped = false
-    return newCoord
-  },
-
   // Moves the selected vertex by an explicit (dx, dy) unit direction — the entry
   // point for MoveControls' D-pad (see mapProvider.activeMoveTarget in events.js),
   // as opposed to moveVertexByKey's KeyboardEvent-driven path. Each call is treated

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/vertexOperations.test.js

@@ -1,5 +1,8 @@
 import { createHarness, LINE } from './__helpers__/harness.js'
 
+// getOffset/getOffsetByDelta/resolveSnapTarget are the shared mixin from
+// utils/snapMovement.js — their own behaviour is covered by utils/snapMovement.test.js.
+// This file only tests what's specific to a ring/segment vertex.
 describe('vertexOperations', () => {
   test('updateMidpoint pushes point data to the hot source', () => {
     jest.useFakeTimers()
@@ -30,30 +33,12 @@ describe('vertexOperations', () => {
     expect(api.changeMode.mock.calls.at(-1)[1].coordPath).toBeUndefined()
   })
 
-  test('getOffset applies step/nudge amounts and returns the coord unchanged without an event', () => {
-    const { ctx } = createHarness()
-    const stepped = ctx.getOffset([5, 5], { key: 'ArrowRight', shiftKey: false })
-    const nudged = ctx.getOffset([5, 5], { key: 'ArrowRight', shiftKey: true })
-    expect(stepped.lng).not.toBe(5)
-    expect(Math.abs(nudged.lng - 5)).toBeLessThan(Math.abs(stepped.lng - 5))
-    expect(ctx.getOffset([5, 5], null)).toEqual({ lng: 5, lat: 5 })
-  })
-
   test('getNewCoord offsets the currently selected vertex', () => {
     const { ctx, state } = createHarness()
     state.selectedVertexIndex = 1
     expect(ctx.getNewCoord(state, { key: 'ArrowRight', shiftKey: false })).toHaveProperty('lng')
   })
 
-  test('getOffsetByDelta applies step/nudge amounts along an explicit direction, mirroring getOffset\'s shiftKey polarity', () => {
-    const { ctx } = createHarness()
-    const large = ctx.getOffsetByDelta([5, 5], 1, 0, true)
-    const small = ctx.getOffsetByDelta([5, 5], 1, 0, false)
-    expect(large.lng).not.toBe(5)
-    expect(Math.abs(small.lng - 5)).toBeLessThan(Math.abs(large.lng - 5))
-    expect(ctx.getOffsetByDelta([5, 5], 0, 0, true)).toEqual({ lng: 5, lat: 5 })
-  })
-
   test('nudgeVertexByDelta moves the selected vertex and pushes a single undo entry, or no-ops for a midpoint/no selection', () => {
     const { ctx, state, map } = createHarness()
     state.selectedVertexIndex = 0
@@ -73,29 +58,19 @@ describe('vertexOperations', () => {
     expect(map._undoStack).toHaveLength(0)
   })
 
-  test('nudgeVertexByDelta snaps to a nearby target, breaks out of an active snap, and falls back to the raw coord when snap is inactive — same as keyboard nudging (regression: MoveControls bypassed snap entirely before resolveSnapTarget was shared)', () => {
+  // resolveSnapTarget's own snap/break-out-of-snap branches are covered by
+  // utils/snapMovement.test.js — this just checks nudgeVertexByDelta wires a snap hit
+  // through to the moved vertex, same as keyboard nudging (regression: MoveControls
+  // bypassed snap entirely before resolveSnapTarget was shared).
+  test('nudgeVertexByDelta honours an active snap', () => {
     const { ctx, state, map } = createHarness()
     state.selectedVertexIndex = 1
     state.selectedVertexType = 'vertex'
     state.getSnapEnabled = () => true
-
     map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
     ctx.nudgeVertexByDelta(state, 0, -1, true)
     expect(state._isSnapped).toBe(true)
     expect(state.vertecies[1]).toEqual([7, 8])
-
-    ctx.nudgeVertexByDelta(state, -1, 0, true) // already snapped → breaks out of the snap radius
-    expect(state._isSnapped).toBe(false)
-
-    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
-    ctx.nudgeVertexByDelta(state, 1, 0, true) // snap enabled but inactive → raw offset coord
-    expect(state._isSnapped).toBe(false)
-  })
-
-  test('resolveSnapTarget is a no-op passthrough to the candidate coordinate when snap is disabled', () => {
-    const { ctx, state } = createHarness()
-    const candidate = { lng: 3, lat: 4 }
-    expect(ctx.resolveSnapTarget(state, 1, 0, [0, 0], () => candidate)).toEqual(candidate)
   })
 
   test('insertVertex splits a midpoint into a new vertex, records undo and selects it', () => {

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode.js

@@ -1,7 +1,8 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
-import { getSnapInstance, clearSnapIndicator } from '../utils/snapHelpers.js'
+import { CUSTOM_DRAW_EVENTS } from '../drawEvents.js'
 import { getCoords } from './editVertexMode/geometryHelpers.js'
 import { scalePoint } from './editVertexMode/helpers.js'
+import { bindEditModeListeners, unbindEditModeListeners, clearActiveSnapIndicator, buildEditModeHandlers } from '../utils/editModeEvents.js'
 import { undoHandlers } from './editVertexMode/undoHandlers.js'
 import { touchHandlers } from './editVertexMode/touchHandlers.js'
 import { vertexOperations } from './editVertexMode/vertexOperations.js'
@@ -9,9 +10,6 @@ import { vertexQueries } from './editVertexMode/vertexQueries.js'
 import { keyboardHandlers } from './editVertexMode/keyboardHandlers.js'
 import { pointerHandlers } from './editVertexMode/pointerHandlers.js'
 
-const EVENT_VERTEX_SELECTION = 'draw.vertexselection'
-const EVENT_NUDGE_VERTEX = 'draw.nudgevertex'
-
 export const EditVertexMode = {
   ...MapboxDraw.modes.direct_select,
   ...undoHandlers,
@@ -57,10 +55,7 @@ export const EditVertexMode = {
     this.addTouchVertexTarget(state)
 
     // Clear any snap indicator when entering edit mode
-    const snap = getSnapInstance(this.map)
-    if (snap) {
-      clearSnapIndicator(snap, this.map)
-    }
+    clearActiveSnapIndicator(this.map)
 
     // Show touch target if entering with a selected vertex on touch interface
     if (state.interfaceType === 'touch' && state.selectedVertexIndex >= 0 && state.selectedVertexType === 'vertex') {
@@ -80,40 +75,15 @@ export const EditVertexMode = {
   },
 
   setupEventListeners (state) {
-    const bind = (fn) => (e) => fn.call(this, state, e)
-    const h = this.handlers = {
-      keydown: bind(this.onKeydown),
-      keyup: bind(this.onKeyup),
-      pointerdown: bind(this.onPointerevent),
-      pointermove: bind(this.onPointerevent),
-      pointerup: bind(this.onPointerevent),
-      click: bind(this.onButtonClick),
-      touchstart: bind(this.onTouchstart),
-      touchmove: bind(this.onTouchmove),
-      touchend: bind(this.onTouchend),
-      selectionchange: bind(this.onSelectionChange),
-      scalechange: bind(this.onScaleChange),
-      update: bind(this.onUpdate),
-      move: bind(this.onMove),
-      interfacetypechange: bind(this.onInterfaceTypeChange),
-      nudgevertex: bind(this.onNudgeVertex)
-    }
+    const handlers = this.handlers = buildEditModeHandlers(this, state, {
+      nudge: this.onNudgeVertex,
+      selectionchange: this.onSelectionChange,
+      update: this.onUpdate
+    })
 
-    window.addEventListener('keydown', h.keydown, { capture: true })
-    window.addEventListener('keyup', h.keyup, { capture: true })
-    window.addEventListener('click', h.click)
-    state.container.addEventListener('pointerdown', h.pointerdown)
-    state.container.addEventListener('pointermove', h.pointermove)
-    state.container.addEventListener('pointerup', h.pointerup)
-    state.container.addEventListener('touchstart', h.touchstart, { passive: false })
-    state.container.addEventListener('touchmove', h.touchmove, { passive: false })
-    state.container.addEventListener('touchend', h.touchend, { passive: false })
-    this.map.on('draw.selectionchange', h.selectionchange)
-    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)
-    this.map.on(EVENT_NUDGE_VERTEX, h.nudgevertex)
+    bindEditModeListeners(state, this.map, handlers)
+    this.map.on('draw.selectionchange', handlers.selectionchange)
+    this.map.on('draw.update', handlers.update)
   },
 
   applyVertexSelection (state, options) {
@@ -133,17 +103,17 @@ export const EditVertexMode = {
     }
   },
 
-  onSelectionChange (state, e) {
+  onSelectionChange (state, event) {
     // 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
+    const vertexCoord = event.points[event.points.length - 1]?.geometry.coordinates
 
     // Only update selectedVertexIndex from event if not keyboard mode AND event has valid vertex
     // 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 geom = event.features[0]?.geometry
       const coords = getCoords(geom)
       state.selectedVertexIndex = this.findVertexIndex(coords, vertexCoord, state.selectedVertexIndex)
     }
@@ -151,7 +121,7 @@ export const EditVertexMode = {
 
     state.selectedVertexType ??= state.selectedVertexIndex >= 0 ? 'vertex' : null
 
-    this.map.fire(EVENT_VERTEX_SELECTION, {
+    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, {
       index: state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1,
       numVertecies: state.vertecies.length
     })
@@ -161,18 +131,18 @@ export const EditVertexMode = {
     this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
   },
 
-  onScaleChange (state, e) {
-    state.scale = e.scale
+  onScaleChange (state, event) {
+    state.scale = event.scale
   },
 
-  onInterfaceTypeChange (state, e) {
-    state.interfaceType = e.interfaceType
+  onInterfaceTypeChange (state, event) {
+    state.interfaceType = event.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)))
+    const prev = new Set(state.vertecies.map(coordinate => JSON.stringify(coordinate)))
     if (prev.size === state.vertecies.length) {
       return
     }
@@ -195,19 +165,19 @@ export const EditVertexMode = {
   // onUpdate hook repositions the touch target for any vertex move), moveVertex
   // here has no equivalent hook, so the reposition has to happen explicitly —
   // same as onMove/onSelectionChange/onInterfaceTypeChange already do.
-  onNudgeVertex (state, e) {
-    this.nudgeVertexByDelta(state, e.dx, e.dy, e.isLargeStep)
+  onNudgeVertex (state, event) {
+    this.nudgeVertexByDelta(state, event.dx, event.dy, event.isLargeStep)
     const vertex = state.vertecies[state.selectedVertexIndex]
     if (vertex) {
       this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
     }
   },
 
-  onButtonClick (state, e) {
-    if (e.target.closest(`#${state.deleteVertexButtonId}`) && state.selectedVertexType === 'vertex') {
+  onButtonClick (state, event) {
+    if (event.target.closest(`#${state.deleteVertexButtonId}`) && state.selectedVertexType === 'vertex') {
       this.deleteVertex(state)
     }
-    if (e.target.closest(`#${state.undoButtonId}`)) {
+    if (event.target.closest(`#${state.undoButtonId}`)) {
       this.handleUndo(state)
     }
   },
@@ -227,23 +197,10 @@ export const EditVertexMode = {
   onStop (state) {
     this.map._drawEditContainer = null
     this.map._editingFeatureId = null
-    const h = this.handlers
-    state.container.removeEventListener('pointerdown', h.pointerdown)
-    state.container.removeEventListener('pointermove', h.pointermove)
-    state.container.removeEventListener('pointerup', h.pointerup)
-    state.container.removeEventListener('touchstart', h.touchstart)
-    state.container.removeEventListener('touchmove', h.touchmove)
-    state.container.removeEventListener('touchend', h.touchend)
-    this.map.off('draw.selectionchange', h.selectionchange)
-    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.off(EVENT_NUDGE_VERTEX, h.nudgevertex)
-    this.map.dragPan.enable()
-    window.removeEventListener('click', h.click)
-    window.removeEventListener('keydown', h.keydown, { capture: true })
-    window.removeEventListener('keyup', h.keyup, { capture: true })
+    const handlers = this.handlers
+    this.map.off('draw.selectionchange', handlers.selectionchange)
+    this.map.off('draw.update', handlers.update)
+    unbindEditModeListeners(state, this.map, handlers)
     this.hideTouchVertexIndicator(state)
   }
 }