@defra/interactive-map 0.0.36-alpha → 0.0.38-alpha

package/plugins/draw/src/utils/spatial.js

@@ -0,0 +1,243 @@
+import polygonSplitter from 'polygon-splitter'
+import turfUnion from '@turf/union'
+import {
+  featureCollection as turfFeatureCollection,
+  polygon as turfPolygon,
+  multiPolygon as turfMultiPolygon,
+  lineString as turfLineString,
+  multiLineString as turfMultiLineString,
+  point as turfPoint,
+  multiPoint as turfMultiPoint
+} from '@turf/helpers'
+
+/**
+ * @typedef {import('geojson').Feature<import('geojson').Polygon>} Polygon
+ * @typedef {import('geojson').Feature<import('geojson').LineString>} Line
+ * @typedef {import('geojson').Feature<import('geojson').Feature>} Feature
+ * @typedef {import('geojson').FeatureCollection<import('geojson').FeatureCollection>} FeatureCollection
+ */
+
+/**
+ * Extend a LineString at its endpoints, along their own direction, by a small
+ * fraction of the adjacent segment's length. Pure planar vector math — no
+ * geodesic assumption, so it works for any coordinate system (lon/lat degrees,
+ * projected meters like British National Grid, etc.). Turf's bearing/distance
+ * functions assume WGS84 lon/lat input; feeding them projected coordinates
+ * silently produces nonsense (large eastings/northings get treated as
+ * out-of-range degrees and wrapped), which is why this doesn't use them.
+ *
+ * @param {Feature<LineString>} line
+ * @param {number} fraction - portion of the adjacent segment's length to extend by
+ */
+function extendLine (line, fraction = 0.01) {
+  const coords = line.geometry.coordinates.map(c => [...c])
+  const last = coords.length - 1
+
+  const extend = (from, towards) => [
+    from[0] + (from[0] - towards[0]) * fraction,
+    from[1] + (from[1] - towards[1]) * fraction
+  ]
+
+  // Compute both from the original coordinates before assigning either — for a
+  // 2-point line, coords[last - 1] is coords[0], so writing coords[0] first
+  // would corrupt the reference point the end extension reads.
+  const newStart = extend(coords[0], coords[1])
+  const newEnd = extend(coords[last], coords[last - 1])
+  coords[0] = newStart
+  coords[last] = newEnd
+
+  return turfLineString(coords)
+}
+
+/**
+ * Split a polygon using a line.
+ * Only accepts splits that result in exactly two polygons.
+ *
+ * @param {Feature<Polygon>} polygon
+ * @param {Feature<LineString>} line
+ * @returns {FeatureCollection<Polygon>|null}
+ */
+const splitPolygon = (polygon, line) => {
+  // Extend only start and end vertices
+  const extended = extendLine(line) // assume extendLine only touches start/end now
+
+  let result
+  try {
+    result = polygonSplitter(polygon, extended)
+  } catch {
+    return null
+  }
+
+  // Must result in exactly 2 polygons
+  let polygons = []
+  if (result.geometry.type === 'MultiPolygon') {
+    if (result.geometry.coordinates.length !== 2) {
+      return null
+    }
+    polygons = result.geometry.coordinates.map(coords => turfPolygon(coords, polygon.properties))
+  } else {
+    return null
+  }
+
+  // Assign IDs & properties
+  const baseId = polygon.id ?? polygon.properties?.id ?? 'poly'
+  const features = polygons.map((poly, i) =>
+    turfPolygon(
+      poly.geometry.coordinates,
+      { ...polygon.properties, id: baseId },
+      { id: `${baseId}-${i + 1}` }
+    )
+  )
+
+  return turfFeatureCollection(features)
+}
+
+/**
+ * Merge multiple contiguous polygons into a single polygon.
+ * Only accepts a merge that results in exactly one polygon — a gap between two
+ * of the inputs would make Turf return a MultiPolygon instead, which is rejected.
+ *
+ * @param {Polygon[]} polygons
+ * @returns {Polygon|null}
+ */
+const mergePolygons = (polygons) => {
+  let result
+  try {
+    result = turfUnion(turfFeatureCollection(polygons))
+  } catch {
+    return null
+  }
+
+  if (result?.geometry?.type !== 'Polygon') {
+    return null
+  }
+
+  // Assign ID & properties from the first feature, matching splitPolygon's convention.
+  const baseId = polygons[0].id ?? polygons[0].properties?.id ?? 'poly'
+  return turfPolygon(result.geometry.coordinates, { ...polygons[0].properties, id: baseId }, { id: baseId })
+}
+
+/**
+ * Convert a GeoJSON Feature or geometry-like object into a Turf geometry.
+ *
+ * @param {Object} featureOrGeom - Either a Feature with a `.geometry` property or a raw GeoJSON geometry object.
+ * @returns {Object} Turf geometry (Polygon, LineString, Point, etc.)
+ *
+ * @throws Will throw if the geometry type is not supported.
+ */
+const toTurfGeometry = (featureOrGeom) => {
+  const geom = featureOrGeom.geometry || featureOrGeom
+
+  switch (geom.type) {
+    case 'Polygon':
+      return turfPolygon(geom.coordinates)
+    case 'MultiPolygon':
+      return turfMultiPolygon(geom.coordinates)
+    case 'LineString':
+      return turfLineString(geom.coordinates)
+    case 'MultiLineString':
+      return turfMultiLineString(geom.coordinates)
+    case 'Point':
+      return turfPoint(geom.coordinates)
+    case 'MultiPoint':
+      return turfMultiPoint(geom.coordinates)
+    default:
+      throw new Error(`Unsupported geometry type: ${geom.type}`)
+  }
+}
+
+const DEGREES_PER_HALF_TURN = 180
+
+const haversine = ([lon1, lat1], [lon2, lat2]) => {
+  const toRad = deg => deg * Math.PI / DEGREES_PER_HALF_TURN
+  const R = 6371000 // meters
+  const dLat = toRad(lat2 - lat1)
+  const dLon = toRad(lon2 - lon1)
+  const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2
+  return 2 * R * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+}
+
+const SMALL_RING_LENGTH = 3
+
+// True if any two points in the ring are within `tolerance` of each other
+const hasDuplicatePair = (ring, tolerance) => {
+  for (let i = 0; i < ring.length; i++) {
+    for (let j = i + 1; j < ring.length; j++) {
+      if (haversine(ring[i], ring[j]) < tolerance) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+const isNewCoordinate = (coords, tolerance = 0.01) => {
+  const ring = coords[0]
+  // First coord is always new
+  if (ring.length <= 1) {
+    return true
+  }
+  // For small rings, reject if any two points coincide
+  if (ring.length <= SMALL_RING_LENGTH && hasDuplicatePair(ring, tolerance)) {
+    return false
+  }
+  return true
+}
+
+const isValidLineClick = (coords, tolerance = 0.01) => {
+  // First coord is always valid
+  if (coords.length <= 1) {
+    return true
+  }
+  // The new coordinate must differ from the previous one
+  const last = coords[coords.length - 1]
+  const secondLast = coords[coords.length - 2]
+  return haversine(last, secondLast) >= tolerance
+}
+
+const isValidClick = (coords) => {
+  // Valid when it's the very first point, or a genuinely new (non-duplicate) coordinate.
+  // Callers only pass single-ring polygon coordinates while drawing, so no ring-closure /
+  // self-intersection checks are needed here.
+  return coords[0].length <= 1 || isNewCoordinate(coords)
+}
+
+const spatialNavigate = (start, pixels, direction) => {
+  const quadrant = pixels.filter((p) => {
+    const offsetX = Math.abs(p[0] - start[0])
+    const offsetY = Math.abs(p[1] - start[1])
+    let isQuadrant = false
+    if (direction === 'ArrowUp') {
+      isQuadrant = p[1] <= start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowDown') {
+      isQuadrant = p[1] > start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowLeft') {
+      isQuadrant = p[0] <= start[0] && offsetY < offsetX
+    } else if (direction === 'ArrowRight') {
+      isQuadrant = p[0] > start[0] && offsetY < offsetX
+    } else {
+      isQuadrant = true
+    }
+    return isQuadrant && (JSON.stringify(p) !== JSON.stringify(start))
+  })
+
+  if (!quadrant.length) {
+    quadrant.push(start)
+  }
+
+  const pythagorean = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
+  const distances = quadrant.map(p => pythagorean(Math.abs(start[0] - p[0]), Math.abs(start[1] - p[1])))
+  const closest = quadrant[distances.indexOf(Math.min(...distances))]
+  return pixels.findIndex(i => JSON.stringify(i) === JSON.stringify(closest))
+}
+
+export {
+  toTurfGeometry,
+  splitPolygon,
+  mergePolygons,
+  extendLine,
+  isNewCoordinate,
+  isValidClick,
+  isValidLineClick,
+  spatialNavigate
+}

package/plugins/draw/src/utils/spatial.test.js

@@ -0,0 +1,243 @@
+import polygonSplitter from 'polygon-splitter'
+import turfUnion from '@turf/union'
+import {
+  toTurfGeometry,
+  splitPolygon,
+  mergePolygons,
+  extendLine,
+  isNewCoordinate,
+  isValidClick,
+  isValidLineClick,
+  spatialNavigate
+} from './spatial.js'
+
+jest.mock('polygon-splitter', () => jest.fn())
+jest.mock('@turf/union', () => jest.fn())
+
+beforeEach(() => jest.clearAllMocks())
+
+describe('toTurfGeometry', () => {
+  test.each([
+    ['Polygon', { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }],
+    ['MultiPolygon', { type: 'MultiPolygon', coordinates: [[[[0, 0], [1, 0], [1, 1], [0, 0]]]] }],
+    ['LineString', { type: 'LineString', coordinates: [[0, 0], [1, 1]] }],
+    ['MultiLineString', { type: 'MultiLineString', coordinates: [[[0, 0], [1, 1]]] }],
+    ['Point', { type: 'Point', coordinates: [0, 0] }],
+    ['MultiPoint', { type: 'MultiPoint', coordinates: [[0, 0], [1, 1]] }]
+  ])('converts a raw %s geometry', (type, geom) => {
+    expect(toTurfGeometry(geom).geometry.type).toBe(type)
+  })
+
+  test('unwraps a Feature via its .geometry property', () => {
+    const feature = { geometry: { type: 'Point', coordinates: [0, 0] } }
+    expect(toTurfGeometry(feature).geometry.type).toBe('Point')
+  })
+
+  test('throws for unsupported geometry types', () => {
+    expect(() => toTurfGeometry({ type: 'GeometryCollection' }))
+      .toThrow('Unsupported geometry type: GeometryCollection')
+  })
+})
+
+describe('extendLine', () => {
+  test('extends a two-point line at both ends, along each segment\'s own direction', () => {
+    const line = { geometry: { coordinates: [[0, 0], [0, 10]] } }
+    const result = extendLine(line, 0.1)
+    expect(result.geometry.type).toBe('LineString')
+    // Start moves further away from the second point (backward); end moves
+    // further away from the second-to-last point (forward).
+    expect(result.geometry.coordinates).toEqual([[0, -1], [0, 11]])
+  })
+
+  test('extends only the endpoints of a multi-point line', () => {
+    const line = { geometry: { coordinates: [[0, 0], [0, 1], [0, 2]] } }
+    const result = extendLine(line, 0.1)
+    expect(result.geometry.coordinates).toHaveLength(3)
+    expect(result.geometry.coordinates[1]).toEqual([0, 1]) // middle vertex untouched
+  })
+
+  test('is pure planar math — correct at British National Grid scale (large eastings/northings)', () => {
+    // Geodesic bearing/destination would misread these as out-of-range lon/lat
+    // degrees and wrap them; plain vector extension has no such assumption.
+    const line = { geometry: { coordinates: [[337600, 504600], [337650, 504650]] } }
+    const result = extendLine(line, 0.1)
+    expect(result.geometry.coordinates[0]).toEqual([337595, 504595])
+    expect(result.geometry.coordinates[1]).toEqual([337655, 504655])
+  })
+})
+
+describe('splitPolygon', () => {
+  const polygon = {
+    id: 'sq',
+    properties: { id: 'sq', name: 'field' },
+    geometry: { type: 'Polygon', coordinates: [[[0, 0], [4, 0], [4, 4], [0, 4], [0, 0]]] }
+  }
+  const line = { geometry: { type: 'LineString', coordinates: [[2, -1], [2, 5]] } }
+
+  const twoPolygonResult = {
+    geometry: {
+      type: 'MultiPolygon',
+      coordinates: [
+        [[[0, 0], [2, 0], [2, 4], [0, 4], [0, 0]]],
+        [[[2, 0], [4, 0], [4, 4], [2, 4], [2, 0]]]
+      ]
+    }
+  }
+
+  test('returns a two-feature collection for a valid split', () => {
+    polygonSplitter.mockReturnValue(twoPolygonResult)
+
+    const result = splitPolygon(polygon, line)
+
+    expect(result.type).toBe('FeatureCollection')
+    expect(result.features).toHaveLength(2)
+    expect(result.features[0].id).toBe('sq-1')
+    expect(result.features[1].id).toBe('sq-2')
+    expect(result.features[0].properties).toMatchObject({ id: 'sq', name: 'field' })
+  })
+
+  test('returns null when the splitter throws', () => {
+    polygonSplitter.mockImplementation(() => { throw new Error('bad geometry') })
+    expect(splitPolygon(polygon, line)).toBeNull()
+  })
+
+  test('returns null when the result is not a MultiPolygon', () => {
+    polygonSplitter.mockReturnValue({ geometry: { type: 'Polygon', coordinates: [] } })
+    expect(splitPolygon(polygon, line)).toBeNull()
+  })
+
+  test('returns null when the split does not produce exactly two polygons', () => {
+    polygonSplitter.mockReturnValue({ geometry: { type: 'MultiPolygon', coordinates: [[[[0, 0], [1, 0], [1, 1], [0, 0]]]] } })
+    expect(splitPolygon(polygon, line)).toBeNull()
+  })
+
+  test('derives the base id from properties.id then a default', () => {
+    polygonSplitter.mockReturnValue(twoPolygonResult)
+
+    const noTopLevelId = { properties: { id: 'pid' }, geometry: polygon.geometry }
+    expect(splitPolygon(noTopLevelId, line).features[0].id).toBe('pid-1')
+
+    const anonymous = { properties: {}, geometry: polygon.geometry }
+    expect(splitPolygon(anonymous, line).features[0].id).toBe('poly-1')
+  })
+})
+
+describe('mergePolygons', () => {
+  const squareA = {
+    id: 'sq-a',
+    properties: { id: 'sq-a', name: 'field' },
+    geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]] }
+  }
+  const squareB = {
+    id: 'sq-b',
+    properties: { id: 'sq-b' },
+    geometry: { type: 'Polygon', coordinates: [[[1, 0], [2, 0], [2, 1], [1, 1], [1, 0]]] }
+  }
+
+  const mergedResult = {
+    geometry: { type: 'Polygon', coordinates: [[[0, 0], [2, 0], [2, 1], [0, 1], [0, 0]]] }
+  }
+
+  test('returns a single merged polygon for a valid union', () => {
+    turfUnion.mockReturnValue(mergedResult)
+
+    const result = mergePolygons([squareA, squareB])
+
+    expect(result.geometry.type).toBe('Polygon')
+    expect(result.id).toBe('sq-a')
+    expect(result.properties).toMatchObject({ id: 'sq-a', name: 'field' })
+  })
+
+  test('returns null when union throws', () => {
+    turfUnion.mockImplementation(() => { throw new Error('bad geometry') })
+    expect(mergePolygons([squareA, squareB])).toBeNull()
+  })
+
+  test('returns null when the inputs are not contiguous (MultiPolygon result)', () => {
+    turfUnion.mockReturnValue({ geometry: { type: 'MultiPolygon', coordinates: [] } })
+    expect(mergePolygons([squareA, squareB])).toBeNull()
+  })
+
+  test('returns null when union returns null', () => {
+    turfUnion.mockReturnValue(null)
+    expect(mergePolygons([squareA, squareB])).toBeNull()
+  })
+
+  test('derives the base id from properties.id then a default', () => {
+    turfUnion.mockReturnValue(mergedResult)
+
+    const noTopLevelId = { properties: { id: 'pid' }, geometry: squareA.geometry }
+    expect(mergePolygons([noTopLevelId, squareB]).id).toBe('pid')
+
+    const anonymous = { properties: {}, geometry: squareA.geometry }
+    expect(mergePolygons([anonymous, squareB]).id).toBe('poly')
+  })
+})
+
+describe('isNewCoordinate', () => {
+  test('is true for a ring with a single point', () => {
+    expect(isNewCoordinate([[[0, 0]]])).toBe(true)
+  })
+
+  test('is false when a small ring has coincident points', () => {
+    expect(isNewCoordinate([[[0, 0], [0, 0]]])).toBe(false)
+  })
+
+  test('is true when a small ring has distinct points', () => {
+    expect(isNewCoordinate([[[0, 0], [10, 10]]])).toBe(true)
+  })
+
+  test('skips the duplicate check for larger rings', () => {
+    expect(isNewCoordinate([[[0, 0], [0, 0], [1, 1], [2, 2], [3, 3]]])).toBe(true)
+  })
+})
+
+describe('isValidClick', () => {
+  test('is true when the ring has a single point', () => {
+    expect(isValidClick([[[0, 0]]])).toBe(true)
+  })
+
+  test('is true for a new (non-duplicate) coordinate', () => {
+    expect(isValidClick([[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]])).toBe(true)
+  })
+
+  test('is false when a small ring repeats a coordinate', () => {
+    expect(isValidClick([[[0, 0], [0, 0]]])).toBe(false)
+  })
+})
+
+describe('isValidLineClick', () => {
+  test('is true for the first coordinate', () => {
+    expect(isValidLineClick([[0, 0]])).toBe(true)
+  })
+
+  test('is true when the last two coordinates differ', () => {
+    expect(isValidLineClick([[0, 0], [10, 10]])).toBe(true)
+  })
+
+  test('is false when the last two coordinates coincide', () => {
+    expect(isValidLineClick([[0, 0], [0, 0]])).toBe(false)
+  })
+})
+
+describe('spatialNavigate', () => {
+  const start = [0, 0]
+  const pixels = [[0, 0], [0, -10], [0, 10], [-10, 0], [10, 0]]
+
+  test.each([
+    ['ArrowUp', 1],
+    ['ArrowDown', 2],
+    ['ArrowLeft', 3],
+    ['ArrowRight', 4]
+  ])('finds the nearest pixel for %s', (direction, expectedIndex) => {
+    expect(spatialNavigate(start, pixels, direction)).toBe(expectedIndex)
+  })
+
+  test('considers all pixels for an unrecognised direction', () => {
+    expect(spatialNavigate(start, pixels, 'Tab')).toBe(1)
+  })
+
+  test('falls back to the start point when no pixel is in the quadrant', () => {
+    expect(spatialNavigate(start, [[0, 0]], 'ArrowUp')).toBe(0)
+  })
+})

