@defra/interactive-map 0.0.40-alpha → 0.0.41-alpha

package/plugins/draw/src/adapters/maplibre/MaplibreDrawAdapter.test.js

@@ -1,6 +1,7 @@
 import { createMapboxDraw } from './mapboxDraw.js'
 import { getSnapInstance, clearSnapState, clearSnapIndicator } from './utils/snapHelpers.js'
 import { createEventBus } from '../../utils/eventBus.js'
+import { resolvePointSymbol, hasSymbolStyle } from './pointSymbolImages.js'
 import { MAPBOX_DRAW_EVENTS, CUSTOM_DRAW_EVENTS, STYLE_DATA_EVENT } from './drawEvents.js'
 import { MaplibreDrawAdapter, displayedShape } from './MaplibreDrawAdapter.js'
 
@@ -11,6 +12,11 @@ jest.mock('./utils/snapHelpers.js', () => ({
   clearSnapIndicator: jest.fn()
 }))
 jest.mock('../../utils/eventBus.js', () => ({ createEventBus: jest.fn() }))
+jest.mock('./pointSymbolImages.js', () => ({
+  resolvePointSymbol: jest.fn(),
+  refreshAllPointSymbols: jest.fn(),
+  hasSymbolStyle: jest.fn()
+}))
 
 const SNAP_LAYER = 'snap-helper-circle'
 
