@deck.gl-community/widgets 9.2.8 → 9.3.0-beta.2

package/src/widget-panels/toolbar-widget.tsx

@@ -0,0 +1,293 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {ComponentChild, JSX} from 'preact';
+
+export type ToolbarWidgetActionItem = {
+  kind: 'action';
+  id: string;
+  label: string;
+  icon?: ComponentChild;
+  title?: string;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+export type ToolbarWidgetToggleOption = {
+  id: string;
+  label: string;
+  icon?: ComponentChild;
+  title?: string;
+  disabled?: boolean;
+};
+
+export type ToolbarWidgetToggleGroupItem = {
+  kind: 'toggle-group';
+  id: string;
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  selectedId?: string | null;
+  options: ToolbarWidgetToggleOption[];
+  onSelect?: (optionId: string) => void;
+};
+
+export type ToolbarWidgetBadgeItem = {
+  kind: 'badge';
+  id: string;
+  label: string;
+  title?: string;
+};
+
+export type ToolbarWidgetItem =
+  | ToolbarWidgetActionItem
+  | ToolbarWidgetToggleGroupItem
+  | ToolbarWidgetBadgeItem;
+
+export type ToolbarWidgetProps = WidgetProps & {
+  placement?: WidgetPlacement;
+  items?: ToolbarWidgetItem[];
+};
+
+const ROOT_STYLE: Partial<CSSStyleDeclaration> = {
+  position: 'absolute',
+  display: 'flex',
+  pointerEvents: 'auto',
+  userSelect: 'none',
+  zIndex: '99'
+};
+
+const TOOLBAR_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  flexWrap: 'wrap',
+  padding: '8px 10px',
+  borderRadius: '999px',
+  background: 'rgba(36, 40, 41, 0.88)',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)'
+};
+
+const ITEM_GROUP_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+  minWidth: '0'
+};
+
+const BUTTON_STYLE: JSX.CSSProperties = {
+  appearance: 'none',
+  border: 'none',
+  borderRadius: '999px',
+  background: 'transparent',
+  color: '#f0f0f0',
+  minHeight: '30px',
+  padding: '0 10px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '6px',
+  cursor: 'pointer',
+  fontSize: '11px',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontWeight: '500',
+  transition: 'background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease',
+  whiteSpace: 'nowrap'
+};
+
+const ACTIVE_BUTTON_STYLE: JSX.CSSProperties = {
+  background: '#0071e3',
+  color: '#ffffff',
+  boxShadow: '0 0 0 2px rgba(255, 255, 255, 0.35)'
+};
+
+const DISABLED_BUTTON_STYLE: JSX.CSSProperties = {
+  opacity: 0.45,
+  cursor: 'default'
+};
+
+const GROUP_LABEL_STYLE: JSX.CSSProperties = {
+  color: 'rgba(255, 255, 255, 0.65)',
+  fontSize: '11px',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  whiteSpace: 'nowrap'
+};
+
+const BADGE_STYLE: JSX.CSSProperties = {
+  padding: '0 8px',
+  minHeight: '28px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '999px',
+  background: 'rgba(255, 255, 255, 0.12)',
+  color: 'rgba(255, 255, 255, 0.88)',
+  fontSize: '11px',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  whiteSpace: 'nowrap'
+};
+
+function stopToolbarEventPropagation(event: Event) {
+  event.stopPropagation();
+  if (
+    typeof (event as {stopImmediatePropagation?: () => void}).stopImmediatePropagation ===
+    'function'
+  ) {
+    (event as {stopImmediatePropagation?: () => void}).stopImmediatePropagation?.();
+  }
+}
+
+function ToolbarWidgetView({items}: {items: ToolbarWidgetItem[]}) {
+  return (
+    <div
+      style={TOOLBAR_STYLE}
+      onPointerDown={stopToolbarEventPropagation}
+      onPointerMove={stopToolbarEventPropagation}
+      onPointerUp={stopToolbarEventPropagation}
+      onMouseDown={stopToolbarEventPropagation}
+      onMouseMove={stopToolbarEventPropagation}
+      onMouseUp={stopToolbarEventPropagation}
+      onTouchStart={stopToolbarEventPropagation}
+      onTouchMove={stopToolbarEventPropagation}
+      onTouchEnd={stopToolbarEventPropagation}
+      onClick={stopToolbarEventPropagation}
+      onDblClick={stopToolbarEventPropagation}
+      onContextMenu={stopToolbarEventPropagation}
+      onWheel={stopToolbarEventPropagation}
+    >
+      {items.map((item) => renderToolbarItem(item))}
+    </div>
+  );
+}
+
+function renderToolbarItem(item: ToolbarWidgetItem): JSX.Element {
+  if (item.kind === 'badge') {
+    return (
+      <div key={item.id} title={item.title} style={BADGE_STYLE} data-toolbar-item-kind="badge">
+        {item.label}
+      </div>
+    );
+  }
+
+  if (item.kind === 'action') {
+    const disabled = item.disabled ?? false;
+    const buttonStyle: JSX.CSSProperties = {
+      ...BUTTON_STYLE,
+      ...(item.active ? ACTIVE_BUTTON_STYLE : {}),
+      ...(disabled ? DISABLED_BUTTON_STYLE : {})
+    };
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        title={item.title ?? item.label}
+        aria-label={item.title ?? item.label}
+        aria-pressed={item.active ? 'true' : 'false'}
+        disabled={disabled}
+        style={buttonStyle}
+        data-toolbar-item-kind="action"
+        data-toolbar-item-id={item.id}
+        onClick={() => {
+          if (!disabled) {
+            item.onClick?.();
+          }
+        }}
+      >
+        {item.icon}
+        <span>{item.label}</span>
+      </button>
+    );
+  }
+
+  const groupDisabled = item.disabled ?? false;
+  return (
+    <div key={item.id} style={ITEM_GROUP_STYLE} data-toolbar-item-kind="toggle-group">
+      {item.label ? <span style={GROUP_LABEL_STYLE}>{item.label}</span> : null}
+      {item.options.map((option) => {
+        const disabled = groupDisabled || option.disabled;
+        const active = item.selectedId === option.id;
+        const buttonStyle: JSX.CSSProperties = {
+          ...BUTTON_STYLE,
+          ...(active ? ACTIVE_BUTTON_STYLE : {}),
+          ...(disabled ? DISABLED_BUTTON_STYLE : {})
+        };
+
+        return (
+          <button
+            key={option.id}
+            type="button"
+            title={option.title ?? option.label ?? item.title}
+            aria-label={option.title ?? option.label ?? item.title}
+            aria-pressed={active ? 'true' : 'false'}
+            disabled={disabled}
+            style={buttonStyle}
+            data-toolbar-group-id={item.id}
+            data-toolbar-option-id={option.id}
+            onClick={() => {
+              if (!disabled) {
+                item.onSelect?.(option.id);
+              }
+            }}
+          >
+            {option.icon}
+            <span>{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export class ToolbarWidget extends Widget<ToolbarWidgetProps> {
+  static defaultProps: Required<ToolbarWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'toolbar-widget',
+    placement: 'top-right',
+    items: []
+  };
+
+  className = 'deck-widget-toolbar';
+  placement: WidgetPlacement = ToolbarWidget.defaultProps.placement;
+  #rootElement: HTMLElement | null = null;
+
+  constructor(props: ToolbarWidgetProps = {}) {
+    super({...ToolbarWidget.defaultProps, ...props});
+    this.setProps(this.props);
+  }
+
+  override setProps(props: Partial<ToolbarWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    super.setProps(props);
+    this.#render();
+  }
+
+  override onRemove(): void {
+    if (this.#rootElement) {
+      render(null, this.#rootElement);
+    }
+  }
+
+  override onRenderHTML(rootElement: HTMLElement): void {
+    this.#rootElement = rootElement;
+    const className = ['deck-widget', this.className, this.props.className]
+      .filter(Boolean)
+      .join(' ');
+    rootElement.className = className;
+    Object.assign(rootElement.style, ROOT_STYLE, this.props.style ?? {});
+    this.#render();
+  }
+
+  #render() {
+    if (!this.#rootElement) {
+      return;
+    }
+
+    render(<ToolbarWidgetView items={this.props.items ?? []} />, this.#rootElement);
+  }
+}