@dxos/plugin-sheet 0.6.13 → 0.6.14-main.7bd9c89

package/src/components/GridSheet/GridSheet.tsx

@@ -0,0 +1,201 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo, useRef, type FocusEvent, type WheelEvent, type KeyboardEvent } from 'react';
+
+import { useAttention } from '@dxos/react-ui-attention';
+import {
+  type DxGridElement,
+  Grid,
+  type GridContentProps,
+  editorKeys,
+  type EditorKeysProps,
+  GridCellEditor,
+  closestCell,
+} from '@dxos/react-ui-grid';
+
+import { colLabelCell, dxGridCellIndexToSheetCellAddress, rowLabelCell, useSheetModelDxGridProps } from './util';
+import { rangeToA1Notation, type CellRange, DEFAULT_COLUMNS, DEFAULT_ROWS } from '../../defs';
+import { rangeExtension, sheetExtension, type CellRangeNotifier } from '../../extensions';
+import { useUpdateFocusedCellOnThreadSelection } from '../../hooks';
+import { useSheetContext } from '../SheetContext';
+
+const initialCells = {
+  grid: {},
+  frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
+    acc[`0,${i}`] = rowLabelCell(i);
+    return acc;
+  }, {}),
+  frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
+    acc[`${i},0`] = colLabelCell(i);
+    return acc;
+  }, {}),
+};
+
+const frozen = {
+  frozenColsStart: 1,
+  frozenRowsStart: 1,
+};
+
+const sheetRowDefault = { frozenRowsStart: { size: 32, readonly: true }, grid: { size: 32, resizeable: true } };
+const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: { size: 180, resizeable: true } };
+
+export const GridSheet = () => {
+  const { id, model, editing, setEditing, setCursor, setRange, range, cursor } = useSheetContext();
+  const dxGrid = useRef<DxGridElement | null>(null);
+  const rangeNotifier = useRef<CellRangeNotifier>();
+  const { hasAttention } = useAttention(id);
+
+  const handleFocus = useCallback(
+    (event: FocusEvent) => {
+      if (!editing) {
+        const cell = closestCell(event.target);
+        if (cell && cell.plane === 'grid') {
+          setCursor({ col: cell.col, row: cell.row });
+        }
+      }
+    },
+    [editing],
+  );
+
+  // TODO(burdon): Validate formula before closing: hf.validateFormula();
+  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
+    (value, { key, shift }) => {
+      if (value !== undefined) {
+        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
+      }
+      setEditing(null);
+      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
+        ? 'row'
+        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
+          ? 'col'
+          : undefined;
+      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
+      dxGrid.current?.refocus(axis, delta);
+    },
+    [model, editing, setEditing],
+  );
+
+  const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+    ({ axis, size, index: numericIndex }) => {
+      if (axis === 'row') {
+        const rowId = model.sheet.rows[parseInt(numericIndex)];
+        model.sheet.rowMeta[rowId] ??= {};
+        model.sheet.rowMeta[rowId].size = size;
+      } else {
+        const columnId = model.sheet.columns[parseInt(numericIndex)];
+        model.sheet.columnMeta[columnId] ??= {};
+        model.sheet.columnMeta[columnId].size = size;
+      }
+    },
+    [model],
+  );
+
+  const handleSelect = useCallback<NonNullable<GridContentProps['onSelect']>>(
+    ({ minCol, maxCol, minRow, maxRow }) => {
+      const range: CellRange = { from: { col: minCol, row: minRow } };
+      if (minCol !== maxCol || minRow !== maxRow) {
+        range.to = { col: maxCol, row: maxRow };
+      }
+      if (editing) {
+        // Update range selection in formula.
+        rangeNotifier.current?.(rangeToA1Notation(range));
+      } else {
+        // Setting range while editing causes focus to move to null, avoid doing so.
+        setRange(range.to ? range : undefined);
+      }
+    },
+    [editing],
+  );
+
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      if (!hasAttention) {
+        event.stopPropagation();
+      }
+    },
+    [hasAttention],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const cursorFallbackRange: CellRange | null = range ?? cursor ? { from: cursor!, to: cursor! } : null;
+      switch (event.key) {
+        case 'Backspace':
+        case 'Delete':
+          event.preventDefault();
+          return cursorFallbackRange && model.clear(cursorFallbackRange);
+      }
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key) {
+          case 'x':
+          case 'X':
+            event.preventDefault();
+            return cursorFallbackRange && model.cut(cursorFallbackRange);
+          case 'c':
+          case 'C':
+            event.preventDefault();
+            return cursorFallbackRange && model.copy(cursorFallbackRange);
+          case 'v':
+          case 'V':
+            event.preventDefault();
+            return cursor && model.paste(cursor);
+          case 'z':
+            event.preventDefault();
+            return event.shiftKey ? model.redo() : model.undo();
+          case 'Z':
+          case 'y':
+            event.preventDefault();
+            return model.redo();
+        }
+      }
+    },
+    [range, model, cursor],
+  );
+
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
+
+  const extension = useMemo(
+    () => [
+      editorKeys({ onClose: handleClose, ...(editing?.initialContent && { onNav: handleClose }) }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
+      rangeExtension((fn) => (rangeNotifier.current = fn)),
+    ],
+    [model, handleClose, editing],
+  );
+
+  const getCellContent = useCallback(
+    (index: string) => {
+      const cell = dxGridCellIndexToSheetCellAddress(index);
+      return model.getCellText(cell);
+    },
+    [model],
+  );
+
+  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
+
+  return (
+    <>
+      <GridCellEditor getCellContent={getCellContent} extension={extension} />
+      <Grid.Content
+        initialCells={initialCells}
+        limitColumns={DEFAULT_COLUMNS}
+        limitRows={DEFAULT_ROWS}
+        columns={columns}
+        rows={rows}
+        onAxisResize={handleAxisResize}
+        onSelect={handleSelect}
+        rowDefault={sheetRowDefault}
+        columnDefault={sheetColDefault}
+        frozen={frozen}
+        onFocus={handleFocus}
+        onWheelCapture={handleWheel}
+        onKeyDown={handleKeyDown}
+        overscroll='inline'
+        className='[--dx-grid-base:var(--surface-bg)]'
+        ref={dxGrid}
+      />
+    </>
+  );
+};

