refactor: introduce droppable parent and make path abstract

Author: chrisvxd

packages/abstract/src/core/entities/droppable/droppable.ts

@@ -96,5 +96,24 @@ export class Droppable<
     return this.manager?.dragOperation.target?.id === this.id;
   }
 
-  public path: UniqueIdentifier[] = [];
+  @reactive
+  public accessor parent: UniqueIdentifier | undefined;
+
+  @derived
+  public get path() {
+    const path = [];
+
+    if (this.manager && this.parent) {
+      const {droppables} = this.manager.registry;
+
+      let parent = droppables.get(this.parent);
+
+      while (parent) {
+        path.unshift(parent.id);
+        parent = droppables.get(parent.parent);
+      }
+    }
+
+    return path;
+  }
 }

packages/dom/src/core/entities/droppable/droppable.ts

@@ -6,7 +6,7 @@ import type {
 } from '@dnd-kit/abstract';
 import {defaultCollisionDetection} from '@dnd-kit/collision';
 import type {CollisionDetector} from '@dnd-kit/collision';
-import {reactive, untracked} from '@dnd-kit/state';
+import {derived, reactive, untracked} from '@dnd-kit/state';
 import type {BoundingRectangle, Shape} from '@dnd-kit/geometry';
 import {DOMRectangle, PositionObserver} from '@dnd-kit/dom/utilities';
 
@@ -20,32 +20,6 @@ export interface Input<T extends Data = Data>
   element?: Element;
 }
 
-function getPathArray(
-  droppables: DragDropManager['registry']['droppables'],
-  target: Element
-): UniqueIdentifier[] {
-  // Create a map from element to id for easy lookup
-  const elementMap = new Map<Element, UniqueIdentifier>();
-  Array.from(droppables.value).forEach((item) => {
-    if (item?.element) {
-      elementMap.set(item.element, item.id);
-    }
-  });
-
-  const path: UniqueIdentifier[] = [];
-  let currentElement = target.parentElement;
-
-  while (currentElement) {
-    const parentId = elementMap.get(currentElement);
-    if (parentId) {
-      path.unshift(parentId);
-    }
-    currentElement = currentElement.parentElement;
-  }
-
-  return path;
-}
-
 export class Droppable<T extends Data = Data> extends AbstractDroppable<
   T,
   DragDropManager
@@ -96,10 +70,6 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
               !this.disabled &&
               this.accepts(source);
 
-            this.path = element
-              ? getPathArray(manager.registry.droppables, element)
-              : [];
-
             if (observePosition) {
               const positionObserver = new PositionObserver(
                 element,
@@ -143,4 +113,41 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
   }
 
   public refreshShape: () => Shape | undefined;
+
+  @derived
+  private get elementMap() {
+    const {manager} = this;
+    if (!manager) return;
+
+    // Create a map from element to id for easy lookup
+    const elementMap = new Map<Element, UniqueIdentifier>();
+    Array.from(manager.registry.droppables.value).forEach((item) => {
+      if (item?.element) {
+        elementMap.set(item.element, item.id);
+      }
+    });
+
+    return elementMap;
+  }
+
+  public get parent() {
+    if (super.parent) {
+      return super.parent;
+    }
+
+    const {element} = this;
+    if (!element || !this.elementMap) return;
+
+    let currentElement = element.parentElement;
+
+    while (currentElement) {
+      const parentId = this.elementMap.get(currentElement);
+
+      if (parentId) {
+        return parentId;
+      }
+
+      currentElement = currentElement.parentElement;
+    }
+  }
 }