@deck.gl/widgets 9.3.0-alpha.1 → 9.3.0-alpha.2

package/src/splitter-widget.tsx

@@ -2,22 +2,157 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {h, render} from 'preact';
-import {useState, useRef} from 'preact/hooks';
-import {Widget, type WidgetProps} from '@deck.gl/core';
+import {JSX, render} from 'preact';
+import {useState, useRef, useEffect} from 'preact/hooks';
+import {
+  Widget,
+  _deepEqual as deepEqual,
+  type Deck,
+  type WidgetProps,
+  type View
+} from '@deck.gl/core';
+
+export type ViewLayout = {
+  /** Stacking orientation of the sub views */
+  orientation: 'vertical' | 'horizontal';
+  /** Initial instances that describe the sub views.
+   * x, y, width and height of the views' props will be overwritten by the SplitterWidget as split changes. */
+  views: [view1: View | ViewLayout, view2: View | ViewLayout];
+  /** The ratio of view1's share over the whole available height (vertical) or width (horizontal). Between 0-1.
+   * @default 0.5
+   */
+  initialSplit?: number;
+  /** Whether the split can be changed by dragging the border between the two views.
+   * @default true
+   */
+  editable?: boolean;
+  /** Min value of the split
+   * @default 0.05
+   */
+  minSplit?: number;
+  /** Max value of the split
+   * @default 0.95
+   */
+  maxSplit?: number;
+};
+
+type ManagedViewLayout = {
+  id: number;
+  orientation: 'vertical' | 'horizontal';
+  views: [view1: View | ManagedViewLayout, view2: View | ManagedViewLayout];
+  split: number;
+  editable: boolean;
+  minSplit: number;
+  maxSplit: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function parseViewLayout(root: ViewLayout): ManagedViewLayout[] {
+  const layoutsById: ManagedViewLayout[] = [];
+  const isViewLayout = (v: View | ViewLayout): v is ViewLayout => 'views' in v;
+  function createManagedViewLayout(l: ViewLayout): ManagedViewLayout {
+    const id = layoutsById.length;
+    const minSplit = l.minSplit ?? 0.05;
+    const maxSplit = l.maxSplit ?? 0.95;
+    const split = Math.min(Math.max(l.initialSplit ?? 0.5, minSplit), maxSplit);
+    const managed: ManagedViewLayout = {
+      id,
+      orientation: l.orientation,
+      views: l.views as [view1: View | ManagedViewLayout, view2: View | ManagedViewLayout],
+      split,
+      editable: l.editable ?? true,
+      minSplit,
+      maxSplit,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    layoutsById.push(managed);
+    managed.views = [
+      isViewLayout(l.views[0]) ? createManagedViewLayout(l.views[0]) : l.views[0],
+      isViewLayout(l.views[1]) ? createManagedViewLayout(l.views[1]) : l.views[1]
+    ];
+    return managed;
+  }
+  createManagedViewLayout(root);
+  return layoutsById;
+}
+
+function evaluateViews(root: ManagedViewLayout): View[] {
+  const views: View[] = [];
+  function evaluateViewLayout(
+    l: ManagedViewLayout,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    l.x = x;
+    l.y = y;
+    l.width = width;
+    l.height = height;
+
+    const child1X = x;
+    const child1Y = y;
+    let child1Width = width;
+    let child1Height = height;
+    let child2X = x;
+    let child2Y = y;
+    let child2Width = width;
+    let child2Height = height;
+
+    if (l.orientation === 'horizontal') {
+      child1Width = width * l.split;
+      child2X = x + child1Width;
+      child2Width = width - child1Width;
+    } else {
+      child1Height = height * l.split;
+      child2Y = y + child1Height;
+      child2Height = height - child1Height;
+    }
+
+    const [view1, view2] = l.views;
+    if ('views' in view1) {
+      evaluateViewLayout(view1, child1X, child1Y, child1Width, child1Height);
+    } else {
+      views.push(
+        view1.clone({
+          x: `${child1X}%`,
+          y: `${child1Y}%`,
+          width: `${child1Width}%`,
+          height: `${child1Height}%`
+        })
+      );
+    }
+
+    if ('views' in view2) {
+      evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
+    } else {
+      views.push(
+        view2.clone({
+          x: `${child2X}%`,
+          y: `${child2Y}%`,
+          width: `${child2Width}%`,
+          height: `${child2Height}%`
+        })
+      );
+    }
+  }
+
+  evaluateViewLayout(root, 0, 0, 100, 100);
+  return views;
+}
 
 /** Properties for the SplitterWidget */
 export type SplitterWidgetProps = WidgetProps & {
-  /** The view id for the first (resizable) view */
-  viewId1: string;
-  /** The view id for the second view */
-  viewId2: string;
-  /** Orientation of the splitter: vertical (default) or horizontal */
-  orientation?: 'vertical' | 'horizontal';
-  /** The initial split percentage (0 to 1) for the first view, default 0.5 */
-  initialSplit?: number;
+  /** Stacking views descriptor */
+  viewLayout: ViewLayout;
   /** Callback invoked when the splitter is dragged with the new split value */
-  onChange?: (newSplit: number) => void;
+  onChange?: (views: View[]) => void;
   /** Callback invoked when dragging starts */
   onDragStart?: () => void;
   /** Callback invoked when dragging ends */
@@ -29,14 +164,11 @@ 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> {
+export class SplitterWidget extends Widget<SplitterWidgetProps, View[]> {
   static defaultProps: Required<SplitterWidgetProps> = {
     ...Widget.defaultProps,
     id: 'splitter-widget',
-    viewId1: '',
-    viewId2: '',
-    orientation: 'vertical',
-    initialSplit: 0.5,
+    viewLayout: undefined!,
     onChange: () => {},
     onDragStart: () => {},
     onDragEnd: () => {}
@@ -44,33 +176,88 @@ export class SplitterWidget extends Widget<SplitterWidgetProps> {
 
   className = 'deck-widget-splitter';
   placement = 'fill' as const;
+  viewLayouts!: ManagedViewLayout[];
+  /** evaluated from the current viewLayouts */
+  views!: View[];
+  /** views set in the last update */
+  lastViews?: View[];
+  needsUpdate = true;
 
   constructor(props: SplitterWidgetProps) {
     super(props);
+    this.viewLayouts = parseViewLayout(this.props.viewLayout);
   }
 
   setProps(props: Partial<SplitterWidgetProps>) {
+    if (props.viewLayout && !deepEqual(props.viewLayout, this.props.viewLayout, -1)) {
+      this.viewLayouts = parseViewLayout(props.viewLayout);
+      this.views = undefined!;
+    }
     super.setProps(props);
   }
 
-  onRenderHTML(rootElement: HTMLElement): void {
-    // Ensure the widget container fills the deck.gl canvas.
-    // TODO - Move styling to CSS
-    rootElement.style.position = 'absolute';
-    rootElement.style.top = '0';
-    rootElement.style.left = '0';
-    rootElement.style.width = '100%';
-    rootElement.style.height = '100%';
-    rootElement.style.margin = '0px';
+  onRedraw() {
+    // Actually update DOM
+    super.updateHTML();
+  }
+
+  // Usually widgets rerender their DOM elements here
+  // In this case we need the widget UI to synchronize with deck view states
+  // so we update deck props here and rerender DOM in the next onRedraw
+  updateHTML() {
+    if (!this.views) {
+      // viewLayouts has changed, re-evaluate
+      this.views = evaluateViews(this.viewLayouts[0]);
+      // we send a copy to the callback so that externally set views can be differentiated from internal
+      this.props.onChange(this.views.slice());
+    }
+    // This method is called inside deck.setProps > widgetManager.setProps > widget.setProps
+    // Calling deck.setProps immediately would cause infinite loop
+    requestAnimationFrame(() => {
+      this.doUpdate();
+    });
+  }
+
+  private doUpdate() {
+    if (this.deck) {
+      const deckViews = this.deck.props.views;
+      const isManagedExternally =
+        // is not empty
+        deckViews &&
+        // is not set by us
+        deckViews !== this.lastViews;
 
+      if (!isManagedExternally && this.lastViews !== this.views) {
+        this.lastViews = this.views;
+        this.deck.setProps({views: this.views});
+      }
+    }
+  }
+
+  private onChange(newSplit: number, layout: ManagedViewLayout) {
+    layout.split = newSplit;
+    // layout has updated, re-evaluate
+    this.views = evaluateViews(this.viewLayouts[0]);
+    // we send a copy to the callback so that externally set views can be differentiated from internal
+    this.props.onChange(this.views.slice());
+    this.doUpdate();
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
     render(
-      <Splitter
-        orientation={this.props.orientation}
-        initialSplit={this.props.initialSplit}
-        onChange={this.props.onChange}
-        onDragStart={this.props.onDragStart}
-        onDragEnd={this.props.onDragEnd}
-      />,
+      <>
+        {this.viewLayouts.map(
+          layout =>
+            layout.editable && (
+              <Splitter
+                {...layout}
+                onChange={newSplit => this.onChange(newSplit, layout)}
+                onDragStart={() => this.props.onDragStart()}
+                onDragEnd={() => this.props.onDragStart()}
+              />
+            )
+        )}
+      </>,
       rootElement
     );
   }
@@ -83,94 +270,92 @@ export class SplitterWidget extends Widget<SplitterWidgetProps> {
  */
 function Splitter({
   orientation,
-  initialSplit,
+  x,
+  y,
+  width,
+  height,
+  split,
+  minSplit,
+  maxSplit,
   onChange,
   onDragStart,
   onDragEnd
 }: {
   orientation: 'vertical' | 'horizontal';
-  initialSplit: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  split: number;
+  minSplit: number;
+  maxSplit: number;
   onChange?: (newSplit: number) => void;
   onDragStart?: () => void;
   onDragEnd?: () => void;
 }) {
-  const [split, setSplit] = useState(initialSplit);
-  const dragging = useRef(false);
+  const [dragging, setDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const handleDragStart = (event: MouseEvent) => {
-    dragging.current = true;
-    onDragStart?.();
-    document.addEventListener('mousemove', handleDragging);
-    document.addEventListener('mouseup', handleDragEnd);
-    event.preventDefault();
-  };
-
-  const handleDragging = (event: MouseEvent) => {
-    if (!dragging.current || !containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    let newSplit: number;
-    if (orientation === 'vertical') {
-      newSplit = (event.clientX - rect.left) / rect.width;
-    } else {
-      newSplit = (event.clientY - rect.top) / rect.height;
+  useEffect(() => {
+    if (!dragging) {
+      return undefined;
     }
-    // Clamp newSplit between 5% and 95%
-    newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
-    setSplit(newSplit);
-    onChange?.(newSplit);
-  };
 
-  const handleDragEnd = (event: MouseEvent) => {
-    if (!dragging.current) return;
-    dragging.current = false;
-    onDragEnd?.();
-    document.removeEventListener('mousemove', handleDragging);
-    document.removeEventListener('mouseup', handleDragEnd);
+    const handleDragging = (event: PointerEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      let newSplit: number;
+      if (orientation === 'horizontal') {
+        newSplit = (event.clientX - rect.left) / rect.width;
+      } else {
+        newSplit = (event.clientY - rect.top) / rect.height;
+      }
+      // Clamp newSplit between 5% and 95%
+      newSplit = Math.min(Math.max(newSplit, minSplit), maxSplit);
+      onChange?.(newSplit);
+    };
+
+    const handleDragEnd = () => {
+      onDragEnd?.();
+      setDragging(false);
+    };
+
+    document.addEventListener('pointermove', handleDragging);
+    document.addEventListener('pointerup', handleDragEnd);
+    document.addEventListener('pointerleave', handleDragEnd);
+
+    return () => {
+      document.removeEventListener('pointermove', handleDragging);
+      document.removeEventListener('pointerup', handleDragEnd);
+      document.removeEventListener('pointerleave', handleDragEnd);
+    };
+  }, [dragging]);
+
+  const handleDragStart = (event: PointerEvent) => {
+    setDragging(true);
+    onDragStart?.();
+    event.preventDefault();
   };
 
   // The splitter line style based on orientation and the current split percentage.
-  const splitterStyle: h.JSX.CSSProperties =
-    orientation === 'vertical'
-      ? {
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: `${split * 100}%`,
-          width: '4px',
-          cursor: 'col-resize',
-          background: '#ccc',
-          zIndex: 10,
-          pointerEvents: 'auto',
-          boxShadow: 'inset -1px 0 0 white, inset 1px 0 0 white'
-        }
-      : {
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          top: `${split * 100}%`,
-          height: '4px',
-          cursor: 'row-resize',
-          background: '#ccc',
-          zIndex: 10,
-          pointerEvents: 'auto',
-          boxShadow: 'inset -1px 0 0 white, inset 1px 0 0 white'
-        };
+  const splitterStyle: JSX.CSSProperties =
+    orientation === 'horizontal' ? {left: `${split * 100}%`} : {top: `${split * 100}%`};
 
   // Container style to fill the entire deck.gl canvas.
-  const containerStyle: h.JSX.CSSProperties = {
+  const containerStyle: JSX.CSSProperties = {
     position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+    top: `${y}%`,
+    left: `${x}%`,
+    width: `${width}%`,
+    height: `${height}%`
   };
 
   return (
     <div ref={containerRef} style={containerStyle}>
       <div
+        className={`deck-widget-splitter-handle deck-widget-splitter-handle--${orientation} ${dragging ? 'active' : ''}`}
         style={splitterStyle}
-        onMouseDown={handleDragStart as h.JSX.MouseEventHandler<HTMLElement>} // Use the appropriate Preact event type.
+        onPointerDown={handleDragStart} // Use the appropriate Preact event type.
       />
     </div>
   );

package/src/stats-widget.tsx

@@ -5,7 +5,9 @@
 import {Widget, type WidgetPlacement, type WidgetProps} from '@deck.gl/core';
 import {luma} from '@luma.gl/core';
 import {render} from 'preact';
+import {useEffect, useState} from 'preact/hooks';
 import type {Stats, Stat} from '@probe.gl/stats';
+import {IconButton} from './lib/components/icon-button';
 
 const DEFAULT_COUNT_FORMATTER = (stat: Stat): string => `${stat.name}: ${stat.count}`;
 
@@ -97,17 +99,25 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     super.setProps(props);
   }
 
-  onAdd(): void {
-    this.updateHTML();
+  onRemove() {
+    if (this.rootElement) {
+      // Make sure all preact hooks are finalized
+      render(null, this.rootElement);
+    }
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
-    const stats = this._getStats();
     const collapsed = this.collapsed;
+    if (collapsed) {
+      render(<FpsIcon getFps={this._getFps} onClick={this._toggleCollapsed} />, rootElement);
+      return;
+    }
+
+    const stats = this._getStats();
     const title = this.props.title || ('id' in stats ? stats.id : null) || 'Stats';
     const items: JSX.Element[] = [];
 
-    if (!collapsed && stats) {
+    if (stats) {
       stats.forEach(stat => {
         const lines = this._getLines(stat).split('\n');
         if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
@@ -132,19 +142,21 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
         >
           <b>{title}</b>
           <button className="deck-widget-dropdown-button">
-            <span className={`deck-widget-dropdown-icon ${collapsed ? '' : 'open'}`} />
+            <span className="deck-widget-dropdown-icon open" />
           </button>
         </div>
-        {!collapsed && <div className="deck-widget-stats-content">{items}</div>}
+        <div className="deck-widget-stats-content">{items}</div>
       </div>,
       rootElement
     );
   }
 
   onRedraw(): void {
-    const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
-    if (this._counter++ % framesPerUpdate === 0) {
-      this.updateHTML();
+    if (!this.collapsed) {
+      const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+      if (this._counter++ % framesPerUpdate === 0) {
+        this.updateHTML();
+      }
     }
   }
 
@@ -173,6 +185,11 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     this.updateHTML();
   };
 
+  protected _getFps = (): number => {
+    // @ts-expect-error metrics is protected
+    return Math.round(this.deck?.metrics.fps ?? 0);
+  };
+
   protected _getLines(stat: Stat | [key: string, value: number]): string {
     if ('count' in stat) {
       const formatter =
@@ -189,3 +206,27 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     return `${key}: ${formattedValue}`;
   }
 }
+
+function FpsIcon({getFps, onClick}: {getFps: () => number; onClick: () => void}) {
+  const [fps, setFps] = useState(getFps());
+  useEffect(() => {
+    const onUpdate = () => {
+      setFps(getFps());
+      timer = requestAnimationFrame(onUpdate);
+    };
+    let timer = requestAnimationFrame(onUpdate);
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [getFps]);
+
+  return (
+    <IconButton onClick={onClick}>
+      <div className="text">
+        FPS
+        <br />
+        {fps}
+      </div>
+    </IconButton>
+  );
+}

package/src/stylesheet.css

@@ -257,19 +257,6 @@
   padding: 4px;
 }
 
-/* FPS widget styles */
-
-.deck-widget.deck-widget-fps button {
-  pointer-events: none;
-}
-
-.deck-widget.deck-widget-fps .text {
-  color: var(--button-text, rgb(24, 24, 26));
-  font-family: monospace;
-  font-size: 8px;
-  font-weight: 700;
-}
-
 /* Loading styles */
 @keyframes spin {
   to {
@@ -451,6 +438,12 @@
 }
 
 /* Stats styles */
+.deck-widget.deck-widget-stats button .text {
+  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  font-size: 8px;
+  font-weight: 700;
+}
 .deck-widget-stats-container {
   border-radius: var(--button-corner-radius, 8px);
   display: inline-flex;
@@ -647,3 +640,47 @@
 .deck-widget-scrollbar[data-placement^=bottom-] .deck-widget-range--horizontal {
   bottom: 0;
 }
+
+/** Splitter */
+.deck-widget.deck-widget-splitter {
+  position: absolute;
+  margin: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.deck-widget-splitter-handle {
+  position: absolute;
+  background: var(--button-background, #fff);
+  z-index: 10;
+  pointer-events: auto;
+  box-shadow: inset 1px 1px 1px var(--button-icon-idle, #616166);
+}
+.deck-widget-splitter-handle.active {
+  box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+}
+.deck-widget-splitter-handle:before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  margin: -4px;
+}
+.deck-widget-splitter-handle--horizontal {
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin-left: -1px;
+  cursor: col-resize;
+}
+.deck-widget-splitter-handle--vertical {
+  left: 0;
+  right: 0;
+  height: 2px;
+  margin-top: -1px;
+  cursor: row-resize;
+}

package/src/timeline-widget.tsx

@@ -151,6 +151,13 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
 
   public play(): void {
     this.playing = true;
+    const {
+      timeRange: [min, max]
+    } = this.props;
+    if (this.currentTime >= max) {
+      this.currentTime = min;
+      this.props.onTimeChange(min);
+    }
     this.updateHTML();
     this.tick();
   }
@@ -171,7 +178,7 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
       loop
     } = this.props;
     if (step > 0) {
-      let next = Math.floor(this.currentTime / step) * step + step;
+      let next = Math.round(this.currentTime / step) * step + step;
       if (next > max) {
         if (this.currentTime < max) {
           next = max;