@dxos/plugin-sheet 0.6.14-main.7bd9c89 → 0.6.14-main.8b352a0

package/src/hooks/threads.ts

@@ -1,147 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { effect } from '@preact/signals-core';
-import { type MutableRefObject, useCallback, useEffect, useMemo } from 'react';
-
-import { type IntentResolver, LayoutAction, useIntentDispatcher, useIntentResolver } from '@dxos/app-framework';
-import { debounce } from '@dxos/async';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { type DxGridElement, type DxGridPosition } from '@dxos/react-ui-grid';
-
-import { addressFromIndex, addressToIndex, type CellAddress, closest } from '../defs';
-import { SHEET_PLUGIN } from '../meta';
-import { type SheetModel, type Decoration, type Decorations } from '../model';
-
-export const useUpdateFocusedCellOnThreadSelection = (
-  model: SheetModel,
-  grid: MutableRefObject<DxGridElement | null>,
-) => {
-  const handleScrollIntoView: IntentResolver = useCallback(
-    ({ action, data }) => {
-      switch (action) {
-        case LayoutAction.SCROLL_INTO_VIEW: {
-          if (!data?.id || data?.cursor === undefined || data?.id !== fullyQualifiedId(model.sheet)) {
-            return;
-          }
-
-          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
-          const cellAddress = addressFromIndex(model.sheet, data.cursor);
-          grid.current?.setFocus({ ...cellAddress, plane: 'grid' }, true);
-        }
-      }
-    },
-    [model.sheet],
-  );
-
-  useIntentResolver(SHEET_PLUGIN, handleScrollIntoView);
-};
-
-export const useSelectThreadOnCellFocus = (model: SheetModel, cursor?: CellAddress) => {
-  const dispatch = useIntentDispatcher();
-
-  const activeThreads = useMemo(
-    () =>
-      model.sheet.threads?.filter(
-        (thread): thread is NonNullable<typeof thread> => !!thread && thread.status === 'active',
-      ) ?? [],
-    [
-      // TODO(thure): Surely we can find a better dependency for this…
-      JSON.stringify(model.sheet.threads),
-    ],
-  );
-
-  const activeThreadAddresses = useMemo(
-    () =>
-      activeThreads
-        .map((thread) => thread.anchor)
-        .filter((anchor): anchor is NonNullable<typeof anchor> => anchor !== undefined)
-        .map((anchor) => addressFromIndex(model.sheet, anchor)),
-    [activeThreads, model.sheet],
-  );
-
-  const selectClosestThread = useCallback(
-    (cellAddress: CellAddress) => {
-      if (!cellAddress || !activeThreads) {
-        return;
-      }
-
-      const closestThreadAnchor = closest(cellAddress, activeThreadAddresses);
-      if (closestThreadAnchor) {
-        const closestThread = activeThreads.find(
-          (thread) => thread && thread.anchor === addressToIndex(model.sheet, closestThreadAnchor),
-        );
-
-        if (closestThread) {
-          void dispatch([
-            { action: 'dxos.org/plugin/thread/action/select', data: { current: fullyQualifiedId(closestThread) } },
-          ]);
-        }
-      }
-    },
-    [dispatch, activeThreads, activeThreadAddresses, model.sheet],
-  );
-
-  const debounced = useMemo(() => {
-    return debounce((cellCoords: DxGridPosition) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
-  }, [selectClosestThread]);
-
-  useEffect(() => {
-    if (!cursor) {
-      return;
-    }
-    debounced(cursor);
-  }, [cursor, selectClosestThread]);
-};
-
-const createThreadDecoration = (cellIndex: string, threadId: string, sheetId: string): Decoration => {
-  return {
-    type: 'comment',
-    classNames: ['bg-greenFill'],
-    cellIndex,
-  };
-};
-
-export const useThreadDecorations = (model: SheetModel, decorations: Decorations) => {
-  const sheet = useMemo(() => model.sheet, [model.sheet]);
-  const sheetId = useMemo(() => fullyQualifiedId(sheet), [sheet]);
-
-  useEffect(() => {
-    const unsubscribe = effect(() => {
-      const activeThreadAnchors = new Set<string>();
-      if (!sheet.threads) {
-        return;
-      }
-
-      // Process active threads
-      for (const thread of sheet.threads) {
-        if (!thread || thread.anchor === undefined || thread.status === 'resolved') {
-          continue;
-        }
-
-        activeThreadAnchors.add(thread.anchor);
-        const index = thread.anchor;
-
-        // Add decoration only if it doesn't already exist
-        const existingDecorations = decorations.getDecorationsForCell(index);
-        if (!existingDecorations || !existingDecorations.some((d) => d.type === 'comment')) {
-          decorations.addDecoration(index, createThreadDecoration(index, thread.id, sheetId));
-        }
-      }
-
-      // Remove decorations for resolved or deleted threads
-      for (const decoration of decorations.getAllDecorations()) {
-        if (decoration.type !== 'comment') {
-          continue;
-        }
-
-        if (!activeThreadAnchors.has(decoration.cellIndex)) {
-          decorations.removeDecoration(decoration.cellIndex, 'comment');
-        }
-      }
-    });
-
-    return () => unsubscribe();
-  });
-};

package/src/hooks/useComputeGraph.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useContext } from 'react';
-
-import { raise } from '@dxos/debug';
-import { type Space } from '@dxos/react-client/echo';
-import { useAsyncState } from '@dxos/react-hooks';
-
-import { ComputeGraphContext } from '../components';
-import { type ComputeGraph } from '../graph';
-
-/**
- * Get existing or create new compute graph for the given space.
- */
-export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
-  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
-  const [graph] = useAsyncState(async () => {
-    if (space) {
-      const graph = registry.getOrCreateGraph(space);
-      await graph.open();
-      return graph;
-    }
-  }, [space, registry]);
-
-  return graph;
-};

package/src/model/decorations.ts

@@ -1,66 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ReactNode } from 'react';
-
-import { create } from '@dxos/echo-schema';
-
-export type Decoration = {
-  type: string;
-  /**
-   * A wrapping render function to encapsulate cell content. This function is applied between
-   * the cell's border and its padding/layout/content, allowing for custom rendering or
-   * additional elements to be inserted around the cell's main content.
-   */
-  decorate?: (props: { children: ReactNode }) => ReactNode;
-  /**
-   * An array of CSS class names to be applied to the content of the SheetCell.
-   * These classes can be used to style the cell's content independently of its structure.
-   */
-  classNames?: string[];
-  cellIndex: string;
-};
-
-export const createDecorations = () => {
-  // Reactive object to hold decorations
-  // TODO(Zan): Use CELL ID's to key the decoration map.
-  // TODO(Zan): Consider maintaining an index of decorations by type.
-  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
-
-  const addDecoration = (cellIndex: string, decorator: Decoration) => {
-    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
-  };
-
-  const removeDecoration = (cellIndex: string, type?: string) => {
-    if (type) {
-      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
-    } else {
-      delete decorations[cellIndex];
-    }
-  };
-
-  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
-  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
-    return decorations[cellIndex];
-  };
-
-  const getAllDecorations = (): Decoration[] => {
-    const result: Decoration[] = [];
-    for (const decoratorArray of Object.values(decorations)) {
-      for (const decorator of decoratorArray) {
-        result.push(decorator);
-      }
-    }
-    return result;
-  };
-
-  return {
-    addDecoration,
-    removeDecoration,
-    getDecorationsForCell,
-    getAllDecorations,
-  } as const;
-};
-
-export type Decorations = ReturnType<typeof createDecorations>;