@headless-tree/core 0.0.14 → 1.0.0

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

@@ -31,10 +31,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -44,10 +40,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x2");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x2"),
         });
       });
@@ -57,10 +49,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x12");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x12"),
         });
       });
@@ -109,33 +97,52 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("drop reparented one level", () => {
+      it("drop reparented one level", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
-        tree.setElementBoundingBox("x114");
+        tree.setElementBoundingBox("x144");
         const event = tree.createBottomDragEvent(1);
-        tree.do.dragOverAndDrop("x114", event);
+        tree.do.dragOverAndDrop("x144", event);
         tree.expect.dropped(["x111"], {
-          dragLineIndex: 6,
+          dragLineIndex: 13,
           dragLineLevel: 1,
+          childIndex: 4,
+          insertionIndex: 4,
+          item: tree.item("x1"),
+        });
+      });
+
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
+        tree.do.ctrlSelectItem("x111");
+        tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x144");
+        const event = tree.createBottomDragEvent(0);
+        tree.do.dragOverAndDrop("x144", event);
+        tree.expect.dropped(["x111"], {
+          dragLineIndex: 13,
+          dragLineLevel: 0,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x1"),
+          item: tree.item("x"),
         });
       });
 
-      it("drop reparented two levels", () => {
-        // TODO reparenting two levels should work at x144, but not at x114
+      it("doesnt drop reparented higher than it can", () => {
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x114");
         const event = tree.createBottomDragEvent(0);
         tree.do.dragOverAndDrop("x114", event);
         tree.expect.dropped(["x111"], {
           dragLineIndex: 6,
-          dragLineLevel: 0,
+          dragLineLevel: 1,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x"),
+          item: tree.item("x1"),
         });
       });
 
@@ -147,10 +154,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -163,10 +166,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -179,10 +178,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -199,10 +194,6 @@ describe("core-feature/drag-and-drop", () => {
           draggedItems: [tree.item("x111")],
           draggingOverItem: tree.item("x21"),
           dragTarget: {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x21"),
           },
         });
@@ -270,13 +261,15 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.defaultDragLineProps(1);
       });
 
-      it("drop reparented two levels", () => {
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
         const event = tree.createBottomDragEvent(0);
-        tree.setElementBoundingBox("x12");
-        tree.setElementBoundingBox("x114");
-        tree.do.dragOver("x114", event);
+        tree.setElementBoundingBox("x2");
+        tree.setElementBoundingBox("x144");
+        tree.do.dragOver("x144", event);
         tree.expect.defaultDragLineProps(0);
       });
     });
@@ -316,10 +309,6 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).toHaveBeenCalledWith(
           event.dataTransfer,
           {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x11"),
           },
         );
@@ -371,10 +360,10 @@ describe("core-feature/drag-and-drop", () => {
 
       suiteTree.resetBeforeEach();
 
-      it("drags within same tree on folder", () => {
+      it("drags within same tree on expanded folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x21");
+        await suiteTree.do.dragOverAndDrop("x21");
         expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -386,10 +375,26 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags within same tree inside folder", () => {
+      it("drags within same tree on collapsed folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop(
+        suiteTree.do.dragOverAndDrop("x22");
+        await suiteTree.resolveAsyncVisibleItems();
+        expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
+        expect(changeChildren).toHaveBeenCalledWith("x22", [
+          "x221",
+          "x222",
+          "x223",
+          "x224",
+          "x111",
+          "x112",
+        ]);
+      });
+
+      it("drags within same tree inside folder", async () => {
+        suiteTree.do.selectMultiple("x111", "x112");
+        suiteTree.do.startDrag("x111");
+        await suiteTree.do.dragOverAndDrop(
           "x212",
           suiteTree.createBottomDragEvent(2),
         );
@@ -456,10 +461,6 @@ describe("core-feature/drag-and-drop", () => {
         const e = TestTree.dragEvent();
         suiteTree.do.drop("x21", e);
         expect(onDropForeignDragObject).toBeCalledWith(e.dataTransfer, {
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
           item: suiteTree.item("x21"),
         });
       });
@@ -476,10 +477,13 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).not.toHaveBeenCalled();
       });
 
-      it("drags multiple within in retained order (correct order)", () => {
+      it("drags multiple within in retained order (correct order)", async () => {
         suiteTree.do.selectMultiple("x111", "x112", "x113", "x114");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -493,10 +497,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (inverse order)", () => {
+      it("drags multiple within in retained order (inverse order)", async () => {
         suiteTree.do.selectMultiple("x114", "x113", "x112", "x111");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -510,10 +517,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (scrambled order)", () => {
+      it("drags multiple within in retained order (scrambled order)", async () => {
         suiteTree.do.selectMultiple("x111", "x114", "x112", "x113");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -540,10 +550,6 @@ describe("core-feature/drag-and-drop", () => {
         testTree.do.startDrag("x111");
         testTree.do.dragOverAndDrop("x212", testTree.createBottomDragEvent(2));
         testTree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -603,21 +609,9 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.dragOverNotAllowed("x2");
         expect(canDrop).toHaveBeenCalledWith([tree.item("x111")], {
           item: tree.item("x2"),
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
         });
       });
 
-      it.todo("item with canDrag=false is not draggable", () => {
-        const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
-        expect(tree.instance.getItemInstance("x111").getProps().draggable).toBe(
-          false,
-        );
-        expect(canDrag).toHaveBeenCalledWith([tree.item("x111")]);
-      });
-
       it("item with canDrag=false does not invoke drag handler when dragged", () => {
         const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
         const setDndState = tree.mockedHandler("setDndState");
@@ -637,10 +631,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -652,30 +642,26 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x114");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
     });
 
     describe("item instance methods", () => {
-      it("returns isDropTarget() correct for folders", () => {
+      it("returns isDragTarget() correct for folders", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x21");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });
 
-      it("returns isDropTarget() correct for items", () => {
+      it("returns isDragTarget() correct for items", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x211");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });

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

@@ -1,6 +1,11 @@
 import { FeatureImplementation } from "../../types/core";
 import { DndDataRef, DragLineData } from "./types";
-import { canDrop, getDragCode, getDropTarget } from "./utils";
+import {
+  canDrop,
+  getDragCode,
+  getDragTarget,
+  isOrderedDragTarget,
+} from "./utils";
 import { makeStateUpdater } from "../../utils";
 
 export const dragAndDropFeature: FeatureImplementation = {
@@ -20,17 +25,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 || !isOrderedDragTarget(target)) return null;
 
       const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
       const targetItem = tree.getItems()[target.dragLineIndex];
@@ -44,7 +49,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 +82,8 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }) => {
-      const prevProps = prev?.();
+    getContainerProps: ({ prev }, treeLabel) => {
+      const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
         style: {
@@ -93,7 +98,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 +136,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 +184,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 +200,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 ||
+        !isOrderedDragTarget(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 ||
+        !isOrderedDragTarget(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;