@dxos/plugin-sheet 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

package/src/components/Sheet/grid.ts

@@ -1,191 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type MouseEvent, useEffect, useState } from 'react';
-
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
-
-// export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
-// export type Dimension = Pick<DOMRect, 'width' | 'height'>;
-
-export type SizeMap = Record<string, number>;
-
-export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
-
-export const axisWidth = 'calc(var(--rail-size)-2px)';
-export const axisHeight = 34;
-
-export const minWidth = 40;
-export const maxWidth = 800;
-
-export const minHeight = axisHeight;
-export const maxHeight = 400;
-
-export const defaultWidth = 200;
-export const defaultHeight = minHeight;
-
-/**
- * Cell nodes are identified by their A1 notation.
- */
-export const CELL_DATA_KEY = 'cell';
-
-export type GridLayoutProps = {
-  rows: CellIndex[];
-  columns: CellIndex[];
-  rowSizes?: SizeMap;
-  columnSizes?: SizeMap;
-};
-
-export type GridLayout = {
-  width: number;
-  height: number;
-  rowRange: RowPosition[];
-  columnRange: ColumnPosition[];
-};
-
-/**
- * Calculates the grid geometry for the current viewport.
- */
-export const useGridLayout = ({
-  scroller,
-  size,
-  rows,
-  columns,
-  rowSizes,
-  columnSizes,
-}: GridLayoutProps & {
-  scroller: HTMLDivElement | null;
-  size: { width: number; height: number };
-}): GridLayout => {
-  const [rowPositions, setRowPositions] = useState<RowPosition[]>([]);
-  useEffect(() => {
-    if (!rowSizes) {
-      return;
-    }
-
-    let y = 0;
-    setRowPositions(
-      rows.map((idx, i) => {
-        const height = rowSizes?.[idx] ?? defaultHeight;
-        const top = y;
-        y += height - 1;
-        return { row: i, top, height };
-      }),
-    );
-  }, [rows, rowSizes]);
-
-  const [columnPositions, setColumnPositions] = useState<ColumnPosition[]>([]);
-  useEffect(() => {
-    if (!columns) {
-      return;
-    }
-
-    let x = 0;
-    setColumnPositions(
-      columns.map((idx, i) => {
-        const width = columnSizes?.[idx] ?? defaultWidth;
-        const left = x;
-        x += width - 1;
-        return { col: i, left, width };
-      }),
-    );
-  }, [columns, columnSizes]);
-
-  const height = rowPositions.length
-    ? rowPositions[rowPositions.length - 1].top + rowPositions[rowPositions.length - 1].height
-    : 0;
-
-  const width = columnPositions.length
-    ? columnPositions[columnPositions.length - 1].left + columnPositions[columnPositions.length - 1].width
-    : 0;
-
-  //
-  // Virtual window.
-  // TODO(burdon): Preserve edit state, selection.
-  // TODO(burdon): BUG: Doesn't scroll to cursor if jump to end.
-  //
-
-  const [{ rowRange, columnRange }, setWindow] = useState<{
-    rowRange: RowPosition[];
-    columnRange: ColumnPosition[];
-  }>({ rowRange: [], columnRange: [] });
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!scroller) {
-        return;
-      }
-
-      const { scrollLeft: left, scrollTop: top, clientWidth: width, clientHeight: height } = scroller;
-
-      let rowStart = 0;
-      let rowEnd = 0;
-      for (let i = 0; i < rowPositions.length; i++) {
-        const row = rowPositions[i];
-        if (row.top <= top) {
-          rowStart = i;
-        }
-        if (row.top + row.height >= top + height) {
-          rowEnd = i;
-          break;
-        }
-      }
-
-      let columnStart = 0;
-      let columnEnd = 0;
-      for (let i = 0; i < columnPositions.length; i++) {
-        const column = columnPositions[i];
-        if (column.left <= left) {
-          columnStart = i;
-        }
-        if (column.left + column.width >= left + width) {
-          columnEnd = i;
-          break;
-        }
-      }
-
-      const overscan = 5;
-      setWindow({
-        rowRange: rowPositions.slice(
-          Math.max(0, rowStart - overscan),
-          Math.min(rowPositions.length, rowEnd + overscan),
-        ),
-        columnRange: columnPositions.slice(
-          Math.max(0, columnStart - overscan),
-          Math.min(columnPositions.length, columnEnd + overscan),
-        ),
-      });
-    };
-
-    scroller?.addEventListener('scroll', handleScroll);
-    handleScroll();
-    return () => {
-      scroller?.removeEventListener('scroll', handleScroll);
-    };
-  }, [size.width, size.height, rowPositions, columnPositions]);
-
-  return { width, height, rowRange, columnRange };
-};
-
-/**
- * Find child node at mouse pointer.
- */
-export const getCellAtPointer = (event: MouseEvent): CellAddress | undefined => {
-  const element = document.elementFromPoint(event.clientX, event.clientY);
-  const root = element?.closest<HTMLDivElement>(`[data-${CELL_DATA_KEY}]`);
-  if (root) {
-    const value = root.dataset[CELL_DATA_KEY];
-    if (value) {
-      return addressFromA1Notation(value);
-    }
-  }
-};
-
-/**
- * Get element.
- */
-export const getCellElement = (root: HTMLElement, cell: CellAddress): HTMLElement | null => {
-  const pos = addressToA1Notation(cell);
-  return root.querySelector(`[data-${CELL_DATA_KEY}="${pos}"]`);
-};

