Cant prevent controller interactions during onDrag - MapboxOverlay

[stuartin]

Im trying to implement some basic 'drag' functionality that allows a user to drag a geoJSON feature around the map.
I've realised that I need to prevent the default panDrag behaviour while the feature is being dragged, however I'm hitting a number of problems and not sure how to proceed.
I'm using a vanilla JS implementation with MapLibre and the MapboxOverlay (non interweaved)

Things tried:

• Have tried event.stopPropagation() and event.stopImmediatePropagation() on the src geoJSON layer to prevent the drag events from bubbling but the event doesnt have those methods
• Have tried map.dragPan.disable(), this does disable dragPan, however it causes the onDragEnd event to fire and the onDrag event not to trigger any more
• Have tried adding the onViewStateChange to get access to the Deck controller and set dragPan there, but this callback doesnt fire?

Problems:

• The event prop callbacks dont appear to align with the Typescript definitions (they arent MjolnirGestureEvent/MjolnirPointerEvent) (https://github.com/visgl/deck.gl/blob/master/modules/mapbox/src/mapbox-overlay.ts#L262)
• onViewStateChange doesnt fire with MapboxOverlay
• preventDefault()/stopPropagation() cant be triggered?

Ideal Outcome

I think Ideally it would be great to be able to access the Deck Controller that is created when we use the MapboxOverlay, so that I can hook into the existing events and manage things directly there, but I dont think this is possible because it uses the Map controller?
If thats not possible, how can I prevent the default panDrag behaviour while preserving the onDrag* (and other) handlers?

The below CodeSandbox illustrates the problem, if you uncomment the onHover callback you can see that the geoJSON feature does moves with the mouse - I want this to happen during the onDrag* handlers.

https://codesandbox.io/p/devbox/bitter-grass-kvctsc

[stuartin]

I was doing some testing on if deck.gl can do this outside of a normal MapboxOverlay and using an OrthographicView deck.gl can handle this without problems.

new Deck({
...,
onDragStart: (info, event) => {
      ...
      console.log("startDrag");
      deck.setProps({ ...deck.props, ...{ controller: { dragPan: false } } })
    },
    onDragEnd: (info, event) => {
      ...
      console.log("endDrag");
      deck.setProps({ ...deck.props, ...{ controller: { dragPan: true } } })
      }
    },
})

Mapbox/MapLibre setup the panDrag during mousedown (which can be stopped by ev.preventDefault()), but this event triggers before deck onDragStart, so there is no way to prevent the default panDrag before drag is fired in deck.

Being able to update the deck controller when using MapOverlay would be perfect 🙏

[Fabioni]

Thanks for your summary, did you find any way to solve this issue?

[bicep]

@Fabioni @stuartin Did you guys manage to resolve this problem? I'm hoping to disable default panning behavior when dragging.

From here it says:

controller - always disabled (to use Mapbox's interaction handlers).

I think that's why this part

deck.setProps({ ...deck.props, ...{ controller: { dragPan: false } } })

doesn't work. I'm trying to disable the panning from Mapbox but mapRef.current?.getMap().dragPan.disable() will prevent the drag handlers from triggering.