package/src/components/{CellEditor/CellEditor.stories.tsx → GridSheet/SheetCellEditor.stories.tsx}

@@ -4,25 +4,20 @@
 
 import '@dxos-theme';
 
-import { HyperFormula } from 'hyperformula';
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
 import { createDocAccessor, type EchoReactiveObject } from '@dxos/client/echo';
 import { automerge } from '@dxos/react-ui-editor';
+import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { CellEditor, type CellEditorProps } from './CellEditor';
-import { sheetExtension } from './extension';
-import { defaultFunctions } from '../../model';
-import { createSheet, SheetType } from '../../types';
-
-export default {
-  title: 'plugin-sheet/CellEditor',
-  component: CellEditor,
-  render: (args: StoryProps) => <Story {...args} />,
-  decorators: [withTheme],
-};
+import { HyperFormula } from '#hyperformula';
+import { createSheet } from '../../defs';
+import { sheetExtension } from '../../extensions';
+import { defaultFunctions } from '../../graph';
+import { SheetType } from '../../types';
 
 type StoryProps = CellEditorProps;
 
@@ -41,14 +36,13 @@ const AutomergeStory = ({ value, ...props }: StoryProps) => {
   const [object, setObject] = useState<EchoReactiveObject<SheetType>>();
   useEffect(() => {
     setTimeout(async () => {
-      const client = new Client();
+      const client = new Client({ types: [SheetType] });
       await client.initialize();
       await client.halo.createIdentity();
       const space = await client.spaces.create();
-      client.addTypes([SheetType]);
 
       const sheet = createSheet();
-      sheet.title = 'Test';
+      sheet.name = 'Test';
       sheet.cells[cell] = { value };
       space.db.add(sheet);
       setObject(sheet);
@@ -89,3 +83,12 @@ export const Automerge = {
     value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
   },
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/CellEditor',
+  component: CellEditor,
+  render: (args: StoryProps) => <Story {...args} />,
+  decorators: [withTheme],
+};
+
+export default meta;

package/src/components/GridSheet/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './GridSheet';

package/src/components/GridSheet/util.ts

@@ -0,0 +1,154 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { parseValue, cellClassesForFieldType } from '@dxos/react-ui-data';
+import {
+  type GridContentProps,
+  type DxGridElement,
+  type DxGridAxisMeta,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  type DxGridPlaneCells,
+  type DxGridCellValue,
+  colToA1Notation,
+  rowToA1Notation,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type CellAddress, inRange, cellClassNameForRange } from '../../defs';
+import { type SheetModel } from '../../model';
+
+export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
+  const [colStr, rowStr] = index.split(',');
+  return {
+    col: parseInt(colStr),
+    row: parseInt(rowStr),
+  };
+};
+
+const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.columns.reduce(
+    (acc: DxGridAxisMeta, columnId, numericIndex) => {
+      if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const createDxGridRows = (model: SheetModel): DxGridAxisMeta => {
+  return model.sheet.rows.reduce(
+    (acc: DxGridAxisMeta, rowId, numericIndex) => {
+      if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) {
+        acc.grid[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
+      }
+      return acc;
+    },
+    { grid: {} },
+  );
+};
+
+const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCellValue => {
+  const address = { col, row };
+  const rawValue = model.getValue(address);
+  if (rawValue === undefined || rawValue === null) {
+    return { value: '' };
+  }
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
+  const type = model.getValueType(address);
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+
+  return { value: parseValue(type, rawValue), className: mx(cellClassesForFieldType(type), classNames) };
+};
+
+const gridCellGetter = (model: SheetModel) => {
+  // TODO(thure): Actually use the cache.
+  const cachedGridCells: DxGridPlaneCells = {};
+  return (nextBounds: DxGridPlaneRange): DxGridPlaneCells => {
+    [...Array(nextBounds.end.col - nextBounds.start.col)].forEach((_, c0) => {
+      return [...Array(nextBounds.end.row - nextBounds.start.row)].forEach((_, r0) => {
+        const col = nextBounds.start.col + c0;
+        const row = nextBounds.start.row + r0;
+        cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
+      });
+    });
+    return cachedGridCells;
+  };
+};
+
+export const rowLabelCell = (row: number) => ({
+  value: rowToA1Notation(row),
+  className: 'text-end !pie-1',
+  resizeHandle: 'row',
+});
+
+export const colLabelCell = (col: number) => ({ value: colToA1Notation(col), resizeHandle: 'col' });
+
+const cellGetter = (model: SheetModel) => {
+  const getGridCells = gridCellGetter(model);
+  return (nextBounds: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells => {
+    switch (plane) {
+      case 'grid':
+        return getGridCells(nextBounds);
+      case 'frozenColsStart':
+        return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
+          const r = nextBounds.start.row + r0;
+          acc[`0,${r}`] = rowLabelCell(r);
+          return acc;
+        }, {});
+      case 'frozenRowsStart':
+        return [...Array(nextBounds.end.col - nextBounds.start.col)].reduce((acc, _, c0) => {
+          const c = nextBounds.start.col + c0;
+          acc[`${c},0`] = colLabelCell(c);
+          return acc;
+        }, {});
+      default:
+        return {};
+    }
+  };
+};
+
+export const useSheetModelDxGridProps = (
+  dxGridRef: MutableRefObject<DxGridElement | null>,
+  model: SheetModel,
+): Pick<GridContentProps, 'columns' | 'rows'> => {
+  const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+
+  useLayoutEffect(() => {
+    const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    if (dxGridRef.current) {
+      dxGridRef.current.getCells = cellGetter(model);
+    }
+    const handleCellsUpdate = () => {
+      dxGridRef.current?.requestUpdate('initialCells');
+    };
+    cellsAccessor.handle.addListener('change', handleCellsUpdate);
+    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+  }, [model]);
+
+  useEffect(() => {
+    const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
+    const rowMetaAccessor = createDocAccessor(model.sheet, ['rowMeta']);
+    const handleColumnMetaUpdate = () => {
+      setColumns(createDxGridColumns(model));
+    };
+    const handleRowMetaUpdate = () => {
+      setRows(createDxGridRows(model));
+    };
+    columnMetaAccessor.handle.addListener('change', handleColumnMetaUpdate);
+    rowMetaAccessor.handle.addListener('change', handleRowMetaUpdate);
+    return () => {
+      columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
+      rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
+    };
+  }, [model]);
+
+  return { columns, rows };
+};

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SheetContainer } from './SheetContainer';
+import { useComputeGraph } from '../../hooks';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/SheetContainer',
+  component: SheetContainer,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({
+      fullscreen: true,
+      tooltips: true,
+      classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
+    }),
+  ],
+};
+
+export default meta;

package/src/components/SheetContainer/SheetContainer.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { FunctionEditor } from '../FunctionEditor';
+import { GridSheet } from '../GridSheet';
+import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { Toolbar } from '../Toolbar';
+
+export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
+  return (
+    <SheetProvider sheet={sheet} graph={graph}>
+      <Toolbar.Root role={role}>
+        <Toolbar.Styles />
+        <Toolbar.Alignment />
+        <Toolbar.Separator />
+        <Toolbar.Actions />
+      </Toolbar.Root>
+      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>
+        <GridSheet />
+        <FunctionEditor />
+      </div>
+    </SheetProvider>
+  );
+};

