Toggle offset marker with interface type change

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) {

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)
       }
     },
 

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 })

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 })