@headless-tree/core 0.0.10 → 0.0.12

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

@@ -1,20 +1,17 @@
-import { FeatureDefs, FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragAndDropFeatureDef, DragLineData } from "./types";
+import { FeatureImplementation } from "../../types/core";
+import { DndDataRef, DragLineData } from "./types";
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
-export const dragAndDropFeature: FeatureImplementation<
-  any,
-  DragAndDropFeatureDef<any>,
-  FeatureDefs<any>
-> = {
-  key: "dragAndDrop",
+export const dragAndDropFeature: FeatureImplementation = {
+  key: "drag-and-drop",
   deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
     canDropForeignDragObject: () => false,
     setDndState: makeStateUpdater("dnd", tree),
+    canReorder: true,
     ...defaultConfig,
   }),
 
@@ -22,62 +19,83 @@ export const dragAndDropFeature: FeatureImplementation<
     dnd: "setDndState",
   },
 
-  createTreeInstance: (prev, tree) => ({
-    ...prev,
-
-    getDropTarget: () => {
+  treeInstance: {
+    getDropTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
     },
 
-    getDragLineData: (): DragLineData | null => {
+    getDragLineData: ({ tree }): DragLineData | null => {
       const target = tree.getDropTarget();
-      const intend = (target?.item.getItemMeta().level ?? 0) + 1;
+      const indent = (target?.item.getItemMeta().level ?? 0) + 1;
+
+      const treeBb = tree.getElement()?.getBoundingClientRect();
 
-      if (!target || target.childIndex === null) return null;
+      if (!target || !treeBb || target.childIndex === null) return null;
 
-      const children = target.item.getChildren();
+      const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
+      const targetItem = tree.getItems()[target.dragLineIndex];
 
-      if (target.childIndex === children.length) {
-        const bb = children[target.childIndex - 1]
-          ?.getElement()
+      if (!targetItem) {
+        const bb = tree
+          .getItems()
+          [target.dragLineIndex - 1]?.getElement()
           ?.getBoundingClientRect();
 
         if (bb) {
           return {
-            intend,
-            top: bb.bottom,
-            left: bb.left,
-            right: bb.right,
+            indent,
+            top: bb.bottom - treeBb.bottom,
+            left: bb.left + leftOffset - treeBb.left,
+            width: bb.width - leftOffset,
           };
         }
       }
 
-      const bb = children[target.childIndex]
-        ?.getElement()
-        ?.getBoundingClientRect();
+      const bb = targetItem.getElement()?.getBoundingClientRect();
 
       if (bb) {
         return {
-          intend,
-          top: bb.top,
-          left: bb.left,
-          right: bb.right,
+          indent,
+          top: bb.top - treeBb.top,
+          left: bb.left + leftOffset - treeBb.left,
+          width: bb.width - leftOffset,
         };
       }
 
       return null;
     },
-  }),
 
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
+    getDragLineStyle: ({ tree }, topOffset = -1, leftOffset = -8) => {
+      const dragLine = tree.getDragLineData();
+      return dragLine
+        ? {
+            top: `${dragLine.top + topOffset}px`,
+            left: `${dragLine.left + leftOffset}px`,
+            width: `${dragLine.width - leftOffset}px`,
+            pointerEvents: "none", // important to prevent capturing drag events
+          }
+        : { display: "none" };
+    },
+
+    getContainerProps: ({ prev }) => {
+      const prevProps = prev?.();
+      return {
+        ...prevProps,
+        style: {
+          ...prevProps?.style,
+          position: "relative",
+        },
+      };
+    },
+  },
 
-    getProps: () => ({
-      ...prev.getProps(),
+  itemInstance: {
+    getProps: ({ tree, item, prev }) => ({
+      ...prev?.(),
 
       draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
 
-      onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
+      onDragStart: (e: DragEvent) => {
         const selectedItems = tree.getSelectedItems();
         const items = selectedItems.includes(item) ? selectedItems : [item];
         const config = tree.getConfig();
@@ -100,40 +118,47 @@ export const dragAndDropFeature: FeatureImplementation<
           draggedItems: items,
           draggingOverItem: tree.getFocusedItem(),
         });
-      }),
+      },
 
-      onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
-        const target = getDropTarget(e, item, tree);
+      onDragOver: (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
+        const nextDragCode = getDragCode(e, item, tree);
+        if (nextDragCode === dataRef.current.lastDragCode) {
+          if (dataRef.current.lastAllowDrop) {
+            e.preventDefault();
+          }
+          return;
+        }
+        dataRef.current.lastDragCode = nextDragCode;
+
+        const target = getDropTarget(e, item, tree);
 
         if (
           !tree.getState().dnd?.draggedItems &&
-          !tree.getConfig().canDropForeignDragObject?.(e.dataTransfer, target)
+          (!e.dataTransfer ||
+            !tree
+              .getConfig()
+              .canDropForeignDragObject?.(e.dataTransfer, target))
         ) {
+          dataRef.current.lastAllowDrop = false;
           return;
         }
 
         if (!canDrop(e.dataTransfer, target, tree)) {
+          dataRef.current.lastAllowDrop = false;
           return;
         }
 
-        e.preventDefault();
-        const nextDragCode = getDragCode(target);
-
-        if (nextDragCode === dataRef.current.lastDragCode) {
-          return;
-        }
-
-        dataRef.current.lastDragCode = nextDragCode;
-
         tree.applySubStateUpdate("dnd", (state) => ({
           ...state,
           dragTarget: target,
           draggingOverItem: item,
         }));
-      }),
+        dataRef.current.lastAllowDrop = true;
+        e.preventDefault();
+      },
 
-      onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
+      onDragLeave: () => {
         const dataRef = tree.getDataRef<DndDataRef>();
         dataRef.current.lastDragCode = "no-drag";
         tree.applySubStateUpdate("dnd", (state) => ({
@@ -141,20 +166,20 @@ export const dragAndDropFeature: FeatureImplementation<
           draggingOverItem: undefined,
           dragTarget: undefined,
         }));
-      }),
+      },
 
