@defra/interactive-map 0.0.37-alpha → 0.0.39-alpha

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

@@ -0,0 +1,249 @@
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import { getSnapInstance, clearSnapIndicator } from '../utils/snapHelpers.js'
+import { getCoords } from './editVertexMode/geometryHelpers.js'
+import { scalePoint } from './editVertexMode/helpers.js'
+import { undoHandlers } from './editVertexMode/undoHandlers.js'
+import { touchHandlers } from './editVertexMode/touchHandlers.js'
+import { vertexOperations } from './editVertexMode/vertexOperations.js'
+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,
+  ...touchHandlers,
+  ...vertexOperations,
+  ...vertexQueries,
+  ...keyboardHandlers,
+  ...pointerHandlers,
+
+  onSetup (options) {
+    const state = MapboxDraw.modes.direct_select.onSetup.call(this, options)
+    Object.assign(state, {
+      container: options.container,
+      interfaceType: options.interfaceType,
+      deleteVertexButtonId: options.deleteVertexButtonId,
+      undoButtonId: options.undoButtonId,
+      isPanEnabled: options.isPanEnabled,
+      getSnapEnabled: options.getSnapEnabled,
+      featureId: state.featureId,
+      selectedVertexIndex: options.selectedVertexIndex ?? -1,
+      selectedVertexType: options.selectedVertexType,
+      coordPath: options.coordPath,
+      scale: options.scale ?? 1
+    })
+
+    // Clear undo stack only on initial entry to edit mode for a feature
+    // Only clear if we're starting a new editing session (not already editing)
+    if (this.map._lastEditFeatureId !== state.featureId) {
+      this.map._undoStack?.clear()
+      this.map._lastEditFeatureId = state.featureId
+    }
+
+    // Get feature type for later reference
+    const feature = this.getFeature(state.featureId)
+    state.featureType = feature?.type
+
+    state.vertecies = this.getVerticies(state.featureId)
+    state.midpoints = this.getMidpoints(state.featureId)
+    this.setupEventListeners(state)
+
+    this.applyVertexSelection(state, options)
+    this.map._drawEditContainer = options.container
+    this.addTouchVertexTarget(state)
+
+    // Clear any snap indicator when entering edit mode
+    const snap = getSnapInstance(this.map)
+    if (snap) {
+      clearSnapIndicator(snap, this.map)
+    }
+
+    // Show touch target if entering with a selected vertex on touch interface
+    if (state.interfaceType === 'touch' && state.selectedVertexIndex >= 0 && state.selectedVertexType === 'vertex') {
+      const vertex = state.vertecies[state.selectedVertexIndex]
+      if (vertex) {
+        setTimeout(() => {
+          this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
+        }, 0)
+      }
+    }
+
+    // Ignore pointermove deselection briefly after setup to let Safari settle
+    state._ignorePointermoveDeselect = true
+    setTimeout(() => { state._ignorePointermoveDeselect = false }, 100)
+
+    return state
+  },
+
+  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)
+    }
+
+    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)
+  },
+
+  applyVertexSelection (state, options) {
+    if (options.selectedVertexType === 'midpoint') {
+      state.selectedCoordPaths = []
+      this.clearSelectedCoordinates()
+      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()
+      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
+    // 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(EVENT_VERTEX_SELECTION, {
+      index: state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1,
+      numVertecies: state.vertecies.length
+    })
+
+    // Use vertex from event if available, otherwise fall back to state
+    const vertex = vertexCoord || (state.selectedVertexIndex >= 0 ? state.vertecies[state.selectedVertexIndex] : null)
+    this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
+  },
+
+  onScaleChange (state, e) {
+    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) {
+      return
+    }
+    // Duplicate coordinates exist (e.g. a self-touching ring). Comparing the list
+    // against itself cannot surface a distinct new vertex, so clear the selection.
+    state.selectedVertexIndex = -1
+    state.selectedVertexType ??= null
+  },
+
+  onMove (state) {
+    const vertex = state.vertecies[state.selectedVertexIndex]
+    if (vertex) {
+      this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
+    }
+  },
+
+  // Inbound signal from MaplibreDrawAdapter.nudgeSelectedVertex — bridges into the
+  // running mode the same way onInterfaceTypeChange does, since the adapter has no
+  // direct reference to this mode's live state. Unlike OL (where setState's shared
+  // 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)
+    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') {
+      this.deleteVertex(state)
+    }
+    if (e.target.closest(`#${state.undoButtonId}`)) {
+      this.handleUndo(state)
+    }
+  },
+
+  clickNoTarget (state) {
+    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, isPanEnabled: true })
+  },
+
+  // Prevent selecting other features
+  changeMode (state, updates) {
+    if (!state.featureId) {
+      return
+    }
+    this._ctx.api.changeMode('edit_vertex', { ...state, ...updates })
+  },
+
+  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 })
+    this.hideTouchVertexIndicator(state)
+  }
+}

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

