@dxos/plugin-sheet 0.6.12-main.15a606f → 0.6.12-main.78ddbdf

package/dist/types/src/components/GridSheet/GridSheet.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/GridSheet/GridSheet.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAU1B,wBASE;AAEF,eAAO,MAAM,KAAK,gCASjB,CAAC"}
+{"version":3,"file":"GridSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/GridSheet/GridSheet.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAW1B,wBASE;AAEF,eAAO,MAAM,KAAK,gCASjB,CAAC"}

package/dist/types/src/components/GridSheet/util.d.ts

@@ -1,6 +1,7 @@
-import { type GridEditing, type GridContentProps } from '@dxos/react-ui-grid';
+import { type MutableRefObject } from 'react';
+import { type GridEditing, type GridContentProps, type DxGridElement } from '@dxos/react-ui-grid';
 import { type CellAddress } from '../../defs';
 import { type SheetModel, type FormattingModel } from '../../model';
 export declare const dxGridCellIndexToSheetCellAddress: (gridEditing: GridEditing) => CellAddress | null;
-export declare const useSheetModelDxGridProps: (model: SheetModel, formatting: FormattingModel) => Pick<GridContentProps, "cells" | "columns" | "rows">;
+export declare const useSheetModelDxGridProps: (dxGridRef: MutableRefObject<DxGridElement | null>, model: SheetModel, formatting: FormattingModel) => Pick<GridContentProps, "columns" | "rows">;
 //# sourceMappingURL=util.d.ts.map

