fix(DragAndDrop): update drop target logic to correctly identify sibling and child nodes; update test orienting to demand

Author: ririv

src/lib/drag-drop/dragLogic.test.ts

@@ -1,4 +1,3 @@
-
 import { calculateDragState } from './dragLogic';
 import type { BookmarkUI } from '../types/bookmark';
 
@@ -7,7 +6,6 @@ function assertEquals(actual: any, expected: any, message: string) {
         console.error(`❌ FAIL: ${message}`);
         console.error(`   Actual:   ${JSON.stringify(actual)}`);
         console.error(`   Expected: ${JSON.stringify(expected)}`);
-        // We throw to fail the test run in CI, but for local debugging console.error is fine if we want to see all
         throw new Error(message); 
     } else {
         console.log(`✅ PASS: ${message}`);
@@ -23,15 +21,15 @@ const mockNodes: BookmarkUI[] = [
 
 const NODE_HEIGHT = 28;
 
-console.log('--- Starting Drag Logic Tests ---');
+console.log('--- Starting Drag Logic Tests (Requirement-Driven) ---');
 
-// Original Functional Tests
 // Case 1: Sibling - Below Node 1, Level 1
+// Goal: Insert after Node 1, same level.
 (() => {
     const result = calculateDragState(
         NODE_HEIGHT * 0.8,
         NODE_HEIGHT,
-        10, // Close to level 1 (4px)
+        10, // Close to level 1
         '1',
         'drag-id',
         mockNodes
@@ -41,22 +39,26 @@ console.log('--- Starting Drag Logic Tests ---');
     assertEquals(result?.dropTargetLevel, 1, 'Case 1: Level');
 })();
 
-// Case 2: Child - Below Node 1, Level 2
+// Case 2: Child (New Parent) - Below Node 1, Level 2
+// Goal: Make Node 1 a parent. Node 1 currently has NO visible children.
+// Action: Must be 'inside' Node 1.
 (() => {
     const result = calculateDragState(
         NODE_HEIGHT * 0.8,
         NODE_HEIGHT,
-        30, // Close to level 2 (24px)
+        30, // Level 2 indent
         '1',
         'drag-id',
         mockNodes
     );
-    assertEquals(result?.dropTargetId, '2', 'Case 2: Target ID (before next)');
-    assertEquals(result?.dropPosition, 'before', 'Case 2: Position');
+    assertEquals(result?.dropTargetId, '1', 'Case 2: Target ID (parent)');
+    assertEquals(result?.dropPosition, 'inside', 'Case 2: Position');
     assertEquals(result?.dropTargetLevel, 2, 'Case 2: Level');
 })();
 
 // Case 3: Outdent - Below Node 2-1 (L2), Level 1
+// Goal: Insert after the whole Node 2 family (after 2-1), at Level 1.
+// Logic: This is effectively inserting after Node 2.
 (() => {
     const result = calculateDragState(
         NODE_HEIGHT * 0.8,
@@ -66,12 +68,13 @@ console.log('--- Starting Drag Logic Tests ---');
         'drag-id',
         mockNodes
     );
-    assertEquals(result?.dropTargetId, '2', 'Case 3: Target ID (ancestor sibling)');
+    assertEquals(result?.dropTargetId, '2', 'Case 3: Target ID (Node 2)');
     assertEquals(result?.dropPosition, 'after', 'Case 3: Position');
     assertEquals(result?.dropTargetLevel, 1, 'Case 3: Level');
 })();
 
 // Case 4: Top - Top of Node 1
+// Goal: Insert at very top.
 (() => {
     const result = calculateDragState(
         NODE_HEIGHT * 0.1,
@@ -83,41 +86,64 @@ console.log('--- Starting Drag Logic Tests ---');
     );
     assertEquals(result?.dropTargetId, '1', 'Case 4: Target ID');
     assertEquals(result?.dropPosition, 'before', 'Case 4: Position');
-    assertEquals(result?.dropTargetLevel, 1, 'Case 4: Level');
-    assertEquals(result?.gapPosition, 'before', 'Case 4: Visual Gap Pos');
 })();
 
-console.log('\n--- Level Threshold Tests ---');
-
-// Helper to test level calculation only
-function testLevel(mouseX: number, expectedLevel: number, refNodeId: string = '1') {
+// Case 5: Child (Existing Parent) - Below Node 2, Level 2
+// Goal: Insert between Node 2 and Node 2-1.
+// Context: Node 2 is followed immediately by Node 2-1 (its child).
+// Action: Insert BEFORE Node 2-1.
+(() => {
     const result = calculateDragState(
-        NODE_HEIGHT * 0.8, // Bottom gap
+        NODE_HEIGHT * 0.8, // Bottom of Node 2
         NODE_HEIGHT,
-        mouseX,
-        refNodeId,
+        30, // Level 2
+        '2',
         'drag-id',
         mockNodes
     );
-    // Note: Max level depends on refNode.
-    assertEquals(result?.dropTargetLevel, expectedLevel, `X=${mouseX}px -> Level ${expectedLevel} (Ref: ${refNodeId})`);
-}
+    // Gap is between 2 and 2-1.
+    // RefNode: 2. NextNode: 2-1.
+    // Target Level: 2. Ref Level: 1.
+    // Logic: targetLevel == refLevel + 1.
+    // Check: NextNode (2-1) is Level 2. So NextNode IS a child.
+    // Action: before NextNode.
+    assertEquals(result?.dropTargetId, '2-1', 'Case 5: Target ID (2-1)');
+    assertEquals(result?.dropPosition, 'before', 'Case 5: Position');
+    assertEquals(result?.dropTargetLevel, 2, 'Case 5: Level');
+})();
 
-// Current Formula: floor((x - 4 + 10) / 20) + 1
-// Thresholds:
-// x < 14  -> Level 1
-// x >= 14 -> Level 2
-testLevel(0, 1);
-testLevel(13, 1);
-testLevel(14, 2);
-testLevel(20, 2); 
-testLevel(33, 2); // 33-4+10 = 39 / 20 = 1.95 -> 1+1=2
-testLevel(34, 2); // Max level cap for Node 1 is 2. (34 would be Level 3)
+// Case 6: Sibling (Nested) - Below Node 2-1, Level 2
+// Goal: Insert after Node 2-1, keeping Level 2.
+(() => {
+    const result = calculateDragState(
+        NODE_HEIGHT * 0.8,
+        NODE_HEIGHT,
+        30, // Level 2
+        '2-1',
+        'drag-id',
+        mockNodes
+    );
+    // RefNode: 2-1 (L2). Target Level: 2.
+    // Logic: Sibling.
+    assertEquals(result?.dropTargetId, '2-1', 'Case 6: Target ID');
+    assertEquals(result?.dropPosition, 'after', 'Case 6: Position');
+})();
 
-// Deep Nesting (Node 2-1 is Level 2, so can go to Level 3)
-testLevel(13, 1, '2-1');
-testLevel(14, 2, '2-1');
-testLevel(33, 2, '2-1');
-testLevel(34, 3, '2-1'); 
+// Case 7: Child (Deepest) - Below Node 2-1, Level 3
+// Goal: Make Node 2-1 a parent.
+// Action: inside 2-1.
+(() => {
+    const result = calculateDragState(
+        NODE_HEIGHT * 0.8,
+        NODE_HEIGHT,
+        50, // Level 3 (assuming 20px indent steps: 4, 24, 44, 64...)
+        '2-1',
+        'drag-id',
+        mockNodes
+    );
+    assertEquals(result?.dropTargetId, '2-1', 'Case 7: Target ID');
+    assertEquals(result?.dropPosition, 'inside', 'Case 7: Position');
+    assertEquals(result?.dropTargetLevel, 3, 'Case 7: Level');
+})();
 
-console.log('--- All Tests Passed ---');
+console.log('--- All Tests Passed ---');

src/lib/drag-drop/dragLogic.ts

@@ -91,10 +91,15 @@ export function calculateDragState(
             dropTargetId = refNode.id;
             dropPosition = 'after';
         } else if (targetLevel === refNode.level + 1) {
-            if (nextNode) {
+            // Check if nextNode is actually a child of refNode (deeper level)
+            const isNextChild = nextNode && nextNode.level > refNode.level;
+            
+            if (isNextChild) {
+                // Insert before the existing child
                 dropTargetId = nextNode.id;
                 dropPosition = 'before';
             } else {
+                // NextNode is a sibling (or null). Append as new child to RefNode.
                 dropTargetId = refNode.id;
                 dropPosition = 'inside';
             }