fix(widgets) events in react reverse controlled env (#8893)

Co-authored-by: Xiaoji Chen <cxiaoji@gmail.com>

Author: chrisgervang

examples/website/arc/app.tsx

@@ -12,6 +12,8 @@ import {scaleQuantile} from 'd3-scale';
 
 import type {Color, PickingInfo, MapViewState} from '@deck.gl/core';
 import type {Feature, Polygon, MultiPolygon} from 'geojson';
+import {CompassWidget, ZoomWidget, FullscreenWidget} from '@deck.gl/widgets';
+import '@deck.gl/widgets/stylesheet.css';
 
 // Source data GeoJSON
 const DATA_URL =
@@ -142,6 +144,7 @@ export default function App({
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}
       getTooltip={getTooltip}
+      widgets={[new ZoomWidget({}), new CompassWidget({}), new FullscreenWidget({})]}
     >
       <Map reuseMaps mapStyle={mapStyle} />
     </DeckGL>

modules/core/src/lib/deck.ts

@@ -1072,7 +1072,9 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
     timeline.play();
     this.animationLoop.attachTimeline(timeline);
 
-    this.eventManager = new EventManager(this.props.parent || this.canvas, {
+    const eventRoot =
+      this.props.parent?.querySelector<HTMLDivElement>('.deck-events-root') || this.canvas;
+    this.eventManager = new EventManager(eventRoot, {
       touchAction: this.props.touchAction,
       recognizers: Object.keys(RECOGNIZERS).map((eventName: string) => {
         // Resolve recognizer settings
@@ -1128,9 +1130,13 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
 
     this.deckPicker = new DeckPicker(this.device);
 
+    const widgetParent =
+      this.props.parent?.querySelector<HTMLDivElement>('.deck-widgets-root') ||
+      this.canvas?.parentElement;
+
     this.widgetManager = new WidgetManager({
       deck: this,
-      parentElement: this.canvas?.parentElement
+      parentElement: widgetParent
     });
     this.widgetManager.addDefault(new TooltipWidget());
 

modules/react/src/deckgl.ts

@@ -259,11 +259,26 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
       style: canvasStyle
     });
 
+    const eventRoot = createElement(
+      'div',
+      {
+        key: 'deck-events-root',
+        className: 'deck-events-root',
+        style: {width, height}
+      },
+      [canvas, childrenUnderViews]
+    );
+
+    const widgetRoot = createElement('div', {
+      key: 'deck-widgets-root',
+      className: 'deck-widgets-root'
+    });
+
     // Render deck.gl as the last child
     thisRef.control = createElement(
       'div',
       {id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle},
-      [canvas, childrenUnderViews]
+      [eventRoot, widgetRoot]
     );
   }