@dxos/plugin-sheet 0.6.8-main.046e6cf

package/src/components/Sheet/formatting.ts

@@ -0,0 +1,106 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+import { type SheetModel, type CellAddress, inRange } from '../../model';
+import { ValueTypeEnum } from '../../types';
+
+export class FormattingModel {
+  constructor(private readonly model: SheetModel) {}
+
+  /**
+   * Get formatted string value and className for cell.
+   */
+  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
+    const value = this.model.getValue(cell);
+    if (value === undefined || value === null) {
+      return {};
+    }
+
+    // TODO(burdon): Locale.
+    const locales = undefined;
+
+    // Cell-specific formatting.
+    const idx = this.model.addressToIndex(cell);
+    let formatting = this.model.sheet.formatting?.[idx] ?? {};
+    const classNames = [...(formatting?.classNames ?? [])];
+
+    // Range formatting.
+    // TODO(burdon): NOTE: D0 means the D column.
+    // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
+    for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
+      const range = this.model.rangeFromIndex(idx);
+      if (inRange(range, cell)) {
+        if (_formatting.classNames) {
+          classNames.push(..._formatting.classNames);
+        }
+
+        // TODO(burdon): Last wins.
+        if (_formatting.type) {
+          formatting = _formatting;
+        }
+      }
+    }
+
+    const defaultNumber = 'justify-end font-mono';
+
+    const type = formatting?.type ?? this.model.getValueType(cell);
+    switch (type) {
+      case ValueTypeEnum.Boolean: {
+        return {
+          value: (value as boolean).toLocaleString().toUpperCase(),
+          classNames: [...classNames, value ? '!text-green-500' : '!text-orange-500'],
+        };
+      }
+
+      //
+      // Numbers.
+      //
+
+      case ValueTypeEnum.Number: {
+        return { value: value.toLocaleString(locales), classNames: [...classNames, defaultNumber] };
+      }
+
+      case ValueTypeEnum.Percent: {
+        return { value: (value as number) * 100 + '%', classNames: [...classNames, defaultNumber] };
+      }
+
+      case ValueTypeEnum.Currency: {
+        return {
+          value: (value as number).toLocaleString(locales, {
+            style: 'currency',
+            currency: 'USD',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }),
+          classNames: [...classNames, defaultNumber],
+        };
+      }
+
+      //
+      // Dates.
+      //
+
+      case ValueTypeEnum.DateTime: {
+        const date = this.model.toLocalDate(value as number);
+        return { value: date.toLocaleString(locales), classNames };
+      }
+
+      case ValueTypeEnum.Date: {
+        const date = this.model.toLocalDate(value as number);
+        return { value: date.toLocaleDateString(locales), classNames };
+      }
+
+      case ValueTypeEnum.Time: {
+        const date = this.model.toLocalDate(value as number);
+        return { value: date.toLocaleTimeString(locales), classNames };
+      }
+
+      default: {
+        return { value: String(value), classNames };
+      }
+    }
+  }
+}

package/src/components/Sheet/grid.ts

@@ -0,0 +1,191 @@
+//
+// 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/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Sheet';

package/src/components/Sheet/nav.ts

@@ -0,0 +1,157 @@
+//
+// 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

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { type Space } from '@dxos/react-client/echo';
+
+import { FormattingModel } from './formatting';
+import { type CellAddress, type CellRange, SheetModel } from '../../model';
+import { type SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
+
+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'>;
+
+export const SheetContextProvider = ({
+  children,
+  sheet,
+  space,
+  readonly,
+  onInfo,
+}: PropsWithChildren<SheetContextProps>) => {
+  const graph = useComputeGraph(space);
+
+  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, { readonly });
+      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

@@ -0,0 +1,56 @@
+//
+// 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

@@ -0,0 +1,30 @@
+//
+// 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,
+  coordinate = { part: 'main', entryId: '' },
+}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
+  return (
+    <div role='none' className={mx(role === 'section' && 'aspect-square', role === 'article' && 'row-span-2')}>
+      <Sheet.Root sheet={sheet} space={space}>
+        <Sheet.Main
+          // TODO(burdon): Standardize for other components (e.g., table).
+          classNames={[coordinate.part !== 'solo' && 'border-is', role === 'section' && 'border-y border-is']}
+        />
+      </Sheet.Root>
+    </div>
+  );
+};
+
+export default SheetContainer;

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Tooltip } from '@dxos/react-ui';
+import { textBlockWidth } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Toolbar } from './Toolbar';
+import translations from '../../translations';
+
+const Story = () => {
+  return (
+    <Tooltip.Provider>
+      <div role='none' className='fixed inset-0 flex flex-col'>
+        <Toolbar.Root classNames={textBlockWidth}>
+          <Toolbar.Alignment />
+        </Toolbar.Root>
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+export default {
+  title: 'plugin-sheet/Toolbar',
+  component: Toolbar,
+  decorators: [withTheme],
+  parameters: { translations, layout: 'fullscreen' },
+  render: (args: any) => <Story {...args} />,
+};
+
+export const Default = {};