react-arborist 3.3.1 → 3.4.0

package/dist/main/dnd/compute-drop.d.ts

@@ -31,7 +31,6 @@ export type HighlightCursor = ReturnType<typeof highlightCursor>;
 export type Cursor = LineCursor | NoCursor | HighlightCursor;
 /**
  * This is the most complex, tricky function in the whole repo.
- * It could be simplified and made more understandable.
  */
 export declare function computeDrop(args: Args): ComputedDrop;
 export {};

package/dist/main/dnd/compute-drop.js

@@ -41,23 +41,6 @@ function getNodesAroundCursor(node, prev, next, hover) {
         }
     }
 }
-function getDropLevel(hovering, aboveCursor, belowCursor, indent) {
-    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
-    let min, max;
-    if (!aboveCursor) {
-        max = 0;
-        min = 0;
-    }
-    else if (!belowCursor) {
-        max = aboveCursor.level;
-        min = 0;
-    }
-    else {
-        max = aboveCursor.level;
-        min = belowCursor.level;
-    }
-    return (0, utils_1.bound)(hoverLevel, min, max);
-}
 function dropAt(parentId, index) {
     return { parentId: parentId || null, index };
 }
@@ -91,11 +74,12 @@ function walkUpFrom(node, level) {
 }
 /**
  * This is the most complex, tricky function in the whole repo.
- * It could be simplified and made more understandable.
  */
 function computeDrop(args) {
     var _a;
     const hover = measureHover(args.element, args.offset);
+    const indent = args.indent;
+    const hoverLevel = Math.round(Math.max(0, hover.x - indent) / indent);
     const { node, nextNode, prevNode } = args;
     const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
     /* Hovering over the middle of a folder */
@@ -105,22 +89,52 @@ function computeDrop(args) {
             cursor: highlightCursor(node.id),
         };
     }
-    /* At the top of the list */
+    /*
+     * Now we only need to care about the node above the cursor
+     * -----------                            -------
+     */
+    /* There is no node above the cursor line */
     if (!above) {
         return {
             drop: dropAt((_a = below === null || below === void 0 ? void 0 : below.parent) === null || _a === void 0 ? void 0 : _a.id, 0),
             cursor: lineCursor(0, 0),
         };
     }
