@deck.gl-community/editable-layers 9.2.0-beta.8 → 9.2.5

package/src/widgets/editor-toolbar-widget.tsx

@@ -0,0 +1,348 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {render} from 'preact';
+import type {JSX} from 'preact';
+import {Widget, type WidgetProps, type WidgetPlacement, type Deck} from '@deck.gl/core';
+
+export type BooleanOperation = 'union' | 'difference' | 'intersection' | null;
+
+export type EditorToolbarWidgetProps = WidgetProps & {
+  /** Placement for the widget root element. */
+  placement?: WidgetPlacement;
+  /** Currently active boolean operation. */
+  booleanOperation?: BooleanOperation;
+  /** Number of features in the current dataset. */
+  featureCount?: number;
+  /** Callback fired when the user selects a boolean operation. */
+  onSetBooleanOperation?: (op: BooleanOperation) => void;
+  /** Callback fired when the user clicks the clear button. */
+  onClear?: () => void;
+  /** Callback fired when the user clicks the export button. */
+  onExport?: () => void;
+};
+
+// --- Styles (match EditModeTrayWidget visual language) ---
+
+const ROOT_STYLE: Partial<CSSStyleDeclaration> = {
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '6px',
+  pointerEvents: 'auto',
+  userSelect: 'none',
+  zIndex: '99'
+};
+
+const TRAY_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  gap: '4px',
+  background: 'rgba(36, 40, 41, 0.88)',
+  borderRadius: '999px',
+  padding: '5px 8px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)'
+};
+
+const BUTTON_STYLE: JSX.CSSProperties = {
+  appearance: 'none',
+  background: 'transparent',
+  border: 'none',
+  color: '#f0f0f0',
+  height: '30px',
+  padding: '0 8px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '4px',
+  borderRadius: '15px',
+  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 BUTTON_ACTIVE_STYLE: JSX.CSSProperties = {
+  background: '#0071e3',
+  color: '#ffffff',
+  boxShadow: '0 0 0 2px rgba(255, 255, 255, 0.35)'
+};
+
+const DIVIDER_STYLE: JSX.CSSProperties = {
+  width: '1px',
+  height: '20px',
+  background: 'rgba(255, 255, 255, 0.2)',
+  margin: '0 2px',
+  flexShrink: '0'
+};
+
+const BADGE_STYLE: JSX.CSSProperties = {
+  color: 'rgba(255, 255, 255, 0.6)',
+  fontSize: '11px',
+  padding: '0 6px',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  whiteSpace: 'nowrap'
+};
+
+// --- SVG Icons (14x14) ---
+
+function PencilIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 1.5l2.5 2.5L4.5 12H2v-2.5z" />
+    </svg>
+  );
+}
+
+function SubtractIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.1"
+    >
+      <rect x="1" y="1" width="8" height="8" rx="1.5" />
+      <rect x="5" y="5" width="8" height="8" rx="1.5" fill="rgba(36,40,41,0.88)" />
+    </svg>
+  );
+}
+
+function UnionIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.1"
+    >
+      <rect x="1" y="1" width="8" height="8" rx="1.5" />
+      <rect x="5" y="5" width="8" height="8" rx="1.5" />
+    </svg>
+  );
+}
+
+function IntersectIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" strokeWidth="1.1">
+      <rect x="1" y="1" width="8" height="8" rx="1.5" stroke="currentColor" opacity="0.4" />
+      <rect x="5" y="5" width="8" height="8" rx="1.5" stroke="currentColor" opacity="0.4" />
+      <rect x="5" y="5" width="4" height="4" fill="currentColor" opacity="0.6" />
+    </svg>
+  );
+}
+
+function TrashIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 4h9M5.5 4V2.5h3V4M3.5 4l.5 8h6l.5-8" />
+    </svg>
+  );
+}
+
+function DownloadIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7 2v7M4.5 6.5L7 9l2.5-2.5M2.5 11.5h9" />
+    </svg>
+  );
+}
+
+// --- Widget ---
+
+const BOOLEAN_OPS: Array<{
+  op: BooleanOperation;
+  icon: () => JSX.Element;
+  label: string;
+  title: string;
+}> = [
+  {op: null, icon: PencilIcon, label: 'Edit', title: 'Draw new features'},
+  {op: 'difference', icon: SubtractIcon, label: 'Sub', title: 'Subtract from selection'},
+  {op: 'union', icon: UnionIcon, label: 'Union', title: 'Union with selection'},
+  {op: 'intersection', icon: IntersectIcon, label: 'Sect', title: 'Intersect with selection'}
+];
+
+export class EditorToolbarWidget extends Widget<EditorToolbarWidgetProps> {
+  static override defaultProps = {
+    id: 'editor-toolbar',
+    _container: null,
+    placement: 'bottom-left',
+    booleanOperation: null,
+    featureCount: 0,
+    style: {},
+    className: ''
+  } satisfies Required<WidgetProps> &
+    Required<Pick<EditorToolbarWidgetProps, 'placement'>> &
+    EditorToolbarWidgetProps;
+
+  placement: WidgetPlacement = 'bottom-left';
+  className = 'deck-widget-editor-toolbar';
+  deck?: Deck | null = null;
+  private appliedCustomClassName: string | null = null;
+
+  constructor(props: EditorToolbarWidgetProps = {}) {
+    super({...EditorToolbarWidget.defaultProps, ...props});
+    this.placement = props.placement ?? EditorToolbarWidget.defaultProps.placement;
+  }
+
+  override setProps(props: Partial<EditorToolbarWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    super.setProps(props);
+    this.renderToolbar();
+  }
+
+  override onAdd({deck}: {deck: Deck}): void {
+    this.deck = deck;
+  }
+
+  override onRemove(): void {
+    this.deck = null;
+    const root = this.rootElement;
+    if (root) {
+      render(null, root);
+    }
+    this.rootElement = null;
+  }
+
+  override onRenderHTML(rootElement: HTMLElement): void {
+    const style = {...ROOT_STYLE, ...this.props.style};
+    Object.assign(rootElement.style, style);
+    if (this.appliedCustomClassName && this.appliedCustomClassName !== this.props.className) {
+      rootElement.classList.remove(this.appliedCustomClassName);
+      this.appliedCustomClassName = null;
+    }
+    if (this.props.className) {
+      rootElement.classList.add(this.props.className);
+      this.appliedCustomClassName = this.props.className;
+    }
+    rootElement.classList.add(this.className);
+    this.renderToolbar();
+  }
+
+  private renderToolbar() {
+    const root = this.rootElement;
+    if (!root) {
+      return;
+    }
+
+    const booleanOp = this.props.booleanOperation ?? null;
+    const featureCount = this.props.featureCount ?? 0;
+
+    const stopEvent = (event: Event) => {
+      event.stopPropagation();
+      if (typeof (event as any).stopImmediatePropagation === 'function') {
+        (event as any).stopImmediatePropagation();
+      }
+    };
+
+    const ui = (
+      <div
+        style={TRAY_STYLE}
+        onPointerDown={stopEvent}
+        onPointerMove={stopEvent}
+        onPointerUp={stopEvent}
+        onMouseDown={stopEvent}
+        onMouseMove={stopEvent}
+        onMouseUp={stopEvent}
+        onTouchStart={stopEvent}
+        onTouchMove={stopEvent}
+        onTouchEnd={stopEvent}
+      >
+        {/* Boolean operation toggle buttons */}
+        {BOOLEAN_OPS.map(({op, icon: Icon, label, title}) => {
+          const active = booleanOp === op;
+          return (
+            <button
+              key={label}
+              type="button"
+              title={title}
+              aria-pressed={active}
+              style={{...BUTTON_STYLE, ...(active ? BUTTON_ACTIVE_STYLE : {})}}
+              onClick={(event) => {
+                stopEvent(event);
+                this.props.onSetBooleanOperation?.(op);
+              }}
+            >
+              <Icon />
+              <span>{label}</span>
+            </button>
+          );
+        })}
+
+        <div style={DIVIDER_STYLE} />
+
+        {/* Clear button */}
+        <button
+          type="button"
+          title="Clear all features"
+          style={BUTTON_STYLE}
+          onClick={(event) => {
+            stopEvent(event);
+            this.props.onClear?.();
+          }}
+        >
+          <TrashIcon />
+        </button>
+
+        {/* Export button */}
+        <button
+          type="button"
+          title="Download as GeoJSON"
+          style={BUTTON_STYLE}
+          onClick={(event) => {
+            stopEvent(event);
+            this.props.onExport?.();
+          }}
+        >
+          <DownloadIcon />
+        </button>
+
+        <div style={DIVIDER_STYLE} />
+
+        {/* Feature count badge */}
+        <span style={BADGE_STYLE}>
+          {featureCount} feature{featureCount !== 1 ? 's' : ''}
+        </span>
+      </div>
+    );
+
+    render(ui, root);
+  }
+}