@headless-tree/core 0.0.14 → 1.0.0

package/src/features/drag-and-drop/utils.ts

@@ -1,7 +1,7 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget } from "./types";
+import { DragTarget } from "./types";
 
-enum ItemDropCategory {
+export enum ItemDropCategory {
   Item,
   ExpandedFolder,
   LastInGroup,
@@ -26,9 +26,12 @@ type TargetPlacement =
       reparentLevel: number;
     };
 
+export const isOrderedDragTarget = <T>(dragTarget: DragTarget<T>) =>
+  "childIndex" in dragTarget;
+
 export const canDrop = (
   dataTransfer: DataTransfer | null,
-  target: DropTarget<any>,
+  target: DragTarget<any>,
   tree: TreeInstance<any>,
 ) => {
   const draggedItems = tree.getState().dnd?.draggedItems;
@@ -52,7 +55,8 @@ export const canDrop = (
   if (
     !draggedItems &&
     dataTransfer &&
-    !config.canDropForeignDragObject?.(dataTransfer, target)
+    config.canDropForeignDragObject &&
+    !config.canDropForeignDragObject(dataTransfer, target)
   ) {
     return false;
   }
@@ -60,19 +64,37 @@ export const canDrop = (
   return true;
 };
 
-const getItemDropCategory = (item: ItemInstance<any>) => {
+export const getItemDropCategory = (item: ItemInstance<any>) => {
   if (item.isExpanded()) {
     return ItemDropCategory.ExpandedFolder;
   }
 
   const parent = item.getParent();
-  if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+  if (parent && item.getIndexInParent() === item.getItemMeta().setSize - 1) {
     return ItemDropCategory.LastInGroup;
   }
 
   return ItemDropCategory.Item;
 };
 
+export const getInsertionIndex = <T>(
+  children: ItemInstance<T>[],
+  childIndex: number,
+  draggedItems: ItemInstance<T>[] | undefined,
+) => {
+  const numberOfDragItemsBeforeTarget =
+    children
+      .slice(0, childIndex)
+      .reduce(
+        (counter, child) =>
+          child && draggedItems?.some((i) => i.getId() === child.getId())
+            ? ++counter
+            : counter,
+        0,
+      ) ?? 0;
+  return childIndex - numberOfDragItemsBeforeTarget;
+};
+
 const getTargetPlacement = (
   e: any,
   item: ItemInstance<any>,
@@ -88,8 +110,8 @@ const getTargetPlacement = (
   }
 
   const bb = item.getElement()?.getBoundingClientRect();
-  const topPercent = bb ? (e.pageY - bb.top) / bb.height : 0.5;
-  const leftPixels = bb ? e.pageX - bb.left : 0;
+  const topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
+  const leftPixels = bb ? e.clientX - bb.left : 0;
   const targetDropCategory = getItemDropCategory(item);
   const reorderAreaPercentage = !canMakeChild
     ? 0.5
@@ -111,9 +133,10 @@ const getTargetPlacement = (
       if (topPercent < 0.5) {
         return { type: PlacementType.ReorderAbove };
       }
+      const minLevel = item.getItemBelow()?.getItemMeta().level ?? 0;
       return {
         type: PlacementType.Reparent,
-        reparentLevel: Math.floor(leftPixels / indent),
+        reparentLevel: Math.max(minLevel, Math.floor(leftPixels / indent)),
       };
     }
     // if not at left of item area, treat as if it was a normal item
@@ -152,31 +175,41 @@ const getNthParent = (
   return getNthParent(item.getParent()!, n);
 };
 
-export const getDropTarget = (
+/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6)  */
+export const getReparentTarget = <T>(
+  item: ItemInstance<T>,
+  reparentLevel: number,
+  draggedItems: ItemInstance<T>[] | undefined,
+) => {
+  const itemMeta = item.getItemMeta();
+  const reparentedTarget = getNthParent(item, reparentLevel - 1);
+  const targetItemAbove = getNthParent(item, reparentLevel); // .getItemBelow()!;
+  const targetIndex = targetItemAbove.getIndexInParent() + 1;
+
+  return {
+    item: reparentedTarget,
+    childIndex: targetIndex,
+    insertionIndex: getInsertionIndex(
+      reparentedTarget.getChildren(),
+      targetIndex,
+      draggedItems,
+    ),
+    dragLineIndex: itemMeta.index + 1,
+    dragLineLevel: reparentLevel,
+  };
+};
+
+export const getDragTarget = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
   canReorder = tree.getConfig().canReorder,
-): DropTarget<any> => {
-  const draggedItems = tree.getState().dnd?.draggedItems ?? [];
+): DragTarget<any> => {
+  const draggedItems = tree.getState().dnd?.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
-  const itemTarget: DropTarget<any> = {
-    item,
-    childIndex: null,
-    insertionIndex: null,
-    dragLineIndex: null,
-    dragLineLevel: null,
-  };
-  const parentTarget: DropTarget<any> | null = parent
-    ? {
-        item: parent,
-        childIndex: null,
-        insertionIndex: null,
-        dragLineIndex: null,
-        dragLineLevel: null,
-      }
-    : null;
+  const itemTarget: DragTarget<any> = { item };
+  const parentTarget: DragTarget<any> | null = parent ? { item: parent } : null;
   const canBecomeSibling =
     parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
 
@@ -193,8 +226,8 @@ export const getDropTarget = (
   }
 
   if (!canReorder && parent && !canBecomeSibling) {
-    // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
-    return getDropTarget(e, parent, tree, false);
+    // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
+    return getDragTarget(e, parent, tree, false);
   }
 
   if (!parent) {
@@ -207,47 +240,27 @@ export const getDropTarget = (
   }
 
   if (!canBecomeSibling) {
-    return getDropTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, false);
   }
 
   if (placement.type === PlacementType.Reparent) {
-    const reparentedTarget = getNthParent(item, placement.reparentLevel - 1);
-    const targetItemAbove = getNthParent(item, placement.reparentLevel); // .getItemBelow()!;
-    const targetIndex = targetItemAbove.getIndexInParent() + 1;
-
-    // TODO possibly count items dragged out above the new target
-
-    return {
-      item: reparentedTarget,
-      childIndex: targetIndex,
-      insertionIndex: targetIndex,
-      dragLineIndex: itemMeta.index + 1,
-      dragLineLevel: placement.reparentLevel,
-    };
+    return getReparentTarget(item, placement.reparentLevel, draggedItems);
   }
 
   const maybeAddOneForBelow =
     placement.type === PlacementType.ReorderAbove ? 0 : 1;
   const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
 
-  const numberOfDragItemsBeforeTarget =
-    parent
-      .getChildren()
-      .slice(0, childIndex)
-      .reduce(
-        (counter, child) =>
-          child && draggedItems?.some((i) => i.getId() === child.getId())
-            ? ++counter
-            : counter,
-        0,
-      ) ?? 0;
-
   return {
     item: parent,
     dragLineIndex: itemMeta.index + maybeAddOneForBelow,
     dragLineLevel: itemMeta.level,
     childIndex,
     // TODO performance could be improved by computing this only when dragcode changed
-    insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
+    insertionIndex: getInsertionIndex(
+      parent.getChildren(),
+      childIndex,
+      draggedItems,
+    ),
   };
 };

package/src/features/expand-all/feature.ts

@@ -1,5 +1,4 @@
 import { FeatureImplementation } from "../../types/core";
-import { poll } from "../../utils";
 
 export const expandAllFeature: FeatureImplementation = {
   key: "expand-all",
@@ -27,22 +26,47 @@ export const expandAllFeature: FeatureImplementation = {
       }
 
       item.expand();
-      await poll(() => !tree.getState().loadingItems.includes(item.getId()));
+      await tree.waitForItemChildrenLoaded(item.getId());
       await Promise.all(
         item.getChildren().map(async (child) => {
-          await poll(
-            () => !tree.getState().loadingItems.includes(child.getId()),
-          );
+          await tree.waitForItemChildrenLoaded(item.getId());
           await child?.expandAll(cancelToken);
         }),
       );
     },
 
     collapseAll: ({ item }) => {
+      if (!item.isExpanded()) return;
       for (const child of item.getChildren()) {
         child?.collapseAll();
       }
       item.collapse();
     },
   },
+
+  hotkeys: {
+    expandSelected: {
+      hotkey: "Control+Shift+Plus",
+      handler: async (_, tree) => {
+        const cancelToken = { current: false };
+        const cancelHandler = (e: KeyboardEvent) => {
+          if (e.key === "Escape") {
+            cancelToken.current = true;
+          }
+        };
+        document.addEventListener("keydown", cancelHandler);
+        await Promise.all(
+          tree.getSelectedItems().map((item) => item.expandAll(cancelToken)),
+        );
+        document.removeEventListener("keydown", cancelHandler);
+      },
+    },
+
+    collapseSelected: {
+      hotkey: "Control+Shift+-",
+      handler: (_, tree) => {
+        tree.getSelectedItems().forEach((item) => item.collapseAll());
+      },
+    },
+  },
 };

package/src/features/expand-all/types.ts

@@ -1,3 +1,5 @@
+export interface ExpandAllDataRef {}
+
 export type ExpandAllFeatureDef = {
   state: {};
   config: {};
@@ -9,5 +11,5 @@ export type ExpandAllFeatureDef = {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
     collapseAll: () => void;
   };
-  hotkeys: never;
+  hotkeys: "expandSelected" | "collapseSelected";
 };

package/src/features/hotkeys-core/feature.ts

@@ -8,6 +8,8 @@ import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 const specialKeys: Record<string, RegExp> = {
   Letter: /^[a-z]$/,
   LetterOrNumber: /^[a-z0-9]$/,
+  Plus: /^\+$/,
+  Space: /^ $/,
 };
 
 const testHotkeyMatch = (
@@ -46,6 +48,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       data.current.pressedKeys ??= new Set();
       const newMatch = !data.current.pressedKeys.has(e.key);
       data.current.pressedKeys.add(e.key);
+      console.log("HOTKEYS", data.current.pressedKeys);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
@@ -71,6 +74,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (hotkeyConfig.preventDefault) e.preventDefault();
 
       hotkeyConfig.handler(e, tree as any);
+      tree.getConfig().onTreeHotkey?.(hotkeyName, e);
     };
 
     const keyup = (e: KeyboardEvent) => {

package/src/features/hotkeys-core/types.ts

@@ -1,8 +1,4 @@
-import {
-  CustomHotkeysConfig,
-  ItemInstance,
-  TreeInstance,
-} from "../../types/core";
+import { CustomHotkeysConfig, TreeInstance } from "../../types/core";
 
 export interface HotkeyConfig<T> {
   hotkey: string;
@@ -13,22 +9,17 @@ export interface HotkeyConfig<T> {
   handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
 }
 
-export type HotkeysCoreDataRef = {
+export interface HotkeysCoreDataRef {
   keydownHandler?: (e: KeyboardEvent) => void;
   keyupHandler?: (e: KeyboardEvent) => void;
   pressedKeys: Set<string>;
-};
+}
 
 export type HotkeysCoreFeatureDef<T> = {
   state: {};
   config: {
     hotkeys?: CustomHotkeysConfig<T>;
-    onTreeHotkey?: (name: string, element: HTMLElement) => void;
-    onItemHotkey?: (
-      name: string,
-      item: ItemInstance<T>,
-      element: HTMLElement,
-    ) => void;
+    onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
   };
   treeInstance: {};
   itemInstance: {};

package/src/features/keyboard-drag-and-drop/feature.ts

@@ -0,0 +1,255 @@
+import {
+  FeatureImplementation,
+  ItemInstance,
+  TreeInstance,
+} from "../../types/core";
+import { DndDataRef, DragTarget } from "../drag-and-drop/types";
+import {
+  ItemDropCategory,
+  canDrop,
+  getInsertionIndex,
+  getItemDropCategory,
+  getReparentTarget,
+  isOrderedDragTarget,
+} from "../drag-and-drop/utils";
+import { makeStateUpdater } from "../../utils";
+import { AssistiveDndState, KDndDataRef } from "./types";
+
+const getNextDragTarget = <T>(
+  tree: TreeInstance<T>,
+  isUp: boolean,
+  dragTarget: DragTarget<T>,
+): DragTarget<T> | undefined => {
+  const direction = isUp ? 0 : 1;
+  const draggedItems = tree.getState().dnd?.draggedItems;
+
+  // currently hovering between items
+  if (isOrderedDragTarget(dragTarget)) {
+    const parent = dragTarget.item.getParent();
+    const targetedItem = tree.getItems()[dragTarget.dragLineIndex - 1]; // item above dragline
+
+    const targetCategory = targetedItem
+      ? getItemDropCategory(targetedItem)
+      : ItemDropCategory.Item;
+    const maxLevel = targetedItem?.getItemMeta().level ?? 0;
+    const minLevel = targetedItem?.getItemBelow()?.getItemMeta().level ?? 0;
+
+    // reparenting
+    if (targetCategory === ItemDropCategory.LastInGroup) {
+      if (isUp && dragTarget.dragLineLevel < maxLevel) {
+        return getReparentTarget(
+          targetedItem,
+          dragTarget.dragLineLevel + 1,
+          draggedItems,
+        );
+      }
+      if (!isUp && dragTarget.dragLineLevel > minLevel && parent) {
+        return getReparentTarget(
+          targetedItem,
+          dragTarget.dragLineLevel - 1,
+          draggedItems,
+        );
+      }
+    }
+
+    const newIndex = dragTarget.dragLineIndex - 1 + direction;
+    const item = tree.getItems()[newIndex];
+    return item ? { item } : undefined;
+  }
+
+  // moving upwards outside of an open folder
+  const targetingExpandedFolder =
+    getItemDropCategory(dragTarget.item) === ItemDropCategory.ExpandedFolder;
+  if (targetingExpandedFolder && !isUp) {
+    return {
+      item: dragTarget.item,
+      childIndex: 0,
+      insertionIndex: getInsertionIndex(
+        dragTarget.item.getChildren(),
+        0,
+        draggedItems,
+      ),
+      dragLineIndex: dragTarget.item.getItemMeta().index + direction,
+      dragLineLevel: dragTarget.item.getItemMeta().level + 1,
+    };
+  }
+
+  // currently hovering over item
+  const childIndex = dragTarget.item.getIndexInParent() + direction;
+  return {
+    item: dragTarget.item.getParent()!,
+    childIndex,
+    insertionIndex: getInsertionIndex(
+      dragTarget.item.getParent()!.getChildren(),
+      childIndex,
+      draggedItems,
+    ),
+    dragLineIndex: dragTarget.item.getItemMeta().index + direction,
+    dragLineLevel: dragTarget.item.getItemMeta().level,
+  };
+};
+
+const getNextValidDragTarget = <T>(
+  tree: TreeInstance<T>,
+  isUp: boolean,
+  previousTarget = tree.getState().dnd?.dragTarget,
+): DragTarget<T> | undefined => {
+  if (!previousTarget) return undefined;
+  const nextTarget = getNextDragTarget(tree, isUp, previousTarget);
+  const dataTransfer =
+    tree.getDataRef<KDndDataRef>().current.kDndDataTransfer ?? null;
+  if (!nextTarget) return undefined;
+  if (canDrop(dataTransfer, nextTarget, tree)) {
+    return nextTarget;
+  }
+  return getNextValidDragTarget(tree, isUp, nextTarget);
+};
+
+const updateScroll = <T>(tree: TreeInstance<T>) => {
+  const state = tree.getState().dnd;
+  if (!state?.dragTarget || isOrderedDragTarget(state.dragTarget)) return;
+  state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
+};
+
+const initiateDrag = <T>(
+  tree: TreeInstance<T>,
+  draggedItems?: ItemInstance<T>[],
+  dataTransfer?: DataTransfer,
+) => {
+  const focusedItem = tree.getFocusedItem();
+  const { canDrag } = tree.getConfig();
+
+  if (draggedItems && canDrag && !canDrag(draggedItems)) {
+    return;
+  }
+
+  if (draggedItems) {
+    tree.applySubStateUpdate("dnd", { draggedItems });
+    // getNextValidDragTarget->canDrop needs the draggedItems in state
+    tree.getConfig().onStartKeyboardDrag?.(draggedItems);
+  } else if (dataTransfer) {
+    tree.getDataRef<KDndDataRef>().current.kDndDataTransfer = dataTransfer;
+  }
+
+  const dragTarget = getNextValidDragTarget(tree, false, {
+    item: focusedItem,
+  });
+  if (!dragTarget) return;
+
+  tree.applySubStateUpdate("dnd", {
+    draggedItems,
+    dragTarget,
+  });
+  tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.Started);
+  updateScroll(tree);
+};
+
+const moveDragPosition = <T>(tree: TreeInstance<T>, isUp: boolean) => {
+  const dragTarget = getNextValidDragTarget(tree, isUp);
+  if (!dragTarget) return;
+  tree.applySubStateUpdate("dnd", {
+    draggedItems: tree.getState().dnd?.draggedItems,
+    dragTarget,
+  });
+  tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.Dragging);
+  if (!isOrderedDragTarget(dragTarget)) {
+    dragTarget.item.setFocused();
+  }
+  updateScroll(tree);
+};
+
+export const keyboardDragAndDropFeature: FeatureImplementation = {
+  key: "keyboard-drag-and-drop",
+  deps: ["drag-and-drop"],
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setAssistiveDndState: makeStateUpdater("assistiveDndState", tree),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    assistiveDndState: "setAssistiveDndState",
+  },
+
+  treeInstance: {
+    startKeyboardDrag: ({ tree }, draggedItems) => {
+      initiateDrag(tree, draggedItems, undefined);
+    },
+    startKeyboardDragOnForeignObject: ({ tree }, dataTransfer) => {
+      initiateDrag(tree, undefined, dataTransfer);
+    },
+    stopKeyboardDrag: ({ tree }) => {
+      tree.getDataRef<KDndDataRef>().current.kDndDataTransfer = undefined;
+      tree.applySubStateUpdate("dnd", null);
+      tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.None);
+    },
+  },
+
+  hotkeys: {
+    startDrag: {
+      hotkey: "Control+Shift+D",
+      preventDefault: true,
+      isEnabled: (tree) => !tree.getState().dnd,
+      handler: (_, tree) => {
+        tree.startKeyboardDrag(tree.getSelectedItems());
+      },
+    },
+    dragUp: {
+      hotkey: "ArrowUp",
+      preventDefault: true,
+      isEnabled: (tree) => !!tree.getState().dnd,
+      handler: (_, tree) => {
+        moveDragPosition(tree, true);
+      },
+    },
+    dragDown: {
+      hotkey: "ArrowDown",
+      preventDefault: true,
+      isEnabled: (tree) => !!tree.getState().dnd,
+      handler: (_, tree) => {
+        moveDragPosition(tree, false);
+      },
+    },
+    cancelDrag: {
+      hotkey: "Escape",
+      isEnabled: (tree) => !!tree.getState().dnd,
+      handler: (_, tree) => {
+        tree.stopKeyboardDrag();
+      },
+    },
+    completeDrag: {
+      hotkey: "Enter",
+      preventDefault: true,
+      isEnabled: (tree) => !!tree.getState().dnd,
+      handler: async (e, tree) => {
+        e.stopPropagation();
+        // TODO copied from keyboard onDrop, unify them
+        const dataRef = tree.getDataRef<DndDataRef & KDndDataRef>();
+        const target = tree.getDragTarget();
+        const dataTransfer = dataRef.current.kDndDataTransfer ?? null;
+
+        if (!target || !canDrop(dataTransfer, target, tree)) {
+          return;
+        }
+
+        const config = tree.getConfig();
+        const draggedItems = tree.getState().dnd?.draggedItems;
+
+        dataRef.current.lastDragCode = undefined;
+        tree.applySubStateUpdate("dnd", null);
+
+        if (draggedItems) {
+          await config.onDrop?.(draggedItems, target);
+          tree.getItemInstance(draggedItems[0].getId()).setFocused();
+        } else if (dataTransfer) {
+          await config.onDropForeignDragObject?.(dataTransfer, target);
+        }
+
+        tree.applySubStateUpdate(
+          "assistiveDndState",
+          AssistiveDndState.Completed,
+        );
+      },
+    },
+  },
+};