Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Pessimistress merged 6 commits into from
Feb 24, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c69bff1
core and react: rearrange dom to deconflict events
chrisgervang May 14, 2024
e3d64f2
create widget root in react
chrisgervang May 19, 2024
b734efa
use className since there may be many deck instances
chrisgervang May 19, 2024
d1892d0
address comments
Pessimistress Feb 23, 2026
103fd90
Merge branch 'master' into chr/rearrange-widget-dom
chrisgervang Feb 23, 2026
8ebe54f
Address comments
Pessimistress Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions examples/website/arc/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Copy Markdown
Collaborator

@felixpalmer felixpalmer Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrisgervang adding this broke the website build with the latest loaders, any idea why? f939449

Copy link
Copy Markdown
Collaborator Author

@chrisgervang chrisgervang Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the error? How confident are we it has to do with loaders, or could it also be broken on master?

Copy link
Copy Markdown
Collaborator

@felixpalmer felixpalmer Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

Module not found: Error: Can't resolve '@deck.gl/widgets/stylesheet.css' in '/home/runner/work/deck.gl/deck.gl/examples/website/arc'

see: https://github.com/visgl/deck.gl/actions/runs/22398533353/job/64838419323

It doesn't seem broken on master, so it's a bit of a mystery to me


// Source data GeoJSON
const DATA_URL =
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions modules/core/src/lib/deck.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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());

Expand Down
17 changes: 16 additions & 1 deletion modules/react/src/deckgl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);
Comment thread
Pessimistress marked this conversation as resolved.

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

Expand Down
Loading