@dxos/plugin-sheet 0.6.12-staging.e11e696 → 0.6.13-main.041e8aa

package/src/components/GridSheet/GridSheet.tsx

@@ -2,70 +2,66 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, type FocusEvent, type WheelEvent } from 'react';
 
+import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridElement,
   Grid,
   type GridContentProps,
-  type GridScopedProps,
-  useGridContext,
-} from '@dxos/react-ui-grid';
-
-import { dxGridCellIndexToSheetCellAddress, useSheetModelDxGridProps } from './util';
-import { rangeToA1Notation, type CellRange } from '../../defs';
-import { type ComputeGraph } from '../../graph';
-import { useFormattingModel, useSheetModel, type UseSheetModelOptions } from '../../hooks';
-import { type SheetModel, type FormattingModel } from '../../model';
-import { type SheetType } from '../../types';
-import {
-  CellEditor,
-  type CellEditorProps,
-  type CellRangeNotifier,
   editorKeys,
   type EditorKeysProps,
-  rangeExtension,
-  sheetExtension,
-} from '../CellEditor';
-
-const GridSheetCellEditor = ({
-  model,
-  extension,
-  __gridScope,
-}: GridScopedProps<Pick<CellEditorProps, 'extension'> & { model: SheetModel }>) => {
-  const { id, editing, setEditing, editBox } = useGridContext('GridSheetCellEditor', __gridScope);
-  const cell = dxGridCellIndexToSheetCellAddress(editing);
-
-  return editing ? (
-    <CellEditor
-      variant='grid'
-      value={editing.initialContent ?? (cell ? model.getCellText(cell) : undefined)}
-      autoFocus
-      box={editBox}
-      onBlur={() => setEditing(null)}
-      extension={extension}
-      gridId={id}
-    />
-  ) : null;
+  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 = { size: 32, resizeable: true };
-const sheetColDefault = { size: 180, resizeable: true };
+const sheetRowDefault = { grid: { size: 32, resizeable: true } };
+const sheetColDefault = { frozenColsStart: { size: 48 }, grid: { size: 180, resizeable: true } };
 
-const GridSheetImpl = ({
-  model,
-  formatting,
-  __gridScope,
-}: GridScopedProps<{ model: SheetModel; formatting: FormattingModel }>) => {
-  const { editing, setEditing } = useGridContext('GridSheetCellEditor', __gridScope);
+export const GridSheet = () => {
+  const { id, model, formatting, editing, setEditing, setCursor, setRange } = 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);
+        setCursor(cell && cell.plane === 'grid' ? { col: cell.col, row: cell.row } : undefined);
+      }
+    },
+    [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)!, value);
+        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
       }
       setEditing(null);
       const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
@@ -96,18 +92,30 @@ const GridSheetImpl = ({
 
   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) {
-        const range: CellRange = { from: { col: minCol, row: minRow } };
-        if (minCol !== maxCol || minRow !== maxRow) {
-          range.to = { col: maxCol, row: maxRow };
-        }
         // 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 { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
 
   const extension = useMemo(
@@ -119,35 +127,35 @@ const GridSheetImpl = ({
     [model, handleClose, editing],
   );
 
+  const getCellContent = useCallback(
+    (index: string) => {
+      const cell = dxGridCellIndexToSheetCellAddress(index);
+      return model.getCellText(cell);
+    },
+    [model],
+  );
+
+  useUpdateFocusedCellOnThreadSelection(model, dxGrid);
+
   return (
     <>
-      <GridSheetCellEditor model={model} extension={extension} />
+      <GridCellEditor getCellContent={getCellContent} extension={extension} />
       <Grid.Content
-        initialCells={{}}
+        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}
+        className='[--dx-grid-base:var(--surface-bg)]'
         ref={dxGrid}
       />
     </>
   );
 };
-
-export type GridSheetProps = { graph?: ComputeGraph; sheet?: SheetType } & UseSheetModelOptions;
-
-export const GridSheet = ({ graph, sheet, ...options }: GridSheetProps) => {
-  const model = useSheetModel(graph, sheet, options);
-  const formatting = useFormattingModel(model);
-  if (!model || !formatting) {
-    return null;
-  }
-
-  return (
-    <Grid.Root id={model.id}>
-      <GridSheetImpl model={model} formatting={formatting} />
-    </Grid.Root>
-  );
-};

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

@@ -9,12 +9,12 @@ 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 { HyperFormula } from '#hyperformula';
-import { CellEditor, type CellEditorProps } from './CellEditor';
-import { sheetExtension } from './extension';
 import { createSheet } from '../../defs';
+import { sheetExtension } from '../../extensions';
 import { defaultFunctions } from '../../graph';
 import { SheetType } from '../../types';
 

package/src/components/{Sheet → GridSheet}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Sheet';
+export * from './GridSheet';

package/src/components/GridSheet/util.ts

@@ -6,23 +6,22 @@ import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'rea
 
 import { createDocAccessor } from '@dxos/react-client/echo';
 import {
-  type GridEditing,
   type GridContentProps,
   type DxGridElement,
-  type DxGridCells,
   type DxGridAxisMeta,
-  type DxGridRange,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  type DxGridPlaneCells,
+  colToA1Notation,
+  rowToA1Notation,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
 import { type CellAddress } from '../../defs';
 import { type SheetModel, type FormattingModel } from '../../model';
 
-export const dxGridCellIndexToSheetCellAddress = (gridEditing: GridEditing): CellAddress | null => {
-  if (!gridEditing) {
-    return null;
-  }
-  const [colStr, rowStr] = gridEditing.index.split(',');
+export const dxGridCellIndexToSheetCellAddress = (index: string): CellAddress => {
+  const [colStr, rowStr] = index.split(',');
   return {
     col: parseInt(colStr),
     row: parseInt(rowStr),
@@ -30,40 +29,77 @@ export const dxGridCellIndexToSheetCellAddress = (gridEditing: GridEditing): Cel
 };
 
 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[numericIndex] = { size: model.sheet.columnMeta[columnId].size, resizeable: true };
-    }
-    return acc;
-  }, {});
+  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[numericIndex] = { size: model.sheet.rowMeta[rowId].size, resizeable: true };
-    }
-    return acc;
-  }, {});
+  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 cellGetter = (model: SheetModel, formatting: FormattingModel) => {
+const gridCellGetter = (model: SheetModel, formatting: FormattingModel) => {
   // TODO(thure): Actually use the cache.
-  let _cachedBounds: DxGridRange | null = null;
-  const cachedCells: DxGridCells = {};
-  return (nextBounds: DxGridRange): DxGridCells => {
+  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;
         const cell = formatting.getFormatting({ col, row });
         if (cell.value) {
-          cachedCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
+          cachedGridCells;
+          cachedGridCells[`${col},${row}`] = { value: cell.value, className: mx(cell.classNames) };
         }
       });
     });