@@ -0,0 +1,153 @@
+import { createHarness, POLYGON } from './editVertexMode/__helpers__/harness.js'
+
+/**
+ * Tests for EditVertexMode's own methods: setup/teardown lifecycle, selection/scale/update
+ * events, and the small move/button/changeMode routing. The keyboard, pointer, touch, undo,
+ * vertex-query, vertex-operation and geometry helpers are covered in their own colocated
+ * test files under editVertexMode/.
+ */
+
+describe('onSetup / onStop lifecycle', () => {
+  test('populates state, clears the undo stack for a new feature and registers listeners', () => {
+    const { ctx, state, map } = createHarness()
+    expect(state.featureId).toBe('feat-1')
+    // Real PolygonFeature stores rings without the duplicate closing coordinate
+    expect(state.vertecies).toHaveLength(4)
+    expect(state.midpoints).toHaveLength(4)
+    expect(map._lastEditFeatureId).toBe('feat-1')
+    expect(map._drawEditContainer).toBe(state.container)
+    expect(ctx.map.on).toHaveBeenCalledWith('draw.update', expect.any(Function))
+    expect(ctx.map.on).toHaveBeenCalledWith('draw.nudgevertex', expect.any(Function))
+  })
+
+  test('does not clear the undo stack when re-entering the same feature', () => {
+    const { ctx, map, options } = createHarness()
+    map._undoStack.push({ type: 'move_vertex' })
+    // map._lastEditFeatureId is already 'feat-1' from the first setup
+    ctx.onSetup(options)
+    expect(map._undoStack.length).toBe(1)
+  })
+
+  test('onStop removes listeners and clears editing container; DirectSelect touch stubs are inert', () => {
+    const { ctx, state, map } = createHarness()
+    expect(() => { ctx.onTouchStart(); ctx.onTouchMove(); ctx.onTouchEnd() }).not.toThrow()
+    ctx.onStop(state)
+    expect(map._drawEditContainer).toBeNull()
+    expect(map.off).toHaveBeenCalledWith('draw.update', expect.any(Function))
+    expect(map.off).toHaveBeenCalledWith('draw.nudgevertex', expect.any(Function))
+  })
+
+  test('onSetup edge cases: clears an active snap indicator, positions or skips the touch target, clears an explicit -1 selection', () => {
+    jest.useFakeTimers()
+    const { ctx, map, options } = createHarness()
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null }
+    ctx.onSetup(options)
+    expect(map.getLayer).toHaveBeenCalledWith('snap-helper-circle')
+
+    const touch = createHarness(POLYGON(), { interfaceType: 'touch', selectedVertexIndex: 0, selectedVertexType: 'vertex' })
+    jest.runAllTimers()
+    expect(touch.state.touchVertexTarget.style.display).toBe('block')
+
+    const outOfRange = createHarness(POLYGON(), { interfaceType: 'touch', selectedVertexIndex: 99, selectedVertexType: 'vertex' })
+    jest.runAllTimers()
+    expect(outOfRange.state.touchVertexTarget.style.display).toBe('none')
+
+    const cleared = createHarness(POLYGON(), { selectedVertexIndex: -1 })
+    expect(cleared.ctx.clearSelectedCoordinates).toHaveBeenCalled()
+  })
+})
+
+describe('selection, scale and update events', () => {
+  test('applyVertexSelection handles midpoint entry and cleared selection', () => {
+    jest.useFakeTimers()
+    const midpoint = createHarness(POLYGON(), { selectedVertexType: 'midpoint', selectedVertexIndex: 4 })
+    jest.runAllTimers()
+    expect(midpoint.ctx.clearSelectedCoordinates).toHaveBeenCalled()
+    expect(midpoint.map.getSource).toHaveBeenCalledWith('mapbox-gl-draw-hot')
+  })
+
+  test('onSelectionChange searches by coordinate for mouse, trusts coordPath/keyboard otherwise', () => {
+    const { ctx, state, map } = createHarness()
+    const geom = ctx.getFeature('feat-1').toGeoJSON().geometry
+    ctx.onSelectionChange(state, { points: [{ geometry: { coordinates: [10, 0] } }], features: [{ geometry: geom }] })
+    expect(state.selectedVertexIndex).toBe(1)
+    expect(map.fire).toHaveBeenCalledWith('draw.vertexselection', expect.objectContaining({ numVertecies: 4 }))
+
+    state.coordPath = '0.2'
+    state.selectedVertexIndex = 2
+    ctx.onSelectionChange(state, { points: [{ geometry: { coordinates: [10, 10] } }], features: [{ geometry: geom }] })
+    expect(state.selectedVertexIndex).toBe(2) // trusted, not re-searched
+
+    // Keyboard mode trusts the selection; with no event vertex it falls back to state, then null
+    const kb = createHarness()
+    const g2 = kb.ctx.getFeature('feat-1').toGeoJSON().geometry
+    kb.state.interfaceType = 'keyboard'
+    kb.state.selectedVertexIndex = 2
+    kb.ctx.onSelectionChange(kb.state, { points: [{ geometry: { coordinates: [10, 10] } }], features: [{ geometry: g2 }] })
+    expect(kb.state.selectedVertexType).toBe('vertex')
+    kb.ctx.onSelectionChange({ ...kb.state, interfaceType: 'mouse', selectedVertexType: 'vertex', selectedVertexIndex: 0 }, { points: [], features: [{ geometry: g2 }] })
+    kb.ctx.onSelectionChange({ ...kb.state, interfaceType: 'mouse', selectedVertexType: null, selectedVertexIndex: -1 }, { points: [], features: [{ geometry: g2 }] })
+  })
+
+  test('onScaleChange and onInterfaceTypeChange update state and the touch target', () => {
+    const { ctx, state } = createHarness()
+    ctx.onScaleChange(state, { scale: 2 })
+    expect(state.scale).toBe(2)
+    state.selectedVertexIndex = 0
+    ctx.onInterfaceTypeChange(state, { interfaceType: 'touch' })
+    expect(state.interfaceType).toBe('touch')
+    ctx.onInterfaceTypeChange({ ...state, selectedVertexIndex: -1 }, { interfaceType: 'mouse' })
+  })
+
+  test('draw.nudgevertex moves the selected vertex and repositions the touch target — the inbound bridge for MoveControl.mapProvider.activeMoveTarget', () => {
+    jest.useFakeTimers()
+    const { state, map } = createHarness(POLYGON(), { interfaceType: 'touch', selectedVertexIndex: 0, selectedVertexType: 'vertex' })
+    jest.runAllTimers() // flush onSetup's deferred initial touch-target positioning
+    const before = [...state.vertecies[0]]
+    const targetBefore = { top: state.touchVertexTarget.style.top, left: state.touchVertexTarget.style.left }
+    map.fire('draw.nudgevertex', { dx: 1, dy: 0, isLargeStep: true })
+    expect(state.vertecies[0]).not.toEqual(before)
+    expect({ top: state.touchVertexTarget.style.top, left: state.touchVertexTarget.style.left }).not.toEqual(targetBefore)
+  })
+
+  test('onUpdate re-selects a changed vertex only when the vertex count is ambiguous', () => {
+    const { ctx, state } = createHarness()
+    ctx.onUpdate(state) // unique coords → no change
+    state.vertecies = [[0, 0], [0, 0], [1, 1]]
+    ctx.onUpdate(state)
+    expect(state.selectedVertexIndex).toBe(-1)
+  })
+})
+
+describe('move, button and changeMode routing', () => {
+  test('onMove keeps the touch target aligned with the selected vertex, ignoring an unselected vertex', () => {
+    const { ctx, state } = createHarness()
+    state.selectedVertexIndex = 0
+    state.interfaceType = 'touch'
+    ctx.onMove(state)
+    expect(state.touchVertexTarget.style.display).toBe('block')
+    expect(() => ctx.onMove({ ...state, selectedVertexIndex: -1 })).not.toThrow()
+  })
+
+  test('onButtonClick deletes or undoes based on the clicked control', () => {
+    const { ctx, state, container } = createHarness()
+    const del = document.createElement('button')
+    del.id = 'delete-vertex'
+    const undo = document.createElement('button')
+    undo.id = 'undo-vertex'
+    container.append(del, undo)
+    const deleteSpy = jest.spyOn(ctx, 'deleteVertex').mockImplementation(() => {})
+    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
+
+    ctx.onButtonClick({ ...state, selectedVertexType: 'vertex' }, { target: del })
+    expect(deleteSpy).toHaveBeenCalled()
+    ctx.onButtonClick(state, { target: undo })
+    expect(undoSpy).toHaveBeenCalled()
+  })
+
+  test('changeMode is a no-op without a feature id', () => {
+    const { ctx, api } = createHarness()
+    ctx.changeMode({ featureId: null }, { selectedVertexIndex: -1 })
+    expect(api.changeMode).not.toHaveBeenCalled()
+  })
+})