-    /* The above node is an item or a closed folder */
-    if ((0, utils_1.isItem)(above) || (0, utils_1.isClosed)(above)) {
-        const level = getDropLevel(hover, above, below, args.indent);
+    /* The node above the cursor line is an item */
+    if ((0, utils_1.isItem)(above)) {
+        const level = (0, utils_1.bound)(hoverLevel, (below === null || below === void 0 ? void 0 : below.level) || 0, above.level);
+        return {
+            drop: walkUpFrom(above, level),
+            cursor: lineCursor(above.rowIndex + 1, level),
+        };
+    }
+    /* The node above the cursor line is a closed folder */
+    if ((0, utils_1.isClosed)(above)) {
+        const level = (0, utils_1.bound)(hoverLevel, (below === null || below === void 0 ? void 0 : below.level) || 0, above.level);
         return {
             drop: walkUpFrom(above, level),
             cursor: lineCursor(above.rowIndex + 1, level),
         };
     }
-    /* The above node is an open folder */
+    /* The node above the cursor line is an open folder with no children */
+    if ((0, utils_1.isOpenWithEmptyChildren)(above)) {
+        const level = (0, utils_1.bound)(hoverLevel, 0, above.level + 1);
+        if (level > above.level) {
+            /* Will be the first child of the empty folder */
+            return {
+                drop: dropAt(above.id, 0),
+                cursor: lineCursor(above.rowIndex + 1, level),
+            };
+        }
+        else {
+            /* Will be a sibling or grandsibling of the empty folder */
+            return {
+                drop: walkUpFrom(above, level),
+                cursor: lineCursor(above.rowIndex + 1, level),
+            };
+        }
+    }
+    /* The node above the cursor is a an open folder with children */
     return {
         drop: dropAt(above === null || above === void 0 ? void 0 : above.id, 0),
         cursor: lineCursor(above.rowIndex + 1, above.level + 1),

package/dist/main/utils.d.ts

@@ -4,6 +4,7 @@ import { IdObj } from "./types/utils";
 export declare function bound(n: number, min: number, max: number): number;
 export declare function isItem(node: NodeApi<any> | null): boolean | null;
 export declare function isClosed(node: NodeApi<any> | null): boolean | null;
+export declare function isOpenWithEmptyChildren(node: NodeApi<any> | null): boolean | null;
 /**
  * Is first param a descendant of the second param
  */

package/dist/main/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInsertParentId = exports.getInsertIndex = exports.waitFor = exports.safeRun = exports.mergeRefs = exports.identify = exports.identifyNull = exports.access = exports.focusPrevElement = exports.focusNextElement = exports.walk = exports.dfs = exports.noop = exports.indexOf = exports.isDescendant = exports.isClosed = exports.isItem = exports.bound = void 0;
+exports.getInsertParentId = exports.getInsertIndex = exports.waitFor = exports.safeRun = exports.mergeRefs = exports.identify = exports.identifyNull = exports.access = exports.focusPrevElement = exports.focusNextElement = exports.walk = exports.dfs = exports.noop = exports.indexOf = exports.isDescendant = exports.isOpenWithEmptyChildren = exports.isClosed = exports.isItem = exports.bound = void 0;
 function bound(n, min, max) {
     return Math.max(Math.min(n, max), min);
 }
@@ -13,6 +13,11 @@ function isClosed(node) {
     return node && node.isInternal && !node.isOpen;
 }
 exports.isClosed = isClosed;
+function isOpenWithEmptyChildren(node) {
+    var _a;
+    return node && node.isOpen && !((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
+}
+exports.isOpenWithEmptyChildren = isOpenWithEmptyChildren;
 /**
  * Is first param a descendant of the second param
  */

package/dist/module/dnd/compute-drop.d.ts

@@ -31,7 +31,6 @@ export type HighlightCursor = ReturnType<typeof highlightCursor>;
 export type Cursor = LineCursor | NoCursor | HighlightCursor;
 /**
  * This is the most complex, tricky function in the whole repo.
- * It could be simplified and made more understandable.
  */
 export declare function computeDrop(args: Args): ComputedDrop;
 export {};

package/dist/module/dnd/compute-drop.js

@@ -1,4 +1,4 @@
-import { bound, indexOf, isClosed, isItem } from "../utils";
+import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren, } from "../utils";
 function measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
     const x = offset.x - Math.round(rect.x);
@@ -38,23 +38,6 @@ function getNodesAroundCursor(node, prev, next, hover) {
         }
     }
 }
-function getDropLevel(hovering, aboveCursor, belowCursor, indent) {
-    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
-    let min, max;
-    if (!aboveCursor) {
-        max = 0;
-        min = 0;
-    }
-    else if (!belowCursor) {
-        max = aboveCursor.level;
-        min = 0;
-    }
-    else {
-        max = aboveCursor.level;
-        min = belowCursor.level;
-    }
-    return bound(hoverLevel, min, max);
-}
 function dropAt(parentId, index) {
     return { parentId: parentId || null, index };
 }
@@ -88,11 +71,12 @@ function walkUpFrom(node, level) {
 }
 /**
  * This is the most complex, tricky function in the whole repo.
- * It could be simplified and made more understandable.
  */
 export function computeDrop(args) {
     var _a;
     const hover = measureHover(args.element, args.offset);
+    const indent = args.indent;
+    const hoverLevel = Math.round(Math.max(0, hover.x - indent) / indent);
     const { node, nextNode, prevNode } = args;
     const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
     /* Hovering over the middle of a folder */
@@ -102,22 +86,52 @@ export function computeDrop(args) {
             cursor: highlightCursor(node.id),
         };
     }
-    /* At the top of the list */
+    /*
+     * Now we only need to care about the node above the cursor
+     * -----------                            -------
+     */
+    /* There is no node above the cursor line */
     if (!above) {
         return {
             drop: dropAt((_a = below === null || below === void 0 ? void 0 : below.parent) === null || _a === void 0 ? void 0 : _a.id, 0),
             cursor: lineCursor(0, 0),
         };
     }
-    /* The above node is an item or a closed folder */
-    if (isItem(above) || isClosed(above)) {
-        const level = getDropLevel(hover, above, below, args.indent);
+    /* The node above the cursor line is an item */
+    if (isItem(above)) {
+        const level = bound(hoverLevel, (below === null || below === void 0 ? void 0 : below.level) || 0, above.level);
+        return {
+            drop: walkUpFrom(above, level),
+            cursor: lineCursor(above.rowIndex + 1, level),
+        };
+    }
+    /* The node above the cursor line is a closed folder */
+    if (isClosed(above)) {
+        const level = bound(hoverLevel, (below === null || below === void 0 ? void 0 : below.level) || 0, above.level);
         return {
             drop: walkUpFrom(above, level),
             cursor: lineCursor(above.rowIndex + 1, level),
         };
     }
-    /* The above node is an open folder */
+    /* The node above the cursor line is an open folder with no children */
+    if (isOpenWithEmptyChildren(above)) {
+        const level = bound(hoverLevel, 0, above.level + 1);
+        if (level > above.level) {
+            /* Will be the first child of the empty folder */
+            return {
+                drop: dropAt(above.id, 0),
+                cursor: lineCursor(above.rowIndex + 1, level),
+            };
+        }
+        else {
+            /* Will be a sibling or grandsibling of the empty folder */
+            return {
+                drop: walkUpFrom(above, level),
+                cursor: lineCursor(above.rowIndex + 1, level),
+            };
+        }
+    }
+    /* The node above the cursor is a an open folder with children */
     return {
         drop: dropAt(above === null || above === void 0 ? void 0 : above.id, 0),
         cursor: lineCursor(above.rowIndex + 1, above.level + 1),

package/dist/module/utils.d.ts

@@ -4,6 +4,7 @@ import { IdObj } from "./types/utils";
 export declare function bound(n: number, min: number, max: number): number;
 export declare function isItem(node: NodeApi<any> | null): boolean | null;
 export declare function isClosed(node: NodeApi<any> | null): boolean | null;
+export declare function isOpenWithEmptyChildren(node: NodeApi<any> | null): boolean | null;
 /**
  * Is first param a descendant of the second param
  */

package/dist/module/utils.js

@@ -7,6 +7,10 @@ export function isItem(node) {
 export function isClosed(node) {
     return node && node.isInternal && !node.isOpen;
 }
+export function isOpenWithEmptyChildren(node) {
+    var _a;
+    return node && node.isOpen && !((_a = node.children) === null || _a === void 0 ? void 0 : _a.length);
+}
 /**
  * Is first param a descendant of the second param
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",

package/src/dnd/compute-drop.ts

@@ -1,6 +1,12 @@
 import { XYCoord } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
-import { bound, indexOf, isClosed, isItem } from "../utils";
+import {
+  bound,
+  indexOf,
+  isClosed,
+  isItem,
+  isOpenWithEmptyChildren,
+} from "../utils";
 import { DropResult } from "./drop-hook";
 
 function measureHover(el: HTMLElement, offset: XYCoord) {
@@ -56,28 +62,6 @@ type Args = {
   nextNode: NodeApi | null;
 };
 
-function getDropLevel(
-  hovering: HoverData,
-  aboveCursor: NodeApi | null,
-  belowCursor: NodeApi | null,
-  indent: number
-) {
-  const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
-  let min, max;
-  if (!aboveCursor) {
-    max = 0;
-    min = 0;
-  } else if (!belowCursor) {
-    max = aboveCursor.level;
-    min = 0;
-  } else {
-    max = aboveCursor.level;
-    min = belowCursor.level;
-  }
-
-  return bound(hoverLevel, min, max);
-}
-
 export type ComputedDrop = {
   drop: DropResult | null;
   cursor: Cursor | null;
@@ -128,10 +112,11 @@ export type Cursor = LineCursor | NoCursor | HighlightCursor;
 
 /**
  * This is the most complex, tricky function in the whole repo.
- * It could be simplified and made more understandable.
  */
 export function computeDrop(args: Args): ComputedDrop {
   const hover = measureHover(args.element, args.offset);
+  const indent = args.indent;
+  const hoverLevel = Math.round(Math.max(0, hover.x - indent) / indent);
   const { node, nextNode, prevNode } = args;
   const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
 
@@ -143,7 +128,12 @@ export function computeDrop(args: Args): ComputedDrop {
     };
   }
 
-  /* At the top of the list */
+  /*
+   * Now we only need to care about the node above the cursor
+   * -----------                            -------
+   */
+
+  /* There is no node above the cursor line */
   if (!above) {
     return {
       drop: dropAt(below?.parent?.id, 0),
@@ -151,16 +141,43 @@ export function computeDrop(args: Args): ComputedDrop {
     };
   }
 
-  /* The above node is an item or a closed folder */
-  if (isItem(above) || isClosed(above)) {
-    const level = getDropLevel(hover, above, below, args.indent);
+  /* The node above the cursor line is an item */
+  if (isItem(above)) {
+    const level = bound(hoverLevel, below?.level || 0, above.level);
+    return {
+      drop: walkUpFrom(above, level),
+      cursor: lineCursor(above.rowIndex! + 1, level),
+    };
+  }
+
+  /* The node above the cursor line is a closed folder */
+  if (isClosed(above)) {
+    const level = bound(hoverLevel, below?.level || 0, above.level);
     return {
       drop: walkUpFrom(above, level),
       cursor: lineCursor(above.rowIndex! + 1, level),
     };
   }
 
-  /* The above node is an open folder */
+  /* The node above the cursor line is an open folder with no children */
+  if (isOpenWithEmptyChildren(above)) {
+    const level = bound(hoverLevel, 0, above.level + 1);
+    if (level > above.level) {
+      /* Will be the first child of the empty folder */
+      return {
+        drop: dropAt(above.id, 0),
+        cursor: lineCursor(above.rowIndex! + 1, level),
+      };
+    } else {
+      /* Will be a sibling or grandsibling of the empty folder */
+      return {
+        drop: walkUpFrom(above, level),
+        cursor: lineCursor(above.rowIndex! + 1, level),
+      };
+    }
+  }
+
+  /* The node above the cursor is a an open folder with children */
   return {
     drop: dropAt(above?.id, 0),
     cursor: lineCursor(above.rowIndex! + 1, above.level + 1),

package/src/utils.ts

@@ -14,6 +14,10 @@ export function isClosed(node: NodeApi<any> | null) {
   return node && node.isInternal && !node.isOpen;
 }
 
+export function isOpenWithEmptyChildren(node: NodeApi<any> | null) {
+  return node && node.isOpen && !node.children?.length;
+}
+
 /**
  * Is first param a descendant of the second param
  */