feat: move drag inbetween line down to targets child contents (#148)

Author: lukasbach

packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -231,6 +231,15 @@ export const useOnDragOverTreeHandler = (
 
       let draggingPosition: DraggingPosition;
 
+      // Used to move the dragBetweenLine component down to the actual
+      // end of the target item's contents, see #148
+      const targetItemEndOfContents =
+        offset === 'top'
+          ? 0
+          : linearItems[treeId]
+              .slice(linearIndex + 1)
+              .findIndex(item => item.depth <= depth);
+
       if (offset) {
         draggingPosition = {
           targetType: 'between-items',
@@ -242,6 +251,7 @@ export const useOnDragOverTreeHandler = (
           // childIndex: environment.items[parent.item].children!.indexOf(targetItem.item) + (offset === 'top' ? 0 : 1),
           childIndex: newChildIndex,
           linePosition: offset,
+          targetItemEndOfContents,
         };
       } else {
         draggingPosition = {

packages/core/src/tree/DragBetweenLine.tsx

@@ -18,6 +18,10 @@ export const DragBetweenLine: React.FC<{
     return null;
   }
 
+  const position =
+    (draggingPosition?.linearIndex ?? 0) +
+    (draggingPosition.targetItemEndOfContents ?? 0);
+
   const lineProps: HTMLProps<any> = {
     onDragOver: e => e.preventDefault(), // Allow dropping
   };
@@ -28,7 +32,7 @@ export const DragBetweenLine: React.FC<{
         position: 'absolute',
         left: '0',
         right: '0',
-        top: `${(draggingPosition?.linearIndex ?? 0) * itemHeight}px`,
+        top: `${position * itemHeight}px`,
       }}
     >
       {renderers.renderDragBetweenLine({

packages/core/src/types.ts

@@ -323,6 +323,7 @@ export interface DraggingPositionBetweenItems extends AbstractDraggingPosition {
   childIndex: number;
   linePosition: 'top' | 'bottom';
   parentItem: TreeItemIndex;
+  targetItemEndOfContents: number;
 }
 
 export interface DraggingPositionRoot extends AbstractDraggingPosition {