package/src/components/SheetContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { SheetContainer } from './SheetContainer';
+
+export default SheetContainer;

package/src/components/SheetContext/SheetContext.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Grid, useGridContext, type GridScopedProps, type GridEditing } from '@dxos/react-ui-grid';
+
+import { type CellAddress, type CellRange } from '../../defs';
+import { type ComputeGraph } from '../../graph';
+import { useSheetModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
+import { type SheetModel, createDecorations } from '../../model';
+import { type SheetType } from '../../types';
+
+export type SheetContextValue = {
+  id: string;
+
+  model: SheetModel;
+
+  // Cursor state.
+  // TODO(burdon): Cursor and range should use indices.
+  cursor?: CellAddress;
+  setCursor: (cell: CellAddress | undefined) => void;
+  range?: CellRange;
+  setRange: (range: CellRange | undefined) => void;
+
+  // Editing state (undefined if not editing).
+  editing: GridEditing;
+  setEditing: (editing: GridEditing) => void;
+
+  // Events.
+  // TODO(burdon): Generalize.
+  onInfo?: () => void;
+
+  // Decorations.
+  decorations: ReturnType<typeof createDecorations>;
+};
+
+const SheetContext = createContext<SheetContextValue | undefined>(undefined);
+
+export const useSheetContext = (): SheetContextValue => {
+  const context = useContext(SheetContext);
+  invariant(context);
+  return context;
+};
+
+const SheetProviderImpl = ({
+  model,
+  onInfo,
+  children,
+  __gridScope,
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model'>>>) => {
+  const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
+
+  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
+  const decorations = useMemo(() => createDecorations(), []);
+
+  // TODO(thure): Reconnect these.
+  const [cursor, setCursor] = useState<CellAddress>();
+  const [range, setRange] = useState<CellRange>();
+
+  useSelectThreadOnCellFocus(model, cursor);
+  useThreadDecorations(model, decorations);
+
+  return (
+    <SheetContext.Provider
+      value={{
+        id,
+        model,
+        editing,
+        setEditing,
+        cursor,
+        setCursor,
+        range,
+        setRange,
+        // TODO(burdon): Change to event.
+        onInfo,
+        decorations,
+      }}
+    >
+      {children}
+    </SheetContext.Provider>
+  );
+};
+
+export type SheetProviderProps = {
+  graph: ComputeGraph;
+  sheet: SheetType;
+  readonly?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetProvider = ({ children, graph, sheet, readonly, onInfo }: PropsWithChildren<SheetProviderProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+
+  return !model ? null : (
+    <Grid.Root id={fullyQualifiedId(sheet)}>
+      <SheetProviderImpl model={model} onInfo={onInfo}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
+};

package/src/components/SheetContext/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './SheetContext';

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
 import { textBlockWidth } from '@dxos/react-ui-theme';
@@ -12,7 +13,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { Toolbar } from './Toolbar';
 import translations from '../../translations';
 
-const Story = () => {
+const DefaultStory = () => {
   return (
     <Toolbar.Root classNames={textBlockWidth}>
       <Toolbar.Alignment />
@@ -20,12 +21,14 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'plugin-sheet/Toolbar',
-  component: Toolbar,
+export const Default = {};
+
+const meta: Meta<typeof Toolbar.Root> = {
+  title: 'plugins/plugin-sheet/Toolbar',
+  component: Toolbar.Root,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: { translations, layout: 'fullscreen' },
-  render: (args: any) => <Story {...args} />,
 };
 
-export const Default = {};
+export default meta;