@dxos/plugin-sheet 0.6.12-main.f9d0246 → 0.6.12-staging.0b4bb48

package/src/components/Sheet/nav.ts

@@ -5,11 +5,11 @@
 import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
 
 import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../defs';
+import { type CellAddress, type CellRange, posEquals } from '../../model';
 
 export type GridSize = {
   numRows: number;
-  numCols: number;
+  numColumns: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.col > 0) {
-          opposite.col -= 1;
+        if (opposite.column > 0) {
+          opposite.column -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.col < size.numCols - 1) {
-          opposite.col += 1;
+        if (opposite.column < size.numColumns - 1) {
+          opposite.column += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numCols }: GridSize,
+  { numRows, numColumns }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
+        return { row: 0, column: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
+        return { row: 0, column: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.col > 0) {
-        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
+        return { row: 0, column: 0 };
+      } else if (cursor.column > 0) {
+        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.col < numCols - 1) {
-        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
+        return { row: 0, column: 0 };
+      } else if (cursor.column < numColumns - 1) {
+        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, col: 0 };
+      return { row: 0, column: 0 };
     case 'End':
-      return { row: numRows - 1, col: numCols - 1 };
+      return { row: numRows - 1, column: numColumns - 1 };
   }
 };
 

package/src/components/Sheet/sheet-context.tsx

@@ -2,16 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
 
 import { invariant } from '@dxos/invariant';
+import { type FunctionType } from '@dxos/plugin-script';
+import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 
-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 { FormattingModel } from './formatting';
+import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
 import { type SheetType } from '../../types';
+import { type FunctionContextOptions } from '../ComputeGraph';
+// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
+import { useComputeGraph } from '../ComputeGraph/graph-context';
+
+// TODO(wittjosiah): Factor out.
+const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 
 export type SheetContextType = {
   model: SheetModel;
@@ -31,9 +36,6 @@ export type SheetContextType = {
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
-
-  // Decorations.
-  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextType | null>(null);
@@ -45,28 +47,89 @@ export const useSheetContext = (): SheetContextType => {
 };
 
 export type SheetContextProps = {
-  graph: ComputeGraph;
   sheet: SheetType;
+  space: Space;
   readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'>;
+} & Pick<SheetContextType, 'onInfo'> &
+  Partial<FunctionContextOptions>;
+
+/**
+ * Map from binding to fully qualified ECHO ID.
+ */
+const mapFormulaBindingToId =
+  (functions: FunctionType[]) =>
+  (formula: string): string => {
+    return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
+      if (defaultFunctions.find((fn) => fn.name === binding) || binding === 'EDGE') {
+        return match;
+      }
+
+      const fn = functions.find((fn) => fn.binding === binding);
+      if (fn) {
+        return `${fullyQualifiedId(fn)}(${args})`;
+      } else {
+        return match;
+      }
+    });
+  };
+
+/**
+ * Map from fully qualified ECHO ID to binding.
+ */
+const mapFormulaBindingFromId =
+  (functions: FunctionType[]) =>
+  (formula: string): string => {
+    return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
+      const id = `${spaceId}:${objectId}`;
+      if (id.length !== OBJECT_ID_LENGTH) {
+        return match;
+      }
+
+      const fn = functions.find((fn) => fullyQualifiedId(fn) === id);
+      if (fn?.binding) {
+        return `${fn.binding}(${args})`;
+      } else {
+        return match;
+      }
+    });
+  };
 
 export const SheetContextProvider = ({
   children,
-  graph,
   sheet,
+  space,
   readonly,
   onInfo,
+  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(graph, sheet, { readonly });
-  const formatting = useFormattingModel(model);
+  const graph = useComputeGraph(space, options);
 
-  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
-  const decorations = useMemo(() => createDecorations(), []);
 
-  return !model || !formatting ? null : (
+  const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
+  useEffect(() => {
+    let model: SheetModel | undefined;
+    let formatting;
+    const t = setTimeout(async () => {
+      model = new SheetModel(graph, sheet, space, { readonly, mapFormulaBindingToId, mapFormulaBindingFromId });
+      await model.initialize();
+      formatting = new FormattingModel(model);
+      setModels([model, formatting]);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.destroy();
+    };
+  }, [graph, readonly]);
+
+  if (!model || !formatting) {
+    return null;
+  }
+
+  return (
     <SheetContext.Provider
       value={{
         model,
@@ -79,7 +142,6 @@ export const SheetContextProvider = ({
         setEditing,
         // TODO(burdon): Change to event.
         onInfo,
-        decorations,
       }}
     >
       {children}

package/src/components/SheetContainer.tsx

@@ -2,84 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
-import { focusRing, mx } from '@dxos/react-ui-theme';
+import { type LayoutCoordinate } from '@dxos/app-framework';
+import { mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
-import { Toolbar, type ToolbarAction } from './Toolbar';
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-export const sectionToolbarLayout =
-  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
-
-const SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {
-  const dispatch = useIntentDispatcher();
-
-  const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
-
-  // 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],
-  );
 
+const SheetContainer = ({
+  sheet,
+  space,
+  role,
+  remoteFunctionUrl,
+}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root graph={graph} sheet={sheet}>
-        <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
-          <Toolbar.Root
-            onAction={handleAction}
-            classNames={mx(
-              role === 'section'
-                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
-                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
-            )}
-          >
-            {/* TODO(Zan): Restore some of this functionality */}
-            {/* <Toolbar.Styles /> */}
-            {/* <Toolbar.Format /> */}
-            {/* <Toolbar.Alignment /> */}
-            <Toolbar.Separator />
-            <Toolbar.Actions />
-          </Toolbar.Root>
-        </div>
-        <div
-          role='none'
-          className={mx(
-            role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
-            role === 'article' &&
-              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
-            focusRing,
-            attentionFragment,
-          )}
-        >
-          <Sheet.Main />
-        </div>
+    <div
+      role='none'
+      className={mx(
+        'flex',
+        role === 'article' && 'row-span-2',
+        role === 'section' && 'aspect-square border-y border-is border-separator',
+      )}
+    >
+      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
+        <Sheet.Main />
       </Sheet.Root>
     </div>
   );

package/src/components/Toolbar/Toolbar.tsx

@@ -23,31 +23,22 @@ import {
   type ThemedClassName,
   useTranslation,
 } from '@dxos/react-ui';
-import { nonNullable } from '@dxos/util';
 
 import { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';
-import { addressToIndex } from '../../defs';
 import { SHEET_PLUGIN } from '../../meta';
 import { type Formatting } from '../../types';
-import { useSheetContext } from '../Sheet/sheet-context';
 
 //
 // Root
 //
 
-export type ToolbarAction =
-  | { type: 'clear' }
-  | { type: 'highlight' }
-  | { type: 'left' }
-  | { type: 'center' }
-  | { type: 'right' }
-  | { type: 'date' }
-  | { type: 'currency' }
-  | { type: 'comment'; anchor: string; cellContent?: string };
+export type ToolbarActionType = 'clear' | 'highlight' | 'left' | 'center' | 'right' | 'date' | 'currency';
 
-export type ToolbarActionType = ToolbarAction['type'];
+export type ToolbarAction = {
+  type: ToolbarActionType;
+};
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = ({ type }: ToolbarAction) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -105,7 +96,7 @@ const Format = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -136,7 +127,7 @@ const Alignment = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -166,7 +157,7 @@ const Styles = () => {
           Icon={Icon}
           // disabled={state?.blockType === 'codeblock'}
           // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
-          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}
+          onClick={() => onAction?.({ type })}
         >
           {t(`toolbar ${type} label`)}
         </ToolbarToggleButton>
@@ -180,49 +171,17 @@ const Styles = () => {
 //
 
 const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { cursor, range, model } = useSheetContext();
+  // const { onAction } = useToolbarContext('Actions');
   const { t } = useTranslation(SHEET_PLUGIN);
-
-  const overlapsCommentAnchor = (model.sheet.threads ?? [])
-    .filter(nonNullable)
-    .filter((thread) => thread.status !== 'resolved')
-    .some((thread) => {
-      if (!cursor) {
-        return false;
-      }
-      return addressToIndex(model.sheet, cursor) === thread.anchor;
-    });
-
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-
-  const tooltipLabelKey = !hasCursor
-    ? 'no cursor label'
-    : overlapsCommentAnchor
-      ? 'selection overlaps existing comment label'
-      : range
-        ? 'comment ranges not supported label'
-        : 'comment label';
-
   return (
     <ToolbarButton
       value='comment'
       Icon={ChatText}
       data-testid='editor.toolbar.comment'
-      onClick={() => {
-        if (!cursor) {
-          return;
-        }
-        return onAction?.({
-          type: 'comment',
-          anchor: addressToIndex(model.sheet, cursor),
-          cellContent: model.getCellText(cursor),
-        });
-      }}
-      disabled={!cursorOnly || overlapsCommentAnchor}
+      // onClick={() => onAction?.({ type: 'comment' })}
+      // disabled={!state || state.comment || !state.selection}
     >
-      {t(tooltipLabelKey)}
+      {t('comment label')}
     </ToolbarButton>
   );
 };

package/src/components/index.ts

@@ -5,7 +5,6 @@
 import React from 'react';
 
 export * from './ComputeGraph';
-export * from './Sheet';
 
 // Lazily load components for content surfaces.
 export const SheetContainer = React.lazy(() => import('./SheetContainer'));

package/src/meta.tsx

@@ -2,6 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+import { GridNine, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
 import { pluginMeta } from '@dxos/app-framework';
 
 export const SHEET_PLUGIN = 'dxos.org/plugin/sheet';
@@ -10,5 +13,6 @@ export default pluginMeta({
   id: SHEET_PLUGIN,
   name: 'Sheet',
   description: 'A simple spreadsheet plugin.',
-  icon: 'ph--grid-nine--regular',
+  iconComponent: (props: IconProps) => <GridNine {...props} />,
+  iconSymbol: 'ph--grid-nine--regular',
 });

package/src/model/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './formatting-model';
-export * from './sheet-model';
+export * from './functions';
+export * from './model';
+export * from './types';

package/src/model/model.browser.test.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+import { describe, test } from 'vitest';
+
+import { SheetModel } from './model';
+import { addressFromA1Notation, rangeFromA1Notation } from './types';
+import { createComputeGraph } from '../components';
+import { createSheet, ValueTypeEnum } from '../types';
+
+// TODO(burdon): Test undo (e.g., clear cells).
+
+/**
+ * VITEST_ENV=chrome p vitest --watch
+ * NOTE: Browser test required for hyperformula due to raw translation files.
+ */
+describe('model', () => {
+  const createModel = async () => {
+    const graph = createComputeGraph();
+    const sheet = createSheet();
+    const model = new SheetModel(graph, sheet, undefined, { rows: 5, columns: 5 });
+    await model.initialize();
+    return model;
+  };
+
+  test('create', async () => {
+    const model = await createModel();
+    expect(model.bounds).to.deep.eq({ rows: 5, columns: 5 });
+    model.setValue(addressFromA1Notation('A1'), 100);
+    const value = model.getValue(addressFromA1Notation('A1'));
+    expect(value).to.eq(100);
+  });
+
+  test('map formula', async () => {
+    const model = await createModel();
+    const x1 = model.mapFormulaRefsToIndices('=SUM(A1:A3)');
+    const x2 = model.mapFormulaIndicesToRefs(x1);
+    expect(x2).to.eq('=SUM(A1:A3)');
+  });
+
+  test('dates', async () => {
+    const model = await createModel();
+    const cell = addressFromA1Notation('A1');
+    model.setValue(cell, '=NOW()');
+    const type = model.getValueType(cell);
+    expect(type).to.eq(ValueTypeEnum.DateTime);
+    const value = model.getValue(cell);
+    const date = model.toLocalDate(value as number);
+    const now = new Date();
+    expect(date.getUTCFullYear()).to.eq(now.getUTCFullYear());
+    expect(date.getUTCMonth()).to.eq(now.getUTCMonth());
+    expect(date.getUTCDate()).to.eq(now.getUTCDate());
+  });
+
+  test('formula', async () => {
+    const model = await createModel();
+
+    // Nested formula.
+    {
+      model.setValue(addressFromA1Notation('A1'), 100);
+      model.setValue(addressFromA1Notation('A2'), 200);
+      model.setValue(addressFromA1Notation('A3'), '=SUM(A1:A2)');
+      model.setValue(addressFromA1Notation('A4'), '=SUM(A1:A3)');
+      const value = model.getValue(addressFromA1Notation('A4'));
+      expect(value).to.eq(600);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A4'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A3)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+
+    // Insert row.
+    {
+      model.insertRows(2, 1);
+      model.setValue(addressFromA1Notation('A3'), 400);
+      const value = model.getValue(addressFromA1Notation('A5'));
+      expect(value).to.eq(1000);
+
+      const cells = model.getCellValues(rangeFromA1Notation('A1:A5'));
+      expect(cells).to.deep.eq([
+        [100],
+        [200],
+        [400],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A2)')],
+        [model.mapFormulaRefsToIndices('=SUM(A1:A4)')],
+      ]);
+      // console.log(JSON.stringify(model.sheet.cells, undefined, 2));
+      // console.log(cells);
+    }
+  });
+});