package/src/components/Sheet/nav.ts

@@ -1,157 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
-
-import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../defs';
-
-export type GridSize = {
-  numRows: number;
-  numCols: number;
-};
-
-/**
- * Calculate next range based on arrow keys.
- */
-export const handleNav = (
-  ev: KeyboardEvent<HTMLInputElement>,
-  cursor: CellAddress | undefined,
-  range: CellRange | undefined,
-  size: GridSize,
-): { cursor?: CellAddress; range?: CellRange } => {
-  if (cursor && ev.shiftKey) {
-    // Navigate from the furthest point.
-    const opposite = range?.to ?? { ...cursor };
-    switch (ev.key) {
-      case 'ArrowUp': {
-        if (opposite.row > 0) {
-          opposite.row -= 1;
-        }
-        break;
-      }
-      case 'ArrowDown': {
-        if (opposite.row < size.numRows - 1) {
-          opposite.row += 1;
-        }
-        break;
-      }
-      case 'ArrowLeft': {
-        if (opposite.col > 0) {
-          opposite.col -= 1;
-        }
-        break;
-      }
-      case 'ArrowRight': {
-        if (opposite.col < size.numCols - 1) {
-          opposite.col += 1;
-        }
-        break;
-      }
-    }
-
-    return { cursor, range: { from: cursor, to: opposite } };
-  }
-
-  const next = handleArrowNav(ev, cursor, size);
-  return { cursor: next };
-};
-
-/**
- * Calculate next cell based on arrow keys.
- */
-export const handleArrowNav = (
-  ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
-  cursor: CellAddress | undefined,
-  { numRows, numCols }: GridSize,
-): CellAddress | undefined => {
-  switch (ev.key) {
-    case 'ArrowUp':
-      if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
-      }
-      break;
-    case 'ArrowDown':
-      if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
-      }
-      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 };
-      }
-      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 };
-      }
-      break;
-    case 'Home':
-      return { row: 0, col: 0 };
-    case 'End':
-      return { row: numRows - 1, col: numCols - 1 };
-  }
-};
-
-/**
- * Hook to manage range drag handlers.
- */
-// TODO(burdon): Memoize callbacks?
-export const useRangeSelect = (
-  cb: (event: 'start' | 'move' | 'end', range: CellRange | undefined) => void,
-): {
-  range: CellRange | undefined;
-  handlers: {
-    onMouseDown: MouseEventHandler<HTMLDivElement>;
-    onMouseMove: MouseEventHandler<HTMLDivElement>;
-    onMouseUp: MouseEventHandler<HTMLDivElement>;
-  };
-} => {
-  const [from, setFrom] = useState<CellAddress | undefined>();
-  const [to, setTo] = useState<CellAddress | undefined>();
-
-  const onMouseDown: MouseEventHandler<HTMLDivElement> = (ev) => {
-    const current = getCellAtPointer(ev);
-    setFrom(current);
-    if (current) {
-      setTimeout(() => cb('start', { from: current }));
-    }
-  };
-
-  const onMouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
-    if (from) {
-      let current = getCellAtPointer(ev);
-      if (posEquals(current, from)) {
-        current = undefined;
-      }
-      setTo(current);
-      setTimeout(() => cb('move', { from, to: current }));
-    }
-  };
-
-  const onMouseUp: MouseEventHandler<HTMLDivElement> = (ev) => {
-    if (from) {
-      let current = getCellAtPointer(ev);
-      if (posEquals(current, from)) {
-        current = undefined;
-      }
-      setFrom(undefined);
-      setTo(undefined);
-      setTimeout(() => cb('end', current ? { from, to: current } : undefined));
-    }
-  };
-
-  return {
-    range: from ? { from, to } : undefined,
-    handlers: { onMouseDown, onMouseMove, onMouseUp },
-  };
-};

