@dxos/plugin-sheet 0.6.12-staging.e11e696 → 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 '../../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,86 +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 { useAttendableAttributes, useAttention } 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.
-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 attendableAttrs = useAttendableAttributes(id);
-  const { hasAttention } = useAttention(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}
-      {...(role === 'article' && attendableAttrs)}
-    >
-      <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', !hasAttention && 'invisible', sectionToolbarLayout]
-                : 'attention-surface',
-            )}
-          >
-            {/* 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 attention-surface',
-            focusRing,
-          )}
-        >
-          <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>
-  );
-};