[Bug] Using MapboxOverlay, can't handle right click on a feature

[jonenst]

Description

From what I understand, it's not possible to handle a rightclick on a deckgl feature when using MapboxOverlay : https://github.com/visgl/deck.gl/blob/83b5149eacfda0815cde6e5eddd61c42037885cf/modules/mapbox/src/mapbox-overlay.ts#L79 registers these events, but with mapbox a right click is sent as a contextmenu event.

Flavors

• [ ] Script tag
• [X] React
• [ ] Python/Jupyter notebook
• [X] MapboxOverlay
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] ArcGIS

Expected Behavior

It should be possible to right click deckgl features. onClick on MapboxOverlay should work as much as possible like onClick on DeckGL (left click and right click), but if a separate API allows it it's ok I guess

Steps to Reproduce

https://codesandbox.io/p/sandbox/lucid-glade-c8fjmx

function DeckGLOverlay(props) {
  const overlay = useControl(() => new MapboxOverlay(props));
  overlay.setProps(props);
  return null;
}

<Map
        dragRotate={false}
        boxZoom={false}
      >
        <DeckGLOverlay
           layers={...}
            onClick={(info, event) => {
            // when using onClick on root DeckGL, event.leftButton or event.rightButton allows to handle leftclick
            // when using MapboxOverlay, rightclick doesn't dispatch here at all anyway
            // alternative: use event.srcEvent.originalEvent.shiftKey instead of right click to implement menus, etc...?
            }}/>
</Map>

Note: The onClick and onContextMenu (when interactiveLayerIds is specified) do work with the layers of react-map-gl (an extra "features" field is provided)

Environment

• Framework version:
• Browser:
• OS:

Logs

No response

[chrisgervang]

Deck doesn't implement right-click as a built-in event, but you can implement it yourself by calling the picking methods on a right-click event you attach. See https://deck.gl/docs/developer-guide/interactivity#calling-the-picking-engine-directly

[jonenst]

Hi @chrisgervang thanks for the advice on calling the picking engine directory, I may have to use that. However we've been using Deck's onClick with mjolnir's "rightButton" flag it works as expected when Deck is the controller (root jsx and react-map-gl as child)

[chrisgervang]

I'm not familiar with the left/right flag, and I wasn't able to reproduce the rightButton flag in your test code. Can you share more context on how to get the flag?

I see deck._onEvent called around 274 of the MapboxOverlay. Is that calling back deck's onClick prop in this setup?

[chrisgervang]

We could do something like #7728

[jonenst]

Yeah according to https://github.com/visgl/deck.gl/issues/1042 you can just do https://codesandbox.io/p/sandbox/laughing-rumple-7dwck8

[jonenst]

Hi @chrisgervang I can confirm it's possible to workaround this by calling the picking engine manually, it would be nice if we didn't have to write the following code: https://codesandbox.io/p/sandbox/intelligent-keldysh-57sqyj

--- /tmp/aze.txt
+++ /tmp/App.js
@@ -29,11 +29,12 @@
   ],
 });
 
-function DeckGLOverlay(props) {
+const MyDeckGLOverlay = React.forwardRef(function DeckGLOverlay(props, ref) {
   const overlay = useControl(() => new MapboxOverlay(props));
   overlay.setProps(props);
+  React.useImperativeHandle(ref, () => overlay, [overlay]);
   return null;
-}
+});
 
 function Root() {
   const scatterplotLayer = new ScatterplotLayer({
@@ -45,6 +46,8 @@
     getFillColor: [255, 0, 0],
   });
 
+  const deckRef = React.useRef();
+
   return (
     <Map
       interactiveLayerIds={['data']}
@@ -54,7 +57,11 @@
         zoom: 14,
       }}
       onClick={(event) => event.features?.[0]?.properties?.id && console.log("map onclick", event.features[0].properties.id)}
-      onContextMenu={(event) =>  event.features?.[0]?.properties?.id && console.log("map onContextMenu", event.features[0].properties.id)}
+      onContextMenu={(event) => {
+        event.features?.[0]?.properties?.id && console.log("map onContextMenu", event.features[0].properties.id)
+        const info = deckRef.current && deckRef.current.pickObject(event.point);
+        info && console.log("map oncontextMenu deckpick", info.object.id);
+      }}
       style={{ width: "100vw", height: "100vh" }}
       mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
     >
@@ -64,7 +71,8 @@
       >
         <Layer id="data" type="fill" />
       </Source>
-      <DeckGLOverlay
+      <MyDeckGLOverlay
+        ref={deckRef}
         layers={[scatterplotLayer]}
         onClick={(info, event) => info?.object?.id && console.log("deck onclick", info.object.id)}
       />