package/src/components/Sheet/util.ts

@@ -1,56 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-/**
- * Gets the relative client rect of an element within a parent container.
- * NOTE: This is stable even when the parent is scrolling.
- * https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
- * @param root Parent container (e.g., scrollable container).
- * @param element
- */
-export const getRelativeClientRect = (root: HTMLElement, element: HTMLElement): DOMRect => {
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-  return new DOMRect(
-    elementRect.left - rootRect.left + root.scrollLeft,
-    elementRect.top - rootRect.top + root.scrollTop,
-    elementRect.width,
-    elementRect.height,
-  );
-};
-
-/**
- * Union of two rectangles.
- */
-export const getRectUnion = (b1: DOMRect, b2: DOMRect): Pick<DOMRect, 'left' | 'top' | 'width' | 'height'> => {
-  return {
-    left: Math.min(b1.left, b2.left),
-    top: Math.min(b1.top, b2.top),
-    width: Math.abs(b1.left - b2.left) + (b1.left > b2.left ? b1.width : b2.width),
-    height: Math.abs(b1.top - b2.top) + (b1.height > b2.height ? b1.height : b2.height),
-  };
-};
-
-/**
- * Scroll to cell.
- * We need to correct for the DOM `scrollIntoView` function which doesn't show the border.
- */
-export const scrollIntoView = (scrollContainer: HTMLElement, el: HTMLElement) => {
-  el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-
-  const cellBounds = el.getBoundingClientRect();
-  const scrollerBounds = scrollContainer.getBoundingClientRect();
-
-  if (cellBounds.top < scrollerBounds.top) {
-    scrollContainer.scrollTop -= scrollerBounds.top - cellBounds.top;
-  } else if (cellBounds.bottom >= scrollerBounds.bottom - 1) {
-    scrollContainer.scrollTop += 2 + scrollerBounds.bottom - cellBounds.bottom;
-  }
-
-  if (cellBounds.left < scrollerBounds.left) {
-    scrollContainer.scrollLeft -= scrollerBounds.left - cellBounds.left;
-  } else if (cellBounds.right >= scrollerBounds.right) {
-    scrollContainer.scrollLeft += 2 + scrollerBounds.right - cellBounds.right;
-  }
-};

package/src/components/SheetContainer.tsx

@@ -1,88 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback } 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 { 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 = ({ sheet, space, 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],
-  );
-
-  return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root space={space} 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>
-      </Sheet.Root>
-    </div>
-  );
-};
-
-export default SheetContainer;

package/src/components/Toolbar/common.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Icon } from '@phosphor-icons/react';
-import React from 'react';
-
-import {
-  Toolbar as NaturalToolbar,
-  Tooltip,
-  type ToolbarButtonProps as NaturalToolbarButtonProps,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
-} from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
-
-// TODO(burdon): Factor out in common with react-ui-editor.
-
-export const iconStyles = getSize(5);
-export const buttonStyles = 'min-bs-0 p-2';
-export const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
-
-export const ToolbarSeparator = () => <div role='separator' className='grow' />;
-
-//
-// ToolbarButton
-//
-
-type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
-
-export const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon className={iconStyles} />
-          <span className='sr-only'>{children}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {children}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
-//
-// ToolbarToggleButton
-//
-
-export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
-
-export const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon className={iconStyles} />
-          <span className='sr-only'>{children}</span>
-        </NaturalToolbar.ToggleGroupItem>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {children}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};

