@headless-tree/core 0.0.14 → 0.0.15

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

@@ -1,6 +1,6 @@
 import { FeatureImplementation } from "../../types/core";
 import { DndDataRef, DragLineData } from "./types";
-import { canDrop, getDragCode, getDropTarget } from "./utils";
+import { canDrop, getDragCode, getDragTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
 export const dragAndDropFeature: FeatureImplementation = {
@@ -20,17 +20,17 @@ export const dragAndDropFeature: FeatureImplementation = {
   },
 
   treeInstance: {
-    getDropTarget: ({ tree }) => {
+    getDragTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
     },
 
     getDragLineData: ({ tree }): DragLineData | null => {
-      const target = tree.getDropTarget();
+      const target = tree.getDragTarget();
       const indent = (target?.item.getItemMeta().level ?? 0) + 1;
 
       const treeBb = tree.getElement()?.getBoundingClientRect();
 
-      if (!target || !treeBb || target.childIndex === null) return null;
+      if (!target || !treeBb || !("childIndex" in target)) return null;
 
       const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
       const targetItem = tree.getItems()[target.dragLineIndex];
@@ -44,7 +44,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         if (bb) {
           return {
             indent,
-            top: bb.bottom - treeBb.bottom,
+            top: bb.bottom - treeBb.top,
             left: bb.left + leftOffset - treeBb.left,
             width: bb.width - leftOffset,
           };
@@ -77,8 +77,8 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }) => {
-      const prevProps = prev?.();
+    getContainerProps: ({ prev }, treeLabel) => {
+      const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
         style: {
@@ -93,7 +93,7 @@ export const dragAndDropFeature: FeatureImplementation = {
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
 
-      draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
+      draggable: true,
 
       onDragStart: (e: DragEvent) => {
         const selectedItems = tree.getSelectedItems();
@@ -131,7 +131,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         }
         dataRef.current.lastDragCode = nextDragCode;
 
-        const target = getDropTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree);
 
         if (
           !tree.getState().dnd?.draggedItems &&
@@ -179,9 +179,9 @@ export const dragAndDropFeature: FeatureImplementation = {
         tree.getConfig().onCompleteForeignDrop?.(draggedItems);
       },
 
-      onDrop: (e: DragEvent) => {
+      onDrop: async (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
-        const target = getDropTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree);
 
         if (!canDrop(e.dataTransfer, target, tree)) {
           return;
@@ -195,37 +195,36 @@ export const dragAndDropFeature: FeatureImplementation = {
         tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
-          config.onDrop?.(draggedItems, target);
+          await config.onDrop?.(draggedItems, target);
         } else if (e.dataTransfer) {
-          config.onDropForeignDragObject?.(e.dataTransfer, target);
+          await config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
-        // TODO rebuild tree?
       },
     }),
 
-    isDropTarget: ({ tree, item }) => {
-      const target = tree.getDropTarget();
+    isDragTarget: ({ tree, item }) => {
+      const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
     },
 
-    isDropTargetAbove: ({ tree, item }) => {
-      const target = tree.getDropTarget();
+    isDragTargetAbove: ({ tree, item }) => {
+      const target = tree.getDragTarget();
 
       if (
         !target ||
-        target.childIndex === null ||
+        !("childIndex" in target) ||
         target.item !== item.getParent()
       )
         return false;
       return target.childIndex === item.getItemMeta().posInSet;
     },
 
-    isDropTargetBelow: ({ tree, item }) => {
-      const target = tree.getDropTarget();
+    isDragTargetBelow: ({ tree, item }) => {
+      const target = tree.getDragTarget();
 
       if (
         !target ||
-        target.childIndex === null ||
+        !("childIndex" in target) ||
         target.item !== item.getParent()
       )
         return false;

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

@@ -1,24 +1,24 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 
-export type DndDataRef = {
+export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
-};
+}
 
-export type DndState<T> = {
+export interface DndState<T> {
   draggedItems?: ItemInstance<T>[];
   draggingOverItem?: ItemInstance<T>;
-  dragTarget?: DropTarget<T>;
-};
+  dragTarget?: DragTarget<T>;
+}
 
-export type DragLineData = {
+export interface DragLineData {
   indent: number;
   top: number;
   left: number;
   width: number;
-};
+}
 
-export type DropTarget<T> =
+export type DragTarget<T> =
   | {
       item: ItemInstance<T>;
       childIndex: number;
@@ -27,14 +27,10 @@ export type DropTarget<T> =
       dragLineLevel: number;
     }
   | {
-      item: ItemInstance<T>; // TODO just omit values instead of nulls; or maybe just make it union of dropTarget+itemInstance?
-      childIndex: null;
-      insertionIndex: null;
-      dragLineIndex: null;
-      dragLineLevel: null;
+      item: ItemInstance<T>;
     };
 
-export enum DropTargetPosition {
+export enum DragTargetPosition {
   Top = "top",
   Bottom = "bottom",
   Item = "item",
@@ -53,10 +49,8 @@ export type DragAndDropFeatureDef<T> = {
     reorderAreaPercentage?: number;
     canReorder?: boolean;
 
-    // TODO better document difference to canDrag(), or unify both
-    isItemDraggable?: (item: ItemInstance<T>) => boolean;
     canDrag?: (items: ItemInstance<T>[]) => boolean;
-    canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
+    canDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => boolean;
 
     indent?: number;
 
@@ -66,37 +60,31 @@ export type DragAndDropFeatureDef<T> = {
     };
     canDropForeignDragObject?: (
       dataTransfer: DataTransfer,
-      target: DropTarget<T>,
+      target: DragTarget<T>,
     ) => boolean;
-    onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
+    onDrop?: (
+      items: ItemInstance<T>[],
+      target: DragTarget<T>,
+    ) => void | Promise<void>;
     onDropForeignDragObject?: (
       dataTransfer: DataTransfer,
-      target: DropTarget<T>,
-    ) => void;
-
-    /** Runs in the onDragEnd event, if `ev.dataTransfer.dropEffect` is not `none`, i.e. the drop
-     * was not aborted. No target is provided as parameter since the target may be a foreign drop target.
-     * This is useful to seperate out the logic to move dragged items out of their previous parents.
-     * Use `onDrop` to handle drop-related logic.
-     *
-     * This ignores the `canDrop` handler, since the drop target is unknown in this handler.
-     */
-    // onSuccessfulDragEnd?: (items: ItemInstance<T>[]) => void;
-
+      target: DragTarget<T>,
+    ) => void | Promise<void>;
     onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
   };
   treeInstance: {
-    getDropTarget: () => DropTarget<T> | null;
+    getDragTarget: () => DragTarget<T> | null;
     getDragLineData: () => DragLineData | null;
+
     getDragLineStyle: (
       topOffset?: number,
       leftOffset?: number,
     ) => Record<string, any>;
   };
   itemInstance: {
-    isDropTarget: () => boolean;
-    isDropTargetAbove: () => boolean; // TODO still correct?
-    isDropTargetBelow: () => boolean; // TODO still correct?
+    isDragTarget: () => boolean;
+    isDragTargetAbove: () => boolean;
+    isDragTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
   };
   hotkeys: never;

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,
@@ -28,7 +28,7 @@ type TargetPlacement =
 
 export const canDrop = (
   dataTransfer: DataTransfer | null,
-  target: DropTarget<any>,
+  target: DragTarget<any>,
   tree: TreeInstance<any>,
 ) => {
   const draggedItems = tree.getState().dnd?.draggedItems;
@@ -52,7 +52,8 @@ export const canDrop = (
   if (
     !draggedItems &&
     dataTransfer &&
-    !config.canDropForeignDragObject?.(dataTransfer, target)
+    config.canDropForeignDragObject &&
+    !config.canDropForeignDragObject(dataTransfer, target)
   ) {
     return false;
   }
@@ -60,19 +61,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 +107,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 +130,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 +172,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 +223,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 +237,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: {};