@headless-tree/core 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @headless-tree/core
 
+## 0.0.11
+
+### Patch Changes
+
+- 7ed33ac: dev release
+
 ## 0.0.10
 
 ### Patch Changes

package/lib/cjs/core/build-proxified-instance.d.ts

@@ -0,0 +1,2 @@
+import { InstanceBuilder } from "../features/main/types";
+export declare const buildProxiedInstance: InstanceBuilder;

package/lib/cjs/core/build-proxified-instance.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildProxiedInstance = void 0;
+const errors_1 = require("../utilities/errors");
+const noop = () => { };
+const findPrevInstanceMethod = (features, instanceType, methodKey, featureSearchIndex) => {
+    var _a;
+    for (let i = featureSearchIndex; i >= 0; i--) {
+        const feature = features[i];
+        const itemInstanceMethod = (_a = feature[instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+        if (itemInstanceMethod) {
+            return i;
+        }
+    }
+    return null;
+};
+const invokeInstanceMethod = (features, instanceType, opts, methodKey, featureIndex, args) => {
+    var _a;
+    const prevIndex = findPrevInstanceMethod(features, instanceType, methodKey, featureIndex - 1);
+    const itemInstanceMethod = (_a = features[featureIndex][instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+    return itemInstanceMethod(Object.assign(Object.assign({}, opts), { prev: prevIndex !== null
+            ? (...newArgs) => invokeInstanceMethod(features, instanceType, opts, methodKey, prevIndex, newArgs)
+            : null }), ...args);
+};
+const buildProxiedInstance = (features, instanceType, buildOpts) => {
+    // demo with prototypes: https://jsfiddle.net/bgenc58r/
+    const opts = {};
+    const item = new Proxy({}, {
+        has(target, key) {
+            if (typeof key === "symbol") {
+                return false;
+            }
+            if (key === "toJSON") {
+                return false;
+            }
+            const hasInstanceMethod = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+            return Boolean(hasInstanceMethod);
+        },
+        get(target, key) {
+            if (typeof key === "symbol") {
+                return undefined;
+            }
+            if (key === "toJSON") {
+                return {};
+            }
+            return (...args) => {
+                const featureIndex = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+                if (featureIndex === null) {
+                    throw (0, errors_1.throwError)(`feature missing for method ${key}`);
+                }
+                return invokeInstanceMethod(features, instanceType, opts, key, featureIndex, args);
+            };
+        },
+    });
+    Object.assign(opts, buildOpts(item));
+    return [item, noop];
+};
+exports.buildProxiedInstance = buildProxiedInstance;

package/lib/cjs/core/build-static-instance.d.ts

@@ -0,0 +1,2 @@
+import { InstanceBuilder } from "../features/main/types";
+export declare const buildStaticInstance: InstanceBuilder;

package/lib/cjs/core/build-static-instance.js

@@ -0,0 +1,27 @@
+"use strict";
+/* eslint-disable no-continue,no-labels,no-extra-label */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStaticInstance = void 0;
+const buildStaticInstance = (features, instanceType, buildOpts) => {
+    const instance = {};
+    const finalize = () => {
+        const opts = buildOpts(instance);
+        featureLoop: for (let i = 0; i < features.length; i++) {
+            // Loop goes in forward order, because later features overwrite previous ones
+            // TODO loop order correct? I think so...
+            const definition = features[i][instanceType];
+            if (!definition)
+                continue featureLoop;
+            methodLoop: for (const [key, method] of Object.entries(definition)) {
+                if (!method)
+                    continue methodLoop;
+                const prev = instance[key];
+                instance[key] = (...args) => {
+                    return method(Object.assign(Object.assign({}, opts), { prev }), ...args);
+                };
+            }
+        }
+    };
+    return [instance, finalize];
+};
+exports.buildStaticInstance = buildStaticInstance;

package/lib/cjs/core/create-tree.js

@@ -2,24 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTree = void 0;
 const feature_1 = require("../features/tree/feature");
-const buildItemInstance = (features, tree, itemId) => {
-    var _a, _b;
-    const itemInstance = {};
-    for (const feature of features) {
-        Object.assign(
-        // TODO dont run createItemInstance, but assign prototype objects instead?
-        // https://jsfiddle.net/bgenc58r/
-        itemInstance, (_b = (_a = feature.createItemInstance) === null || _a === void 0 ? void 0 : _a.call(feature, Object.assign({}, itemInstance), itemInstance, tree, itemId)) !== null && _b !== void 0 ? _b : {});
-    }
-    return itemInstance;
-};
+const build_static_instance_1 = require("./build-static-instance");
+const errors_1 = require("../utilities/errors");
 const verifyFeatures = (features) => {
     var _a;
     const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
     for (const feature of features !== null && features !== void 0 ? features : []) {
         const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
         if (missingDependency) {
-            throw new Error(`${feature.key} needs ${missingDependency}`);
+            throw (0, errors_1.throwError)(`${feature.key} needs ${missingDependency}`);
         }
     }
 };
@@ -32,14 +23,16 @@ const compareFeatures = (feature1, feature2) => {
 };
 const sortFeatures = (features = []) => features.sort(compareFeatures);
 const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e;
-    const treeInstance = {};
+    var _a, _b, _c, _d;
+    const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : build_static_instance_1.buildStaticInstance;
     const additionalFeatures = [
         feature_1.treeFeature,
         ...sortFeatures(initialConfig.features),
     ];
     verifyFeatures(additionalFeatures);
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    const features = [...additionalFeatures];
+    const [treeInstance, finalizeTree] = buildInstance(features, "treeInstance", (tree) => ({ tree }));
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
@@ -50,11 +43,12 @@ const createTree = (initialConfig) => {
     const itemDataRefs = {};
     let itemMetaMap = {};
     const hotkeyPresets = {};
-    const rebuildItemMeta = (main) => {
+    const rebuildItemMeta = () => {
         // TODO can we find a way to only run this for the changed substructure?
         itemInstances = [];
         itemMetaMap = {};
-        const rootInstance = buildItemInstance([main, ...additionalFeatures], treeInstance, config.rootItemId);
+        const [rootInstance, finalizeRootInstance] = buildInstance(features, "itemInstance", (item) => ({ item, tree: treeInstance, itemId: config.rootItemId }));
+        finalizeRootInstance();
         itemInstancesMap[config.rootItemId] = rootInstance;
         itemMetaMap[config.rootItemId] = {
             itemId: config.rootItemId,
@@ -67,7 +61,12 @@ const createTree = (initialConfig) => {
         for (const item of treeInstance.getItemsMeta()) {
             itemMetaMap[item.itemId] = item;
             if (!itemInstancesMap[item.itemId]) {
-                const instance = buildItemInstance([main, ...additionalFeatures], treeInstance, item.itemId);
+                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
+                    item: instance,
+                    tree: treeInstance,
+                    itemId: item.itemId,
+                }));
+                finalizeInstance();
                 itemInstancesMap[item.itemId] = instance;
                 itemInstances.push(instance);
             }
@@ -83,25 +82,36 @@ const createTree = (initialConfig) => {
     };
     const mainFeature = {
         key: "main",
-        createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
+        treeInstance: {
+            getState: () => state,
+            setState: ({}, updater) => {
                 var _a;
                 // Not necessary, since I think the subupdate below keeps the state fresh anyways?
                 // state = typeof updater === "function" ? updater(state) : updater;
-                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            }, applySubStateUpdate: (stateName, updater) => {
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state); // TODO this cant be right... This doesnt allow external state updates
+            },
+            applySubStateUpdate: ({}, stateName, updater) => {
                 state[stateName] =
                     typeof updater === "function" ? updater(state[stateName]) : updater;
-                config[stateHandlerNames[stateName]](state[stateName]);
-            }, rebuildTree: () => {
+                const externalStateSetter = config[stateHandlerNames[stateName]];
+                externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
+            },
+            // TODO rebuildSubTree: (itemId: string) => void;
+            rebuildTree: () => {
                 var _a;
-                rebuildItemMeta(mainFeature);
+                rebuildItemMeta();
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            }, getConfig: () => config, setConfig: (updater) => {
+            },
+            getConfig: () => config,
+            setConfig: (_, updater) => {
                 config = typeof updater === "function" ? updater(config) : updater;
                 if (config.state) {
                     state = Object.assign(Object.assign({}, state), config.state);
                 }
-            }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
+            },
+            getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+            getItems: () => itemInstances,
+            registerElement: ({}, element) => {
                 if (treeElement === element) {
                     return;
                 }
@@ -112,29 +122,38 @@ const createTree = (initialConfig) => {
                     eachFeature((feature) => { var _a; return (_a = feature.onTreeMount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, element); });
                 }
                 treeElement = element;
-            }, getElement: () => treeElement, getDataRef: () => treeDataRef, getHotkeyPresets: () => hotkeyPresets })),
-        createItemInstance: (prev, instance, _, itemId) => (Object.assign(Object.assign({}, prev), { registerElement: (element) => {
+            },
+            getElement: () => treeElement,
+            getDataRef: () => treeDataRef,
+            getHotkeyPresets: () => hotkeyPresets,
+        },
+        itemInstance: {
+            // TODO just change to a getRef method that memoizes, maybe as part of getProps
+            registerElement: ({ itemId, item }, element) => {
                 if (itemElementsMap[itemId] === element) {
                     return;
                 }
                 const oldElement = itemElementsMap[itemId];
                 if (oldElement && !element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, oldElement, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, item, oldElement, treeInstance); });
                 }
                 else if (!oldElement && element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, element, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, item, element, treeInstance); });
                 }
                 itemElementsMap[itemId] = element;
-            }, getElement: () => itemElementsMap[itemId], 
+            },
+            getElement: ({ itemId }) => itemElementsMap[itemId],
             // eslint-disable-next-line no-return-assign