package/plugins/draw/src/adapters/maplibre/snap/constants.js

@@ -0,0 +1,2 @@
+export const SNAP_HELPER_LAYER = 'snap-helper-circle'
+export const DRAW_HOT_SOURCE = 'mapbox-gl-draw-hot'

package/plugins/draw/src/adapters/maplibre/snap/mapHandlers.js

@@ -0,0 +1,39 @@
+import { pollUntil, patchSourceData } from './sourceData.js'
+import { createSnapInstance, ensureSnapLayer } from './snapInstance.js'
+import { SNAP_HELPER_LAYER, DRAW_HOT_SOURCE } from './constants.js'
+
+/** Re-patch the source and restore the snap layer whenever the style reloads */
+export function registerStyleLoadHandler (map, draw, config) {
+  map.on('style.load', () => {
+    pollUntil(
+      () => map._removed ? null : map.getSource(DRAW_HOT_SOURCE),
+      (source) => {
+        patchSourceData(source)
+        ensureSnapLayer(map)
+        if (!map._snapInstance) {
+          createSnapInstance(map, draw, source, config)
+        }
+      }
+    )
+  })
+}
+
+/** Suppress snap processing during zoom and reset the indicator afterwards */
+export function registerZoomHandlers (map) {
+  // Suppress snap processing during zoom (indicator freezes in place)
+  map.on('zoomstart', () => {
+    map._isZooming = true
+  })
+
+  map.on('zoomend', () => {
+    map._isZooming = false
+    // Force hide then re-show to reset indicator at new zoom level (Safari fix)
+    if (map.getLayer(SNAP_HELPER_LAYER)) {
+      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'none')
+      const snap = map._snapInstance
+      if (snap?.status) {
+        map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'visible')
+      }
+    }
+  })
+}

