@defra/interactive-map 0.0.3-alpha → 0.0.5-alpha

package/plugins/draw-ml/src/events.js

@@ -1,127 +0,0 @@
-import { clearSnapState, getSnapInstance } from './snapHelpers.js'
-
-export function attachEvents ({ appState, appConfig, mapState, pluginState, mapProvider, buttonConfig, eventBus }) {
-  const {
-    drawDone,
-    drawAddPoint,
-    drawUndo,
-    drawFinish,
-    drawDeletePoint,
-    drawSnap,
-    drawCancel
-  } = buttonConfig
-
-  const { map, draw } = mapProvider
-  const { dispatch, feature, tempFeature } = pluginState
-
-  // --- Done
-  const handleDone = () => {
-    draw.changeMode('disabled')
-    dispatch({ type: 'SET_MODE', payload: null })
-    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
-    eventBus.emit('draw:done', { newFeature: tempFeature })
-  }
-  drawDone.onClick = handleDone
-
-  // --- Cancel
-  const handleCancel = () => {
-    draw.delete(tempFeature.id)
-
-    // Reinstate initial feature
-    if (feature) {
-      draw.add(feature)
-    }
-    draw.changeMode('disabled')
-
-    dispatch({ type: 'SET_MODE', payload: null })
-    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
-    eventBus.emit('draw:cancel', { originalFeature: feature })
-  }
-  drawCancel.onClick = handleCancel
-
-  // --- Snap toggle with throttle to prevent Safari slowdown
-  let lastToggleTime = 0
-  const THROTTLE_MS = 300
-
-  const handleSnap = () => {
-    // Strict throttle - ignore clicks within throttle window
-    const now = Date.now()
-    if (now - lastToggleTime < THROTTLE_MS) {
-      return
-    }
-    lastToggleTime = now
-
-    const newSnapState = !pluginState.snap
-    dispatch({ type: 'TOGGLE_SNAP' })
-    mapProvider.snapEnabled = newSnapState
-
-    const snap = getSnapInstance(map)
-    if (snap?.setSnapStatus) {
-      snap.setSnapStatus(newSnapState)
-    }
-
-    // Clear all snap state when disabling - prevents accumulation
-    if (!newSnapState && snap) {
-      clearSnapState(snap)
-      // Hide indicator immediately when disabling (single call, not in RAF)
-      if (map.getLayer('snap-helper-circle')) {
-        map.setLayoutProperty('snap-helper-circle', 'visibility', 'none')
-      }
-    }
-    // When enabling, the indicator will show automatically via setMapData patch
-  }
-  drawSnap.onClick = handleSnap
-
-  // --- Map style change
-  const handleStyleData = () => {
-    const layers = map.getStyle().layers || []
-    if (layers.length === 0 || layers[layers.length - 1].source?.startsWith('mapbox-gl-draw')) {
-      return
-    }
-    layers.filter(l => l.source?.startsWith('mapbox-gl-draw')).forEach(l => map.moveLayer(l.id))
-  }
-  map.on('styledata', () => handleStyleData())
-
-  // --- A new shape is created
-  const onCreate = (e) => {
-    const newFeature = e.features[0]
-    dispatch({ type: 'SET_FEATURE', payload: { tempFeature: newFeature }})
-    eventBus.emit('draw:create', e)
-
-    // Switch straight to edit vertex mode
-    dispatch({ type: 'SET_MODE', payload: 'edit_vertex'})
-
-    setTimeout(() => {
-      draw.changeMode('edit_vertex', {
-        container: appState.layoutRefs.viewportRef.current,
-        deleteVertexButtonId: `${appConfig.id}-draw-delete-point`,
-        isPanEnabled: appState.interfaceType !== 'keyboard',
-        interfaceType: appState.interfaceType,
-        scale: { small: 1, medium: 1.5, large: 2 }[mapState.mapSize],
-        featureId: newFeature.id,
-        getSnapEnabled: () => mapProvider.snapEnabled === true
-      })
-    }, 0)
-  }
-  map.on('draw.create', onCreate)
-
-  // --- A vertex is selected
-  const onVertexSelection = (e) => {
-    dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
-    eventBus.emit('draw:vertexselection', e)
-  }
-  map.on('draw.vertexselection', onVertexSelection)
-
-  return () => {
-    drawDone.onClick = null
-    drawAddPoint.onClick = null
-    drawUndo.onClick = null
-    drawFinish.onClick = null
-    drawDeletePoint.onClick = null
-    drawSnap.onClick = null
-    drawCancel.onClick = null
-    map.off('styledata', handleStyleData)
-    map.off('draw.create', onCreate)
-    map.off('draw.vertexselection', onVertexSelection)
-  }
-}

