feat: also remap to bottom-offset for items below open subtrees (#148)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,19 @@
-<!--
-### Breaking Changes
-
 ### Features
 
-### Bug Fixes and Improvements
+- Make drop target depth in last-of-subtree locations dependent on x-coordinates of the mouse, allowing the user to
+  drop in higher depths than the currently hovering item. This behavior is automatically used if `renderDepthOffset`
+  on the renderers is set to a non-zero value. (#148)
+  - This also applies when dropping at the top of an item where the item prior is of deeper depth, meaning that
+    in this case the decision of dropping into the container above or directly above the hovering item will depend
+    on the x-coordinate of the mouse.
+- Add `setDomFocus` argument to focus-item methods to provide an escape hatch to set the focus state of an item in RCT
+  without updating the DOM focus. This defaults to true in all existing methods to maintain the current behavior if
+  it is absent. (#336)
+- Allow customizing when a subtree is rendered or not with the new `shouldRenderChildren` prop. This can be used to 
+  create opening and closing animations on subtrees. See [Demo](https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--animated-expanding-and-collapsing)
+  and [Demo Implementation](https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/stories/BasicExamples.stories.tsx#L561) for details. (#333)
+
+### Bug Fixes
 
-### Other Changes
--->
+- Fix a bug where the `parentId` property in the `renderItemsContainer` render method was incorrectly set to the tree id
+  for the root container.

packages/core/src/drag/DraggingPositionEvaluation.ts

@@ -165,16 +165,33 @@ export class DraggingPositionEvaluation {
 
   /**
    * Inside a folder, only drop at bottom offset to make it visually
-   * consistent.
+   * consistent. This also maps to bottom offset for items below open
+   * subtrees, to keep the x-coordinate based dropping consistent (only
+   * if indentation is defined).
    */
   private maybeMapToBottomOffset() {
     const priorItem = this.env.linearItems[this.treeId][this.linearIndex - 1];
+
+    if (!priorItem || priorItem?.depth === undefined) return;
+
+    const depthDistanceToPrior = priorItem.depth - this.targetItem.depth;
     if (
       this.offset === 'top' &&
       this.targetItem.depth === (priorItem?.depth ?? -1)
     ) {
+      // map inside folder
+      this.offset = 'bottom';
+      this.linearIndex -= 1;
+      this.targetItem = this.env.linearItems[this.treeId][this.linearIndex];
+    } else if (
+      this.offset === 'top' &&
+      depthDistanceToPrior > 0 &&
+      this.indentation !== undefined
+    ) {
+      // map at bottom of folder, up inside folder contents
       this.offset = 'bottom';
       this.linearIndex -= 1;
+      this.targetItem = this.env.linearItems[this.treeId][this.linearIndex];
     }
   }
 
@@ -227,14 +244,18 @@ export class DraggingPositionEvaluation {
       return undefined;
     }
 
+    this.maybeRedirectInsideOpenFolder();
+    this.maybeMapToBottomOffset();
+
     const reparented = this.maybeReparentUpwards();
     if (reparented) {
       return reparented;
     }
 
-    this.maybeRedirectInsideOpenFolder();
+    if (!this.canDropAtCurrentTarget()) {
+      return undefined;
+    }
 
-    // Must run before maybeMapToBottomOffset
     const { parent } = this.getParentOfLinearItem(
       this.linearIndex,
       this.treeId
@@ -243,14 +264,6 @@ export class DraggingPositionEvaluation {
       this.env.items[parent.item].children!.indexOf(this.targetItem.item) +
       (this.offset === 'top' ? 0 : 1);
 
-    this.maybeMapToBottomOffset();
-
-    if (!this.canDropAtCurrentTarget()) {
-      return undefined;
-    }
-
-    // used to be here: this.maybeMapToBottomOffset();.. moved up for better readability
-
     if (this.offset) {
       return {
         targetType: 'between-items',

packages/core/src/drag/useDraggingPosition.ts

@@ -82,12 +82,9 @@ export const useDraggingPosition = () => {
 
       const indentation = !env.renderDepthOffset
         ? undefined
-        : Math.min(
-            Math.max(
-              Math.floor((e.clientX - treeBb.left) / env.renderDepthOffset),
-              0
-            ),
-            targetLinearItem.depth
+        : Math.max(
+            Math.floor((e.clientX - treeBb.left) / env.renderDepthOffset),
+            0
           );
 
       let offset: 'top' | 'bottom' | undefined;

packages/core/test/dnd-basics.spec.tsx

@@ -434,10 +434,16 @@ describe('dnd basics', () => {
       it('reparents inner level', async () => {
         const test = await new TestUtil().renderOpenTree();
         await test.startDrag('bbb');
-        await test.dragOver('add', 'bottom', 1);
+        await test.dragOver('add', 'bottom', 2);
         await test.drop();
-        await test.expectItemContentsUnchanged('ad', 'b');
-        await test.expectItemContents('a', ['aa', 'ab', 'ac', 'ad', 'bbb']);
+        await test.expectItemContentsUnchanged('a', 'b', 'root');
+        await test.expectItemContents('ad', [
+          'ada',
+          'adb',
+          'adc',
+          'add',
+          'bbb',
+        ]);
       });
 
       it('reparents mid level', async () => {
@@ -465,6 +471,49 @@ describe('dnd basics', () => {
           'special',
         ]);
       });
+
+      describe('reparent upwards when dragging at top of item below subtree', () => {
+        it('reparents inner level', async () => {
+          const test = await new TestUtil().renderOpenTree();
+          await test.startDrag('bbb');
+          await test.dragOver('b', 'top', 2);
+          await test.drop();
+          await test.expectItemContentsUnchanged('a', 'b', 'root');
+          await test.expectItemContents('ad', [
+            'ada',
+            'adb',
+            'adc',
+            'add',
+            'bbb',
+          ]);
+        });
+
+        it('reparents mid level', async () => {
+          const test = await new TestUtil().renderOpenTree();
+          await test.startDrag('bbb');
+          await test.dragOver('b', 'top', 1);
+          await test.drop();
+          await test.expectItemContentsUnchanged('ad', 'b', 'root');
+          await test.expectItemContents('a', ['aa', 'ab', 'ac', 'ad', 'bbb']);
+        });
+
+        it('reparents outer level', async () => {
+          const test = await new TestUtil().renderOpenTree();
+          await test.startDrag('bbb');
+          await test.dragOver('b', 'top', 0);
+          await test.drop();
+          await test.expectItemContentsUnchanged('ad', 'a', 'b');
+          await test.expectItemContents('root', [
+            'target-parent',
+            'a',
+            'bbb',
+            'b',
+            'c',
+            'deep1',
+            'special',
+          ]);
+        });
+      });
     });
 
     describe('redirects to parent', () => {