From 89d6ff906c48a67619765fbe53f3c1bf53cf5ffe Mon Sep 17 00:00:00 2001
From: Dan Leech <dan.leech@defra.gov.uk>
Date: Wed, 1 Jul 2026 14:56:56 +0100
Subject: [PATCH] Toggle offset marker with interface type change

---
 plugins/beta/draw-ml/src/DrawInit.jsx                 | 11 +++++++++++
 plugins/beta/draw-ml/src/modes/createDrawMode.js      |  2 +-
 .../draw-ml/src/modes/editVertex/touchHandlers.js     |  2 +-
 plugins/beta/draw-ml/src/modes/editVertexMode.js      | 11 ++++++++++-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/plugins/beta/draw-ml/src/DrawInit.jsx b/plugins/beta/draw-ml/src/DrawInit.jsx
index 3e3bf1b7..dab21a2c 100755
--- a/plugins/beta/draw-ml/src/DrawInit.jsx
+++ b/plugins/beta/draw-ml/src/DrawInit.jsx
@@ -56,6 +56,17 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
     }
   }, [pluginState.mode, appState.interfaceType])
 
+  // Keep edit mode in sync with the global interface type so the touch
+  // offset target shows/hides immediately when the input device changes
+  // (e.g. switching between stylus/touch and mouse on a Surface tablet).
+  useEffect(() => {
+    if (pluginState.mode !== 'edit_vertex' || !mapProvider.map) {
+      return undefined
+    }
+    mapProvider.map.fire('draw.interfacetypechange', { interfaceType: appState.interfaceType })
+    return undefined
+  }, [appState.interfaceType, pluginState.mode])
+
   // Attach events when plgin state changes
   useEffect(() => {
     if (!mapProvider.draw) {
diff --git a/plugins/beta/draw-ml/src/modes/createDrawMode.js b/plugins/beta/draw-ml/src/modes/createDrawMode.js
index e19863d5..0fe4f63f 100644
--- a/plugins/beta/draw-ml/src/modes/createDrawMode.js
+++ b/plugins/beta/draw-ml/src/modes/createDrawMode.js
@@ -520,7 +520,7 @@ export const createDrawMode = (ParentMode, config) => { // NOSONAR — factory r
 
     onPointerdown (state, e) {
       if (e.pointerType !== 'touch') {
-        this._setInterface(state, 'pointer', false)
+        this._setInterface(state, 'mouse', false)
       }
     },
 
diff --git a/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js b/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js
index e1ef6cdc..cabce04e 100644
--- a/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js
+++ b/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js
@@ -43,7 +43,7 @@ export const touchHandlers = {
   },
 
   onPointerevent (state, e) {
-    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'pointer'
+    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'mouse'
     state.isPanEnabled = true
     if (e.pointerType === 'touch' && e.type === 'pointermove' && !isOnSVG(e.target.parentNode) && !state._ignorePointermoveDeselect) {
       this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, coordPath: null })
diff --git a/plugins/beta/draw-ml/src/modes/editVertexMode.js b/plugins/beta/draw-ml/src/modes/editVertexMode.js
index 5aa9fb7d..86527a91 100755
--- a/plugins/beta/draw-ml/src/modes/editVertexMode.js
+++ b/plugins/beta/draw-ml/src/modes/editVertexMode.js
@@ -86,7 +86,8 @@ export const EditVertexMode = {
       selectionchange: bind(this.onSelectionChange),
       scalechange: bind(this.onScaleChange),
       update: bind(this.onUpdate),
-      move: bind(this.onMove)
+      move: bind(this.onMove),
+      interfacetypechange: bind(this.onInterfaceTypeChange)
     }
 
     window.addEventListener('keydown', h.keydown, { capture: true })
@@ -102,6 +103,7 @@ export const EditVertexMode = {
     this.map.on('draw.scalechange', h.scalechange)
     this.map.on('draw.update', h.update)
     this.map.on('move', h.move)
+    this.map.on('draw.interfacetypechange', h.interfacetypechange)
   },
 
   applyVertexSelection (state, options) {
@@ -153,6 +155,12 @@ export const EditVertexMode = {
     state.scale = e.scale
   },
 
+  onInterfaceTypeChange (state, e) {
+    state.interfaceType = e.interfaceType
+    const vertex = state.selectedVertexIndex >= 0 ? state.vertecies[state.selectedVertexIndex] : null
+    this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
+  },
+
   onUpdate (state) {
     const prev = new Set(state.vertecies.map(c => JSON.stringify(c)))
     if (prev.size === state.vertecies.length) {
@@ -477,6 +485,7 @@ export const EditVertexMode = {
     this.map.off('draw.scalechange', h.scalechange)
     this.map.off('draw.update', h.update)
     this.map.off('move', h.move)
+    this.map.off('draw.interfacetypechange', h.interfacetypechange)
     this.map.dragPan.enable()
     window.removeEventListener('click', h.click)
     window.removeEventListener('keydown', h.keydown, { capture: true })