@headless-tree/core 0.0.9 → 0.0.11

package/lib/esm/features/async-data-loader/feature.js

@@ -6,18 +6,19 @@ export const asyncDataLoaderFeature = {
     stateHandlerNames: {
         loadingItems: "setLoadingItems",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
+    treeInstance: {
+        retrieveItemData: ({ tree }, itemId) => {
             var _a, _b, _c, _d, _e;
             var _f, _g;
-            const config = instance.getConfig();
-            const dataRef = instance.getDataRef();
+            const config = tree.getConfig();
+            const dataRef = tree.getDataRef();
             (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
             (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
-            if (!instance.getState().loadingItems.includes(itemId)) {
-                instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+            if (!tree.getState().loadingItems.includes(itemId)) {
+                tree.applySubStateUpdate("loadingItems", (loadingItems) => [
                     ...loadingItems,
                     itemId,
                 ]);
@@ -25,24 +26,25 @@ export const asyncDataLoaderFeature = {
                     var _a;
                     dataRef.current.itemData[itemId] = item;
                     (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                 });
             }
             return (_e = (_d = config.createLoadingItemData) === null || _d === void 0 ? void 0 : _d.call(config)) !== null && _e !== void 0 ? _e : null;
-        }, retrieveChildrenIds: (itemId) => {
+        },
+        retrieveChildrenIds: ({ tree }, itemId) => {
             var _a, _b, _c, _d, _e;
             var _f, _g;
-            const config = instance.getConfig();
-            const dataRef = instance.getDataRef();
+            const config = tree.getConfig();
+            const dataRef = tree.getDataRef();
             (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
             (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (instance.getState().loadingItems.includes(itemId)) {
+            if (tree.getState().loadingItems.includes(itemId)) {
                 return [];
             }
-            instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+            tree.applySubStateUpdate("loadingItems", (loadingItems) => [
                 ...loadingItems,
                 itemId,
             ]);
@@ -56,8 +58,8 @@ export const asyncDataLoaderFeature = {
                     const childrenIds = children.map(({ id }) => id);
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    instance.rebuildTree();
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.rebuildTree();
                 });
             }
             else {
@@ -65,21 +67,33 @@ export const asyncDataLoaderFeature = {
                     var _a;
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    instance.rebuildTree();
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.rebuildTree();
                 });
             }
             return [];
-        }, invalidateItemData: (itemId) => {
+        },
+        invalidateItemData: ({ tree }, itemId) => {
             var _a;
-            const dataRef = instance.getDataRef();
+            const dataRef = tree.getDataRef();
             (_a = dataRef.current.itemData) === null || _a === void 0 ? true : delete _a[itemId];
-            instance.retrieveItemData(itemId);
-        }, invalidateChildrenIds: (itemId) => {
+            tree.retrieveItemData(itemId);
+        },
+        invalidateChildrenIds: ({ tree }, itemId) => {
             var _a;
-            const dataRef = instance.getDataRef();
+            const dataRef = tree.getDataRef();
             (_a = dataRef.current.childrenIds) === null || _a === void 0 ? true : delete _a[itemId];
-            instance.retrieveChildrenIds(itemId);
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isLoading: () => tree.getState().loadingItems.includes(item.getItemMeta().itemId), invalidateItemData: () => tree.invalidateItemData(item.getItemMeta().itemId), invalidateChildrenIds: () => tree.invalidateChildrenIds(item.getItemMeta().itemId) })),
+            tree.retrieveChildrenIds(itemId);
+        },
+    },
+    itemInstance: {
+        isLoading: ({ tree, item }) => tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+        invalidateItemData: ({ tree, item }) => tree.invalidateItemData(item.getItemMeta().itemId),
+        invalidateChildrenIds: ({ tree, item }) => tree.invalidateChildrenIds(item.getItemMeta().itemId),
+        updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
+            const dataRef = tree.getDataRef();
+            dataRef.current.childrenIds[itemId] = childrenIds;
+            tree.rebuildTree();
+        },
+    },
 };

package/lib/esm/features/async-data-loader/types.d.ts

@@ -35,7 +35,8 @@ export type AsyncDataLoaderFeatureDef<T> = {
     itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
         invalidateItemData: () => void;
         invalidateChildrenIds: () => void;
-        isLoading: () => void;
+        updateCachedChildrenIds: (childrenIds: string[]) => void;
+        isLoading: () => boolean;
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };

package/lib/esm/features/drag-and-drop/feature.js