package/plugins/draw-ml/src/manifest.js

@@ -1,100 +0,0 @@
-// /plugins/draw-ml/manifest.js
-import { initialState, actions } from './reducer.js'
-import { DrawInit } from './DrawInit.jsx'
-import { newPolygon } from './api/newPolygon.js'
-import { editFeature } from './api/editFeature.js'
-import { addFeature } from './api/addFeature.js'
-import { deleteFeature } from './api/deleteFeature.js'
-
-const createButtonSlots = (showLabel) => ({
-  mobile:  { slot: 'actions', showLabel },
-  tablet:  { slot: 'actions', showLabel },
-  desktop: { slot: 'actions', showLabel }
-})
-
-export const manifest = {
-  reducer: {
-    initialState,
-    actions
-  },
-
-  InitComponent: DrawInit,
-
-  buttons: [{
-    id: 'drawDone',
-    label: 'Done',
-    variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.mode || appState.interfaceType !== 'mouse' && pluginState.mode !== 'edit_vertex',
-    enableWhen: ({ pluginState }) => !!pluginState.tempFeature,
-    ...createButtonSlots(true)
-  },{
-    id: 'drawAddPoint',
-    label: 'Add point',
-    variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => pluginState.mode !== 'draw_vertex' || appState.interfaceType === 'mouse',
-    ...createButtonSlots(true)
-  },{
-    id: 'drawUndo',
-    label: 'Undo',
-    iconId: 'undo',
-    variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !pluginState.mode,
-    enableWhen: ({ pluginState }) => false,
-    ...createButtonSlots(false)
-  },{
-    id: 'drawFinish',
-    label: 'Finish shape',
-    iconId: 'check',
-    variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => pluginState.mode !== 'draw_vertex',
-    enableWhen: ({ pluginState }) => pluginState.numVertecies > 3,
-    ...createButtonSlots(false)
-  },{
-    id: 'drawDeletePoint',
-    label: 'Delete point',
-    iconId: 'close',
-    variant: 'tertiary',
-    enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > 3,
-    hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
-    ...createButtonSlots(false)
-  },{
-    id: 'drawSnap',
-    label: 'Snap to line',
-    iconId: 'magnet',
-    variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
-    pressedWhen: ({ pluginState }) => !!pluginState.snap,
-    ...createButtonSlots(false)
-  },{
-    id: 'drawCancel',
-    label: 'Cancel',
-    variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !pluginState.mode,
-    ...createButtonSlots(true)
-  }],
-
-  keyboardShortcuts: [{
-    id: 'drawStart',
-    group: 'Drawing',
-    title: 'Edit vertex',
-    command: '<kbd>Spacebar</kbd></dd>'
-  }],
-
-  icons: [{
-    id: 'check',
-    svgContent: '<path d="M20 6 9 17l-5-5"/>'
-  },{
-    id: 'undo',
-    svgContent: '<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>'
-  },{
-    id: 'magnet',
-    svgContent: '<path d="m12 15 4 4"/><path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z"/><path d="m5 8 4 4"/>'
-  }],
-
-  api: {
-    newPolygon,
-    editFeature,
-    addFeature,
-    deleteFeature
-  }
-}

package/plugins/draw-ml/src/modes/drawVertexMode.js

