@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

package/src/App/components/MapButton/MapButton.test.jsx

@@ -23,7 +23,7 @@ jest.mock('../../renderer/SlotRenderer', () => ({
 }))
 
 jest.mock('../PopupMenu/PopupMenu', () => ({
-  PopupMenu: ({ startPos, items }) => {
+  PopupMenu: ({ startPos, items, buttonRect }) => {
     let selectedIndex = -1
     if (startPos === 'first' && items?.length > 0) {
       selectedIndex = 0
@@ -31,7 +31,7 @@ jest.mock('../PopupMenu/PopupMenu', () => ({
     if (startPos === 'last' && items?.length > 0) {
       selectedIndex = items.length - 1
     }
-    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
+    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)} data-has-rect={String(!!buttonRect)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
   }
 }))
 
@@ -41,7 +41,12 @@ const mockButtonRefs = { current: {} }
 jest.mock('../../store/appContext', () => ({ useApp: () => ({ buttonRefs: mockButtonRefs }) }))
 
 describe('MapButton', () => {
-  beforeEach(() => { mockButtonRefs.current = {} })
+  beforeEach(() => {
+    mockButtonRefs.current = {}
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      toJSON: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 })
+    }))
+  })
 
   const renderButton = (props = {}) => render(<MapButton buttonId='Test' iconId='icon' label='Label' {...props} />)
   const getButton = () => screen.getByRole('button')
@@ -148,6 +153,19 @@ describe('MapButton', () => {
     expect(menu).toHaveAttribute('data-selected-index', String(expectedIndex))
   })
 
+  it('passes buttonRect to popup menu on open', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    fireEvent.click(getButton())
+    expect(screen.getByTestId('popup-menu')).toHaveAttribute('data-has-rect', 'true')
+  })
+
+  it('captureMenuRect returns early when buttonRef is not stored', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    mockButtonRefs.current = {}
+    fireEvent.click(getButton())
+    expect(screen.getByTestId('popup-menu')).toHaveAttribute('data-has-rect', 'false')
+  })
+
   it('does nothing for arrow keys when no menu', () => {
     renderButton()
     fireEvent.keyUp(getButton(), { key: 'ArrowDown' })
@@ -188,4 +206,10 @@ describe('MapButton', () => {
     fireEvent.keyUp(el, { key: 'Enter' })
     expect(spy).not.toHaveBeenCalled()
   })
+
+  it('renders no Icon when iconId, iconSvgContent and menuItems are all absent', () => {
+    render(<MapButton buttonId='Test' label='Label' />)
+    expect(screen.queryByRole('img', { hidden: true })).toBeNull()
+    expect(screen.queryByTestId('icon')).toBeNull()
+  })
 })

package/src/App/components/Markers/Markers.jsx

@@ -1,47 +1,142 @@
-import { markerSvgPaths } from '../../../config/appConfig.js'
+import { useEffect, useRef, useState } from 'react'
 import { useMarkers } from '../../hooks/useMarkersAPI.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