-      onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+      onDragEnd: (e: DragEvent) => {
         const draggedItems = tree.getState().dnd?.draggedItems;
         tree.applySubStateUpdate("dnd", null);
 
-        if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
           return;
         }
 
         tree.getConfig().onCompleteForeignDrop?.(draggedItems);
-      }),
+      },
 
-      onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
+      onDrop: (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
 
@@ -171,19 +196,19 @@ export const dragAndDropFeature: FeatureImplementation<
 
         if (draggedItems) {
           config.onDrop?.(draggedItems, target);
-        } else {
+        } else if (e.dataTransfer) {
           config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
         // TODO rebuild tree?
-      }),
+      },
     }),
 
-    isDropTarget: () => {
+    isDropTarget: ({ tree, item }) => {
       const target = tree.getDropTarget();
       return target ? target.item.getId() === item.getId() : false;
     },
 
-    isDropTargetAbove: () => {
+    isDropTargetAbove: ({ tree, item }) => {
       const target = tree.getDropTarget();
 
       if (
@@ -195,7 +220,7 @@ export const dragAndDropFeature: FeatureImplementation<
       return target.childIndex === item.getItemMeta().posInSet;
     },
 
-    isDropTargetBelow: () => {
+    isDropTargetBelow: ({ tree, item }) => {
       const target = tree.getDropTarget();
 
       if (
@@ -207,8 +232,8 @@ export const dragAndDropFeature: FeatureImplementation<
       return target.childIndex - 1 === item.getItemMeta().posInSet;
     },
 
-    isDraggingOver: () => {
+    isDraggingOver: ({ tree, item }) => {
       return tree.getState().dnd?.draggingOverItem?.getId() === item.getId();
     },
-  }),
+  },
 };

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

@@ -2,19 +2,20 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 
 export type DndDataRef = {
   lastDragCode?: string;
+  lastAllowDrop?: boolean;
 };
 
 export type DndState<T> = {
-  draggedItems?: ItemInstance<T>[]; // TODO not used anymore?
+  draggedItems?: ItemInstance<T>[];
   draggingOverItem?: ItemInstance<T>;
   dragTarget?: DropTarget<T>;
 };
 
 export type DragLineData = {
-  intend: number;
+  indent: number;
   top: number;
   left: number;
-  right: number;
+  width: number;
 };
 
 export type DropTarget<T> =
@@ -22,11 +23,15 @@ export type DropTarget<T> =
       item: ItemInstance<T>;
       childIndex: number;
       insertionIndex: number;
+      dragLineIndex: number;
+      dragLineLevel: number;
     }
   | {
-      item: ItemInstance<T>;
+      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;
     };
 
 export enum DropTargetPosition {
@@ -40,16 +45,21 @@ export type DragAndDropFeatureDef<T> = {
     dnd?: DndState<T> | null;
   };
   config: {
-    setDndState?: SetStateFn<DndState<T> | null>;
+    setDndState?: SetStateFn<DndState<T> | undefined | null>;
 
-    topLinePercentage?: number;
-    bottomLinePercentage?: number;
-    canDropInbetween?: boolean;
+    /** Defines the size of the area at the top and bottom of an item where, when an item is dropped, the item willö
+     * be placed above or below the item within the same parent, as opposed to being placed inside the item.
+     * If `canReorder` is `false`, this is ignored. */
+    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;
 
+    indent?: number;
+
     createForeignDragObject?: (items: ItemInstance<T>[]) => {
       format: string;
       data: any;
@@ -78,11 +88,15 @@ export type DragAndDropFeatureDef<T> = {
   treeInstance: {
     getDropTarget: () => DropTarget<T> | null;
     getDragLineData: () => DragLineData | null;
+    getDragLineStyle: (
+      topOffset?: number,
+      leftOffset?: number,
+    ) => Record<string, any>;
   };
   itemInstance: {
     isDropTarget: () => boolean;
-    isDropTargetAbove: () => boolean;
-    isDropTargetBelow: () => boolean;
+    isDropTargetAbove: () => boolean; // TODO still correct?
+    isDropTargetBelow: () => boolean; // TODO still correct?
     isDraggingOver: () => boolean;
   };
   hotkeys: never;

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

@@ -1,13 +1,30 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget, DropTargetPosition } from "./types";
-
-export const getDragCode = ({ item, childIndex }: DropTarget<any>) =>
-  `${item.getId()}__${childIndex ?? "none"}`;
-
-export const getDropOffset = (e: any, item: ItemInstance<any>): number => {
-  const bb = item.getElement()?.getBoundingClientRect();
-  return bb ? (e.pageY - bb.top) / bb.height : 0.5;
-};
+import { DropTarget } from "./types";
+
+enum ItemDropCategory {
+  Item,
+  ExpandedFolder,
+  LastInGroup,
+}
+
+enum PlacementType {
+  ReorderAbove,
+  ReorderBelow,
+  MakeChild,
+  Reparent,
+}
+
+type TargetPlacement =
+  | {
+      type:
+        | PlacementType.ReorderAbove
+        | PlacementType.ReorderBelow
+        | PlacementType.MakeChild;
+    }
+  | {
+      type: PlacementType.Reparent;
+      reparentLevel: number;
+    };
 
 export const canDrop = (
   dataTransfer: DataTransfer | null,
@@ -21,6 +38,17 @@ export const canDrop = (
     return false;
   }
 
+  if (
+    draggedItems &&
+    draggedItems.some(
+      (draggedItem) =>
+        target.item.getId() === draggedItem.getId() ||
+        target.item.isDescendentOf(draggedItem.getId()),
+    )
+  ) {
+    return false;
+  }
+
   if (
     !draggedItems &&
     dataTransfer &&
@@ -32,79 +60,192 @@ export const canDrop = (
   return true;
 };
 
-const getDropTargetPosition = (
-  offset: number,
-  topLinePercentage: number,
-  bottomLinePercentage: number,
-) => {
-  if (offset < topLinePercentage) {
-    return DropTargetPosition.Top;
+const getItemDropCategory = (item: ItemInstance<any>) => {
+  if (item.isExpanded()) {
+    return ItemDropCategory.ExpandedFolder;
   }
-  if (offset > bottomLinePercentage) {
-    return DropTargetPosition.Bottom;
+
+  const parent = item.getParent();
+  if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+    return ItemDropCategory.LastInGroup;
   }
-  return DropTargetPosition.Item;
+
+  return ItemDropCategory.Item;
+};
+
+const getTargetPlacement = (
+  e: any,
+  item: ItemInstance<any>,
+  tree: TreeInstance<any>,
+  canMakeChild: boolean,
+): TargetPlacement => {
+  const config = tree.getConfig();
+
+  if (!config.canReorder) {
+    return canMakeChild
+      ? { type: PlacementType.MakeChild }
+      : { type: PlacementType.ReorderBelow };
+  }
+
+  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 targetDropCategory = getItemDropCategory(item);
+  const reorderAreaPercentage = !canMakeChild
+    ? 0.5
+    : config.reorderAreaPercentage ?? 0.3;
+  const indent = config.indent ?? 20;
+  const makeChildType = canMakeChild
+    ? PlacementType.MakeChild
+    : PlacementType.ReorderBelow;
+
+  if (targetDropCategory === ItemDropCategory.ExpandedFolder) {
+    if (topPercent < reorderAreaPercentage) {
+      return { type: PlacementType.ReorderAbove };
+    }
+    return { type: makeChildType };
+  }
+
+  if (targetDropCategory === ItemDropCategory.LastInGroup) {
+    if (leftPixels < item.getItemMeta().level * indent) {
+      if (topPercent < 0.5) {
+        return { type: PlacementType.ReorderAbove };
+      }
+      return {
+        type: PlacementType.Reparent,
+        reparentLevel: Math.floor(leftPixels / indent),
+      };
+    }
+    // if not at left of item area, treat as if it was a normal item
+  }
+
+  // targetDropCategory === ItemDropCategory.Item
+  if (topPercent < reorderAreaPercentage) {
+    return { type: PlacementType.ReorderAbove };
+  }
+  if (topPercent > 1 - reorderAreaPercentage) {
+    return { type: PlacementType.ReorderBelow };
+  }
+  return { type: makeChildType };
+};
+
+export const getDragCode = (
+  e: any,
+  item: ItemInstance<any>,
+  tree: TreeInstance<any>,
+) => {
+  const placement = getTargetPlacement(e, item, tree, true);
+  return [
+    item.getId(),
+    placement.type,
+    placement.type === PlacementType.Reparent ? placement.reparentLevel : 0,
+  ].join("__");
+};
+
+const getNthParent = (
+  item: ItemInstance<any>,
+  n: number,
+): ItemInstance<any> => {
+  if (n === item.getItemMeta().level) {
+    return item;
+  }
+  return getNthParent(item.getParent()!, n);
 };
 
 export const getDropTarget = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
-  canDropInbetween = tree.getConfig().canDropInbetween,
+  canReorder = tree.getConfig().canReorder,
 ): DropTarget<any> => {
-  const config = tree.getConfig();
   const draggedItems = tree.getState().dnd?.draggedItems ?? [];
-  const itemTarget = { item, childIndex: null, insertionIndex: null };
-  const parentTarget = {
-    item: item.getParent(),
+  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 canBecomeSibling =
+    parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
+
+  const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
+  const placement = getTargetPlacement(e, item, tree, canMakeChild);
 
-  if (!canDropInbetween) {
-    if (!canDrop(e.dataTransfer, parentTarget, tree)) {
-      return getDropTarget(e, item.getParent(), tree, false);
-    }
-    return itemTarget;
+  if (
+    !canReorder &&
+    parent &&
+    canBecomeSibling &&
+    placement.type !== PlacementType.MakeChild
+  ) {
+    return parentTarget;
   }
 
-  const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
-
-  const offset = getDropOffset(e, item);
+  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);
+  }
 
-  const pos = canDropInside
-    ? getDropTargetPosition(
-        offset,
-        config.topLinePercentage ?? 0.3,
-        config.bottomLinePercentage ?? 0.7,
-      )
-    : getDropTargetPosition(offset, 0.5, 0.5);
+  if (!parent) {
+    // Shouldn't happen, but if dropped "next" to root item, just drop it inside
+    return itemTarget;
+  }
 
-  if (pos === DropTargetPosition.Item) {
+  if (placement.type === PlacementType.MakeChild) {
     return itemTarget;
   }
 
-  if (!canDrop(e.dataTransfer, parentTarget, tree)) {
-    return getDropTarget(e, item.getParent(), tree, false);
+  if (!canBecomeSibling) {
+    return getDropTarget(e, parent, tree, false);
   }
 
-  const childIndex =
-    item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
+  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,
+    };
+  }
 
-  const numberOfDragItemsBeforeTarget = item
-    .getParent()
-    .getChildren()
-    .slice(0, childIndex)
-    .reduce(
-      (counter, child) =>
-        child && draggedItems?.some((i) => i.getId() === child.getId())
-          ? ++counter
-          : counter,
-      0,
-    );
+  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: item.getParent(),
+    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,