@dxos/plugin-sheet 0.6.12 → 0.6.13-main.548ca8d

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 '../../model';
-
-// 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 = { column: 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 { column: 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 '../../model';
-
-export type GridSize = {
-  numRows: number;
-  numColumns: 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.column > 0) {
-          opposite.column -= 1;
-        }
-        break;
-      }
-      case 'ArrowRight': {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 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, numColumns }: GridSize,
-): CellAddress | undefined => {
-  switch (ev.key) {
-    case 'ArrowUp':
-      if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
-      }
-      break;
-    case 'ArrowDown':
-      if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
-      }
-      break;
-    case 'ArrowLeft':
-      if (cursor === undefined) {
-        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, 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, column: 0 };
-    case 'End':
-      return { row: numRows - 1, column: numColumns - 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/sheet-context.tsx

@@ -1,150 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-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 { 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;
-  formatting: FormattingModel;
-
-  // 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: boolean;
-  setEditing: (editing: boolean) => void;
-
-  // Events.
-  // TODO(burdon): Generalize.
-  onInfo?: () => void;
-};
-
-const SheetContext = createContext<SheetContextType | null>(null);
-
-export const useSheetContext = (): SheetContextType => {
-  const context = useContext(SheetContext);
-  invariant(context);
-  return context;
-};
-
-export type SheetContextProps = {
-  sheet: SheetType;
-  space: Space;
-  readonly?: boolean;
-} & 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,
-  sheet,
-  space,
-  readonly,
-  onInfo,
-  ...options
-}: PropsWithChildren<SheetContextProps>) => {
-  const graph = useComputeGraph(space, options);
-
-  const [cursor, setCursor] = useState<CellAddress>();
-  const [range, setRange] = useState<CellRange>();
-  const [editing, setEditing] = useState<boolean>(false);
-
-  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,
-        formatting,
-        cursor,
-        setCursor,
-        range,
-        setRange,
-        editing,
-        setEditing,
-        // TODO(burdon): Change to event.
-        onInfo,
-      }}
-    >
-      {children}
-    </SheetContext.Provider>
-  );
-};

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,34 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type LayoutCoordinate } from '@dxos/app-framework';
-import { mx } from '@dxos/react-ui-theme';
-
-import { Sheet, type SheetRootProps } from './Sheet';
-
-const SheetContainer = ({
-  sheet,
-  space,
-  role,
-  remoteFunctionUrl,
-}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
-  return (
-    <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>
-  );
-};
-
-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/meta.tsx

@@ -1,18 +0,0 @@
-//
-// 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';
-
-export default pluginMeta({
-  id: SHEET_PLUGIN,
-  name: 'Sheet',
-  description: 'A simple spreadsheet plugin.',
-  iconComponent: (props: IconProps) => <GridNine {...props} />,
-  iconSymbol: 'ph--grid-nine--regular',
-});