@casualoffice/sheets 0.18.0 → 0.20.0

package/src/charts/ChartOverlay.tsx

@@ -0,0 +1,293 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCharts } from './charts-context';
+import { init, type EChartsType } from './echarts-init';
+import { buildEChartsOption } from './build-option';
+import { rectToCellPos } from './hit-test';
+import type { ChartModel } from './types';
+
+/**
+ * Single chart rendered on screen. Responsibilities:
+ *
+ *   - Owns one ECharts instance, mounted into a dedicated div.
+ *   - Reads source data on mount + on every workbook value change,
+ *     redraws via `setOption(option, true)`.
+ *   - Selection: click selects (frame + 8 resize handles appear);
+ *     the parent (ChartLayer) handles click-outside-to-deselect.
+ *   - Drag-to-move: pointer-down on the body, drag, release → snap
+ *     the model.pos top-left to the nearest cell, keep the size.
+ *   - Drag-to-resize: pointer-down on any of the 8 handles, drag,
+ *     release → snap both anchor corners to cells.
+ *
+ * Excel parity notes:
+ *   - 4 corner handles (resize both axes) + 4 mid-edge handles
+ *     (resize one axis).
+ *   - Cursor changes to nwse/nesw/ns/ew depending on handle.
+ *   - Move/resize during drag is free-positioned via CSS; the cell
+ *     anchor only updates on pointer-up (so the model stays in cell
+ *     coordinates and round-trips cleanly through xlsx + collab).
+ */
+type Props = {
+  model: ChartModel;
+  /** Host-local CSS box. Parent computes from the cell rect + the
+   *  active sheet's scroll offset on every animation frame. */
+  rect: { left: number; top: number; width: number; height: number };
+  /** Canvas-vs-host offset + current scroll. Needed to convert the
+   *  chart's screen pixels back to canvas-local pre-scroll coords
+   *  when snapping to cells on drop. */
+  canvasOffset: { x: number; y: number };
+  scroll: { x: number; y: number };
+};
+
+type Handle = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+
+const CORNER_HANDLES: Handle[] = ['nw', 'ne', 'se', 'sw'];
+const EDGE_HANDLES: Handle[] = ['n', 'e', 's', 'w'];
+const ALL_HANDLES: Handle[] = [...CORNER_HANDLES, ...EDGE_HANDLES];
+
+const HANDLE_CURSORS: Record<Handle, string> = {
+  n: 'ns-resize',
+  s: 'ns-resize',
+  e: 'ew-resize',
+  w: 'ew-resize',
+  ne: 'nesw-resize',
+  sw: 'nesw-resize',
+  nw: 'nwse-resize',
+  se: 'nwse-resize',
+};
+
+const MIN_W = 80;
+const MIN_H = 60;
+
+export function ChartOverlay({ model, rect, canvasOffset, scroll }: Props) {
+  const { api: sdkApi, selectedId, select, update } = useCharts();
+  // FUniver facade — reached through the SDK handle.
+  const api = sdkApi.univer;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const echartRef = useRef<EChartsType | null>(null);
+  const isSelected = selectedId === model.id;
+
+  // `drag` is the ephemeral pixel-space delta applied while the user
+  // is dragging the body or a handle. It's a CSS-only transform until
+  // pointer-up, at which point we compute the new cell anchor and
+  // commit via `update()`. Null when not dragging.
+  const [drag, setDrag] = useState<null | {
+    mode: 'move' | Handle;
+    startMouse: { x: number; y: number };
+    startRect: { left: number; top: number; width: number; height: number };
+    current: { left: number; top: number; width: number; height: number };
+  }>(null);
+
+  // Init ECharts once + dispose on unmount. ECharts mutates its own
+  // DOM children so it must own its container.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const inst = init(host, undefined, { renderer: 'canvas' });
+    echartRef.current = inst;
+    return () => {
+      inst.dispose();
+      echartRef.current = null;
+    };
+  }, []);
+
+  // Resize whenever the cell-rect-derived box (or the ephemeral drag
+  // rect) changes. ECharts won't auto-resize on its own.
+  useEffect(() => {
+    echartRef.current?.resize();
+  }, [rect.width, rect.height, drag?.current.width, drag?.current.height]);
+
+  useEffect(() => {
+    if (!api) return;
+    const refresh = () => {
+      const opt = buildEChartsOption(api, model);
+      if (opt) {
+        echartRef.current?.setOption(opt, true);
+        // Expose the resolved ECharts option per chart id so e2e specs
+        // (and manual debugging) can assert on the live config — e.g.
+        // dual-axis charts emit a two-entry `yAxis`. Mirrors the
+        // `window.__univerAPI` test hook; carries no secrets.
+        const w = window as unknown as {
+          __casualChartOptions?: Record<string, unknown>;
+        };
+        w.__casualChartOptions = w.__casualChartOptions ?? {};
+        w.__casualChartOptions[model.id] = opt;
+      }
+    };
+    refresh();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const evName = (api as any).Event?.SheetValueChanged;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!evName || typeof (api as any).addEvent !== 'function') return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const disp = (api as any).addEvent(evName, refresh) as { dispose?: () => void };
+    return () => disp.dispose?.();
+  }, [api, model]);
+
+  // Pointer-up handler installed at the document level while a drag
+  // is in flight. We can't put it on the overlay because the pointer
+  // can escape during the move (and Excel doesn't lock pointers either).
+  const commitDrag = useCallback(() => {
+    if (!drag || !api) return;
+    const wb = api.getActiveWorkbook();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const sheets = wb?.getSheets() as any[] | undefined;
+    const ws = sheets?.find((s) => s.getSheetId?.() === model.sheetId);
+    if (!ws) {
+      setDrag(null);
+      return;
+    }
+    const newPos = rectToCellPos(ws, drag.current, canvasOffset, scroll, {
+      startRow: model.pos.startRow,
+      startColumn: model.pos.startColumn,
+      endRow: model.pos.endRow,
+      endColumn: model.pos.endColumn,
+    });
+    if (newPos) update(model.id, { pos: newPos });
+    setDrag(null);
+  }, [api, canvasOffset, drag, model, scroll, update]);
+
+  useEffect(() => {
+    if (!drag) return;
+    const onMove = (e: PointerEvent) => {
+      const dx = e.clientX - drag.startMouse.x;
+      const dy = e.clientY - drag.startMouse.y;
+      setDrag((cur) => {
+        if (!cur) return cur;
+        const next = computeDragRect(cur.mode, cur.startRect, dx, dy);
+        return { ...cur, current: next };
+      });
+    };
+    const onUp = () => commitDrag();
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    document.addEventListener('pointercancel', onUp);
+    return () => {
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      document.removeEventListener('pointercancel', onUp);
+    };
+  }, [drag, commitDrag]);
+
+  const onBodyPointerDown = (e: React.PointerEvent) => {
+    if (e.button !== 0) return; // primary button only
+    e.stopPropagation();
+    select(model.id);
+    // A bare click selects but doesn't start a drag — the drag effect
+    // only commits on pointer-up if `drag.current` differs from
+    // `drag.startRect`. So we always set drag and trust commit logic.
+    setDrag({
+      mode: 'move',
+      startMouse: { x: e.clientX, y: e.clientY },
+      startRect: { ...rect },
+      current: { ...rect },
+    });
+  };
+
+  const onHandlePointerDown = (handle: Handle) => (e: React.PointerEvent) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    select(model.id);
+    setDrag({
+      mode: handle,
+      startMouse: { x: e.clientX, y: e.clientY },
+      startRect: { ...rect },
+      current: { ...rect },
+    });
+  };
+
+  const liveRect = drag?.current ?? rect;
+
+  return (
+    <div
+      ref={hostRef}
+      className={`chart-overlay${isSelected ? ' chart-overlay--selected' : ''}${drag ? ' chart-overlay--dragging' : ''}`}
+      data-testid="chart-overlay"
+      data-chart-id={model.id}
+      data-selected={isSelected ? 'true' : undefined}
+      style={{
+        position: 'absolute',
+        left: `${liveRect.left}px`,
+        top: `${liveRect.top}px`,
+        width: `${liveRect.width}px`,
+        height: `${liveRect.height}px`,
+        cursor: drag?.mode === 'move' ? 'grabbing' : isSelected ? 'grab' : 'pointer',
+      }}
+      onPointerDown={onBodyPointerDown}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        select(model.id);
+        // ChartLayer listens for this event and pops a context menu —
+        // we just need to ensure the chart is selected first.
+        const ce = new CustomEvent('casual-chart-contextmenu', {
+          detail: { id: model.id, x: e.clientX, y: e.clientY },
+        });
+        document.dispatchEvent(ce);
+      }}
+    >
+      {isSelected &&
+        ALL_HANDLES.map((h) => (
+          <div
+            key={h}
+            data-testid={`chart-handle-${h}`}
+            className={`chart-overlay__handle chart-overlay__handle--${h}`}
+            style={{ cursor: HANDLE_CURSORS[h] }}
+            onPointerDown={onHandlePointerDown(h)}
+          />
+        ))}
+    </div>
+  );
+}
+
+/**
+ * Apply a drag delta to the starting rect based on which handle (or
+ * the body) is being dragged. Mode `'move'` slides the rect; the
+ * handle modes resize from the matching edge / corner. We clamp
+ * each dimension to a minimum so the chart can't collapse onto a
+ * point (impossible to grab again).
+ */
+function computeDragRect(
+  mode: 'move' | Handle,
+  start: { left: number; top: number; width: number; height: number },
+  dx: number,
+  dy: number,
+): { left: number; top: number; width: number; height: number } {
+  if (mode === 'move') {
+    return { left: start.left + dx, top: start.top + dy, width: start.width, height: start.height };
+  }
+  let { left, top, width, height } = start;
+  const wantsLeft = mode === 'nw' || mode === 'w' || mode === 'sw';
+  const wantsRight = mode === 'ne' || mode === 'e' || mode === 'se';
+  const wantsTop = mode === 'nw' || mode === 'n' || mode === 'ne';
+  const wantsBottom = mode === 'sw' || mode === 's' || mode === 'se';
+  if (wantsLeft) {
+    const newWidth = Math.max(MIN_W, start.width - dx);
+    left = start.left + (start.width - newWidth);
+    width = newWidth;
+  } else if (wantsRight) {
+    width = Math.max(MIN_W, start.width + dx);
+  }
+  if (wantsTop) {
+    const newHeight = Math.max(MIN_H, start.height - dy);
+    top = start.top + (start.height - newHeight);
+    height = newHeight;
+  } else if (wantsBottom) {
+    height = Math.max(MIN_H, start.height + dy);
+  }
+  return { left, top, width, height };
+}