@@ -112,19 +118,61 @@ describe('construction', () => {
 })
 
 describe('map event normalisation', () => {
-  test('create/editfinish/update forward the first feature', () => {
+  test('editfinish/update forward the first feature', () => {
     const { map, bus } = setup()
     const feature = { id: 'f1' }
 
-    onHandler(map, MAPBOX_DRAW_EVENTS.CREATE)({ features: [feature] })
     onHandler(map, CUSTOM_DRAW_EVENTS.EDIT_FINISH)({ features: [feature] })
     onHandler(map, MAPBOX_DRAW_EVENTS.UPDATE)({ features: [feature] })
 
-    expect(bus.emit).toHaveBeenCalledWith('create', feature)
     expect(bus.emit).toHaveBeenCalledWith('editfinish', feature)
     expect(bus.emit).toHaveBeenCalledWith('update', feature)
   })
 
+  // Drives fill/line/symbol-sort-key (styles.js) — a feature drawn interactively (not via the
+  // add() API) still needs a sort key assigned exactly once, at the point it's actually created.
+  // Deferred a tick: the owning draw mode's own 'draw.create' listener re-ids the feature to its
+  // final id in the same synchronous dispatch (see drawPointMode.js/clickHandlers.js), and this
+  // handler must run after that re-id, not before it.
+  test('create assigns an incrementing sortKey via setFeatureProperty before forwarding, after the mode\'s own re-id has run', () => {
+    jest.useFakeTimers()
+    const { map, draw, bus } = setup()
+    draw.get.mockImplementation((id) => ({ id, properties: { sortKey: id === 'f1' ? 1 : 2 } }))
+
+    onHandler(map, MAPBOX_DRAW_EVENTS.CREATE)({ features: [{ id: 'f1' }] })
+    onHandler(map, MAPBOX_DRAW_EVENTS.CREATE)({ features: [{ id: 'f2' }] })
+    expect(draw.setFeatureProperty).not.toHaveBeenCalled() // deferred past the mode's re-id
+    jest.runAllTimers()
+
+    expect(draw.setFeatureProperty).toHaveBeenNthCalledWith(1, 'f1', 'sortKey', 1)
+    expect(draw.setFeatureProperty).toHaveBeenNthCalledWith(2, 'f2', 'sortKey', 2)
+    // Forwards the freshly re-fetched feature (carrying the new property), not the stale event payload.
+    expect(bus.emit).toHaveBeenCalledWith('create', { id: 'f1', properties: { sortKey: 1 } })
+    expect(bus.emit).toHaveBeenCalledWith('create', { id: 'f2', properties: { sortKey: 2 } })
+    jest.useRealTimers()
+  })
+
+  // Reproduces the real integration hazard the deferral above guards against: a draw mode's
+  // 'draw.create' listener re-ids the feature (mutating the SAME event payload object) in the
+  // same synchronous dispatch, before this handler's deferred callback runs.
+  test('create picks up a feature id re-assigned synchronously by the owning draw mode', () => {
+    jest.useFakeTimers()
+    const { map, draw, bus } = setup()
+    draw.get.mockImplementation((id) => ({ id, properties: { sortKey: 1 } }))
+    const feature = { id: 'mapbox-temp-id' }
+
+    onHandler(map, MAPBOX_DRAW_EVENTS.CREATE)({ features: [feature] })
+    // Simulate the owning draw mode's own 'draw.create' listener re-idding this SAME feature
+    // object, synchronously, later in the same dispatch — before this handler's deferred
+    // callback below runs.
+    feature.id = 'caller-requested-id'
+    jest.runAllTimers()
+
+    expect(draw.setFeatureProperty).toHaveBeenCalledWith('caller-requested-id', 'sortKey', 1)
+    expect(bus.emit).toHaveBeenCalledWith('create', { id: 'caller-requested-id', properties: { sortKey: 1 } })
+    jest.useRealTimers()
+  })
+
   test('cancel forwards with no payload', () => {
     const { map, bus } = setup()
     onHandler(map, CUSTOM_DRAW_EVENTS.CANCEL)()
@@ -184,9 +232,41 @@ describe('displayedShape helper', () => {
     expect(line?.feature?.geometry?.type).toBe('LineString')
   })
 
+  test('builds a point feature from edit_point mode, with a flat (unnested) coordinate', () => {
+    const result = displayedShape('edit_point', [5, 5])
+    expect(result?.feature?.type).toBe('Feature')
+    expect(result?.feature?.geometry).toEqual({ type: 'Point', coordinates: [5, 5] })
+    expect(result?.numVertices).toBe(1)
+  })
+
   test('returns null for an unknown mode', () => {
     expect(displayedShape('unknown_mode', [[0, 0], [10, 0]])).toBeNull()
   })
+
+  // A ring/coordinate array can transiently be empty/absent right as a sketch starts —
+  // the `?? …` fallbacks keep numVertices a sane number instead of crashing on `undefined.length`.
+  test('falls back to numVertices 0 for a draw_polygon sketch with no ring yet', () => {
+    expect(displayedShape('draw_polygon', [])?.numVertices).toBe(0)
+  })
+
+  test('falls back to numVertices 0 for a draw_line sketch with no coordinates yet', () => {
+    expect(displayedShape('draw_line', undefined)?.numVertices).toBe(0)
+  })
+
+  test('falls back to numVertices 0 for an edit_vertex polygon with no ring yet', () => {
+    const result = displayedShape('edit_vertex', [])
+    expect(result?.feature?.geometry?.type).toBe('LineString') // coordinates[0] undefined → not detected as a polygon ring
+    expect(result?.numVertices).toBe(0)
+  })
+
+  // A plain object (not an array) still satisfies edit_vertex's own coordinates[0]?.[0]
+  // access without throwing, but has no .length of its own — the line branch's `?? 0`
+  // fallback the case above can't reach (an empty array's .length is 0, not nullish).
+  test('falls back to numVertices 0 for an edit_vertex line whose coordinates have no length at all', () => {
+    const result = displayedShape('edit_vertex', {})
+    expect(result?.feature?.geometry?.type).toBe('LineString')
+    expect(result?.numVertices).toBe(0)
+  })
 })
 
 describe('live invalid stroke (draw mode)', () => {
@@ -338,6 +418,18 @@ describe('live invalid stroke (edit mode)', () => {
     expect(bus.emit).not.toHaveBeenCalledWith('canplacechange', expect.anything())
   })
 
+  test('validity flips also gate the Done button while editing a point', () => {
+    jest.useFakeTimers()
+    const { map, draw, bus } = editSetup()
+    draw.getMode.mockReturnValue('edit_point')
+    const fire = onHandler(map, CUSTOM_DRAW_EVENTS.GEOMETRY_CHANGE)
+    map._drawGeometryValidator = () => ({ valid: false, reason: 'outside region' })
+    fire({ type: 'draw.geometrychange', coordinates: [5, 5] })
+    jest.runAllTimers()
+    expect(bus.emit).toHaveBeenCalledWith('validitychange', expect.objectContaining({ valid: false, reason: 'outside region' }))
+    jest.useRealTimers()
+  })
+
   test('lines never go dashed from the default rules while editing', () => {
     const { map } = editSetup()
     onHandler(map, CUSTOM_DRAW_EVENTS.GEOMETRY_CHANGE)({ type: 'draw.geometrychange', coordinates: [[0, 0], [10, 10], [10, 0], [0, 10]] })
@@ -376,6 +468,12 @@ describe('changeMode', () => {
     expect(draw.changeMode).toHaveBeenCalledWith('edit_vertex', { featureId: 'f9' })
   })
 
+  test('records the editing feature id when entering edit_point', () => {
+    const { adapter, draw } = setup()
+    adapter.changeMode('edit_point', { featureId: 'f9' })
+    expect(draw.changeMode).toHaveBeenCalledWith('edit_point', { featureId: 'f9' })
+  })
+
   test('defaults the editing feature id to null when omitted', () => {
     const { adapter, draw } = setup()
     adapter.changeMode('edit_vertex', {})
@@ -390,6 +488,20 @@ describe('changeMode', () => {
     adapter.changeMode('draw_polygon')
     expect(draw.changeMode).toHaveBeenCalledWith('draw_polygon', {})
   })
+
+  test('draw_point gets a resolvePointSymbol hook injected, delegating to pointSymbolImages.js', () => {
+    const { adapter, draw, map, mapProvider } = setup()
+    adapter.changeMode('draw_point', { featureId: 'p1' })
+
+    expect(draw.changeMode).toHaveBeenCalledWith('draw_point', {
+      featureId: 'p1',
+      resolvePointSymbol: expect.any(Function)
+    })
+
+    const injected = draw.changeMode.mock.calls[0][1].resolvePointSymbol
+    injected('p1', { symbol: 'pin' })
+    expect(resolvePointSymbol).toHaveBeenCalledWith({ draw, mapProvider, map, featureId: 'p1', properties: { symbol: 'pin' } })
+  })
 })
 
 describe('setGeometryValid', () => {
@@ -486,12 +598,122 @@ describe('simple delegations', () => {
     adapter.setFeatureProperty('d', 'p', 1)
 
     expect(draw.get).toHaveBeenCalledWith('a')
-    expect(draw.add).toHaveBeenCalledWith({ id: 'b' })
+    expect(draw.add).toHaveBeenCalledWith({ id: 'b', properties: { sortKey: 1 } })
     expect(draw.delete).toHaveBeenCalledWith('c')
     expect(draw.deleteAll).toHaveBeenCalled()
     expect(draw.setFeatureProperty).toHaveBeenCalledWith('d', 'p', 1)
   })
 
+  // A directly-added Point skips draw_point's own icon-resolving drawend handler.
+  describe('add() and point symbol resolution', () => {
+    test('resolves the symbol for a Point feature with symbol properties, using the id draw.add() returns', () => {
+      const { adapter, draw, map, mapProvider } = setup()
+      draw.add.mockReturnValue(['generated-id'])
+      hasSymbolStyle.mockReturnValue(true)
+      const feature = { geometry: { type: 'Point', coordinates: [0, 0] }, properties: { symbol: 'pin' } }
+
+      const result = adapter.add(feature)
+
+      expect(hasSymbolStyle).toHaveBeenCalledWith({ symbol: 'pin', sortKey: 1 })
+      expect(resolvePointSymbol).toHaveBeenCalledWith({
+        draw, mapProvider, map, featureId: 'generated-id', properties: { symbol: 'pin', sortKey: 1 }
+      })
+      expect(result).toEqual(['generated-id'])
+    })
+
+    test('does not attempt resolution for a Point with no symbol properties', () => {
+      const { adapter, draw } = setup()
+      draw.add.mockReturnValue(['id-1'])
+      hasSymbolStyle.mockReturnValue(false)
+      adapter.add({ geometry: { type: 'Point', coordinates: [0, 0] }, properties: {} })
+      expect(resolvePointSymbol).not.toHaveBeenCalled()
+    })
+
+    test('does not attempt resolution for a non-Point geometry', () => {
+      const { adapter, draw } = setup()
+      draw.add.mockReturnValue(['id-1'])
+      adapter.add({ geometry: { type: 'Polygon', coordinates: [[]] }, properties: { symbol: 'pin' } })
+      expect(hasSymbolStyle).not.toHaveBeenCalled()
+      expect(resolvePointSymbol).not.toHaveBeenCalled()
+    })
+
+    test('does not attempt resolution for a feature with no geometry', () => {
+      const { adapter, draw } = setup()
+      draw.add.mockReturnValue(['id-1'])
+      adapter.add({ id: 'b' })
+      expect(resolvePointSymbol).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('add() sort key assignment', () => {
+    test('assigns an incrementing sortKey to each genuinely new feature', () => {
+      const { adapter, draw } = setup()
+      adapter.add({ id: 'a' })
+      adapter.add({ id: 'b' })
+      expect(draw.add).toHaveBeenNthCalledWith(1, { id: 'a', properties: { sortKey: 1 } })
+      expect(draw.add).toHaveBeenNthCalledWith(2, { id: 'b', properties: { sortKey: 2 } })
+    })
+
+    test('preserves an existing sortKey rather than assigning a new one', () => {
+      const { adapter, draw } = setup()
+      adapter.add({ id: 'a', properties: { sortKey: 5 } })
+      expect(draw.add).toHaveBeenCalledWith({ id: 'a', properties: { sortKey: 5 } })
+    })
+  })
+
+  describe('setStyle()', () => {
+    test('merges the patch into the existing feature and re-adds it', () => {
+      const { adapter, draw } = setup()
+      const feature = { id: 'a', type: 'Feature', geometry: { type: 'Polygon', coordinates: [[]] }, properties: { stroke: 'red', name: 'x' } }
+      draw.get.mockReturnValue(feature)
+      draw.add.mockReturnValue(['a'])
+
+      adapter.setStyle('a', { stroke: 'blue' })
+
+      expect(draw.add).toHaveBeenCalledWith({
+        id: 'a',
+        type: 'Feature',
+        geometry: { type: 'Polygon', coordinates: [[]] },
+        properties: { stroke: 'blue', name: 'x', sortKey: 1 }
+      })
+    })
+
+    test('preserves an existing sortKey rather than assigning a new one', () => {
+      const { adapter, draw } = setup()
+      const feature = { id: 'a', type: 'Feature', geometry: { type: 'Polygon', coordinates: [[]] }, properties: { stroke: 'red', sortKey: 7 } }
+      draw.get.mockReturnValue(feature)
+      draw.add.mockReturnValue(['a'])
+
+      adapter.setStyle('a', { stroke: 'blue' })
+
+      expect(draw.add).toHaveBeenCalledWith(expect.objectContaining({ properties: { stroke: 'blue', sortKey: 7 } }))
+    })
+
+    // setStyle is routed through add() itself, so a Point patched with symbol properties gets
+    // its icon re-resolved the same way a directly-added one does.
+    test('re-resolves the icon for a Point patched with symbol properties', () => {
+      const { adapter, draw } = setup()
+      const feature = { id: 'p1', type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: { symbol: 'pin' } }
+      draw.get.mockReturnValue(feature)
+      draw.add.mockReturnValue(['p1'])
+      hasSymbolStyle.mockReturnValue(true)
+
+      adapter.setStyle('p1', { symbolBackgroundColor: '#ca3535' })
+
+      expect(resolvePointSymbol).toHaveBeenCalledWith(expect.objectContaining({
+        featureId: 'p1',
+        properties: { symbol: 'pin', symbolBackgroundColor: '#ca3535', sortKey: 1 }
+      }))
+    })
+
+    test('does nothing for an id with no existing feature', () => {
+      const { adapter, draw } = setup()
+      draw.get.mockReturnValue(undefined)
+      adapter.setStyle('missing', { stroke: 'blue' })
+      expect(draw.add).not.toHaveBeenCalled()
+    })
+  })
+
   test('setDrawingPreviewProperty tags the in-progress feature and re-renders', () => {
     const { adapter, map } = setup()
     const render = jest.fn()
@@ -570,6 +792,18 @@ describe('done', () => {
     expect(map.fire).not.toHaveBeenCalled()
     expect(draw.changeMode).not.toHaveBeenCalled()
   })
+
+  test('clears the undo stack and fires editfinish when editing a point', () => {
+    const { adapter, map, draw, undoStack } = setup()
+    adapter.changeMode('edit_point', { featureId: 'f1' })
+    draw.getMode.mockReturnValue('edit_point')
+
+    adapter.done()
+
+    expect(undoStack.clear).toHaveBeenCalled()
+    expect(map.fire).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.EDIT_FINISH, { features: [{ id: 'f1' }] })
+    expect(draw.changeMode).not.toHaveBeenCalledWith('disabled')
+  })
 })
 
 describe('cancel', () => {
@@ -719,6 +953,14 @@ describe('_handleModeChange', () => {
 })
 
 describe('_handleStyleData', () => {
+  test('does nothing when the map has no style yet (removed, or mid-teardown)', () => {
+    const { map } = setup()
+    map.getStyle.mockReturnValue(undefined)
+    expect(() => onHandler(map, STYLE_DATA_EVENT)()).not.toThrow()
+    expect(map.moveLayer).not.toHaveBeenCalled()
+    expect(map.setLayoutProperty).not.toHaveBeenCalled()
+  })
+
   test('does nothing when there are no layers', () => {
     const { map } = setup()
     map.getStyle.mockReturnValue({ layers: undefined })

package/plugins/draw/src/adapters/maplibre/mapboxDraw.js

@@ -1,8 +1,10 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import { DisabledMode } from './modes/disabledMode.js'
 import { EditVertexMode } from './modes/editVertexMode.js'
+import { EditPointMode } from './modes/editPointMode.js'
 import { DrawPolygonMode } from './modes/drawPolygonMode.js'
 import { DrawLineMode } from './modes/drawLineMode.js'
+import { DrawPointMode } from './modes/drawPointMode.js'
 import { createDrawStyles, updateDrawStyles } from './styles.js'
 import { initMapLibreSnap } from './mapboxSnap.js'
 import { createUndoStack } from '../../utils/undoStack.js'
@@ -10,6 +12,89 @@ import { setupTouchClickWorkaround } from './utils/touchClickWorkaround.js'
 import { applyTouchVertexColors } from './modes/editVertexMode/touchHandlers.js'
 import { resolveColors } from '../../utils/resolveColors.js'
 import { TOLERANCES, MAP_SIZE_SCALES } from './defaults.js'
+import { refreshAllPointSymbols } from './pointSymbolImages.js'
+
+// map.setStyle() discards MapLibre's entire previous Style, wiping every programmatically
+// added source/layer/image — including mapbox-gl-draw's own, which it never re-adds itself.
+// draw.options.styles already holds the fully processed cold+hot layer pairs, so re-adding
+// needs no new computation.
+const DRAW_SOURCES = { COLD: 'mapbox-gl-draw-cold', HOT: 'mapbox-gl-draw-hot' }
+
+// Re-creates the (empty) sources/layers only — deliberately doesn't push draw.getAll() back
+// in here. mapbox-gl-draw's own render() is requestAnimationFrame-debounced, so doing that
+// too early would write each point's *previous* (not yet re-resolved) image ids into the
+// fresh source, racing the correct write that refreshAllPointSymbols makes moments later.
+// The caller pushes the final data back in exactly once, after that settles.
+const ensureDrawSourcesAndLayers = (map, draw) => {
+  if (map.getSource(DRAW_SOURCES.COLD)) {
+    return false // survived (or already restored) — nothing to do
+  }
+  const empty = { type: 'FeatureCollection', features: [] }
+  map.addSource(DRAW_SOURCES.COLD, { data: empty, type: 'geojson' })
+  map.addSource(DRAW_SOURCES.HOT, { data: empty, type: 'geojson' })
+  draw.options.styles.forEach(style => map.addLayer(style))
+  return true
+}
+
+// Reacts to MAP_STYLE_CHANGE (fired off the native 'style.load' event, i.e. after setStyle()
+// actually ran), not MAP_SET_STYLE (fired the instant a change is *requested*, before setStyle
+// may have run) — registering map.once('idle', ...) too early can catch the map still idle
+// from the *previous* style and consume itself before the real wipe happens.
+const settleStyleChange = ({ map, draw, mapProvider, pluginConfig, onDone }) => {
+  const mapStyle = map._drawCurrentMapStyle
+  map.once('idle', () => {
+    const sourcesWereMissing = ensureDrawSourcesAndLayers(map, draw)
+    updateDrawStyles(map, mapStyle, pluginConfig)
+    const svg = map._drawEditContainer?.querySelector('[data-im-draw-touch-target]')
+    applyTouchVertexColors(svg, mapStyle, pluginConfig)
+    // Rasterised point symbol images are style-scoped (colours resolve per map style) —
+    // re-resolve every drawn point's icon now the new style has settled.
+    refreshAllPointSymbols({ draw, mapProvider, map }).then(() => {
+      if (sourcesWereMissing) {
+        // draw's own feature store still holds everything; push it back now the new style's
+        // image ids are resolved — exactly one write, with final data.
+        draw.set(draw.getAll())
+      }
+      // The highlight ring is a standalone layer maintained outside mapbox-gl-draw's own
+      // render cycle, so nothing guarantees MapLibre repaints it (or refreshes the hover
+      // cursor's queryRenderedFeatures results) right after a style reload — force it.
+      map.triggerRepaint()
+      onDone()
+    })
+  })
+}
+
+// Wires MAP_SET_STYLE (stashes the incoming style) and MAP_STYLE_CHANGE (settles it) onto the
+// event bus. Returns both handlers so createMapboxDraw's remove() can unsubscribe them.
+const wireStyleChangeHandling = ({ map, draw, mapProvider, pluginConfig, eventBus, events, notifyPointSymbolsRefreshed }) => {
+  const handleSetMapStyle = (e) => {
+    map._drawCurrentMapStyle = e
+  }
+  eventBus.on(events.MAP_SET_STYLE, handleSetMapStyle)
+
+  // MAP_STYLE_CHANGE fires twice per style change (two separate 'style.load' listeners
+  // elsewhere in the app) — this guard stops settleStyleChange's expensive work running twice.
+  let settlePending = false
+  const handleStyleChanged = () => {
+    if (settlePending) {
+      return
+    }
+    settlePending = true
+    settleStyleChange({
+      map,
+      draw,
+      mapProvider,
+      pluginConfig,
+      onDone: () => {
+        settlePending = false
+        notifyPointSymbolsRefreshed()
+      }
+    })
+  }
+  eventBus.on(events.MAP_STYLE_CHANGE, handleStyleChanged)
+
+  return { handleSetMapStyle, handleStyleChanged }
+}
 
 /**
  * Creates and manages a MapLibre/Mapbox Draw control instance configured for polygon editing.
@@ -40,8 +125,10 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
     ...MapboxDraw.modes,
     disabled: DisabledMode,
     edit_vertex: EditVertexMode,
+    edit_point: EditPointMode,
     draw_polygon: DrawPolygonMode,
-    draw_line: DrawLineMode
+    draw_line: DrawLineMode,
+    draw_point: DrawPointMode
   }
 
   // --- Create or reuse MapLibre Draw instance ---
@@ -67,10 +154,7 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   // We need a reference to this
   mapProvider.draw = draw
   map._drawCurrentMapStyle = mapStyle
-  // Stashed on the map (alongside _drawCurrentMapStyle) so mode code that only
-  // has `this.map` — e.g. touchHandlers.js's addTouchVertexTarget — can still
-  // resolve colour overrides without pluginConfig being threaded through every
-  // mode's option object.
+  // Stashed on the map so mode code with only `this.map` can resolve colour overrides.
   map._drawPluginConfig = pluginConfig
   // Initialize snap as disabled (matches initialState.snap = false)
   mapProvider.snapEnabled = false
@@ -92,16 +176,14 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
     colors: { vertex: snapColors.snapVertex, edge: snapColors.snapEdge }
   })
 
+  // Nudges plugins/interact's useHighlightSync to re-apply highlights once point symbols
+  // have actually finished re-resolving, rather than relying on a side-effect event.
+  const notifyPointSymbolsRefreshed = () => eventBus.emit(events.MAP_DATA_CHANGE)
+
   // --- Update colour scheme ---
-  const handleSetMapStyle = (e) => {
-    map._drawCurrentMapStyle = e
-    map.once('idle', () => {
-      updateDrawStyles(map, e, pluginConfig)
-      const svg = map._drawEditContainer?.querySelector('[data-im-draw-touch-target]')
-      applyTouchVertexColors(svg, e, pluginConfig)
-    })
-  }
-  eventBus.on(events.MAP_SET_STYLE, handleSetMapStyle)
+  const { handleSetMapStyle, handleStyleChanged } = wireStyleChangeHandling({
+    map, draw, mapProvider, pluginConfig, eventBus, events, notifyPointSymbolsRefreshed
+  })
 
   // --- Update map scale ---
   const handleSetMapSize = (e) => {
@@ -109,6 +191,17 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   }
   eventBus.on(events.MAP_SET_SIZE, handleSetMapSize)
 
+  // --- Update point symbol resolution for the new pixel ratio ---
+  // MAP_SET_PIXEL_RATIO carries the freshly computed pixel ratio itself, fired right after
+  // MAP_SET_SIZE — that's the value this needs, not map.getPixelRatio() (unchanged since init).
+  const handleSetPixelRatio = (pixelRatio) => {
+    refreshAllPointSymbols({ draw, mapProvider, map, pixelRatioOverride: pixelRatio }).then(() => {
+      map.triggerRepaint()
+      notifyPointSymbolsRefreshed()
+    })
+  }
+  eventBus.on(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
+
   // --- Return instance and cleanup function ---
   return {
     draw,
@@ -116,7 +209,9 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
       touchClickWorkaround.remove()
       // Remove event listeners
       eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
+      eventBus.off(events.MAP_STYLE_CHANGE, handleStyleChanged)
       eventBus.off(events.MAP_SET_SIZE, handleSetMapSize)
+      eventBus.off(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
       // Disable draw mode but keep control on map for reuse
       draw.changeMode('disabled')
       // Clear adapter reference (but not _mapboxDrawInstance so it persists)