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

package/src/lib/components/range-input.tsx

@@ -0,0 +1,432 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import type {JSX} from 'preact';
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
+
+export type RangeInputDecoration = {
+  position: [start: number, end: number];
+  element: JSX.Element;
+};
+
+export type RangeInputProps = {
+  className?: string;
+  min: number;
+  max: number;
+  step: number;
+  value: [start: number, end: number];
+  orientation: 'horizontal' | 'vertical';
+  pageSize?: number;
+  /** Show step buttons at ends */
+  stepButtons?: boolean;
+  startButtonAriaLabel?: string;
+  endButtonAriaLabel?: string;
+  /** Target element for wheel and keyboard events.
+   * If not supplied, falls back to the root element of the input.
+   */
+  eventTarget?: HTMLElement | null;
+  decorations?: RangeInputDecoration[];
+  onChange?: (nextValue: [start: number, end: number]) => void;
+};
+
+type DragState = {
+  pointerId: number;
+  startCoord: number;
+  startRatio: number;
+  min: number;
+  max: number;
+  maxStart: number;
+};
+
+const wheelListenerOptions: AddEventListenerOptions = {passive: false};
+
+const clamp = (value: number, min: number, max: number) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
+const getTrackDimension = (track: HTMLDivElement | null, vertical: boolean) => {
+  if (!track || !track.firstElementChild) {
+    return [0, 0];
+  }
+  const rect = track.firstElementChild.getBoundingClientRect();
+  if (vertical) {
+    return [rect.top, rect.height];
+  }
+  return vertical ? [rect.top, rect.height] : [rect.left, rect.width];
+};
+
+const getEffectiveStep = (step: number, range: number) => {
+  if (typeof step === 'number' && !Number.isNaN(step) && step > 0) {
+    return step;
+  }
+  return Math.max(1, range / 10 || 1);
+};
+
+const getEffectivePage = (pageSize: number | undefined, rangeSize: number) => {
+  if (typeof pageSize === 'number' && !Number.isNaN(pageSize) && pageSize > 0) {
+    return pageSize;
+  }
+  return Math.max(1, rangeSize || 1);
+};
+
+export function RangeInput(props: RangeInputProps) {
+  const {
+    className = '',
+    min,
+    max,
+    step,
+    value,
+    orientation,
+    pageSize,
+    stepButtons = false,
+    startButtonAriaLabel,
+    endButtonAriaLabel,
+    eventTarget,
+    decorations = [],
+    onChange
+  } = props;
+
+  const vertical = orientation !== 'horizontal';
+  const rootRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const dragStateRef = useRef<DragState | null>(null);
+  const [trackLength, setTrackLength] = useState(0);
+
+  const range = max - min;
+  const rangeSize = Math.max(0, value[1] - value[0]);
+  const maxStart = Math.max(0, range - rangeSize);
+  const clampedStart = clamp(value[0], min, min + maxStart);
+
+  const {thumbLength, thumbOffset} = useMemo(() => {
+    if (trackLength <= 0 || range <= 0) {
+      return {thumbLength: 0, thumbOffset: 0};
+    }
+
+    if (range <= rangeSize) {
+      return {thumbLength: 1, thumbOffset: 0};
+    }
+
+    const nextThumbLength = rangeSize / range;
+    const travel = Math.max(0, 1 - nextThumbLength);
+    const ratio = maxStart <= 0 ? 0 : clamp((clampedStart - min) / maxStart, 0, 1);
+
+    return {
+      thumbLength: Math.max(0, Math.min(nextThumbLength, 1)),
+      thumbOffset: travel * ratio
+    };
+  }, [trackLength, range, rangeSize, maxStart, clampedStart, min]);
+
+  const emitRange = useCallback(
+    (nextStart: number) => {
+      if (!onChange) {
+        return;
+      }
+      const clamped = clamp(nextStart, min, min + maxStart);
+      onChange([clamped, clamped + rangeSize]);
+    },
+    [onChange, min, maxStart, rangeSize]
+  );
+
+  const handleStepNegative = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      emitRange(clampedStart - getEffectiveStep(step, range));
+    },
+    [emitRange, clampedStart, step, range]
+  );
+
+  const handleStepPositive = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      emitRange(clampedStart + getEffectiveStep(step, range));
+    },
+    [emitRange, clampedStart, step, range]
+  );
+
+  const handleTrackClick = useCallback(
+    (event: MouseEvent) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const target = event.target as HTMLElement | null;
+      if (target?.dataset.scrollbarThumb === 'true') {
+        return;
+      }
+
+      const track = trackRef.current;
+      if (!track) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const [trackStart] = getTrackDimension(track, vertical);
+      const coordinate = vertical ? event.clientY - trackStart : event.clientX - trackStart;
+      const span = Math.max(1, 1 - thumbLength) * trackLength;
+      const thumbCenter = (thumbLength / 2) * trackLength;
+      const ratio = span <= 0 ? 0 : clamp((coordinate - thumbCenter) / span, 0, 1);
+      emitRange(min + ratio * maxStart);
+    },
+    [vertical, trackLength, thumbLength, emitRange, min, maxStart]
+  );
+
+  const handleThumbPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const track = trackRef.current;
+    if (!track) {
+      return;
+    }
+
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startCoord: vertical ? event.clientY : event.clientX,
+      startRatio: thumbOffset,
+      min,
+      max,
+      maxStart
+    };
+
+    (event.currentTarget as HTMLDivElement).setPointerCapture(event.pointerId);
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleThumbPointerMove = useCallback(
+    (event: PointerEvent) => {
+      const state = dragStateRef.current;
+      if (!state || state.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const [trackStart, trackLength] = getTrackDimension(trackRef.current, vertical);
+      const coordinate = vertical ? event.clientY : event.clientX;
+      const delta = coordinate - state.startCoord;
+
+      const ratio = state.startRatio + delta / trackLength;
+
+      const nextStart = clamp(ratio * (state.max - state.min), 0, state.maxStart) + state.min;
+      emitRange(nextStart);
+      event.preventDefault();
+    },
+    [emitRange, vertical]
+  );
+
+  const handleThumbPointerUp = useCallback((event: PointerEvent) => {
+    const state = dragStateRef.current;
+    if (state && state.pointerId === event.pointerId) {
+      dragStateRef.current = null;
+      thumbRef.current?.releasePointerCapture(event.pointerId);
+      event.preventDefault();
+    }
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          if ((vertical && event.key === 'ArrowUp') || (!vertical && event.key === 'ArrowLeft')) {
+            emitRange(clampedStart - getEffectiveStep(step, range));
+            event.preventDefault();
+          }
+          break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+          if (
+            (vertical && event.key === 'ArrowDown') ||
+            (!vertical && event.key === 'ArrowRight')
+          ) {
+            emitRange(clampedStart + getEffectiveStep(step, range));
+            event.preventDefault();
+          }
+          break;
+        case 'PageUp':
+          emitRange(clampedStart - getEffectivePage(pageSize, rangeSize));
+          event.preventDefault();
+          break;
+        case 'PageDown':
+          emitRange(clampedStart + getEffectivePage(pageSize, rangeSize));
+          event.preventDefault();
+          break;
+        case 'Home':
+          emitRange(min);
+          event.preventDefault();
+          break;
+        case 'End':
+          emitRange(min + maxStart);
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    },
+    [vertical, emitRange, clampedStart, step, range, pageSize, rangeSize, min, maxStart]
+  );
+
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (maxStart === 0) {
+        return;
+      }
+
+      let delta = vertical ? event.deltaY : event.deltaX;
+      if (!vertical && delta === 0) {
+        delta = event.deltaY;
+      }
+
+      if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+        delta *= getEffectiveStep(step, range);
+      } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+        delta *= getEffectivePage(pageSize, rangeSize);
+      }
+
+      if (delta === 0) {
+        return;
+      }
+
+      emitRange(clampedStart + delta);
+    },
+    [emitRange, clampedStart, maxStart, vertical, step, range, pageSize, rangeSize]
+  );
+
+  useLayoutEffect(() => {
+    setTrackLength(getTrackDimension(trackRef.current, vertical)[1]);
+  }, [vertical]);
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track) {
+      return undefined;
+    }
+
+    const update = () => {
+      setTrackLength(getTrackDimension(track, vertical)[1]);
+    };
+
+    update();
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(update);
+      observer.observe(track);
+      return () => observer.disconnect();
+    }
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', update);
+      return () => window.removeEventListener('resize', update);
+    }
+
+    return undefined;
+  }, [vertical]);
+
+  useEffect(() => {
+    const eventRoot = eventTarget ?? rootRef.current;
+    if (!eventRoot) return undefined;
+
+    eventRoot.addEventListener('keydown', handleKeyDown);
+    eventRoot.addEventListener('wheel', handleWheel, wheelListenerOptions);
+    return () => {
+      eventRoot.removeEventListener('keydown', handleKeyDown);
+      eventRoot.removeEventListener('wheel', handleWheel, wheelListenerOptions);
+    };
+  }, [eventTarget, handleKeyDown, handleWheel]);
+
+  const decorationElements = useMemo(() => {
+    if (!decorations.length || range <= 0) {
+      return [];
+    }
+
+    return decorations.map((decoration, index) => {
+      const [start, end] = decoration.position;
+      const startRatio = (start - min) / range;
+      const endRatio = (end - min) / range;
+      const offsetPct = Math.round(startRatio * 1000) / 10;
+      const sizePct = Math.max(0, Math.round((endRatio - startRatio) * 1000) / 10);
+      const style = vertical
+        ? {
+            left: '0',
+            width: '100%',
+            top: `${offsetPct}%`,
+            height: `${sizePct}%`
+          }
+        : {
+            top: '0',
+            height: '100%',
+            left: `${offsetPct}%`,
+            width: `${sizePct}%`
+          };
+
+      return (
+        <div key={`decoration-${index}`} className="deck-widget-range__decoration" style={style}>
+          {decoration.element}
+        </div>
+      );
+    });
+  }, [decorations, range, min, vertical]);
+
+  return (
+    <div
+      ref={rootRef}
+      tabIndex={0}
+      role="scrollbar"
+      aria-valuemin={min}
+      aria-valuemax={min + maxStart}
+      aria-valuenow={clampedStart}
+      aria-orientation={orientation}
+      className={`${className} deck-widget-range deck-widget-range--${orientation} ${maxStart === 0 ? 'deck-widget-range--disabled' : ''}`}
+    >
+      {stepButtons && (
+        <button
+          type="button"
+          className="deck-widget-range__button deck-widget-range__button--start"
+          aria-label={startButtonAriaLabel}
+          disabled={clampedStart <= min}
+          onClick={handleStepNegative}
+        >
+          <span className="deck-widget-icon" />
+        </button>
+      )}
+      <div className="deck-widget-range__track" ref={trackRef} onClick={handleTrackClick}>
+        <div className="deck-widget-range__decorations">{decorationElements}</div>
+        <div
+          className="deck-widget-range__thumb"
+          data-scrollbar-thumb="true"
+          ref={thumbRef}
+          style={
+            vertical
+              ? {height: `${thumbLength * 100}%`, top: `${thumbOffset * 100}%`}
+              : {width: `${thumbLength * 100}%`, left: `${thumbOffset * 100}%`}
+          }
+          onPointerDown={handleThumbPointerDown}
+          onPointerMove={handleThumbPointerMove}
+          onPointerUp={handleThumbPointerUp}
+          onPointerCancel={handleThumbPointerUp}
+        />
+      </div>
+      {stepButtons && (
+        <button
+          type="button"
+          className="deck-widget-range__button deck-widget-range__button--end"
+          aria-label={endButtonAriaLabel}
+          disabled={clampedStart >= min + maxStart}
+          onClick={handleStepPositive}
+        >
+          <span className="deck-widget-icon" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/lib/components/user-content.tsx

@@ -0,0 +1,30 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import type {JSX, ComponentChildren} from 'preact';
+import {useEffect, useRef} from 'preact/hooks';
+
+export type UserContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  text?: string;
+  html?: string;
+  element?: HTMLElement | null;
+};
+
+export const UserContent = ({text, html, element, ...props}: UserContentProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current && element) {
+      containerRef.current.append(element);
+    }
+    return () => {
+      element?.remove();
+    };
+  }, [element]);
+
+  return (
+    <div ref={containerRef} {...props} dangerouslySetInnerHTML={html ? {__html: html} : undefined}>
+      {text}
+    </div>
+  );
+};

