From 463787f3620ca29cc1f8ab5afad7eb44cbd19c39 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Mon, 13 May 2024 17:18:00 -0700 Subject: [PATCH 1/3] core and react: rearrange dom to deconflict events Signed-off-by: Chris Gervang --- examples/website/arc/app.tsx | 3 +++ modules/core/src/lib/deck.ts | 7 ++++++- modules/react/src/deckgl.ts | 10 ++++++++-- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/examples/website/arc/app.tsx b/examples/website/arc/app.tsx index 8d2a0ef094e..cfa91de1119 100644 --- a/examples/website/arc/app.tsx +++ b/examples/website/arc/app.tsx @@ -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 = @@ -138,6 +140,7 @@ export default function App({ initialViewState={INITIAL_VIEW_STATE} controller={true} getTooltip={getTooltip} + widgets={[new ZoomWidget({}), new CompassWidget({}), new FullscreenWidget({})]} > diff --git a/modules/core/src/lib/deck.ts b/modules/core/src/lib/deck.ts index 63f81c6f543..f5a56106e13 100644 --- a/modules/core/src/lib/deck.ts +++ b/modules/core/src/lib/deck.ts @@ -1007,9 +1007,14 @@ export default class Deck { this.deckPicker = new DeckPicker(this.device); + const widgetContainer = document.createElement('div'); + widgetContainer.id = 'deck-widgets-container'; + const parent = this.props.parent?.parentElement || document.body; + parent.appendChild(widgetContainer); + this.widgetManager = new WidgetManager({ deck: this, - parentElement: this.canvas?.parentElement + parentElement: widgetContainer }); this.widgetManager.addDefault(new Tooltip()); diff --git a/modules/react/src/deckgl.ts b/modules/react/src/deckgl.ts index 14866a862c0..73d3bc5dda3 100644 --- a/modules/react/src/deckgl.ts +++ b/modules/react/src/deckgl.ts @@ -264,11 +264,17 @@ function DeckGLWithRef( style: canvasStyle }); + const eventRoot = createElement( + 'div', + {key: 'event-manager-root', id: 'event-manager-root', ref: containerRef}, + [canvas, childrenUnderViews] + ); + // Render deck.gl as the last child thisRef.control = createElement( 'div', - {id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle}, - [canvas, childrenUnderViews] + {id: `${id || 'deckgl'}-wrapper`, style: containerStyle}, + [eventRoot] ); } From e01d52b563adffe0a781acbfa520b26571bab13a Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Sat, 18 May 2024 18:12:21 -0700 Subject: [PATCH 2/3] create widget root in react Signed-off-by: Chris Gervang --- modules/core/src/lib/deck.ts | 7 +++---- modules/react/src/deckgl.ts | 9 +++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/modules/core/src/lib/deck.ts b/modules/core/src/lib/deck.ts index f5a56106e13..b1c8b5b387e 100644 --- a/modules/core/src/lib/deck.ts +++ b/modules/core/src/lib/deck.ts @@ -1007,10 +1007,9 @@ export default class Deck { this.deckPicker = new DeckPicker(this.device); - const widgetContainer = document.createElement('div'); - widgetContainer.id = 'deck-widgets-container'; - const parent = this.props.parent?.parentElement || document.body; - parent.appendChild(widgetContainer); + const parent = this.props.parent || document.body; + const widgetContainer = + parent.querySelector('.deck-widgets-container') || this.canvas?.parentElement; this.widgetManager = new WidgetManager({ deck: this, diff --git a/modules/react/src/deckgl.ts b/modules/react/src/deckgl.ts index 73d3bc5dda3..b061919ce97 100644 --- a/modules/react/src/deckgl.ts +++ b/modules/react/src/deckgl.ts @@ -266,15 +266,20 @@ function DeckGLWithRef( const eventRoot = createElement( 'div', - {key: 'event-manager-root', id: 'event-manager-root', ref: containerRef}, + {key: 'event-manager-root', className: 'event-manager-root', ref: containerRef}, [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`, style: containerStyle}, - [eventRoot] + [eventRoot, widgetRoot] ); } From 8961626d454f8f2ad30c91d27224fdf071f9daf1 Mon Sep 17 00:00:00 2001 From: Chris Gervang Date: Sat, 18 May 2024 18:19:40 -0700 Subject: [PATCH 3/3] use className since there may be many deck instances Signed-off-by: Chris Gervang --- modules/core/src/lib/deck.ts | 8 +++++--- modules/react/src/deckgl.ts | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/modules/core/src/lib/deck.ts b/modules/core/src/lib/deck.ts index b1c8b5b387e..bc95467a76d 100644 --- a/modules/core/src/lib/deck.ts +++ b/modules/core/src/lib/deck.ts @@ -962,7 +962,9 @@ export default class Deck { timeline.play(); this.animationLoop.attachTimeline(timeline); - this.eventManager = new EventManager(this.props.parent || this.canvas, { + const eventRoot = + this.props.parent?.querySelector('.event-manager-root') || this.canvas; + this.eventManager = new EventManager(eventRoot, { touchAction: this.props.touchAction, recognizerOptions: this.props.eventRecognizerOptions, events: { @@ -1008,12 +1010,12 @@ export default class Deck { this.deckPicker = new DeckPicker(this.device); const parent = this.props.parent || document.body; - const widgetContainer = + const widgetParent = parent.querySelector('.deck-widgets-container') || this.canvas?.parentElement; this.widgetManager = new WidgetManager({ deck: this, - parentElement: widgetContainer + parentElement: widgetParent }); this.widgetManager.addDefault(new Tooltip()); diff --git a/modules/react/src/deckgl.ts b/modules/react/src/deckgl.ts index b061919ce97..c14b62c6b1b 100644 --- a/modules/react/src/deckgl.ts +++ b/modules/react/src/deckgl.ts @@ -266,7 +266,7 @@ function DeckGLWithRef( const eventRoot = createElement( 'div', - {key: 'event-manager-root', className: 'event-manager-root', ref: containerRef}, + {key: 'event-manager-root', className: 'event-manager-root'}, [canvas, childrenUnderViews] ); @@ -278,7 +278,7 @@ function DeckGLWithRef( // Render deck.gl as the last child thisRef.control = createElement( 'div', - {id: `${id || 'deckgl'}-wrapper`, style: containerStyle}, + {id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle}, [eventRoot, widgetRoot] ); }