@deck.gl/widgets 9.3.0-beta.2 → 9.3.1

package/src/splitter-widget.tsx

@@ -148,11 +148,11 @@ function evaluateViews(root: ManagedViewLayout): View[] {
 }
 
 /** Properties for the SplitterWidget */
-export type SplitterWidgetProps = WidgetProps & {
+export type SplitterWidgetProps<ViewsT extends View[] = View[]> = WidgetProps & {
   /** Stacking views descriptor */
   viewLayout: ViewLayout;
   /** Callback invoked when the splitter is dragged with the new split value */
-  onChange?: (views: View[]) => void;
+  onChange?: (views: ViewsT) => void;
   /** Callback invoked when dragging starts */
   onDragStart?: () => void;
   /** Callback invoked when dragging ends */
@@ -164,7 +164,10 @@ export type SplitterWidgetProps = WidgetProps & {
  * across the deck.gl canvas. It positions itself based on the split percentage
  * of the first view and provides callbacks when dragged.
  */
-export class SplitterWidget extends Widget<SplitterWidgetProps, View[]> {
+export class SplitterWidget<ViewsT extends View[] = View[]> extends Widget<
+  SplitterWidgetProps<ViewsT>,
+  ViewsT
+> {
   static defaultProps: Required<SplitterWidgetProps> = {
     ...Widget.defaultProps,
     id: 'splitter-widget',
@@ -178,17 +181,17 @@ export class SplitterWidget extends Widget<SplitterWidgetProps, View[]> {
   placement = 'fill' as const;
   viewLayouts!: ManagedViewLayout[];
   /** evaluated from the current viewLayouts */
-  views!: View[];
+  views!: ViewsT;
   /** views set in the last update */
-  lastViews?: View[];
+  lastViews?: ViewsT;
   needsUpdate = true;
 
-  constructor(props: SplitterWidgetProps) {
+  constructor(props: SplitterWidgetProps<ViewsT>) {
     super(props);
     this.viewLayouts = parseViewLayout(this.props.viewLayout);
   }
 
-  setProps(props: Partial<SplitterWidgetProps>) {
+  setProps(props: Partial<SplitterWidgetProps<ViewsT>>) {
     if (props.viewLayout && !deepEqual(props.viewLayout, this.props.viewLayout, -1)) {
       this.viewLayouts = parseViewLayout(props.viewLayout);
       this.views = undefined!;
@@ -207,9 +210,9 @@ export class SplitterWidget extends Widget<SplitterWidgetProps, View[]> {
   updateHTML() {
     if (!this.views) {
       // viewLayouts has changed, re-evaluate
-      this.views = evaluateViews(this.viewLayouts[0]);
+      this.views = evaluateViews(this.viewLayouts[0]) as ViewsT;
       // we send a copy to the callback so that externally set views can be differentiated from internal
-      this.props.onChange(this.views.slice());
+      this.props.onChange(this.views.slice() as ViewsT);
     }
     // This method is called inside deck.setProps > widgetManager.setProps > widget.setProps
     // Calling deck.setProps immediately would cause infinite loop
@@ -237,9 +240,9 @@ export class SplitterWidget extends Widget<SplitterWidgetProps, View[]> {
   private onChange(newSplit: number, layout: ManagedViewLayout) {
     layout.split = newSplit;
     // layout has updated, re-evaluate
-    this.views = evaluateViews(this.viewLayouts[0]);
+    this.views = evaluateViews(this.viewLayouts[0]) as ViewsT;
     // we send a copy to the callback so that externally set views can be differentiated from internal
-    this.props.onChange(this.views.slice());
+    this.props.onChange(this.views.slice() as ViewsT);
     this.doUpdate();
   }
 

package/src/stylesheet.css

@@ -486,6 +486,11 @@
 .deck-widget.deck-widget-popover {
   margin: 0 !important;
 }
+.deck-widget-popup-marker {
+  position: absolute;
+  pointer-events: all;
+  cursor: pointer;
+}
 .deck-widget-popup-content {
   border-radius: var(--button-corner-radius, 8px);
   background: var(--menu-background, #fff);

package/src/theme-widget.tsx

@@ -56,6 +56,7 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
   className = 'deck-widget-theme';
   placement: WidgetPlacement = 'top-left';
   themeMode: 'light' | 'dark' = 'dark';
+  appliedTheme: DeckWidgetTheme = {};
 
   constructor(props: ThemeWidgetProps = {}) {
     super(props);
@@ -65,38 +66,15 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
 
   // eslint-disable-next-line complexity
   setProps(props: Partial<ThemeWidgetProps>) {
-    const {lightModeTheme, darkModeTheme, themeMode: prevThemeMode} = this.props;
     this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
-
-    const currentMode = this.getThemeMode();
-
-    // Handle controlled mode - apply theme when controlled prop changes
-    if (props.themeMode !== undefined && props.themeMode !== prevThemeMode) {
-      this._applyTheme(props.themeMode);
-      return;
-    }
-
-    switch (currentMode) {
-      case 'light':
-        if (props.lightModeTheme && !deepEqual(props.lightModeTheme, lightModeTheme, 1)) {
-          this._applyTheme('light');
-        }
-        break;
-      case 'dark':
-        if (props.darkModeTheme && !deepEqual(props.darkModeTheme, darkModeTheme, 1)) {
-          this._applyTheme('dark');
-        }
-        break;
-      default:
-        log.warn(`Invalid theme mode ${currentMode}`)();
-    }
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
     const {lightModeLabel, darkModeLabel} = this.props;
     const currentMode = this.getThemeMode();
+    this._applyTheme(currentMode, rootElement);
 
     render(
       <IconButton
@@ -108,11 +86,6 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
     );
   }
 
-  onAdd() {
-    // Note: theme styling is applied in here onAdd() once DOM element is created
-    this._applyTheme(this.getThemeMode());
-  }
-
   /**
    * Returns the current theme mode.
    * In controlled mode, returns the themeMode prop.
@@ -132,24 +105,25 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
     // Only update internal state if uncontrolled
     if (this.props.themeMode === undefined) {
       this.themeMode = nextMode;
-      this._applyTheme(nextMode);
+      this.updateHTML();
     }
     // In controlled mode, parent will update themeMode prop which triggers _applyTheme via setProps
   }
 
   /** Apply theme styling without changing internal state */
-  _applyTheme(themeMode: 'light' | 'dark') {
-    const container = this.rootElement?.closest<HTMLDivElement>('.deck-widget-container');
-    if (container) {
-      const themeStyle =
-        themeMode === 'dark' ? this.props.darkModeTheme : this.props.lightModeTheme;
-      applyStyles(container, themeStyle);
+  _applyTheme(themeMode: 'light' | 'dark', rootElement: HTMLElement) {
+    const themeStyle = themeMode === 'dark' ? this.props.darkModeTheme : this.props.lightModeTheme;
+    if (deepEqual(themeStyle, this.appliedTheme, 1)) {
+      return;
+    }
+    const container = rootElement.closest<HTMLDivElement>('.deck-widget-container');
+    if (!container) return;
 
-      const label = themeMode === 'dark' ? this.props.darkModeLabel : this.props.lightModeLabel;
-      log.log(1, `Switched theme to ${label}`, themeStyle)();
+    applyStyles(container, themeStyle);
+    this.appliedTheme = themeStyle;
 
-      this.updateHTML();
-    }
+    const label = themeMode === 'dark' ? this.props.darkModeLabel : this.props.lightModeLabel;
+    log.log(1, `Switched theme to ${label}`, themeStyle)();
   }
 
   /** Read browser preference */

package/src/zoom-widget.tsx

@@ -163,15 +163,13 @@ export class ZoomWidget extends Widget<ZoomWidgetProps> {
   }
 
   handleZoomIn() {
-    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
-    for (const viewId of viewIds) {
+    for (const viewId of this.viewIds) {
       this.handleZoom(viewId, 1);
     }
   }
 
   handleZoomOut() {
-    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
-    for (const viewId of viewIds) {
+    for (const viewId of this.viewIds) {
       this.handleZoom(viewId, -1);
     }
   }