package/dist/types/src/components/GridSheet/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../../src/components/GridSheet/util.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG9E,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAEpE,eAAO,MAAM,iCAAiC,gBAAiB,WAAW,KAAG,WAAW,GAAG,IAS1F,CAAC;AA+BF,eAAO,MAAM,wBAAwB,UAC5B,UAAU,cACL,eAAe,KAC1B,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAgCrD,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../../src/components/GridSheet/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAwC,MAAM,OAAO,CAAC;AAGpF,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAInB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAEpE,eAAO,MAAM,iCAAiC,gBAAiB,WAAW,KAAG,WAAW,GAAG,IAS1F,CAAC;AAwCF,eAAO,MAAM,wBAAwB,cACxB,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,SAC1C,UAAU,cACL,eAAe,KAC1B,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,MAAM,CAkC3C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.12-main.15a606f",
+  "version": "0.6.12-main.78ddbdf",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -78,29 +78,29 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.12-main.15a606f",
-    "@dxos/async": "0.6.12-main.15a606f",
-    "@dxos/client": "0.6.12-main.15a606f",
-    "@dxos/crypto": "0.6.12-main.15a606f",
-    "@dxos/context": "0.6.12-main.15a606f",
-    "@dxos/debug": "0.6.12-main.15a606f",
-    "@dxos/echo-schema": "0.6.12-main.15a606f",
-    "@dxos/invariant": "0.6.12-main.15a606f",
-    "@dxos/keys": "0.6.12-main.15a606f",
-    "@dxos/plugin-attention": "0.6.12-main.15a606f",
-    "@dxos/log": "0.6.12-main.15a606f",
-    "@dxos/plugin-client": "0.6.12-main.15a606f",
-    "@dxos/plugin-graph": "0.6.12-main.15a606f",
-    "@dxos/plugin-markdown": "0.6.12-main.15a606f",
-    "@dxos/plugin-script": "0.6.12-main.15a606f",
-    "@dxos/plugin-space": "0.6.12-main.15a606f",
-    "@dxos/react-client": "0.6.12-main.15a606f",
-    "@dxos/plugin-stack": "0.6.12-main.15a606f",
-    "@dxos/react-hooks": "0.6.12-main.15a606f",
-    "@dxos/react-ui-attention": "0.6.12-main.15a606f",
-    "@dxos/react-ui-editor": "0.6.12-main.15a606f",
-    "@dxos/react-ui-grid": "0.6.12-main.15a606f",
-    "@dxos/util": "0.6.12-main.15a606f"
+    "@dxos/app-framework": "0.6.12-main.78ddbdf",
+    "@dxos/client": "0.6.12-main.78ddbdf",
+    "@dxos/async": "0.6.12-main.78ddbdf",
+    "@dxos/context": "0.6.12-main.78ddbdf",
+    "@dxos/crypto": "0.6.12-main.78ddbdf",
+    "@dxos/debug": "0.6.12-main.78ddbdf",
+    "@dxos/echo-schema": "0.6.12-main.78ddbdf",
+    "@dxos/invariant": "0.6.12-main.78ddbdf",
+    "@dxos/log": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-attention": "0.6.12-main.78ddbdf",
+    "@dxos/keys": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-graph": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-client": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-markdown": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-script": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-space": "0.6.12-main.78ddbdf",
+    "@dxos/plugin-stack": "0.6.12-main.78ddbdf",
+    "@dxos/react-client": "0.6.12-main.78ddbdf",
+    "@dxos/react-hooks": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-attention": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-editor": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-grid": "0.6.12-main.78ddbdf",
+    "@dxos/util": "0.6.12-main.78ddbdf"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -113,20 +113,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.6.12-main.15a606f",
-    "@dxos/random": "0.6.12-main.15a606f",
-    "@dxos/react-ui": "0.6.12-main.15a606f",
-    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.15a606f",
-    "@dxos/react-ui-types": "0.6.12-main.15a606f",
-    "@dxos/react-ui-theme": "0.6.12-main.15a606f",
-    "@dxos/storybook-utils": "0.6.12-main.15a606f"
+    "@dxos/echo-generator": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui": "0.6.12-main.78ddbdf",
+    "@dxos/random": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-types": "0.6.12-main.78ddbdf",
+    "@dxos/storybook-utils": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-theme": "0.6.12-main.78ddbdf"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.12-main.15a606f",
-    "@dxos/react-ui-theme": "0.6.12-main.15a606f"
+    "@dxos/react-ui-theme": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui": "0.6.12-main.78ddbdf"
   },
   "publishConfig": {
     "access": "public"

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -11,12 +11,13 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { GridSheet } from './GridSheet';
 import { useComputeGraph } from '../../hooks';
 import { useTestSheet, withGraphDecorator } from '../../testing';
+import { SheetType } from '../../types';
 
 export default {
   title: 'plugin-sheet/GridSheet',
   component: GridSheet,
   decorators: [
-    withClientProvider({ createSpace: true }),
+    withClientProvider({ types: [SheetType], createSpace: true }),
     withGraphDecorator,
     withTheme,
     withLayout({ fullscreen: true, tooltips: true }),

package/src/components/GridSheet/GridSheet.tsx

@@ -108,7 +108,7 @@ const GridSheetImpl = ({
     [editing],
   );
 
-  const { cells, columns, rows } = useSheetModelDxGridProps(model, formatting);
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
 
   const extension = useMemo(
     () => [
@@ -123,7 +123,7 @@ const GridSheetImpl = ({
     <>
       <GridSheetCellEditor model={model} extension={extension} />
       <Grid.Content
-        cells={cells}
+        initialCells={{}}
         columns={columns}
         rows={rows}
         onAxisResize={handleAxisResize}

package/src/components/GridSheet/util.ts

@@ -2,13 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { type MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';
 
 import { createDocAccessor } from '@dxos/react-client/echo';
-import { type GridEditing, type GridContentProps } from '@dxos/react-ui-grid';
+import {
+  type GridEditing,
+  type GridContentProps,
+  type DxGridElement,
+  type DxGridCells,
+  type DxGridAxisMeta,
+  type DxGridRange,
+} from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 
-import { addressFromIndex, type CellAddress } from '../../defs';
+import { type CellAddress } from '../../defs';
 import { type SheetModel, type FormattingModel } from '../../model';
 
 export const dxGridCellIndexToSheetCellAddress = (gridEditing: GridEditing): CellAddress | null => {
@@ -22,19 +29,8 @@ export const dxGridCellIndexToSheetCellAddress = (gridEditing: GridEditing): Cel
   };
 };
 
-const createDxGridCells = (model: SheetModel, formatting: FormattingModel) => {
-  return Object.keys(model.sheet.cells).reduce((acc: NonNullable<GridContentProps['cells']>, sheetCellIndex) => {
-    const address = addressFromIndex(model.sheet, sheetCellIndex);
-    const cell = formatting.getFormatting(address);
-    if (cell.value) {
-      acc[`${address.col},${address.row}`] = { value: cell.value, className: mx(cell.classNames) };
-    }
-    return acc;
-  }, {});
-};
-
-const createDxGridColumns = (model: SheetModel): GridContentProps['columns'] => {
-  return model.sheet.columns.reduce((acc: NonNullable<GridContentProps['columns']>, columnId, numericIndex) => {
+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 };
     }
@@ -42,8 +38,8 @@ const createDxGridColumns = (model: SheetModel): GridContentProps['columns'] =>
   }, {});
 };
 
-const createDxGridRows = (model: SheetModel): GridContentProps['rows'] => {
-  return model.sheet.rows.reduce((acc: NonNullable<GridContentProps['rows']>, rowId, numericIndex) => {
+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 };
     }
@@ -51,18 +47,41 @@ const createDxGridRows = (model: SheetModel): GridContentProps['rows'] => {
   }, {});
 };
 
+const cellGetter = (model: SheetModel, formatting: FormattingModel) => {
+  // TODO(thure): Actually use the cache.
+  let _cachedBounds: DxGridRange | null = null;
+  const cachedCells: DxGridCells = {};
+  return (nextBounds: DxGridRange): DxGridCells => {
+    [...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) };
+        }
+      });
+    });
+    _cachedBounds = nextBounds;
+    return cachedCells;
+  };
+};
+
 export const useSheetModelDxGridProps = (
+  dxGridRef: MutableRefObject<DxGridElement | null>,
   model: SheetModel,
   formatting: FormattingModel,
-): Pick<GridContentProps, 'cells' | 'columns' | 'rows'> => {
-  const [dxGridCells, setDxGridCells] = useState<GridContentProps['cells']>(createDxGridCells(model, formatting));
-  const [dxGridColumns, setDxGridColumns] = useState<GridContentProps['columns']>(createDxGridColumns(model));
-  const [dxGridRows, setDxGridRows] = useState<GridContentProps['rows']>(createDxGridColumns(model));
+): Pick<GridContentProps, 'columns' | 'rows'> => {
+  const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    if (dxGridRef.current) {
+      dxGridRef.current.getCells = cellGetter(model, formatting);
+    }
     const handleCellsUpdate = () => {
-      setDxGridCells(createDxGridCells(model, formatting));
+      dxGridRef.current?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
     return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
@@ -72,10 +91,10 @@ export const useSheetModelDxGridProps = (
     const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
     const rowMetaAccessor = createDocAccessor(model.sheet, ['rowMeta']);
     const handleColumnMetaUpdate = () => {
-      setDxGridColumns(createDxGridColumns(model));
+      setColumns(createDxGridColumns(model));
     };
     const handleRowMetaUpdate = () => {
-      setDxGridRows(createDxGridRows(model));
+      setRows(createDxGridRows(model));
     };
     columnMetaAccessor.handle.addListener('change', handleColumnMetaUpdate);
     rowMetaAccessor.handle.addListener('change', handleRowMetaUpdate);
@@ -85,5 +104,5 @@ export const useSheetModelDxGridProps = (
     };
   }, [model]);
 
-  return { cells: dxGridCells, columns: dxGridColumns, rows: dxGridRows };
+  return { columns, rows };
 };