-import { getValueForStyle } from '../../../utils/getValueForStyle.js'
+import { useService } from '../../store/serviceContext.js'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { scaleFactor } from '../../../config/appConfig.js'
+
+// Marker properties handled internally — excluded from style value resolution
+const INTERNAL_KEYS = new Set(['id', 'coords', 'x', 'y', 'isVisible', 'symbol', 'symbolSvgContent', 'viewBox', 'anchor', 'selectedColor', 'selectedWidth'])
+
+const resolveSymbolDef = (marker, defaults, symbolRegistry) => {
+  const svgContent = marker.symbolSvgContent || defaults.symbolSvgContent
+  // Inline symbolSvgContent takes precedence over a registered symbol,
+  // cascading through marker → constructor defaults
+  return svgContent
+    ? { svg: svgContent }
+    : symbolRegistry.get(marker.symbol || defaults.symbol)
+}
+
+const resolveViewBox = (marker, defaults, symbolDef) =>
+  marker.viewBox || defaults.viewBox || symbolDef?.viewBox || '0 0 38 38'
+
+const resolveAnchor = (marker, defaults, symbolDef) =>
+  marker.anchor ?? defaults.anchor ?? symbolDef?.anchor ?? [0.5, 0.5]
+
+/**
+ * When the interact plugin is active, watch mousemove to set cursor:pointer whenever
+ * the mouse is over one of the marker SVG elements (which are pointer-events:none).
+ */
+const useMarkerCursor = (markers, interactActive, viewportRef) => {
+  useEffect(() => {
+    if (!interactActive) {
+      return undefined
+    }
+    const viewport = viewportRef.current
+    if (!viewport) {
+      return undefined
+    }
+    const onMove = (e) => {
+      const hit = markers.items.some(marker => {
+        const el = markers.markerRefs?.get(marker.id)
+        if (!el) {
+          return false
+        }
+        const { left, top, right, bottom } = el.getBoundingClientRect()
+        return e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom
+      })
+      viewport.style.cursor = hit ? 'pointer' : ''
+    }
+    viewport.addEventListener('mousemove', onMove)
+    return () => {
+      viewport.removeEventListener('mousemove', onMove)
+      viewport.style.cursor = ''
+    }
+  }, [markers, interactActive, viewportRef])
+}
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Markers = () => {
-  const { id, markerShape, markerColor } = useConfig()
-  const { mapStyle } = useMap()
+  const { id } = useConfig()
+  const { mapStyle, mapSize } = useMap()
   const { markers, markerRef } = useMarkers()
+  const { symbolRegistry, eventBus } = useService()
+
+  const [canSelectMarker, setCanSelectMarker] = useState(false)
+  const [selectedMarkers, setSelectedMarkers] = useState([])
+  const viewportRef = useRef(null)
+
+  useEffect(() => {
+    const handleActive = ({ active, interactionModes = [] }) => setCanSelectMarker(active && interactionModes.includes('selectMarker'))
+    const handleSelectionChange = ({ selectedMarkers: next = [] }) => setSelectedMarkers(next)
+    eventBus.on('interact:active', handleActive)
+    eventBus.on('interact:selectionchange', handleSelectionChange)
+    return () => {
+      eventBus.off('interact:active', handleActive)
+      eventBus.off('interact:selectionchange', handleSelectionChange)
+    }
+  }, [eventBus])
+
+  // Resolve viewport element once on mount for cursor tracking
+  useEffect(() => {
+    viewportRef.current = document.querySelector('.im-c-viewport')
+  }, [])
+
+  useMarkerCursor(markers, canSelectMarker, viewportRef)
 
   if (!mapStyle) {
     return undefined
   }
 
-  const defaultSvgPaths = markerSvgPaths.find(m => m.shape === markerShape)
+  const defaults = symbolRegistry.getDefaults()
 
   return (
     <>
-      {markers.items.map(marker => (
-        <svg
-          key={marker.id}
-          ref={markerRef(marker.id)} // Single callback ref, just like useCrossHair
-          id={`${id}-marker-${marker.id}`}
-          className={`im-c-marker im-c-marker--${marker.markerShape || stringToKebab(markerShape)}`}
-          width='38'
-          height='38'
-          viewBox='0 0 38 38'
-          style={{ display: marker.isVisible ? 'block' : 'none' }}
-        >
-          <path
-            className='im-c-marker__background'
-            d={defaultSvgPaths.backgroundPath}
-            fill={getValueForStyle(marker.color || markerColor, mapStyle.id)}
-          />
-          <path
-            className='im-c-marker__graphic'
-            d={defaultSvgPaths.graphicPath}
-          />
-        </svg>
-      ))}
+      {markers.items.map(marker => {
+        const symbolDef = resolveSymbolDef(marker, defaults, symbolRegistry)
+        // selectedColor comes from mapStyle — not per-marker; selectedWidth stays in cascade
+        const styleValues = Object.fromEntries(
+          Object.entries(marker).filter(([k]) => !INTERNAL_KEYS.has(k))
+        )
+        const isSelected = selectedMarkers.includes(marker.id)
+        const resolvedSvg = isSelected
+          ? symbolRegistry.resolveSelected(symbolDef, styleValues, mapStyle)
+          : symbolRegistry.resolve(symbolDef, styleValues, mapStyle)
+
+        const viewBox = resolveViewBox(marker, defaults, symbolDef)
+        const [,, svgWidth, svgHeight] = viewBox.split(' ').map(Number)
+        const anchor = resolveAnchor(marker, defaults, symbolDef)
+        const shapeId = marker.symbol || defaults.symbol
+        const scale = scaleFactor[mapSize] ?? 1
+        const scaledWidth = svgWidth * scale
+        const scaledHeight = svgHeight * scale
+
+        return (
+          <svg
+            key={marker.id}
+            ref={markerRef(marker.id)}
+            id={`${id}-marker-${marker.id}`}
+            className={[
+              'im-c-marker',
+              `im-c-marker--${stringToKebab(shapeId)}`,
+              isSelected && 'im-c-marker--selected'
+            ].filter(Boolean).join(' ')}
+            width={scaledWidth}
+            height={scaledHeight}
+            viewBox={viewBox}
+            overflow='visible'
+            style={{
+              display: marker.isVisible ? 'block' : 'none',
+              marginLeft: `${-anchor[0] * scaledWidth}px`,
+              marginTop: `${-anchor[1] * scaledHeight}px`
+            }}
+          >
+            <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
+          </svg>
+        )
+      })}
     </>
   )
 }