package/plugins/draw/src/utils/touchTarget.js

@@ -0,0 +1,95 @@
+/**
+ * SVG offset vertex target for touch edit mode
+ * Shown below the finger so users can accurately reposition vertices without finger occlusion.
+ *
+ * Colors update dynamically based on current color scheme via CSS custom properties:
+ *   --draw-halo      outer ring (editActive color)
+ *   --draw-bg        inner background (editHalo color)
+ *   --draw-primary   arrow icons and centre dot (editVertex color)
+ */
+
+import { SIZES } from '../defaults.js'
+
+const HALF_SIZE = SIZES.touchTargetSize / 2
+
+/**
+ * Generate SVG touch target HTML string based on configured size
+ * @returns {string} SVG HTML
+ */
+function generateSvgHtml () {
+  const size = SIZES.touchTargetSize
+  const half = HALF_SIZE
+  return `
+    <svg width='${size}' height='${size}' viewBox='0 0 48 48' fill-rule='evenodd'
+      style='display:none;position:absolute;top:0;left:0;margin:${half}px 0 0 -${half}px;cursor:grab'
+      class='im-draw-touch-target' data-im-draw-touch-target>
+      <circle cx='24' cy='24' r='24' fill='var(--draw-halo, #000)'/>
+      <path d="M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z" fill='var(--draw-bg, #fff)'/>
+    </svg>
+  `
+}
+
+/**
+ * Create or retrieve the touch target SVG element
+ * @param {HTMLElement} container - Parent container element
+ * @returns {SVGElement} The touch target element
+ */
+export const createTouchTarget = (container) => {
+  let el = container.querySelector('[data-im-draw-touch-target]')
+  if (!el) {
+    container.insertAdjacentHTML('beforeend', generateSvgHtml())
+    el = container.querySelector('[data-im-draw-touch-target]')
+  }
+  return el
+}
+
+/**
+ * Apply color scheme to touch target SVG
+ * @param {SVGElement} el - Touch target element
+ * @param {object} colors - Color object with editActive, editHalo, editVertex properties
+ */
+export const applyTouchTargetColors = (el, colors) => {
+  if (!el) {
+    return
+  }
+  el.style.setProperty('--draw-halo', colors.editActive)
+  el.style.setProperty('--draw-bg', colors.editHalo)
+  el.style.setProperty('--draw-primary', colors.editVertex)
+}
+
+/**
+ * Show touch target at specified pixel position
+ * @param {SVGElement} el - Touch target element
+ * @param {object} pixel - Position object with x, y properties
+ */
+export const showTouchTarget = (el, pixel) => {
+  if (!pixel || !el) {
+    return
+  }
+  el.style.left = `${pixel.x}px`
+  el.style.top = `${pixel.y}px`
+  el.style.display = 'block'
+}
+
+/**
+ * Hide touch target
+ * @param {SVGElement} el - Touch target element
+ */
+export const hideTouchTarget = (el) => {
+  if (el) {
+    el.style.display = 'none'
+  }
+}
+
+/**
+ * Check if event target is part of the touch target SVG
+ * @param {HTMLElement} el - Element to check
+ * @returns {boolean} True if element is part of touch target
+ */
+export const isOnTouchTarget = (el) => {
+  if (!el) {
+    return false
+  }
+  const parent = el.parentNode
+  return (parent instanceof globalThis.SVGElement) || (parent?.ownerSVGElement != null)
+}

