Skip to content
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

Jump to bottom

Rearrange DOM to fix widget events in all environments #8893

Draft
wants to merge 3 commits into
base: 9.0-release
Choose a base branch
from
Draft

Rearrange DOM to fix widget events in all environments #8893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
463787f
core and react: rearrange dom to deconflict events
chrisgervang May 14, 2024
e01d52b
create widget root in react
chrisgervang May 19, 2024
8961626
use className since there may be many deck instances
chrisgervang May 19, 2024
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 @@ -8,6 +8,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 =
Expand Down Expand Up @@ -138,6 +140,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 @@ -962,7 +962,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>('.event-manager-root') || this.canvas;
this.eventManager = new EventManager(eventRoot, {
touchAction: this.props.touchAction,
recognizerOptions: this.props.eventRecognizerOptions,
events: {
Expand Down Expand Up @@ -1007,9 +1009,13 @@ export default class Deck<ViewsT extends ViewOrViews = null> {

this.deckPicker = new DeckPicker(this.device);

const parent = this.props.parent || document.body;
const widgetParent =
parent.querySelector<HTMLDivElement>('.deck-widgets-container') || this.canvas?.parentElement;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should this be this.props.parent?.querySelector() like the eventRoot? Searching under document.body is suspicious...


this.widgetManager = new WidgetManager({
deck: this,
parentElement: this.canvas?.parentElement
parentElement: widgetParent
});
this.widgetManager.addDefault(new Tooltip());

Expand Down
13 changes: 12 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 @@ -264,11 +264,22 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
style: canvasStyle
});

const eventRoot = createElement(
'div',
{key: 'event-manager-root', className: 'event-manager-root'},
[canvas, childrenUnderViews]
);

const widgetRoot = createElement('div', {
key: 'deck-widgets-container',
className: 'deck-widgets-container'
});

// 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