package/src/popup-widget.tsx

@@ -0,0 +1,163 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget} from '@deck.gl/core';
+import type {Deck, Viewport, WidgetProps} from '@deck.gl/core';
+import {render, JSX} from 'preact';
+import {Popover, type PopoverProps} from './lib/components/popover';
+import {UserContent} from './lib/components/user-content';
+import {IconButton} from './lib/components/icon-button';
+
+export type PopupContent = {
+  text?: string;
+  html?: string;
+  element?: HTMLElement | null;
+};
+
+export type PopupWidgetProps = WidgetProps & {
+  /** View to attach to and interact with. Required when using multiple views */
+  viewId?: string | null;
+  /** Content to display at the anchor. Opens the popup if clicked. */
+  marker?: PopupContent | null;
+  /** Content to display in the popup */
+  content: string | PopupContent;
+  /** Whether the pop up is open by default
+   * @default true
+   */
+  defaultIsOpen?: boolean;
+  /** Anchor of the popup in world coordinates, e.g. [longitude, latitude]. */
+  position: number[];
+  /** Position popup relative to the anchor.
+   * @default 'right'
+   */
+  placement?: PopoverProps['placement'];
+  /** Pixel offset
+   * @default 10
+   */
+  offset?: PopoverProps['offset'];
+  /**
+   * Show an arrow pointing at the anchor. Optionally accepts a pixel size.
+   * @default 10
+   */
+  arrow?: PopoverProps['arrow'];
+  /** Whether to show a close button in the popup
+   * @default true
+   */
+  closeButton?: boolean;
+  /** Close the popup if clicked outside
+   * @default false
+   */
+  closeOnClickOutside?: boolean;
+  /** Callback when popup is opened/closed */
+  onOpenChange?: (isOpen: boolean) => void;
+};
+
+export class PopupWidget extends Widget<PopupWidgetProps> {
+  static defaultProps: Required<PopupWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'info',
+    viewId: null,
+    position: [0, 0],
+    marker: null,
+    defaultIsOpen: true,
+    content: '',
+    placement: 'right',
+    offset: 10,
+    arrow: 10,
+    closeButton: true,
+    closeOnClickOutside: false,
+    onOpenChange: () => {}
+  };
+
+  className = 'deck-widget-popup';
+  placement = 'fill' as const;
+  viewport?: Viewport;
+  isOpen: boolean;
+
+  constructor(props: PopupWidgetProps) {
+    super(props);
+    this.setProps(this.props);
+    this.isOpen = this.props.defaultIsOpen;
+  }
+
+  setProps(props: Partial<PopupWidgetProps>) {
+    this.viewId = props.viewId ?? this.viewId;
+    super.setProps(props);
+  }
+
+  onAdd({deck}: {deck: Deck<any>; viewId: string | null}) {
+    this.deck = deck;
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.updateHTML();
+  }
+
+  onClick() {
+    if (this.props.closeOnClickOutside) {
+      this._setIsOpen(false);
+    }
+  }
+
+  protected _setIsOpen(isOpen: boolean) {
+    if (this.isOpen === isOpen) return;
+    this.isOpen = isOpen;
+    this.props.onOpenChange?.(isOpen);
+    this.updateHTML();
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    if (!this.viewport) {
+      render(null, rootElement);
+      return;
+    }
+    const {marker, content, style} = this.props;
+    // Project the clicked geographic coordinate to canvas (x, y)
+    const [x, y] = this.viewport.project(this.props.position);
+
+    // Render the popup container with a content box and a placeholder for the arrow.
+    // The container is positioned absolutely (initially at 0,0) and will be repositioned after measuring.
+    const ui = (
+      <div>
+        {marker && (
+          <div
+            style={{position: 'absolute', left: x, top: y, pointerEvents: 'all', cursor: 'pointer'}}
+          >
+            <UserContent {...marker} onClick={() => this._setIsOpen(true)} />
+          </div>
+        )}
+        {this.isOpen && (
+          <Popover
+            x={x}
+            y={y}
+            placement={this.props.placement}
+            arrow={this.props.arrow}
+            arrowColor="var(--menu-background, #fff)"
+            offset={this.props.offset}
+          >
+            <div
+              className={`deck-widget-popup-content ${this.props.className}`}
+              style={style as JSX.CSSProperties}
+            >
+              {this.props.closeButton && (
+                <div
+                  className="deck-widget-popup-controls"
+                  style={{width: '100%', display: 'flex', justifyContent: 'end'}}
+                >
+                  <IconButton
+                    className="deck-widget-popup-close-button"
+                    onClick={() => this._setIsOpen(false)}
+                  />
+                </div>
+              )}
+              <UserContent {...(typeof content === 'string' ? {text: content} : content)} />
+            </div>
+          </Popover>
+        )}
+      </div>
+    );
+    render(ui, rootElement);
+  }
+}

package/src/reset-view-widget.tsx

@@ -66,18 +66,19 @@ export class ResetViewWidget<ViewsT extends ViewOrViews = null> extends Widget<
 
   handleClick() {
     const initialViewState = this.props.initialViewState || this.deck?.props.initialViewState;
-    this.setViewState(initialViewState);
+    this.resetViewState(initialViewState);
   }
 
-  setViewState(viewState?: ViewStateMap<ViewsT>) {
-    const viewId = (this.props.viewId || 'default-view') as unknown as string;
-    const nextViewState = {
-      ...(viewId !== 'default-view' ? viewState?.[viewId] : viewState)
-      // only works for geospatial?
-      // transitionDuration: this.props.transitionDuration,
-      // transitionInterpolator: new FlyToInterpolator()
-    };
-    // @ts-ignore Using private method temporary until there's a public one
-    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  resetViewState(viewState?: ViewStateMap<ViewsT>) {
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const nextViewState = {
+        ...(viewState?.[viewId] ?? viewState)
+        // only works for geospatial?
+        // transitionDuration: this.props.transitionDuration,
+        // transitionInterpolator: new FlyToInterpolator()
+      };
+      this.setViewState(viewId, nextViewState);
+    }
   }
 }