@dxos/plugin-navtree 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/src/components/NavTreeContainer.tsx

@@ -2,79 +2,59 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ReactNode, useCallback, useMemo } from 'react';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { useCallback, useEffect } from 'react';
 
 import { NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
-import { getGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { useGraph } from '@dxos/plugin-graph';
+import { isEchoObject, isSpace } from '@dxos/react-client/echo';
 import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
-import { type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';
-import {
-  getLevel,
-  NavTree,
-  type NavTreeActionsNode,
-  type NavTreeItemMoveDetails,
-  type NavTreeItemNode,
-  type NavTreeNode,
-  type NavTreeProps,
-} from '@dxos/react-ui-navtree';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { isItem } from '@dxos/react-ui-list';
 import { arrayMove } from '@dxos/util';
 
+import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
 import { NavTreeFooter } from './NavTreeFooter';
 import { NAVTREE_PLUGIN } from '../meta';
+import { type NavTreeItem } from '../types';
 import {
   expandActions,
   expandChildren,
   getChildren,
   getParent,
   resolveMigrationOperation,
-  treeItemsFromRootNode,
-  type NavTreeItem,
   type NavTreeItemGraphNode,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderPresence = (node: NavTreeNode): ReactNode => (
-  <Surface role='presence--glyph' data={{ object: node.data }} />
+const renderPresence = ({ item }: { item: NavTreeItem }) => (
+  <Surface role='presence--glyph' data={{ object: item.node.data, id: item.node.id }} />
 );
 
-export const NavTreeContainer = ({
-  root,
-  activeIds,
-  openItemIds,
-  onOpenItemIdsChange,
-  attended,
-  popoverAnchorId,
-}: {
-  root: NavTreeItemGraphNode;
-  activeIds: Set<string>;
-  openItemIds: Record<string, true>;
-  onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
-  // TODO(wittjosiah): Use attention context directly?
-  attended: string[];
+export type NavTreeContainerProps = {
+  items: NavTreeItem[];
+  current: string[];
+  open: string[];
   popoverAnchorId?: string;
-}) => {
+} & Pick<NavTreeProps, 'onOpenChange'>;
+
+export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }: NavTreeContainerProps) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const dispatch = useIntentDispatcher();
-
-  const graph = useMemo(() => getGraph(root), [root]);
-  const items = treeItemsFromRootNode(graph, root, openItemIds);
+  const { graph } = useGraph();
 
   const loadDescendents = useCallback(
-    (node: NavTreeNode | NavTreeActionsNode) => {
-      void expandActions(graph, node as NavTreeItemGraphNode);
+    (node: Node) => {
+      void expandActions(graph, node);
       if (!isActionLike(node)) {
-        void expandChildren(graph, node as NavTreeItemGraphNode).then(() =>
+        void expandChildren(graph, node).then(() =>
           // Load one level deeper, which resolves some juddering observed on open/close.
           Promise.all(
-            getChildren(graph, node as NavTreeItemGraphNode).flatMap((child) => [
-              expandActions(graph, child),
-              expandChildren(graph, child),
-            ]),
+            getChildren(graph, node).flatMap((child) => [expandActions(graph, child), expandChildren(graph, child)]),
           ),
         );
       }
@@ -82,311 +62,147 @@ export const NavTreeContainer = ({
     [graph],
   );
 
-  const handleNavigate = async ({ node, actions }: NavTreeItemNode) => {
-    if (!node.data) {
-      return;
-    }
-
-    // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
-    await dispatch({
-      action: NavigationAction.OPEN,
-      data: {
-        activeParts: {
-          main: [node.id],
-        },
-      },
-    });
-
-    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
-    if (isAction(defaultAction)) {
-      void (defaultAction.data as () => void)();
+  const canDrop = useCallback((source: NavTreeItem, target: NavTreeItem) => {
+    if (isSpace(target.node.data)) {
+      // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
+      return isEchoObject(source.node.data) || isSpace(source.node.data);
+    } else if (isEchoObject(target.node.data)) {
+      return isEchoObject(source.node.data);
+    } else {
+      return false;
     }
-    if (!isLg) {
-      closeNavigationSidebar();
-    }
-  };
+  }, []);
 
-  const handleItemOpenChange = ({ id, actions, path }: NavTreeItemNode, nextOpen: boolean) => {
-    if (path) {
-      if (nextOpen) {
-        onOpenItemIdsChange({ ...openItemIds, [id]: true });
-      } else {
-        // TODO(thure): Filter vs single-remove, make setting?
-        const { [id]: _, ...nextOpenItemIds } = openItemIds;
-        onOpenItemIdsChange(nextOpenItemIds);
+  const handleSelect = useCallback(
+    ({ node, actions, path }: NavTreeItem) => {
+      if (!node.data) {
+        return;
       }
-    }
-
-    // TODO(wittjosiah): This is a temporary solution to ensure spaces get enabled when they are expanded.
-    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
-    if (isAction(defaultAction)) {
-      void (defaultAction.data as () => void)();
-    }
-  };
 
-  const resolveItemLevel = useCallback(
-    (overPosition: number | undefined, activeId: string | undefined, levelOffset: number) => {
-      if (!(typeof overPosition === 'number' && activeId)) {
-        return 1;
-      } else {
-        const nextItems = arrayMove(
-          items,
-          items.findIndex(({ id }) => id === activeId),
-          overPosition,
-        );
-        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-        return Math.min(
-          previousItem ? getLevel(previousItem?.path) + 1 : 1,
-          Math.max(nextItem ? getLevel(nextItem?.path) : 1, getLevel(nextItems[overPosition].path) + levelOffset),
-        );
+      if (isAction(node)) {
+        const [parentId] = path.slice(1);
+        const parent = items.find(({ id }) => id === parentId)?.node;
+        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
+        return;
       }
-    },
-    [items],
-  );
 
-  const handleMove: NavTreeProps['onMove'] = useCallback(
-    ({ active, over, details }: MosaicMoveEvent<number, NavTreeItemMoveDetails>) => {
-      const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
-      const overPosition = over.position ?? 0;
-      const nextItems = arrayMove(
-        items,
-        items.findIndex(({ id }) => id === active.item.id),
-        overPosition,
-      );
+      // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
+      void dispatch({
+        action: NavigationAction.OPEN,
+        data: {
+          activeParts: {
+            main: [node.id],
+          },
+        },
+      });
 
-      const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-      const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
-      if (!activeNode || !previousItem || !previousItem.path) {
-        // console.log('[reject]', !activeNode, !previousItem, !previousItem.path);
-        // log.warn('Top-level rearrange before the first item of the NavTree is unsupported at this time.');
-        return { operation: 'reject' as const, details: { levelOffset } };
+      const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
+      if (isAction(defaultAction)) {
+        void (defaultAction.data as () => void)();
       }
 
-      const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-      const previousLevel = getLevel(previousItem.path);
-      // console.log('[over]', overLevel, previousLevel, levelOffset);
-      if (previousLevel === overLevel - 1) {
-        if (Path.hasChild(previousItem.id, active.item.id)) {
-          // Previous is already parent of Active, rearrange.
-          const operation = previousItem.node.properties.onRearrangeChildren
-            ? ('rearrange' as const)
-            : ('reject' as const);
-          return { operation, details: { levelOffset } };
-        } else {
-          // Previous is not yet parent of Active, check transfer or copy.
-          const operation = resolveMigrationOperation(graph, activeNode, previousItem.path, previousItem.node);
-          // console.log('[migration result]', operation, 'Previous is not yet parent of Active, check transfer or copy.');
-          return { operation, details: { levelOffset } };
-        }
-      } else if (previousLevel === overLevel) {
-        const parent = getParent(graph, previousItem.node, previousItem.path);
-        const parentPath = previousItem.path.slice(0, previousItem.path.length - 1);
-        if (Path.siblings(previousItem.id, active.item.id)) {
-          // Previous is already a sibling of Active, rearrange.
-          const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
-          return { operation, details: { levelOffset } };
-        } else {
-          // Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.
-          const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-          // console.log(
-          //   '[migration result]',
-          //   operation,
-          //   'Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.',
-          // );
-          return { operation, details: { levelOffset } };
-        }
-      } else if (nextItem && nextItem.path) {
-        const nextLevel = getLevel(nextItem.path);
-        if (nextLevel === overLevel) {
-          const parent = getParent(graph, nextItem.node, nextItem.path);
-          const parentPath = nextItem.path.slice(0, nextItem.path.length - 1);
-          if (Path.siblings(nextItem.id, active.item.id)) {
-            // Next is already a sibling of Active, rearrange.
-            const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
-            return { operation, details: { levelOffset } };
-          } else {
-            // Next is not yet a sibling of Active, transfer to Next’s parent.
-            const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-            // console.log(
-            //   '[migration result]',
-            //   operation,
-            //   'Next is not yet a sibling of Active, transfer to Next’s parent.',
-            // );
-            return { operation, details: { levelOffset } };
-          }
-        } else {
-          // console.log('[migration result]', 'reject');
-          return { operation: 'reject' as const, details: { levelOffset } };
-        }
-      } else {
-        // console.log('[migration result]', 'reject');
-        return { operation: 'reject' as const, details: { levelOffset } };
+      if (!isLg) {
+        closeNavigationSidebar();
       }
     },
-    [root, items],
+    [items, dispatch, isLg, closeNavigationSidebar],
   );
 
-  const handleDrop = useCallback(
-    ({ operation, active, over, details = {} }: MosaicDropEvent<number, NavTreeItemMoveDetails>) => {
-      if (Path.first(over.path) !== root.id) {
-        return undefined;
-      }
-
-      const { levelOffset = 0 } = details;
-      const overPosition = over.position ?? 0;
-      const nextItems = arrayMove(
-        items,
-        items.findIndex(({ id }) => id === active.item.id),
-        overPosition,
-      );
-
-      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
-      const activeParentId = Path.parent(active.item.id);
-      if (!activeNode) {
-        return undefined;
-      }
+  // TODO(wittjosiah): Factor out hook.
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
 
-      const activeParent = getParent(graph, activeNode, (active.item as NavTreeItem).path ?? []);
-      if (operation === 'rearrange') {
-        void activeParent?.properties.onRearrangeChildren?.(
-          nextItems.filter(({ id }) => Path.hasChild(activeParentId, id)).map(({ node }) => node.data),
-        );
-        return null;
-      } else {
-        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-        const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-        const previousLevel = getLevel(previousItem.path);
-        if (operation === 'copy') {
-          if (previousLevel === overLevel - 1) {
-            void previousItem.node.properties.onCopy?.(activeNode, 0);
-            return null;
-          } else if (previousLevel === overLevel) {
-            const parent = getParent(graph, previousItem.node, previousItem.path ?? []);
-            void parent?.properties.onCopy?.(
-              activeNode,
-              getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
-            );
-            return null;
-          } else if (nextItem && nextItem.path) {
-            const parent = getParent(graph, nextItem.node, nextItem.path ?? []);
-            void parent?.properties.onCopy?.(
-              activeNode,
-              getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
-            );
-            return null;
-          }
-        } else if (operation === 'transfer') {
-          const onTransferEnd = activeParent?.properties.onTransferEnd;
-          if (!onTransferEnd) {
-            return undefined;
-          } else if (previousLevel === overLevel - 1) {
-            const onTransferStart = previousItem.node.properties.onTransferStart;
-            if (onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void onTransferStart(activeNode, 0);
-              return null;
+        const target = location.current.dropTargets[0];
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null && instruction.type !== 'instruction-blocked') {
+          const sourceNode = source.data.node as NavTreeItemGraphNode;
+          const targetNode = target.data.node as NavTreeItemGraphNode;
+
+          const sourcePath = source.data.path as string[];
+          const targetPath = target.data.path as string[];
+
+          const nextItems = instruction.type.startsWith('reorder')
+            ? items.filter((item) => item.path.slice(0, -1).join() === targetPath.slice(0, -1).join())
+            : items.filter((item) => item.path.slice(0, -1).join() === targetPath.join());
+          const operation =
+            sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              ? 'rearrange'
+              : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
+
+          const sourceParent = getParent(graph, sourceNode, sourcePath);
+          const targetParent = getParent(graph, targetNode, targetPath);
+
+          const sourceIndex = nextItems.findIndex(({ id }) => id === sourceNode.id);
+          const targetIndex = nextItems.findIndex(({ id }) => id === targetNode.id);
+          const migrationIndex =
+            instruction.type === 'make-child'
+              ? nextItems.length > 0
+                ? nextItems.length - 1
+                : 0
+              : instruction.type === 'reorder-below'
+                ? targetIndex + 1
+                : targetIndex;
+
+          switch (operation) {
+            case 'rearrange': {
+              arrayMove(nextItems, sourceIndex, targetIndex);
+              void sourceParent?.properties.onRearrangeChildren?.(nextItems.map((item) => item.node.data));
+              break;
             }
-          } else if (previousLevel === overLevel && previousItem.path) {
-            const parent = getParent(graph, previousItem.node, previousItem.path);
-            if (parent?.properties.onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void parent.properties.onTransferStart(
-                activeNode,
-                getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
-              );
-              return null;
+
+            case 'copy': {
+              const target = instruction.type === 'make-child' ? targetNode : targetParent;
+              void target?.properties.onCopy?.(sourceNode, migrationIndex);
+              break;
             }
-          } else if (nextItem && nextItem.path) {
-            const parent = getParent(graph, nextItem.node, nextItem.path);
-            if (parent?.properties.onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void parent.properties.onTransferStart(
-                activeNode,
-                getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
-              );
-              return null;
+
+            case 'transfer': {
+              const target = instruction.type === 'make-child' ? targetNode : targetParent;
+              if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                break;
+              }
+
+              void target?.properties.onTransferStart(sourceNode, migrationIndex);
+              void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
+              break;
             }
           }
         }
-      }
-      return undefined;
-    },
-    [root, items],
-  );
-
-  const handleDragEnd = useCallback(() => {
-    onOpenItemIdsChange({ ...openItemIds });
-  }, [onOpenItemIdsChange, openItemIds]);
-
-  // TODO(burdon): Remove.
-  // Debug list.
-  const debug = false;
-  if (debug) {
-    const getLabel = (item: NavTreeItem) => {
-      const label = item.node?.properties?.label;
-      return typeof label === 'string' ? label : item.id;
-    };
+      },
+    });
+  }, [items]);
 
-    return (
-      <div className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'>
-        <div className='flex items-center p-2'>Items: {items.length}</div>
+  return (
+    <ElevationProvider elevation='chrome'>
+      <div
+        role='none'
+        className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
+      >
+        <Surface role='search-input' limit={1} />
+
+        {/* TODO(thure): What gives this an inline `overflow: initial`? */}
         <div role='none' className='!overflow-y-auto'>
-          <List.Root<NavTreeItem> items={items} isItem={() => true}>
-            {({ items }) =>
-              items.map((item) => (
-                <List.Item<NavTreeItem> key={item.id} item={item} classNames={mx('p-2', ghostHover)}>
-                  <List.ItemDragHandle />
-                  <List.ItemTitle classNames='p-2 text-sm' onClick={() => handleNavigate(item)}>
-                    {getLabel(item)}
-                  </List.ItemTitle>
-                  <List.IconButton icon='ph--caret-down--regular' onClick={() => handleItemOpenChange(item, true)} />
-                </List.Item>
-              ))
-            }
-          </List.Root>
+          <NavTree
+            items={items}
+            open={open}
+            current={current}
+            loadDescendents={loadDescendents}
+            renderPresence={renderPresence}
+            popoverAnchorId={popoverAnchorId}
+            canDrop={canDrop}
+            onSelect={handleSelect}
+            {...props}
+          />
         </div>
+
         <NavTreeFooter />
       </div>
-    );
-  }
-
-  return (
-    <Mosaic.Root>
-      <Mosaic.DragOverlay />
-      <ElevationProvider elevation='chrome'>
-        <div
-          role='none'
-          className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
-        >
-          <Surface role='search-input' limit={1} />
-
-          {/* TODO(thure): what gives this an inline `overflow: initial`? */}
-          <div role='none' className='!overflow-y-auto'>
-            <NavTree
-              id={root.id}
-              items={items}
-              current={activeIds}
-              attended={attended}
-              type={NODE_TYPE}
-              loadDescendents={loadDescendents}
-              popoverAnchorId={popoverAnchorId}
-              renderPresence={renderPresence}
-              resolveItemLevel={resolveItemLevel}
-              open={openItemIds}
-              onNavigate={handleNavigate}
-              onItemOpenChange={handleItemOpenChange}
-              onMove={handleMove}
-              onDrop={handleDrop}
-              onDragEnd={handleDragEnd}
-            />
-          </div>
-
-          <NavTreeFooter />
-        </div>
-      </ElevationProvider>
-    </Mosaic.Root>
+    </ElevationProvider>
   );
 };

package/src/components/NavTreeItemAction.stories.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type NodeArg } from '@dxos/app-graph';
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
+
+const parent = {
+  id: faker.string.uuid(),
+  type: 'node',
+  data: null,
+  properties: {
+    label: faker.lorem.words(2),
+    icon: 'ph--circle--regular',
+  },
+} satisfies NodeArg<any>;
+
+// TODO(burdon): Factor out across tests.
+const menuActions = faker.helpers.multiple(
+  () =>
+    ({
+      id: faker.string.uuid(),
+      type: 'action',
+      data: () => {
+        console.log('invoke');
+      },
+      properties: {
+        label: faker.lorem.words(2),
+        icon: 'ph--circle--regular',
+      },
+    }) satisfies NodeArg<any>,
+  { count: 20 },
+);
+
+export default {
+  title: 'plugins/plugin-navtree/NavTreeItemAction',
+  component: NavTreeItemAction,
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  args: {
+    icon: 'ph--list--regular',
+    parent,
+    menuActions,
+    label: 'Select action',
+    onAction: (action) => {
+      console.log(action);
+    },
+  } satisfies Partial<NavTreeItemActionMenuProps>,
+};
+
+export const Default = {};
+
+export const SearchList = { args: { menuType: 'searchList' } };