package/src/graph/compute-graph.browser.test.ts

@@ -1,104 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { describe, expect, test } from 'vitest';
-
-import { Trigger } from '@dxos/async';
-import { Client } from '@dxos/client';
-import { create } from '@dxos/client/echo';
-import { Context } from '@dxos/context';
-import { type S } from '@dxos/echo-schema';
-import { FunctionType } from '@dxos/plugin-script/types';
-
-import { createComputeGraphRegistry } from './compute-graph';
-import { addressFromA1Notation, createSheet } from '../defs';
-import { SheetModel } from '../model';
-import { type CellScalarValue } from '../types';
-
-// TODO(burdon): Vitest issues:
-//  - Cannot test Hyperformula
-//    - throws "Cannot convert undefined or null to object" in vitest (without browser).
-//    - throws "process.nextTick is not a function" (with browser)
-//    - throws "Buffer already defined" (if nodeExternal: true in config)
-//  - Need better docs; esp. vitest config.
-//    - NOTE: For non-browser tests, import types from x-plugin/types (otherwise will bring in react deps).
-//  - Can't add flags to our tools?
-//  - test.only / test.skip ignored?
-
-/**
- * NOTE: Browser test required for hyperformula due to raw translation files.
- */
-describe('compute graph', () => {
-  // TODO(burdon): Replace with builder.
-  const createModel = async (types?: S.Schema<any>[]) => {
-    const ctx = new Context();
-    const client = new Client();
-    if (types) {
-      client.addTypes(types);
-    }
-    await client.initialize();
-    await client.halo.createIdentity();
-    const space = await client.spaces.create();
-    ctx.onDispose(() => client.destroy());
-
-    const registry = createComputeGraphRegistry();
-    await registry.open(ctx);
-
-    const graph = await registry.createGraph(space);
-    await graph.open(ctx);
-
-    const sheet = createSheet({ rows: 5, columns: 5 });
-    const model = new SheetModel(graph, sheet);
-    await model.open(ctx);
-
-    // TODO(burdon): Move event propagation into graph.
-    graph.update.on(() => model.update.emit());
-
-    return { space, graph, model };
-  };
-
-  test('map functions', async () => {
-    const { space, graph } = await createModel([FunctionType]);
-
-    // Create script.
-    const fn = space.db.add(create(FunctionType, { version: 1, binding: 'TEST' }));
-    const id = graph.mapFunctionBindingToId('TEST()');
-    expect(id).to.eq(`${fn.id}()`);
-  });
-
-  test('cross-node references', async () => {
-    const { graph } = await createModel();
-
-    // Create ndoes.
-    const node1 = graph.getOrCreateNode('node-1');
-    const node2 = graph.getOrCreateNode('node-2');
-    node1.hf.setCellContents({ sheet: node1.sheetId, row: 1, col: 1 }, 100);
-    node2.hf.setCellContents({ sheet: node2.sheetId, row: 1, col: 1 }, `=${node1.sheetId}!A1`);
-    const value1 = node1.hf.getCellValue({ sheet: node1.sheetId, col: 1, row: 1 });
-    const value2 = node1.hf.getCellValue({ sheet: node2.sheetId, col: 1, row: 1 });
-    expect(value1).to.eq(value2);
-  });
-
-  test('async function', async () => {
-    const { graph, model } = await createModel();
-
-    // Triggers function.
-    model.setValue(addressFromA1Notation('A1'), '=TEST()');
-    const trigger = new Trigger<CellScalarValue>();
-    model.update.on(() => {
-      const value = model.getValue(addressFromA1Notation('A1'));
-      trigger.wake(value);
-    });
-
-    // Get initial value (i.e., null).
-    const v1 = model.getValue(addressFromA1Notation('A1'));
-    expect(v1).to.be.null;
-    expect(graph.context.info.invocations.TEST).to.eq(undefined);
-
-    // Wait until async update triggered.
-    const v2 = await trigger.wait();
-    expect(v2).not.to.be.null;
-    expect(graph.context.info.invocations.TEST).to.eq(1);
-  });
-});