package/src/charts/ChartsPanel.tsx

@@ -0,0 +1,232 @@
+/**
+ * Copyright 2026 Casual Office
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo, useState } from 'react';
+import type { PanelComponentProps } from '../chrome/extensions';
+import { Icon } from '../chrome/Icon';
+import { PanelHeader, PanelEmpty, IconButton } from '../chrome/panel-shell';
+
+const MUTED = 'var(--color-text-secondary, var(--cs-chrome-muted, #605e5c))';
+const DIVIDER = 'var(--color-divider, var(--cs-chrome-border, #edeff3))';
+const rowStyle = {
+  border: `1px solid ${DIVIDER}`,
+  borderRadius: 8,
+  padding: 10,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: 6,
+};
+const nameBtnStyle = {
+  flex: 1,
+  textAlign: 'left' as const,
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+  font: 'inherit',
+  fontWeight: 600,
+  color: 'inherit',
+};
+const ctaStyle = {
+  border: `1px solid ${DIVIDER}`,
+  borderRadius: 6,
+  padding: '6px 12px',
+  cursor: 'pointer',
+  font: 'inherit',
+  fontWeight: 600,
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 6,
+  background: 'var(--color-surface, var(--cs-chrome-input-bg, #fff))',
+  color: 'var(--color-accent, var(--cs-chrome-active-fg, #0e7490))',
+};
+import { useCharts } from './charts-context';
+import { getActiveSelectionRange, rangeToA1, buildChartModelForRange } from './insert-chart';
+import { nextChartName } from './naming';
+import { InsertChartDialog } from './InsertChartDialog';
+import { CHART_FAMILY_OF, CHART_TYPE_LABEL, type ChartFamily, type ChartModel } from './types';
+
+/**
+ * Right-side Charts panel. Equivalent of Excel's Selection Pane scoped
+ * to charts on the active sheet: list every chart, click the name to
+ * rename, click the source-range badge to flash that range in the grid,
+ * delete from the row, and "Insert chart" from the empty-state CTA.
+ *
+ * Only charts on the active sheet are shown — same scoping Excel uses
+ * for its Selection Pane (it switches with the active sheet tab).
+ *
+ * SDK port: this is a chrome side-panel (`{ api, onClose }`). The app's
+ * `useUI().toggleChartsPanel` becomes the panel host's `onClose`; the
+ * FUniver facade is reached through `api.univer`. Chart data still comes
+ * from `useCharts()` (mount `<ChartsProvider api={...}>` above the chrome).
+ */
+const FAMILY_ICONS: Record<ChartFamily, string> = {
+  column: 'bar_chart',
+  bar: 'align_horizontal_left',
+  line: 'show_chart',
+  area: 'area_chart',
+  pie: 'pie_chart',
+  scatter: 'scatter_plot',
+};
+
+export function ChartsPanel({ api, onClose }: PanelComponentProps) {
+  // FUniver facade — reached through the SDK handle.
+  const univer = api.univer;
+  const { charts, insert, remove, update } = useCharts();
+  const [renaming, setRenaming] = useState<{ id: string; draft: string } | null>(null);
+  const [showInsert, setShowInsert] = useState(false);
+  const [insertDefault, setInsertDefault] = useState('A1');
+
+  const activeSheetId = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ws: any = univer?.getActiveWorkbook?.()?.getActiveSheet();
+    return ws?.getSheetId?.() ?? null;
+  }, [univer, charts]);
+
+  const visible = useMemo<ChartModel[]>(
+    () => (activeSheetId ? charts.filter((c) => c.sheetId === activeSheetId) : charts),
+    [charts, activeSheetId],
+  );
+  const empty = visible.length === 0;
+
+  const onRenameCommit = (id: string, prev: string) => {
+    if (!renaming || renaming.id !== id) return;
+    const draft = renaming.draft.trim();
+    if (!draft || draft === prev) {
+      setRenaming(null);
+      return;
+    }
+    update(id, { title: draft });
+    setRenaming(null);
+  };
+
+  const openInsert = () => {
+    if (!univer) return;
+    const sel = getActiveSelectionRange(univer);
+    setInsertDefault(sel ? rangeToA1(sel) : 'A1');
+    setShowInsert(true);
+  };
+
+  return (
+    <div data-testid="charts-panel" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <PanelHeader icon="bar_chart" title="Charts" count={visible.length} onClose={onClose} />
+      <div style={{ flex: 1, overflow: 'auto', padding: 12 }}>
+        {empty ? (
+          <PanelEmpty icon="bar_chart" title="No charts on this sheet" testId="charts-panel-empty">
+            Select the data range you want to plot, then use <strong>Insert → Chart</strong> — or:
+            <div style={{ marginTop: 12 }}>
+              <button
+                type="button"
+                data-testid="charts-panel-empty-cta"
+                disabled={!univer}
+                onClick={openInsert}
+                style={ctaStyle}
+              >
+                <Icon name="add" size={16} /> Insert chart
+              </button>
+            </div>
+          </PanelEmpty>
+        ) : (
+          <ul
+            style={{
+              listStyle: 'none',
+              margin: 0,
+              padding: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            {visible.map((c) => {
+              const isRenaming = renaming?.id === c.id;
+              const displayName = c.title ?? 'Chart';
+              return (
+                <li key={c.id} data-testid={`charts-panel-row-${c.id}`} style={rowStyle}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <span
+                      className="material-symbols-outlined"
+                      aria-hidden="true"
+                      style={{ fontSize: 18, color: MUTED, flex: '0 0 auto' }}
+                    >
+                      {FAMILY_ICONS[CHART_FAMILY_OF[c.type]]}
+                    </span>
+                    {isRenaming ? (
+                      <input
+                        autoFocus
+                        value={renaming.draft}
+                        onChange={(e) => setRenaming({ id: c.id, draft: e.target.value })}
+                        onBlur={() => onRenameCommit(c.id, displayName)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') onRenameCommit(c.id, displayName);
+                          if (e.key === 'Escape') setRenaming(null);
+                        }}
+                        style={{ flex: 1, font: 'inherit', padding: '2px 4px' }}
+                      />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => setRenaming({ id: c.id, draft: displayName })}
+                        title="Click to rename"
+                        style={nameBtnStyle}
+                      >
+                        {displayName}
+                      </button>
+                    )}
+                    <IconButton
+                      name="delete"
+                      label={`Delete ${displayName}`}
+                      onClick={() => remove(c.id)}
+                      size={16}
+                    />
+                  </div>
+                  <div style={{ display: 'flex', gap: 8, fontSize: 12, color: MUTED }}>
+                    <span>{CHART_TYPE_LABEL[c.type]}</span>
+                    <span title="Source range">{rangeToA1(c.source)}</span>
+                  </div>
+                </li>
+              );
+            })}
+            <li style={{ listStyle: 'none', marginTop: 4 }}>
+              <button
+                type="button"
+                data-testid="charts-panel-add"
+                disabled={!univer}
+                onClick={openInsert}
+                style={ctaStyle}
+              >
+                <Icon name="add" size={16} /> Insert chart
+              </button>
+            </li>
+          </ul>
+        )}
+      </div>
+
+      {showInsert && univer && (
+        <InsertChartDialog
+          api={univer}
+          defaultSourceA1={insertDefault}
+          onCancel={() => setShowInsert(false)}
+          onConfirm={({ source, type }) => {
+            const model = buildChartModelForRange(univer, source, type);
+            if (model) {
+              insert({ ...model, title: nextChartName(charts) });
+            }
+            setShowInsert(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}