@@ -1,275 +0,0 @@
-import DrawPolygon from '../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/draw_polygon.js'
-import createVertex from '../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/create_vertex.js'
-import { isValidClick } from '../utils.js'
-import {
-  getSnapInstance,
-  isSnapActive,
-  isSnapEnabled,
-  getSnapLngLat,
-  triggerSnapAtPoint,
-  triggerSnapAtCenter,
-  createSnappedEvent,
-  createSnappedClickEvent
-} from '../snapHelpers.js'
-
-export const DrawVertexMode = {
-  ...DrawPolygon,
-
-  onSetup(options) {
-    const { map } = this
-
-    const state = {
-      ...DrawPolygon.onSetup.call(this, options),
-      ...options
-    }
-
-    const { container, interfaceType, vertexMarkerId } = state
-    const vertexMarker = container.querySelector(`#${vertexMarkerId}`)
-    vertexMarker.style.display = ['touch', 'keyboard'].includes(interfaceType) ? 'block' : 'none'
-    state.vertexMarker = vertexMarker
-
-    // Bind all handlers once
-    const bind = (name, fn) => (this[name] = fn.bind(this, state))
-    const handlers = {
-      keydownHandler: this.onKeydown,
-      keyupHandler: this.onKeyup,
-      focusHandler: this.onFocus,
-      blurHandler: this.onBlur,
-      createHandler: this.onCreate,
-      moveHandler: this.onMove,
-      pointerdownHandler: this.onPointerdown,
-      pointermoveHandler: this.onPointermove,
-      pointerupHandler: this.onPointerup,
-      vertexButtonClickHandler: this.onVertexButtonClick
-    }
-    Object.entries(handlers).forEach(([k, fn]) => bind(k, fn))
-
-    // Register events
-    this._listeners = [
-      [window, 'keydown', this.keydownHandler],
-      [window, 'keyup', this.keyupHandler],
-      [window, 'click', this.vertexButtonClickHandler],
-      [container, 'focus', this.focusHandler],
-      [container, 'blur', this.blurHandler],
-      [container, 'pointermove', this.pointermoveHandler],
-      [container, 'pointerup', this.pointerupHandler],
-      [map, 'pointerdown', this.pointerdownHandler],
-      [map, 'draw.create', this.createHandler],
-      [map, 'move', this.moveHandler]
-    ]
-    this._listeners.forEach(([t, e, h]) => t.addEventListener ? t.addEventListener(e, h) : t.on(e, h))
-
-    return state
-  },
-
-  onClick(state, e) {
-    if (e.originalEvent.button > 0) {
-      return
-    }
-    const snap = getSnapInstance(this.map)
-    if (isSnapEnabled(state) && isSnapActive(snap)) {
-      // Use snapped coordinates when snap is enabled and active
-      e = createSnappedEvent(e, snap)
-    } else {
-      // When snap is disabled, ensure polygon uses actual click coordinates
-      // (not stale snapped coordinates from previous mouse moves)
-      const coords = state.polygon.coordinates[0]
-      if (coords.length > 0) {
-        coords[coords.length - 1] = [e.lngLat.lng, e.lngLat.lat]
-      }
-    }
-    DrawPolygon.onClick.call(this, state, e)
-  },
-
-  onTap() {
-    return
-  },
-
-  doClick(state) {
-    const coords = state.polygon.coordinates
-    this.dispatchVertexChange(coords[0])
-    if (!isValidClick(coords)) {
-      return
-    }
-    // Use snap coordinates if snapping is enabled and active
-    const snap = getSnapInstance(this.map)
-    const snappedEvent = isSnapEnabled(state) && createSnappedClickEvent(this.map, snap)
-
-    if (snappedEvent) {
-      DrawPolygon.onClick.call(this, state, snappedEvent)
-      this._ctx.store.render()
-    } else {
-      this._simulateMouse('click', DrawPolygon.onClick, state)
-    }
-  },
-
-  dispatchVertexChange(coords) {
-    this.map.fire('draw.vertexchange', {
-      numVertecies: coords.length
-    })
-  },
-
-  _simulateMouse(type, fn, state) {
-    const { map } = this
-    const center = map.getCenter()
-    const point = map.project(center)
-    fn.call(this, state, {
-      lngLat: center,
-      point,
-      originalEvent: new MouseEvent(type, {
-        clientX: point.x,
-        clientY: point.y,
-        bubbles: true,
-        cancelable: true
-      })
-    })
-    this._ctx.store.render()
-  },
-
-  _setInterface(state, type, show = true) {
-    state.interfaceType = type
-    if (show) {
-      state.vertexMarker.style.display = 'block'
-    }
-  },
-
-  onCreate(state, e) {
-    const draw = this._ctx.api
-    const feature = e.features[0]
-    draw.delete(feature.id)
-    feature.id = state.featureId
-    draw.add(feature)
-  },
-
-  onVertexButtonClick(state, e) {
-    if (e.target.closest(`#${state.addVertexButtonId}`)) {
-      this.doClick(state)
-    }
-  },
-
-  onTouchStart(state, e) {
-    this._setInterface(state, 'touch')
-    this.onMove(state, e)
-  },
-
-  onTouchEnd(state, e) {
-    this._setInterface(state, 'touch')
-    this.onMove(state, e)
-  },
-
-  onKeydown(state, e) {
-    if (document.activeElement !== state.container) {
-      return
-    }
-    if (e.key === 'Escape') {
-      return e.preventDefault()
-    }
-    if (e.key === 'Enter') {
-      state.isActive = true
-    }
-    this._setInterface(state, 'keyboard')
-    this.onMove(state, e)
-  },
-
-  onKeyup(state, e) {
-    if (e.key === 'Escape') {
-      return
-    }
-    this._setInterface(state, 'keyboard')
-    this.onMove(state, e)
-    if (e.key === 'Enter' && state.isActive) {
-      this.doClick(state)
-    }
-  },
-
-  onFocus(state) {
-    const { vertexMarker, interfaceType } = state
-    vertexMarker.style.display = ['touch', 'keyboard'].includes(interfaceType) ? 'block' : 'none'
-  },
-
-  onBlur(state, e) {
-    if (e.target !== state.container) {
-      state.vertexMarker.style.display = 'none'
-    }
-  },
-
-  onMouseMove(state, e) {
-    // Trigger snap detection at mouse position
-    if (isSnapEnabled(state)) {
-      const snap = getSnapInstance(this.map)
-      triggerSnapAtPoint(snap, this.map, e.point)
-
-      // Use snapped coordinates for rubber band if snap is active
-      const snappedLngLat = getSnapLngLat(snap)
-      if (snappedLngLat) {
-        e = { ...e, lngLat: snappedLngLat }
-      }
-    }
-
-    DrawPolygon.onMouseMove.call(this, state, e)
-  },
-
-  onMove(state) {
-    if (['touch', 'keyboard'].includes(state.interfaceType)) {
-      // Trigger snap detection at center point for touch/keyboard mode
-      if (isSnapEnabled(state)) {
-        triggerSnapAtCenter(getSnapInstance(this.map), this.map)
-      }
-
-      // Use snapped coordinates if available, otherwise use center
-      const snap = getSnapInstance(this.map)
-      const snappedLngLat = isSnapEnabled(state) && getSnapLngLat(snap)
-
-      if (snappedLngLat) {
-        const point = this.map.project([snappedLngLat.lng, snappedLngLat.lat])
-        DrawPolygon.onMouseMove.call(this, state, {
-          lngLat: snappedLngLat,
-          point,
-          originalEvent: new MouseEvent('mousemove', {
-            clientX: point.x,
-            clientY: point.y,
-            bubbles: true,
-            cancelable: true
-          })
-        })
-        this._ctx.store.render()
-      } else {
-        this._simulateMouse('mousemove', DrawPolygon.onMouseMove, state)
-      }
-    }
-  },
-
-  onPointerdown(state, e) {
-    if (e.pointerType !== 'touch') {
-      this._setInterface(state, 'pointer', false)
-    }
-  },
-
-  onPointermove(state, e) {
-    if (e.pointerType !== 'touch') {
-      state.vertexMarker.style.display = 'none'
-    }
-  },
-  
-  onPointerup(state) {
-    this.dispatchVertexChange(state.polygon.coordinates[0])
-  },
-
-  toDisplayFeatures(state, geojson, display) {
-    DrawPolygon.toDisplayFeatures.call(this, state, geojson, display)
-
-    // Create vertex
-    if (geojson.geometry.type === 'Polygon' && geojson.id === state.polygon.id) {
-      const ring = geojson.geometry.coordinates[0]
-      for (let i = 1; i < ring.length - 2; i++) {
-        display(createVertex(geojson.id, ring[i], `0.${i}`))
-      }
-    }
-  },
-
-  onStop(state) {
-    DrawPolygon.onStop.call(this, state)
-    this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
-    state.vertexMarker.style.display = 'none'
-  }
-}