@defra/interactive-map 0.0.26-alpha → 0.0.27-alpha

package/plugins/beta/draw-ol/src/draw/drawInput.js

@@ -0,0 +1,199 @@
+/**
+ * Input handling for draw mode: touch, keyboard, and button events.
+ *
+ * Mouse/pointer drawing is handled entirely by OL's Draw interaction.
+ * This module handles the crosshair-based input path (touch + keyboard)
+ * and the Done / Add Point / Cancel button wiring.
+ */
+
+import { coordToPixel, pixelDist } from '../utils/olCoords.js'
+
+const SNAP_TOLERANCE = 12 // pixels
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
+
+const isCloseToFirstVertex = (map, coord, sketchCoords, geometryType) => {
+  if (geometryType !== 'Polygon' || sketchCoords.length < 4) {
+    return false
+  }
+  const firstCoord = sketchCoords[0]
+  const currentPixel = coordToPixel(map, coord)
+  const firstPixel = coordToPixel(map, firstCoord)
+  if (!currentPixel || !firstPixel) {
+    return false
+  }
+  return pixelDist(currentPixel, firstPixel) < SNAP_TOLERANCE
+}
+
+const applyRubberbanding = (geom, centerCoord) => {
+  if (geom.getType() === 'LineString') {
+    const updated = [...geom.getCoordinates()]
+    updated[updated.length - 1] = centerCoord
+    geom.setCoordinates(updated)
+  } else if (geom.getType() === 'Polygon') {
+    const updated = geom.getCoordinates().map((ring, i) => {
+      if (i !== 0) {
+        return ring
+      }
+      const r = [...ring]
+      r[r.length - 1] = centerCoord
+      return r
+    })
+    geom.setCoordinates(updated)
+  } else {
+    // No action
+  }
+}
+
+const wireInputEvents = ({
+  container, addVertexButtonId, olView, onUndo,
+  getInterfaceType, setInterfaceType, clearLastCoord,
+  updateRubberbanding, placeVertex
+}) => {
+  const onCenterChange = () => {
+    if (getInterfaceType() !== 'pointer') {
+      updateRubberbanding()
+    }
+  }
+  olView?.on('change:center', onCenterChange)
+
+  const onKeydown = (e) => {
+    if (!container.contains(document.activeElement)) {
+      return
+    }
+    if (ARROW_KEYS.has(e.key)) {
+      setInterfaceType('keyboard')
+      return
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      setInterfaceType('keyboard')
+      placeVertex()
+    }
+    if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      onUndo?.()
+    }
+  }
+
+  const onButtonClick = (e) => {
+    if (addVertexButtonId && e.target.closest(`#${addVertexButtonId}`)) {
+      placeVertex()
+    }
+  }
+
+  const onPointerdown = (e) => {
+    if (e.pointerType !== 'touch') {
+      setInterfaceType('pointer')
+      clearLastCoord()
+    }
+  }
+
+  const onTouchstart = () => {
+    setInterfaceType('touch')
+  }
+
+  const onPointerMove = () => {
+    if (getInterfaceType() === 'pointer') {
+      return
+    }
+    updateRubberbanding()
+  }
+
+  globalThis.addEventListener('keydown', onKeydown)
+  globalThis.addEventListener('click', onButtonClick)
+  container.addEventListener('pointerdown', onPointerdown)
+  container.addEventListener('touchstart', onTouchstart, { passive: true })
+  container.addEventListener('pointermove', onPointerMove)
+
+  return {
+    destroy () {
+      olView?.un('change:center', onCenterChange)
+      globalThis.removeEventListener('keydown', onKeydown)
+      globalThis.removeEventListener('click', onButtonClick)
+      container.removeEventListener('pointerdown', onPointerdown)
+      container.removeEventListener('touchstart', onTouchstart)
+      container.removeEventListener('pointermove', onPointerMove)
+    }
+  }
+}
+
+/**
+ * @param {object} params
+ * @param {import('ol/interaction/Draw').default} params.drawInteraction
+ * @param {object} params.options - { container, interfaceType, addVertexButtonId, mapProvider, snap }
+ * @returns {{ getInterfaceType: () => string, destroy: () => void }}
+ */
+export const createDrawInput = ({ drawInteraction, options }) => {
+  const { container, addVertexButtonId, mapProvider, snap, onUndo } = options
+  let interfaceType = options.interfaceType
+  let sketchFeature = null
+  let lastPlacedCoord = null
+
+  drawInteraction.on('drawstart', (e) => {
+    sketchFeature = e.feature
+    lastPlacedCoord = null
+  })
+  drawInteraction.on('drawend', () => {
+    sketchFeature = null
+    lastPlacedCoord = null
+  })
+  drawInteraction.on('drawabort', () => {
+    sketchFeature = null
+    lastPlacedCoord = null
+  })
+
+  const updateRubberbanding = () => {
+    if (!sketchFeature) {
+      return
+    }
+    const geom = sketchFeature.getGeometry()
+    const coords = geom.getCoordinates()
+    if (!coords.length) {
+      return
+    }
+    const raw = mapProvider.getCenter()
+    const centerCoord = (interfaceType !== 'pointer' && snap) ? snap.apply(raw) : raw
+    applyRubberbanding(geom, centerCoord)
+  }
+
+  const placeVertex = () => {
+    const raw = mapProvider.getCenter()
+    const coord = (interfaceType !== 'pointer' && snap) ? snap.apply(raw) : raw
+    snap?.hideIndicator()
+    if (sketchFeature) {
+      const geom = sketchFeature.getGeometry()
+      const rawCoords = geom.getCoordinates()
+      const sketchCoords = geom.getType() === 'Polygon' ? (rawCoords[0] || []) : rawCoords
+      if (lastPlacedCoord && lastPlacedCoord[0] === coord[0] && lastPlacedCoord[1] === coord[1]) {
+        drawInteraction.finishDrawing()
+        lastPlacedCoord = null
+        return
+      }
+      if (isCloseToFirstVertex(drawInteraction.getMap(), coord, sketchCoords, geom.getType())) {
+        drawInteraction.finishDrawing()
+        return
+      }
+    }
+    drawInteraction.appendCoordinates([coord])
+    lastPlacedCoord = coord
+  }
+
+  const events = wireInputEvents({
+    container,
+    addVertexButtonId,
+    olView: drawInteraction.getMap()?.getView(),
+    onUndo,
+    getInterfaceType: () => interfaceType,
+    setInterfaceType: (t) => { interfaceType = t },
+    clearLastCoord: () => { lastPlacedCoord = null },
+    updateRubberbanding,
+    placeVertex
+  })
+
+  return {
+    getInterfaceType: () => interfaceType,
+    destroy () {
+      events.destroy()
+    }
+  }
+}