-            getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
+            getDataRef: ({ itemId }) => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); },
+            getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+        },
     };
-    const features = [mainFeature, ...additionalFeatures];
+    features.unshift(mainFeature);
     for (const feature of features) {
-        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
-        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+        Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
-    rebuildItemMeta(mainFeature);
+    finalizeTree();
+    rebuildItemMeta();
     return treeInstance;
 };
 exports.createTree = createTree;

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

@@ -9,18 +9,19 @@ exports.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,
                 ]);
@@ -28,24 +29,25 @@ exports.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,
             ]);
@@ -59,8 +61,8 @@ exports.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 {
@@ -68,21 +70,33 @@ exports.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/cjs/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/cjs/features/drag-and-drop/feature.js

@@ -6,45 +6,64 @@ const utils_2 = require("../../utils");
 exports.dragAndDropFeature = {
     key: "dragAndDrop",
     deps: ["selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: (0, utils_2.makeStateUpdater)("dnd", tree) }, defaultConfig)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: (0, utils_2.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];
@@ -66,34 +85,42 @@ exports.dragAndDropFeature = {
                     });
                 }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
                     var _a, _b, _c;
-                    const target = (0, utils_1.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 = (0, utils_1.getDragCode)(e, item, tree);
+                    if (nextDragCode === dataRef.current.lastDragCode) {
+                        if (dataRef.current.lastAllowDrop) {
+                            e.preventDefault();
+                        }
                         return;
                     }
-                    if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
+                    dataRef.current.lastDragCode = nextDragCode;
+                    const target = (0, utils_1.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 = (0, utils_1.getDragCode)(target);
-                    if (nextDragCode === dataRef.current.lastDragCode) {
+                    if (!(0, utils_1.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();
@@ -109,30 +136,35 @@ exports.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/cjs/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/cjs/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>;