package/plugins/draw/src/utils/touchTarget.test.js

@@ -0,0 +1,107 @@
+import {
+  createTouchTarget,
+  applyTouchTargetColors,
+  showTouchTarget,
+  hideTouchTarget,
+  isOnTouchTarget
+} from './touchTarget.js'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+describe('createTouchTarget', () => {
+  test('inserts the SVG target once and returns it', () => {
+    const container = document.createElement('div')
+
+    const el = createTouchTarget(container)
+
+    expect(el).not.toBeNull()
+    expect(el.hasAttribute('data-im-draw-touch-target')).toBe(true)
+    expect(container.querySelectorAll('[data-im-draw-touch-target]')).toHaveLength(1)
+  })
+
+  test('returns the existing target without inserting a second one', () => {
+    const container = document.createElement('div')
+    const first = createTouchTarget(container)
+    const second = createTouchTarget(container)
+
+    expect(second).toBe(first)
+    expect(container.querySelectorAll('[data-im-draw-touch-target]')).toHaveLength(1)
+  })
+})
+
+describe('applyTouchTargetColors', () => {
+  test('sets the CSS custom properties from the colours', () => {
+    const el = document.createElement('div')
+
+    applyTouchTargetColors(el, { editActive: 'a', editHalo: 'h', editVertex: 'v' })
+
+    expect(el.style.getPropertyValue('--draw-halo')).toBe('a')
+    expect(el.style.getPropertyValue('--draw-bg')).toBe('h')
+    expect(el.style.getPropertyValue('--draw-primary')).toBe('v')
+  })
+
+  test('does nothing for a null element', () => {
+    expect(() => applyTouchTargetColors(null, {})).not.toThrow()
+  })
+})
+
+describe('showTouchTarget', () => {
+  test('positions and shows the element', () => {
+    const el = document.createElement('div')
+
+    showTouchTarget(el, { x: 10, y: 20 })
+
+    expect(el.style.left).toBe('10px')
+    expect(el.style.top).toBe('20px')
+    expect(el.style.display).toBe('block')
+  })
+
+  test('does nothing without a pixel or an element', () => {
+    const el = document.createElement('div')
+    showTouchTarget(el, null)
+    expect(el.style.display).toBe('')
+
+    expect(() => showTouchTarget(null, { x: 0, y: 0 })).not.toThrow()
+  })
+})
+
+describe('hideTouchTarget', () => {
+  test('hides the element', () => {
+    const el = document.createElement('div')
+    el.style.display = 'block'
+
+    hideTouchTarget(el)
+
+    expect(el.style.display).toBe('none')
+  })
+
+  test('does nothing for a null element', () => {
+    expect(() => hideTouchTarget(null)).not.toThrow()
+  })
+})
+
+describe('isOnTouchTarget', () => {
+  test('returns false for a null element', () => {
+    expect(isOnTouchTarget(null)).toBe(false)
+  })
+
+  test('returns false for an element without a parent', () => {
+    expect(isOnTouchTarget(document.createElement('div'))).toBe(false)
+  })
+
+  test('returns true when the parent is an SVG element', () => {
+    const svg = document.createElementNS(SVG_NS, 'svg')
+    const circle = document.createElementNS(SVG_NS, 'circle')
+    svg.appendChild(circle)
+
+    expect(isOnTouchTarget(circle)).toBe(true)
+  })
+
+  test('returns false when the parent is a plain HTML element', () => {
+    const div = document.createElement('div')
+    const span = document.createElement('span')
+    div.appendChild(span)
+
+    expect(isOnTouchTarget(span)).toBe(false)
+  })
+})