@@ -3,45 +3,64 @@ import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "dragAndDrop",
     deps: ["selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree), canDropInbetween: true }, defaultConfig)),
     stateHandlerNames: {
         dnd: "setDndState",
     },
-    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
+    treeInstance: {
+        getDropTarget: ({ tree }) => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
-        }, getDragLineData: () => {
+        },
+        getDragLineData: ({ tree }) => {
             var _a, _b, _c, _d, _e;
+            // TODO doesnt work if scrolled down!
             const target = tree.getDropTarget();
-            const intend = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
+            const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1; // TODO rename to indent
             if (!target || target.childIndex === null)
                 return null;
-            const children = target.item.getChildren();
-            if (target.childIndex === children.length) {
-                const bb = (_c = (_b = children[target.childIndex - 1]) === null || _b === void 0 ? void 0 : _b.getElement()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+            const leftOffset = target.dragLineLevel * ((_b = tree.getConfig().indent) !== null && _b !== void 0 ? _b : 1);
+            const targetItem = tree.getItems()[target.dragLineIndex];
+            if (!targetItem) {
+                const bb = (_d = (_c = tree
+                    .getItems()[target.dragLineIndex - 1]) === null || _c === void 0 ? void 0 : _c.getElement()) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
                 if (bb) {
                     return {
-                        intend,
+                        indent,
                         top: bb.bottom,
-                        left: bb.left,
+                        left: bb.left + leftOffset,
                         right: bb.right,
                     };
                 }
             }
-            const bb = (_e = (_d = children[target.childIndex]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            const bb = (_e = targetItem.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
             if (bb) {
                 return {
-                    intend,
+                    indent,
                     top: bb.top,
-                    left: bb.left,
+                    left: bb.left + leftOffset,
                     right: bb.right,
                 };
             }
             return null;
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
+        },
+        getDragLineStyle: ({ tree }, topOffset = -1, leftOffset = -8) => {
+            const dragLine = tree.getDragLineData();
+            return dragLine
+                ? {
+                    top: `${dragLine.top + topOffset}px`,
+                    left: `${dragLine.left + leftOffset}px`,
+                    width: `${dragLine.right - dragLine.left - leftOffset}px`,
+                    pointerEvents: "none", // important to prevent capturing drag events
+                }
+                : { display: "none" };
+        },
+    },
+    itemInstance: {
+        // TODO instead of individual getMemoizedProp calls, use a wrapped getMemoizedProps or something (getProps: () => getMemoized({...})
+        getProps: ({ tree, item, prev }) => {
             var _a, _b, _c;
-            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
+            return (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
                     var _a, _b, _c;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -63,34 +82,42 @@ export const dragAndDropFeature = {
                     });
                 }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
                     var _a, _b, _c;
-                    const target = getDropTarget(e, item, tree);
                     const dataRef = tree.getDataRef();
-                    if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
-                        !((_c = (_b = tree.getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target))) {
+                    const nextDragCode = getDragCode(e, item, tree);
+                    if (nextDragCode === dataRef.current.lastDragCode) {
+                        if (dataRef.current.lastAllowDrop) {
+                            e.preventDefault();
+                        }
                         return;
                     }
-                    if (!canDrop(e.dataTransfer, target, tree)) {
+                    dataRef.current.lastDragCode = nextDragCode;
+                    const target = getDropTarget(e, item, tree);
+                    if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
+                        (!e.dataTransfer ||
+                            !((_c = (_b = tree
+                                .getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
+                        dataRef.current.lastAllowDrop = false;
                         return;
                     }
-                    e.preventDefault();
-                    const nextDragCode = getDragCode(target);
-                    if (nextDragCode === dataRef.current.lastDragCode) {
+                    if (!canDrop(e.dataTransfer, target, tree)) {
+                        dataRef.current.lastAllowDrop = false;
                         return;
                     }
-                    dataRef.current.lastDragCode = nextDragCode;
                     tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                    dataRef.current.lastAllowDrop = true;
+                    e.preventDefault();
                 }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
                     const dataRef = tree.getDataRef();
                     dataRef.current.lastDragCode = "no-drag";
                     tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
                 }), onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                     tree.applySubStateUpdate("dnd", null);
-                    if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+                    if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
                         return;
                     }
-                    (_c = (_b = tree.getConfig()).onCompleteForeignDrop) === null || _c === void 0 ? void 0 : _c.call(_b, draggedItems);
+                    (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
                 }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
                     var _a, _b, _c;
                     const dataRef = tree.getDataRef();
@@ -106,30 +133,35 @@ export const dragAndDropFeature = {
                     if (draggedItems) {
                         (_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target);
                     }
-                    else {
+                    else if (e.dataTransfer) {
                         (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, 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 (!target ||
                 target.childIndex === null ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
-        }, isDropTargetBelow: () => {
+        },
+        isDropTargetBelow: ({ tree, item }) => {
             const target = tree.getDropTarget();
             if (!target ||
                 target.childIndex === null ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;
-        }, isDraggingOver: () => {
+        },
+        isDraggingOver: ({ tree, item }) => {
             var _a, _b;
             return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
-        } })),
+        },
+    },
 };

package/lib/esm/features/drag-and-drop/types.d.ts

@@ -1,6 +1,7 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 export type DndDataRef = {
     lastDragCode?: string;
+    lastAllowDrop?: boolean;
 };
 export type DndState<T> = {
     draggedItems?: ItemInstance<T>[];
@@ -8,7 +9,7 @@ export type DndState<T> = {
     dragTarget?: DropTarget<T>;
 };
 export type DragLineData = {
-    intend: number;
+    indent: number;
     top: number;
     left: number;
     right: number;
@@ -17,10 +18,14 @@ export type DropTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
     insertionIndex: number;
+    dragLineIndex: number;
+    dragLineLevel: number;
 } | {
     item: ItemInstance<T>;
     childIndex: null;
     insertionIndex: null;
+    dragLineIndex: null;
+    dragLineLevel: null;
 };
 export declare enum DropTargetPosition {
     Top = "top",
@@ -32,13 +37,16 @@ export type DragAndDropFeatureDef<T> = {
         dnd?: DndState<T> | null;
     };
     config: {
-        setDndState?: SetStateFn<DndState<T> | null>;
-        topLinePercentage?: number;
-        bottomLinePercentage?: number;
+        setDndState?: SetStateFn<DndState<T> | undefined | null>;
+        /** 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 `canDropInbetween` is `false`, this is ignored. */
+        reorderAreaPercentage?: number;
         canDropInbetween?: boolean;
         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;
@@ -58,6 +66,7 @@ export type DragAndDropFeatureDef<T> = {
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;
         getDragLineData: () => DragLineData | null;
+        getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
         isDropTarget: () => boolean;

package/lib/esm/features/drag-and-drop/utils.d.ts

@@ -1,6 +1,5 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
 import { DropTarget } from "./types";
-export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => string;
-export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
 export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
+export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
 export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canDropInbetween?: boolean | undefined) => DropTarget<any>;

package/lib/esm/features/drag-and-drop/utils.js

@@ -1,10 +1,16 @@
-import { DropTargetPosition } from "./types";
-export const getDragCode = ({ item, childIndex }) => `${item.getId()}__${childIndex !== null && childIndex !== void 0 ? childIndex : "none"}`;
-export const getDropOffset = (e, item) => {
-    var _a;
-    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    return bb ? (e.pageY - bb.top) / bb.height : 0.5;
-};
+var ItemDropCategory;
+(function (ItemDropCategory) {
+    ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
+    ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
+    ItemDropCategory[ItemDropCategory["LastInGroup"] = 2] = "LastInGroup";
+})(ItemDropCategory || (ItemDropCategory = {}));
+var PlacementType;
+(function (PlacementType) {
+    PlacementType[PlacementType["ReorderAbove"] = 0] = "ReorderAbove";
+    PlacementType[PlacementType["ReorderBelow"] = 1] = "ReorderBelow";
+    PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
+    PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
+})(PlacementType || (PlacementType = {}));
 export const canDrop = (dataTransfer, target, tree) => {
     var _a, _b, _c, _d;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
@@ -12,6 +18,11 @@ export const canDrop = (dataTransfer, target, tree) => {
     if (draggedItems && !((_c = (_b = config.canDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target)) !== null && _c !== void 0 ? _c : true)) {
         return false;
     }
+    if (draggedItems &&
+        draggedItems.some((draggedItem) => target.item.getId() === draggedItem.getId() ||
+            target.item.isDescendentOf(draggedItem.getId()))) {
+        return false;
+    }
     if (!draggedItems &&
         dataTransfer &&
         !((_d = config.canDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target))) {
@@ -19,52 +30,145 @@ export const canDrop = (dataTransfer, target, tree) => {
     }
     return true;
 };
-const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage) => {
-    if (offset < topLinePercentage) {
-        return DropTargetPosition.Top;
+const getItemDropCategory = (item) => {
+    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;
 };
-export const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
-    var _a, _b, _c, _d;
+const getTargetPlacement = (e, item, tree, canMakeChild) => {
+    var _a, _b, _c;
     const config = tree.getConfig();
+    if (!config.canDropInbetween) {
+        return canMakeChild
+            ? { type: PlacementType.MakeChild }
+            : { type: PlacementType.ReorderBelow };
+    }
+    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.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
+        : (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
+    const indent = (_c = config.indent) !== null && _c !== void 0 ? _c : 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, item, tree) => {
+    const placement = getTargetPlacement(e, item, tree, true);
+    return [
+        item.getId(),
+        placement.type,
+        placement.type === PlacementType.Reparent ? placement.reparentLevel : 0,
+    ].join("__");
+};
+const getNthParent = (item, n) => {
+    if (n === item.getItemMeta().level) {
+        return item;
+    }
+    return getNthParent(item.getParent(), n);
+};
+export const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
+    var _a, _b, _c;
     const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
-    const itemTarget = { item, childIndex: null, insertionIndex: null };
-    const parentTarget = {
-        item: item.getParent(),
+    const itemMeta = item.getItemMeta();
+    const parent = item.getParent();
+    const itemTarget = {
+        item,
         childIndex: null,
         insertionIndex: null,
+        dragLineIndex: null,
+        dragLineLevel: null,
     };
-    if (!canDropInbetween) {
-        if (!canDrop(e.dataTransfer, parentTarget, tree)) {
-            return getDropTarget(e, item.getParent(), tree, false);
+    const parentTarget = 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 &&
+        parent &&
+        canBecomeSibling &&
+        placement.type !== PlacementType.MakeChild) {
+        return parentTarget;
+    }
+    if (!canDropInbetween && parent && !canBecomeSibling) {
+        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
+        return getDropTarget(e, parent, tree, false);
+    }
+    if (!parent) {
+        // Shouldn't happen, but if dropped "next" to root item, just drop it inside
         return itemTarget;
     }
-    const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
-    const offset = getDropOffset(e, item);
-    const pos = canDropInside
-        ? getDropTargetPosition(offset, (_c = config.topLinePercentage) !== null && _c !== void 0 ? _c : 0.3, (_d = config.bottomLinePercentage) !== null && _d !== void 0 ? _d : 0.7)
-        : getDropTargetPosition(offset, 0.5, 0.5);
-    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);
+    }
+    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 childIndex = item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
-    const numberOfDragItemsBeforeTarget = item
-        .getParent()
+    const maybeAddOneForBelow = placement.type === PlacementType.ReorderAbove ? 0 : 1;
+    const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
+    const numberOfDragItemsBeforeTarget = (_c = parent
         .getChildren()
         .slice(0, childIndex)
         .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
         ? ++counter
-        : counter, 0);
+        : counter, 0)) !== null && _c !== void 0 ? _c : 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,

package/lib/esm/features/expand-all/feature.js

@@ -10,13 +10,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { poll } from "../../utils";
 export const expandAllFeature = {
     key: "expand-all",
-    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+    treeInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree }, cancelToken) {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ tree }) => {
             tree.applySubStateUpdate("expandedItems", []);
             tree.rebuildTree();
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+        },
+    },
+    itemInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree, item }, cancelToken) {
             if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
                 return;
             }
@@ -29,10 +33,12 @@ export const expandAllFeature = {
                 yield poll(() => !tree.getState().loadingItems.includes(child.getId()));
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ item }) => {
             for (const child of item.getChildren()) {
                 child === null || child === void 0 ? void 0 : child.collapseAll();
             }
             item.collapse();
-        } })),
+        },
+    },
 };

package/lib/esm/features/main/types.d.ts

@@ -1,12 +1,18 @@
-import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState, Updater } from "../../types/core";
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeInstance, TreeState, Updater } from "../../types/core";
 import { ItemMeta } from "../tree/types";
+export type InstanceTypeMap = {
+    itemInstance: ItemInstance<any>;
+    treeInstance: TreeInstance<any>;
+};
+export type InstanceBuilder = <T extends keyof InstanceTypeMap>(features: FeatureImplementation[], instanceType: T, buildOpts: (self: any) => any) => [instance: InstanceTypeMap[T], finalize: () => void];
 export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
         initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
-        setState?: SetStateFn<TreeState<T>>;
+        setState?: SetStateFn<Partial<TreeState<T>>>;
+        instanceBuilder?: InstanceBuilder;
     };
     treeInstance: {
         /** @internal */