package/plugins/draw/src/adapters/maplibre/snap/mapHandlers.test.js

@@ -0,0 +1,106 @@
+import { registerStyleLoadHandler, registerZoomHandlers } from './mapHandlers.js'
+import { createSnapInstance, ensureSnapLayer } from './snapInstance.js'
+import { patchSourceData } from './sourceData.js'
+
+const SNAP_LAYER = 'snap-helper-circle'
+const DRAW_SOURCE = 'mapbox-gl-draw-hot'
+
+jest.mock('./snapInstance.js', () => ({
+  createSnapInstance: jest.fn(),
+  ensureSnapLayer: jest.fn()
+}))
+
+jest.mock('./sourceData.js', () => ({
+  ...jest.requireActual('./sourceData.js'),
+  patchSourceData: jest.fn()
+}))
+
+const config = { layers: [], radius: 12, rules: [], status: false, onSnapped: () => {} }
+
+const handlerFor = (map, name) => map.on.mock.calls.find(([event]) => event === name)?.[1]
+
+const makeMap = (overrides = {}) => ({
+  on: jest.fn(),
+  getSource: jest.fn((id) => (id === DRAW_SOURCE ? { id: 'hot' } : null)),
+  getLayer: jest.fn(() => null),
+  setLayoutProperty: jest.fn(),
+  ...overrides
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  global.requestAnimationFrame = jest.fn()
+})
+
+describe('registerStyleLoadHandler', () => {
+  test('re-patches the source, ensures the layer and creates a missing instance', () => {
+    const map = makeMap()
+    const draw = { id: 'draw' }
+
+    registerStyleLoadHandler(map, draw, config)
+    handlerFor(map, 'style.load')()
+
+    expect(patchSourceData).toHaveBeenCalledWith({ id: 'hot' })
+    expect(ensureSnapLayer).toHaveBeenCalledWith(map)
+    expect(createSnapInstance).toHaveBeenCalledWith(map, draw, { id: 'hot' }, config)
+  })
+
+  test('does not recreate an existing instance', () => {
+    const map = makeMap({ _snapInstance: { id: 'exists' } })
+
+    registerStyleLoadHandler(map, {}, config)
+    handlerFor(map, 'style.load')()
+
+    expect(ensureSnapLayer).toHaveBeenCalledWith(map)
+    expect(createSnapInstance).not.toHaveBeenCalled()
+  })
+
+  test('stops when the map has been removed', () => {
+    const map = makeMap({ _removed: true })
+
+    registerStyleLoadHandler(map, {}, config)
+    handlerFor(map, 'style.load')()
+
+    expect(ensureSnapLayer).not.toHaveBeenCalled()
+    expect(createSnapInstance).not.toHaveBeenCalled()
+  })
+})
+
+describe('registerZoomHandlers', () => {
+  test('zoomstart sets the zooming flag', () => {
+    const map = makeMap()
+    registerZoomHandlers(map)
+    handlerFor(map, 'zoomstart')()
+    expect(map._isZooming).toBe(true)
+  })
+
+  test('zoomend clears the flag and re-shows the indicator when snapping is active', () => {
+    const map = makeMap({ getLayer: jest.fn(() => ({ id: 'layer' })), _snapInstance: { status: true } })
+
+    registerZoomHandlers(map)
+    handlerFor(map, 'zoomend')()
+
+    expect(map._isZooming).toBe(false)
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(SNAP_LAYER, 'visibility', 'none')
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(SNAP_LAYER, 'visibility', 'visible')
+  })
+
+  test('zoomend hides but does not re-show when snapping is disabled', () => {
+    const map = makeMap({ getLayer: jest.fn(() => ({ id: 'layer' })), _snapInstance: { status: false } })
+
+    registerZoomHandlers(map)
+    handlerFor(map, 'zoomend')()
+
+    expect(map.setLayoutProperty).toHaveBeenCalledTimes(1)
+    expect(map.setLayoutProperty).toHaveBeenCalledWith(SNAP_LAYER, 'visibility', 'none')
+  })
+
+  test('zoomend does nothing when the snap layer is absent', () => {
+    const map = makeMap({ getLayer: jest.fn(() => null) })
+
+    registerZoomHandlers(map)
+    handlerFor(map, 'zoomend')()
+
+    expect(map.setLayoutProperty).not.toHaveBeenCalled()
+  })
+})