package/src/App/components/Markers/Markers.module.scss

@@ -7,16 +7,6 @@
   position: absolute;
   left: 0;
   top: 0;
-  margin: -17px 0 0 -19px;
   pointer-events: none;
 }
 
-// 2. Elements
-.im-c-marker__graphic {
-  fill: var(--map-overlay-halo-color);
-}
-
-// 3. Modifiers
-.im-c-marker--pin .im-c-marker__graphic {
-  filter: opacity(50%) brightness(0.25);
-}

package/src/App/components/Markers/Markers.test.jsx

@@ -0,0 +1,246 @@
+import { render, act } from '@testing-library/react'
+import { Markers } from './Markers.jsx'
+import { useMarkers } from '../../hooks/useMarkersAPI.js'
+import { useConfig } from '../../store/configContext.js'
+import { useMap } from '../../store/mapContext.js'
+import { useService } from '../../store/serviceContext.js'
+
+jest.mock('../../hooks/useMarkersAPI.js', () => ({ useMarkers: jest.fn() }))
+jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
+jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
+jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
+jest.mock('../../../config/appConfig.js', () => ({ scaleFactor: { small: 1, medium: 1.5, large: 2 } }))
+
+const makeEventBus = () => {
+  const listeners = {}
+  return {
+    on: jest.fn((e, fn) => { listeners[e] = fn }),
+    off: jest.fn(),
+    emit: (e, payload) => listeners[e]?.(payload)
+  }
+}
+
+const makeSymbolRegistry = (overrides = {}) => ({
+  get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38', anchor: [0.5, 1] })),
+  getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38', anchor: [0.5, 1] })),
+  resolve: jest.fn(() => '<circle/>'),
+  resolveSelected: jest.fn(() => '<circle class="selected"/>'),
+  ...overrides
+})
+
+const makeMarker = (overrides = {}) => ({
+  id: 'marker-1', isVisible: true, symbol: 'pin', ...overrides
+})
+
+const setup = ({ markers = [], mapSize = 'small', eventBus, symbolRegistry, mapStyle = 'outdoor' } = {}) => {
+  const eb = eventBus ?? makeEventBus()
+  const sr = symbolRegistry ?? makeSymbolRegistry()
+  const markerRefs = new Map()
+  useConfig.mockReturnValue({ id: 'test-app' })
+  useMap.mockReturnValue({ mapStyle, mapSize })
+  useService.mockReturnValue({ symbolRegistry: sr, eventBus: eb })
+  useMarkers.mockReturnValue({
+    markers: { items: markers, markerRefs },
+    markerRef: (id) => (el) => { if (el) markerRefs.set(id, el) }
+  })
+  return { eb, sr, result: render(<Markers />) }
+}
+
+describe('Markers', () => {
+  it('renders nothing when mapStyle is not set', () => {
+    expect(setup({ mapStyle: null }).result.container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when there are no markers', () => {
+    expect(setup().result.container.querySelectorAll('svg')).toHaveLength(0)
+  })
+
+  it('renders one svg per marker with correct id and classes', () => {
+    const { result } = setup({ markers: [makeMarker(), makeMarker({ id: 'b', symbol: undefined })] })
+    const [svg1, svg2] = result.container.querySelectorAll('svg')
+    expect(svg1.getAttribute('id')).toBe('test-app-marker-marker-1')
+    expect(svg1).toHaveClass('im-c-marker', 'im-c-marker--pin')
+    expect(svg2).toHaveClass('im-c-marker--pin')
+  })
+
+  it.each([
+    [true, 'block'],
+    [false, 'none']
+  ])('display is %s when isVisible=%s', (isVisible, display) => {
+    const svg = setup({ markers: [makeMarker({ isVisible })] }).result.container.querySelector('svg')
+    expect(svg).toHaveStyle({ display })
+  })
+
+  it('uses inline symbolSvgContent over the symbol registry', () => {
+    const sr = makeSymbolRegistry()
+    setup({ markers: [makeMarker({ symbolSvgContent: '<rect/>' })], symbolRegistry: sr })
+    expect(sr.get).not.toHaveBeenCalled()
+  })
+
+  it('falls back to defaults.symbolSvgContent', () => {
+    const sr = makeSymbolRegistry({
+      getDefaults: jest.fn(() => ({ symbolSvgContent: '<default-svg/>', viewBox: '0 0 38 38', anchor: [0.5, 1] }))
+    })
+    setup({ markers: [makeMarker({ symbol: undefined })], symbolRegistry: sr })
+    expect(sr.get).not.toHaveBeenCalled()
+  })
+
+  it('uses marker.viewBox when provided', () => {
+    const svg = setup({ markers: [makeMarker({ viewBox: '0 0 50 60' })] }).result.container.querySelector('svg')
+    expect(svg.getAttribute('viewBox')).toBe('0 0 50 60')
+    expect(svg.getAttribute('width')).toBe('50')
+    expect(svg.getAttribute('height')).toBe('60')
+  })
+
+  it("falls back to '0 0 38 38' viewBox when none is provided", () => {
+    const sr = makeSymbolRegistry({
+      get: jest.fn(() => ({ svg: '<circle/>' })),
+      getDefaults: jest.fn(() => ({ symbol: 'pin' }))
+    })
+    expect(setup({ markers: [makeMarker()], symbolRegistry: sr }).result.container.querySelector('svg').getAttribute('viewBox')).toBe('0 0 38 38')
+  })
+
+  it.each([
+    ['marker.anchor', makeMarker({ anchor: [0, 0] }), null, '0px', '0px'],
+    ['symbolDef.anchor', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38', anchor: [0, 0.5] })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '0px', '-19px'],
+    ['[0.5, 0.5] fallback', makeMarker(), { get: jest.fn(() => ({ svg: '<circle/>', viewBox: '0 0 38 38' })), getDefaults: jest.fn(() => ({ symbol: 'pin', viewBox: '0 0 38 38' })) }, '-19px', '-19px']
+  ])('resolveAnchor uses %s', (_, marker, srOverrides, left, top) => {
+    const sr = srOverrides ? makeSymbolRegistry(srOverrides) : undefined
+    expect(setup({ markers: [marker], symbolRegistry: sr }).result.container.querySelector('svg')).toHaveStyle({ marginLeft: left, marginTop: top })
+  })
+
+  it.each([
+    ['small', '38', '38'],
+    ['medium', '57', '57'],
+    ['large', '76', '76'],
+    ['huge', '38', '38']
+  ])('scales svg dimensions for mapSize=%s', (mapSize, width, height) => {
+    const svg = setup({ markers: [makeMarker()], mapSize }).result.container.querySelector('svg')
+    expect(svg.getAttribute('width')).toBe(width)
+    expect(svg.getAttribute('height')).toBe(height)
+  })
+
+  it('scales anchor offsets for medium mapSize', () => {
+    expect(setup({ markers: [makeMarker()], mapSize: 'medium' }).result.container.querySelector('svg'))
+      .toHaveStyle({ marginLeft: '-28.5px', marginTop: '-57px' })
+  })
+
+  it('adds selected class and calls resolveSelected when marker is selected', () => {
+    const { eb, sr, result } = setup({ markers: [makeMarker()] })
+    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
+    expect(result.container.querySelector('svg')).toHaveClass('im-c-marker--selected')
+    expect(sr.resolveSelected).toHaveBeenCalled()
+    expect(sr.resolve).not.toHaveBeenCalledAfter?.(sr.resolveSelected)
+  })
+
+  it('uses resolve (not resolveSelected) for unselected markers', () => {
+    const { sr } = setup({ markers: [makeMarker()] })
+    expect(sr.resolve).toHaveBeenCalled()
+    expect(sr.resolveSelected).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    ['explicit empty array', { selectedMarkers: [] }],
+    ['missing selectedMarkers key', {}]
+  ])('deselects when selectionchange has %s', (_, payload) => {
+    const { eb, result } = setup({ markers: [makeMarker()] })
+    act(() => eb.emit('interact:selectionchange', { selectedMarkers: ['marker-1'] }))
+    act(() => eb.emit('interact:selectionchange', payload))
+    expect(result.container.querySelector('svg')).not.toHaveClass('im-c-marker--selected')
+  })
+
+  it('wires interact:active and interact:selectionchange on mount and removes them on unmount', () => {
+    const { eb, result } = setup()
+    expect(eb.on).toHaveBeenCalledWith('interact:active', expect.any(Function))
+    expect(eb.on).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+    result.unmount()
+    expect(eb.off).toHaveBeenCalledWith('interact:active', expect.any(Function))
+    expect(eb.off).toHaveBeenCalledWith('interact:selectionchange', expect.any(Function))
+  })
+
+  describe('useMarkerCursor', () => {
+    let viewport
+
+    beforeEach(() => {
+      viewport = document.createElement('div')
+      viewport.className = 'im-c-viewport'
+      document.body.appendChild(viewport)
+    })
+
+    afterEach(() => {
+      if (viewport.parentNode) document.body.removeChild(viewport)
+    })
+
+    const activate = (eb) => act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectMarker'] }))
+    const deactivate = (eb) => act(() => eb.emit('interact:active', { active: false, interactionModes: ['selectMarker'] }))
+    const fireMove = (clientX, clientY) => act(() => {
+      viewport.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX, clientY }))
+    })
+
+    const setupCursor = (markerBounds) => {
+      const eb = makeEventBus()
+      const markerRefs = new Map()
+      if (markerBounds) markerRefs.set('marker-1', { getBoundingClientRect: () => markerBounds })
+      useConfig.mockReturnValue({ id: 'test-app' })
+      useMap.mockReturnValue({ mapStyle: 'outdoor', mapSize: 'small' })
+      useService.mockReturnValue({ symbolRegistry: makeSymbolRegistry(), eventBus: eb })
+      useMarkers.mockReturnValue({ markers: { items: [makeMarker()], markerRefs }, markerRef: () => () => {} })
+      render(<Markers />)
+      return eb
+    }
+
+    it('does not track mousemove when interact is not active', () => {
+      setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when selectMarker is not in interactionModes', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      act(() => eb.emit('interact:active', { active: true, interactionModes: ['selectFeature'] }))
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when interactionModes is absent from payload', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      act(() => eb.emit('interact:active', { active: true }))
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('does not track mousemove when viewport element is absent', () => {
+      document.body.removeChild(viewport)
+      const eb = setupCursor({ left: 0, top: 0, right: 50, bottom: 50 })
+      activate(eb)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('sets cursor to pointer when mousemove lands inside a marker', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      activate(eb)
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('pointer')
+    })
+
+    it.each([
+      ['outside all markers', 100, 100],
+      ['marker has no ref element', 20, 20]
+    ])('cursor stays empty when %s', (label, x, y) => {
+      const bounds = label.includes('no ref') ? null : { left: 10, top: 10, right: 50, bottom: 50 }
+      const eb = setupCursor(bounds)
+      activate(eb)
+      fireMove(x, y)
+      expect(viewport.style.cursor).toBe('')
+    })
+
+    it('clears cursor and stops tracking when interact becomes inactive', () => {
+      const eb = setupCursor({ left: 10, top: 10, right: 50, bottom: 50 })
+      activate(eb)
+      fireMove(20, 20)
+      expect(viewport.style.cursor).toBe('pointer')
+      deactivate(eb)
+      expect(viewport.style.cursor).toBe('')
+    })
+  })
+})