Fix dnd to first child (#853)

* Fid dnd to first child

* Build

* Changelog

* Test

* Use switch

* Build

* Move generateHitAreas test

* Add test for ghostDropHint

docs/_entries/general/changelog.md

@@ -3,6 +3,10 @@ title: Changelog
 name: changelog
 ---
 
+#### Development version
+
+-   Issue #853: fix dnd to first child (thanks to Oskar von Dungern)
+
 #### 1.8.6 (october 26 2024)
 
 -   Issue #840: using the up and down keys scrolls the page

src/nodeElement/ghostDropHint.ts

@@ -1,15 +1,34 @@
 import { DropHint } from "../dragAndDropHandler/types";
+import { Node } from "../node";
+import { Position } from "../position";
 
 class GhostDropHint implements DropHint {
     private element: HTMLElement;
     private ghost: HTMLElement;
+    private node: Node;
 
-    constructor(element: HTMLElement) {
+    constructor(node: Node, element: HTMLElement, position: Position) {
         this.element = element;
+        this.node = node;
         this.ghost = this.createGhostElement();
 
-        this.element.after(this.ghost);
-        this.ghost.classList.add("jqtree-inside");
+        switch (position) {
+            case Position.After:
+                this.moveAfter();
+                break;
+
+            case Position.Before:
+                this.moveBefore();
+                break;
+
+            case Position.Inside: {
+                if (node.isFolder() && node.is_open) {
+                    this.moveInsideOpenFolder();
+                } else {
+                    this.moveInside();
+                }
+            }
+        }
     }
 
     private createGhostElement() {
@@ -27,6 +46,27 @@ class GhostDropHint implements DropHint {
         return ghost;
     }
 
+    private moveAfter(): void {
+        this.element.after(this.ghost);
+    }
+
+    private moveBefore(): void {
+        this.element.before(this.ghost);
+    }
+
+    private moveInside(): void {
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
+    }
+
+    private moveInsideOpenFolder(): void {
+        const childElement = this.node.children[0]?.element;
+
+        if (childElement) {
+            childElement.before(this.ghost);
+        }
+    }
+
     public remove(): void {
         this.ghost.remove();
     }

src/nodeElement/index.ts

@@ -50,7 +50,7 @@ class NodeElement {
         if (this.mustShowBorderDropHint(position)) {
             return new BorderDropHint(this.element, this.getScrollLeft());
         } else {
-            return new GhostDropHint(this.element);
+            return new GhostDropHint(this.node, this.element, position);
         }
     }
 

src/test/generateHitAreas.test.ts → src/test/dragAndDropHandler/generateHitAreas.test.ts

@@ -2,10 +2,10 @@ import {
     generateHitAreasForGroup,
     generateHitAreasFromPositions,
     generateHitPositions,
-} from "../dragAndDropHandler/generateHitAreas";
-import { HitArea } from "../dragAndDropHandler/types";
-import { Node } from "../node";
-import { Position } from "../position";
+} from "../../dragAndDropHandler/generateHitAreas";
+import { HitArea } from "../../dragAndDropHandler/types";
+import { Node } from "../../node";
+import { Position } from "../../position";
 
 const mockHtmlElement = (y: number) =>
     ({

src/test/nodeElement/ghostDropHint.test.ts

@@ -0,0 +1,65 @@
+import { Node } from "../../node";
+import GhostDropHint from "../../nodeElement/ghostDropHint";
+import { Position } from "../../position";
+
+beforeEach(() => {
+    document.body.innerHTML = "";
+});
+
+it("creates a hint element after the node element when the position is After", () => {
+    const nodeElement = document.createElement("div");
+    document.body.append(nodeElement);
+
+    const node = new Node();
+    new GhostDropHint(node, nodeElement, Position.After);
+
+    expect(nodeElement.nextSibling).toHaveClass("jqtree-ghost");
+    expect(nodeElement.previousSibling).toBeNull();
+    expect(nodeElement.children).toBeEmpty();
+});
+
+it("creates a hint element after the node element when the position is Before", () => {
+    const nodeElement = document.createElement("div");
+    document.body.append(nodeElement);
+
+    const node = new Node();
+    new GhostDropHint(node, nodeElement, Position.Before);
+
+    expect(nodeElement.previousSibling).toHaveClass("jqtree-ghost");
+    expect(nodeElement.nextSibling).toBeNull();
+    expect(nodeElement.children).toBeEmpty();
+});
+
+it("creates a hint element after the node element when the position is Inside and the node is an open folder", () => {
+    const nodeElement = document.createElement("div");
+    document.body.append(nodeElement);
+
+    const childElement = document.createElement("div");
+    nodeElement.append(childElement);
+
+    const node = new Node({ is_open: true });
+    const childNode = new Node();
+    childNode.element = childElement;
+    node.addChild(childNode);
+
+    new GhostDropHint(node, nodeElement, Position.Inside);
+
+    expect(nodeElement.previousSibling).toBeNull();
+    expect(nodeElement.nextSibling).toBeNull();
+    expect(nodeElement.children.length).toBe(2);
+    expect(nodeElement.children[0]).toHaveClass("jqtree-ghost");
+});
+
+it("creates a hint element after the node element when the position is Inside and the node is a closed folder", () => {
+    const nodeElement = document.createElement("div");
+    document.body.append(nodeElement);
+
+    const node = new Node();
+    node.addChild(new Node());
+
+    new GhostDropHint(node, nodeElement, Position.Inside);
+
+    expect(nodeElement.nextSibling).toHaveClass("jqtree-ghost");
+    expect(nodeElement.previousSibling).toBeNull();
+    expect(nodeElement.children).toBeEmpty();
+});