-    _cachedBounds = nextBounds;
-    return cachedCells;
+    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, formatting: FormattingModel) => {
+  const getGridCells = gridCellGetter(model, formatting);
+  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 {};
+    }
   };
 };
 

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

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 { useTestSheet, withComputeGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
+
+export default {
+  title: '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 const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph);
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return <SheetContainer graph={graph} sheet={sheet} role='article' />;
+};

package/src/components/SheetContainer/SheetContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+
+import { FunctionEditor } from '../FunctionEditor';
+import { GridSheet } from '../GridSheet';
+import { SheetProvider, type SheetProviderProps } from '../SheetContext';
+import { Toolbar, type ToolbarAction } from '../Toolbar';
+
+export const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {
+  const dispatch = useIntentDispatcher();
+
+  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
+  const handleAction = useCallback(
+    (action: ToolbarAction) => {
+      switch (action.type) {
+        case 'comment': {
+          // TODO(Zan): We shouldn't hardcode the action ID.
+          void dispatch({
+            action: 'dxos.org/plugin/thread/action/create',
+            data: {
+              cursor: action.anchor,
+              name: action.cellContent,
+              subject: sheet,
+            },
+          });
+        }
+      }
+    },
+    [sheet, dispatch],
+  );
+
+  return (
+    <SheetProvider sheet={sheet} graph={graph}>
+      <Toolbar.Root onAction={handleAction} role={role}>
+        <Toolbar.Styles />
+        <Toolbar.Format />
+        <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/{Sheet/sheet-context.tsx → SheetContext/SheetContext.tsx}

@@ -5,15 +5,18 @@
 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 { createDecorations } from './decorations';
 import { type CellAddress, type CellRange } from '../../defs';
 import { type ComputeGraph } from '../../graph';
-import { useSheetModel, useFormattingModel } from '../../hooks';
-import { type FormattingModel, type SheetModel } from '../../model';
+import { useSheetModel, useFormattingModel, useSelectThreadOnCellFocus, useThreadDecorations } from '../../hooks';
+import { type FormattingModel, type SheetModel, createDecorations } from '../../model';
 import { type SheetType } from '../../types';
 
-export type SheetContextType = {
+export type SheetContextValue = {
+  id: string;
+
   model: SheetModel;
   formatting: FormattingModel;
 
@@ -25,8 +28,8 @@ export type SheetContextType = {
   setRange: (range: CellRange | undefined) => void;
 
   // Editing state (undefined if not editing).
-  editing: boolean;
-  setEditing: (editing: boolean) => void;
+  editing: GridEditing;
+  setEditing: (editing: GridEditing) => void;
 
   // Events.
   // TODO(burdon): Generalize.
@@ -36,47 +39,45 @@ export type SheetContextType = {
   decorations: ReturnType<typeof createDecorations>;
 };
 
-const SheetContext = createContext<SheetContextType | null>(null);
+const SheetContext = createContext<SheetContextValue | null>(null);
 
-export const useSheetContext = (): SheetContextType => {
+export const useSheetContext = (): SheetContextValue => {
   const context = useContext(SheetContext);
   invariant(context);
   return context;
 };
 
-export type SheetContextProps = {
-  graph: ComputeGraph;
-  sheet: SheetType;
-  readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'>;
-
-export const SheetContextProvider = ({
-  children,
-  graph,
-  sheet,
-  readonly,
+const SheetProviderImpl = ({
+  model,
+  formatting,
   onInfo,
-}: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(graph, sheet, { readonly });
-  const formatting = useFormattingModel(model);
+  children,
+  __gridScope,
+}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'onInfo' | 'model' | 'formatting'>>>) => {
+  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>();
-  const [editing, setEditing] = useState<boolean>(false);
-  const decorations = useMemo(() => createDecorations(), []);
 
-  return !model || !formatting ? null : (
+  useSelectThreadOnCellFocus(model, cursor);
+  useThreadDecorations(model, decorations);
+
+  return (
     <SheetContext.Provider
       value={{
+        id,
         model,
         formatting,
+        editing,
+        setEditing,
         cursor,
         setCursor,
         range,
         setRange,
-        editing,
-        setEditing,
         // TODO(burdon): Change to event.
         onInfo,
         decorations,
@@ -86,3 +87,22 @@ export const SheetContextProvider = ({
     </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 });
+  const formatting = useFormattingModel(model);
+
+  return !model || !formatting ? null : (
+    <Grid.Root id={fullyQualifiedId(sheet)}>
+      <SheetProviderImpl model={model} formatting={formatting} onInfo={onInfo}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
+};

package/src/components/SheetContext/index.ts

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