package/plugins/beta/draw-ol/src/draw.scss

@@ -0,0 +1,17 @@
+// Draw plugin styles for OpenLayers
+
+.im-draw-touch-target {
+  color: #3b82f6;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+// Accessibility: focus visible on buttons
+.im-draw-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}

package/plugins/beta/draw-ol/src/edit/EditMode.js

@@ -0,0 +1,424 @@
+import Modify from 'ol/interaction/Modify.js'
+import Collection from 'ol/Collection.js'
+import VectorSource from 'ol/source/Vector.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { createMidpointLayer } from './midpointLayer.js'
+import { createVertexLayer } from './vertexLayer.js'
+import { createTouchHandler } from './touchHandler.js'
+import { createKeyboardHandler } from './keyboardHandler.js'
+import { findNearest } from './vertexHitTest.js'
+import { deleteVertex, insertAtMidpoint } from './vertexOps.js'
+import { applyUndo } from './undoOps.js'
+import { getCoords, getMidpoints } from '../utils/geometryHelpers.js'
+
+/**
+ * Edit vertex mode — handles edit_vertex.
+ *
+ * OL Modify handles pointer/mouse vertex dragging natively.
+ * touchHandler covers touch drag via the SVG offset target.
+ * keyboardHandler covers keyboard navigation and nudging.
+ *
+ * @returns {{ done, cancel, undo, deleteVertex: fn, destroy }}
+ */
+export const createEditMode = ({ map, manager, options }) => {
+  const { featureId, container, interfaceType, deleteVertexButtonId, snap } = options
+  const { store, undoStack } = manager
+
+  const olFeature = store.getOL(featureId)
+  if (!olFeature) {
+    return null
+  }
+
+  const originalFeatureStyle = olFeature.getStyle()
+  olFeature.setStyle(manager.styles.editFeatureStyle)
+
+  // Mutable state shared across sub-handlers
+  const state = {
+    olFeature,
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [],
+    midpoints: [],
+    interfaceType: interfaceType ?? 'pointer'
+  }
+
+  const getState = () => state
+  let onDeselect = null // set after touchHandler is created; hides offset target on any deselect
+  let onUpdate = null // set after touchHandler is created; repositions offset target when vertex coords change
+
+  const setState = (updates) => {
+    Object.assign(state, updates)
+    if (updates.selectedVertexIndex !== undefined) {
+      vertexLayer.setSelected(state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1)
+      midpointLayer.setSelected(
+        state.selectedVertexType === 'midpoint' ? state.selectedVertexIndex - state.vertices.length : -1
+      )
+      if (state.selectedVertexIndex < 0) {
+        onDeselect?.()
+      }
+      updateActiveLayer()
+      manager.emit('vertexselection', {
+        index: state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1,
+        numVertices: state.vertices.length
+      })
+    }
+    if (updates.vertices !== undefined) {
+      const plainGeom = {
+        type: olFeature.getGeometry().getType(),
+        coordinates: olFeature.getGeometry().getCoordinates()
+      }
+      midpointLayer.update(plainGeom)
+      vertexLayer.update(plainGeom)
+      state.midpoints = midpointLayer.getCoords()
+      updateActiveLayer()
+      onUpdate?.()
+      map.render()
+    }
+  }
+
+  // Lightweight per-frame update during drag — updates layers without emitting events
+  const updateLayersFromGeom = () => {
+    const geom = olFeature.getGeometry()
+    const plainGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+    state.vertices = getCoords(plainGeom)
+    state.midpoints = getMidpoints(plainGeom)
+    midpointLayer.update(plainGeom)
+    vertexLayer.update(plainGeom)
+    updateActiveLayer()
+  }
+
+  const syncGeom = () => {
+    updateLayersFromGeom()
+    manager.emit('vertexchange', { numVertices: state.vertices.length })
+    manager.emit('update', store.toGeoJSON(olFeature))
+  }
+
+  // Keep overlay layers in sync on every geometry change (e.g. during pointer drag)
+  const onGeometryChange = () => updateLayersFromGeom()
+  olFeature.getGeometry().on('change', onGeometryChange)
+
+  // --- OL Modify (handles pointer vertex drag + midpoint insertion natively) ---
+  const collection = new Collection([olFeature])
+  const modifyCondition = (mapBrowserEvent) => {
+    if (state.interfaceType === 'touch') {
+      return false
+    }
+    const olPixel = map.getEventPixel(mapBrowserEvent.originalEvent)
+    return findNearest(map, state.vertices, state.midpoints, { x: olPixel[0], y: olPixel[1] }) !== null
+  }
+  const modifyInteraction = new Modify({
+    features: collection,
+    style: () => [], // vertex circles rendered by vertexLayer instead
+    pixelTolerance: 12,
+    // Only activate when clicking on a vertex or midpoint circle, not anywhere on a segment.
+    // Touch drags are handled by touchHandler; returning false here lets them pass through to
+    // DragPan (touchHandler uses preventDefault on the offset target to stop unwanted panning).
+    condition: modifyCondition
+  })
+  map.addInteraction(modifyInteraction)
+
+  // Track move start for undo
+  let modifyStartCoords = null
+
+  modifyInteraction.on('modifystart', () => {
+    if (state.interfaceType === 'touch') {
+      return
+    }
+    modifyStartCoords = state.vertices.map(c => [...c])
+  })
+
+  modifyInteraction.on('modifyend', () => {
+    if (state.interfaceType === 'touch') {
+      return
+    }
+    const prevCoords = modifyStartCoords
+    syncGeom()
+    if (!prevCoords) {
+      return
+    }
+
+    const newCoords = state.vertices
+    if (newCoords.length > prevCoords.length) {
+      // Midpoint drag inserted a vertex — find it and select it
+      const insertedIdx = newCoords.findIndex((c, i) => !prevCoords[i] || c[0] !== prevCoords[i][0])
+      const idx = Math.max(0, insertedIdx)
+      undoStack.push({ type: 'insert_vertex', vertexIndex: idx })
+      setState({ selectedVertexIndex: idx, selectedVertexType: 'vertex' })
+    } else if (newCoords.length === prevCoords.length) {
+      const movedIdx = newCoords.findIndex((c, i) => c[0] !== prevCoords[i][0] || c[1] !== prevCoords[i][1])
+      if (movedIdx >= 0) {
+        undoStack.push({ type: 'move_vertex', vertexIndex: movedIdx, previousCoord: prevCoords[movedIdx] })
+        setState({ selectedVertexIndex: movedIdx, selectedVertexType: 'vertex' })
+      }
+    } else {
+      // no change in vertex count (shouldn't happen, but satisfies linter)
+    }
+    modifyStartCoords = null
+  })
+
+  // --- Vertex + midpoint layers (always-visible handles) ---
+  const midpointLayer = createMidpointLayer(map, manager.styles.midpointStyle)
+  const vertexLayer = createVertexLayer(map, manager.styles.vertexStyle)
+
+  // --- Active selection overlay — always on top of vertex and midpoint layers ---
+  const activeSource = new VectorSource()
+  const activeLayer = new VectorLayer({ source: activeSource, zIndex: 103 })
+  map.addLayer(activeLayer)
+
+  const updateActiveLayer = () => {
+    activeSource.clear()
+    const { selectedVertexIndex, selectedVertexType, vertices, midpoints } = state
+    if (selectedVertexIndex < 0) {
+      return
+    }
+    let coord, style
+    if (selectedVertexType === 'vertex') {
+      coord = vertices[selectedVertexIndex]
+      style = manager.styles.selectedVertexStyle
+    } else if (selectedVertexType === 'midpoint') {
+      coord = midpoints[selectedVertexIndex - vertices.length]
+      style = manager.styles.selectedMidpointStyle
+    } else {
+      return
+    }
+    if (!coord) {
+      return
+    }
+    const f = new Feature({ geometry: new Point(coord) })
+    f.setStyle(style)
+    activeSource.addFeature(f)
+  }
+
+  syncGeom() // initial populate
+
+  // --- Style hot-swap when map style changes ---
+  const onStylesChanged = (styles) => {
+    olFeature.setStyle(styles.editFeatureStyle)
+    vertexLayer.updateStyle(styles.vertexStyle)
+    midpointLayer.updateStyle(styles.midpointStyle)
+    updateActiveLayer()
+    touchHandler.updateColors(manager.colors)
+  }
+  manager.on('styleschanged', onStylesChanged)
+
+  // --- Pointer hit detection ---
+  const onPointerdown = (e) => {
+    if (e.pointerType === 'touch') {
+      state.interfaceType = 'touch'
+      touchHandler.updateTargetPosition()
+      return
+    }
+    state.interfaceType = 'pointer'
+
+    const olPixel = map.getEventPixel(e)
+    const pixel = { x: olPixel[0], y: olPixel[1] }
+    const hit = findNearest(map, state.vertices, state.midpoints, pixel)
+    if (hit?.type === 'vertex') {
+      setState({ selectedVertexIndex: hit.index, selectedVertexType: 'vertex' })
+    }
+  }
+
+  // click fires after OL Modify finishes, so state.vertices reflects any insertions/moves
+  const onContainerClick = (e) => {
+    if (state.interfaceType === 'touch') {
+      return
+    }
+    const olPixel = map.getEventPixel(e)
+    const pixel = { x: olPixel[0], y: olPixel[1] }
+    const hit = findNearest(map, state.vertices, state.midpoints, pixel)
+    if (hit?.type === 'vertex') {
+      setState({ selectedVertexIndex: hit.index, selectedVertexType: 'vertex' })
+    } else if (hit?.type === 'midpoint') {
+      // modifyend already selected the inserted vertex — nothing to do here
+    } else {
+      setState({ selectedVertexIndex: -1, selectedVertexType: null })
+    }
+  }
+
+  // Switch to pointer mode and hide the touch target as soon as the mouse moves.
+  const onPointerMove = (e) => {
+    if (e.pointerType !== 'mouse') {
+      return
+    }
+    if (state.interfaceType === 'pointer') {
+      return
+    }
+    state.interfaceType = 'pointer'
+    touchHandler.hide()
+  }
+
+  container.addEventListener('pointerdown', onPointerdown)
+  container.addEventListener('pointerenter', onPointerMove)
+  container.addEventListener('pointermove', onPointerMove)
+  container.addEventListener('click', onContainerClick)
+
+  // --- Button click (delete vertex) ---
+  const onButtonClick = (e) => {
+    if (deleteVertexButtonId && e.target.closest(`#${deleteVertexButtonId}`)) {
+      doDeleteVertex()
+    }
+  }
+  globalThis.addEventListener('click', onButtonClick)
+
+  // --- Operations ---
+
+  const doDeleteVertex = () => {
+    if (state.selectedVertexType !== 'vertex' || state.selectedVertexIndex < 0) {
+      return
+    }
+    const result = deleteVertex(olFeature, state.selectedVertexIndex)
+    if (!result) {
+      return
+    }
+    undoStack.push({ type: 'delete_vertex', vertexIndex: result.deletedIndex, deletedCoord: result.deletedCoord })
+    syncGeom()
+    setState({ selectedVertexIndex: -1, selectedVertexType: null })
+  }
+
+  const doUndo = () => {
+    const op = undoStack.pop()
+    if (!op) {
+      return
+    }
+    const previousIndex = state.selectedVertexIndex
+    const restoredIndex = applyUndo(olFeature, op)
+    syncGeom()
+    // Only re-select if a vertex was already active — undo must not create a new selection
+    const newIndex = previousIndex >= 0 ? restoredIndex : -1
+    setState({
+      selectedVertexIndex: newIndex,
+      selectedVertexType: newIndex >= 0 ? 'vertex' : null
+    })
+    if (previousIndex >= 0 && newIndex >= 0) {
+      onUpdate?.()
+    }
+  }
+
+  // --- Touch handler ---
+  const touchHandler = createTouchHandler({
+    map,
+    container,
+    getState,
+    setState,
+    colors: manager.colors,
+    snap,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      setState({ selectedVertexIndex: vertexIndex, selectedVertexType: 'vertex' })
+      touchHandler.updateTargetPosition()
+    },
+    onTap (hit) {
+      if (!hit) {
+        setState({ selectedVertexIndex: -1, selectedVertexType: null })
+        return
+      }
+      if (hit.type === 'vertex') {
+        setState({ selectedVertexIndex: hit.index, selectedVertexType: 'vertex' })
+        touchHandler.updateTargetPosition()
+        return
+      }
+      if (hit.type === 'midpoint') {
+        const result = insertAtMidpoint(olFeature, state.midpoints, hit.index, state.vertices.length)
+        if (!result) {
+          return
+        }
+        undoStack.push({ type: 'insert_vertex', vertexIndex: result.insertedIndex })
+        syncGeom()
+        setState({ selectedVertexIndex: result.insertedIndex, selectedVertexType: 'vertex' })
+        touchHandler.updateTargetPosition()
+      }
+    }
+  })
+  onDeselect = () => touchHandler.hide()
+  onUpdate = () => {
+    if (state.interfaceType === 'touch') {
+      touchHandler.updateTargetPosition()
+    }
+  }
+
+  // Reposition the touch target after OL re-renders with the new size.
+  // change:size fires before the render, so we wait for postrender to get
+  // correct pixel coords from getPixelFromCoordinate.
+  const onMapSizeChange = () => {
+    if (state.interfaceType !== 'touch' || state.selectedVertexIndex < 0) {
+      return
+    }
+    map.once('postrender', () => touchHandler.updateTargetPosition())
+  }
+  map.on('change:size', onMapSizeChange)
+
+  // --- Keyboard handler ---
+  const keyboardHandler = createKeyboardHandler({
+    map,
+    getState,
+    setState,
+    snap,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      setState({ selectedVertexIndex: vertexIndex, selectedVertexType: 'vertex' })
+    },
+    onInserted ({ insertedIndex }) {
+      undoStack.push({ type: 'insert_vertex', vertexIndex: insertedIndex })
+      syncGeom()
+    },
+    onDeleted: doDeleteVertex,
+    onUndo: doUndo,
+    onKeyboardActive () {
+      if (state.interfaceType === 'keyboard') {
+        return
+      }
+      state.interfaceType = 'keyboard'
+      touchHandler.hide()
+      container.focus({ preventScroll: true })
+    }
+  })
+
+  return {
+    setInterfaceType (type) {
+      if (type === state.interfaceType) {
+        return
+      }
+      state.interfaceType = type
+      if (type === 'touch') {
+        touchHandler.updateTargetPosition()
+      } else {
+        touchHandler.hide()
+      }
+    },
+
+    done () {
+      manager.emit('editfinish', store.toGeoJSON(olFeature))
+    },
+
+    cancel () {
+      // Restore original feature from store (re-read from initial state)
+      // The original was stored as tempFeature in reducer — events.js handles restore
+    },
+
+    undo: doUndo,
+    deleteVertex: doDeleteVertex,
+
+    destroy () {
+      olFeature.setStyle(originalFeatureStyle)
+      olFeature.getGeometry().un('change', onGeometryChange)
+      manager.off('styleschanged', onStylesChanged)
+      container.removeEventListener('pointerdown', onPointerdown)
+      container.removeEventListener('pointerenter', onPointerMove)
+      container.removeEventListener('pointermove', onPointerMove)
+      container.removeEventListener('click', onContainerClick)
+      globalThis.removeEventListener('click', onButtonClick)
+      map.un('change:size', onMapSizeChange)
+      map.removeInteraction(modifyInteraction)
+      activeSource.clear()
+      map.removeLayer(activeLayer)
+      midpointLayer.remove()
+      vertexLayer.remove()
+      touchHandler.destroy()
+      keyboardHandler.destroy()
+    }
+  }
+}