From 330a0f00289a6601eb44b395b43222dbd62a29c9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 11 Feb 2025 13:24:04 +1100
Subject: [PATCH] tidy(ui): extract util in dnd

---
 .../nodes/components/sidePanel/builder/dnd.ts | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd.ts
index 70b6030991..b2d76ec02f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd.ts
@@ -87,6 +87,32 @@ const flashElement = (elementId: ElementId) => {
   }
 };
 
+const getAllowedDropRegions = (element: FormElement): CenterOrEdge[] => {
+  const dropRegions: CenterOrEdge[] = [];
+
+  if (isContainerElement(element) && element.data.children.length === 0) {
+    dropRegions.push('center');
+  }
+
+  // Parent is a container
+  if (element.parentId !== undefined) {
+    const parentContainer = getElement(element.parentId, isContainerElement);
+    if (parentContainer.data.layout === 'row') {
+      dropRegions.push('left', 'right');
+    } else {
+      // parentContainer.data.layout === 'row'
+      dropRegions.push('top', 'bottom');
+    }
+  }
+
+  // Parent is the root
+  if (element.parentId === undefined) {
+    dropRegions.push('top', 'bottom');
+  }
+
+  return dropRegions;
+};
+
 export const useBuilderDndMonitor = () => {
   useAssertSingleton('useBuilderDndMonitor');
   const dispatch = useAppDispatch();
@@ -538,29 +564,10 @@ export const useFormElementDnd = (
           isFormElementDndData(source.data) && source.data.element.id !== getElement(elementId).parentId,
         getData: ({ input }) => {
           const element = getElement(elementId);
+
           const targetData = buildFormElementDndData(element);
 
-          const allowedCenterOrEdge: CenterOrEdge[] = [];
-
-          if (isContainerElement(element) && element.data.children.length === 0) {
-            allowedCenterOrEdge.push('center');
-          }
-
-          // Parent is a container
-          if (element.parentId !== undefined) {
-            const parentContainer = getElement(element.parentId, isContainerElement);
-            if (parentContainer.data.layout === 'row') {
-              allowedCenterOrEdge.push('left', 'right');
-            } else {
-              // parentContainer.data.layout === 'row'
-              allowedCenterOrEdge.push('top', 'bottom');
-            }
-          }
-
-          // Parent is the root
-          if (element.parentId === undefined) {
-            allowedCenterOrEdge.push('top', 'bottom');
-          }
+          const allowedCenterOrEdge = getAllowedDropRegions(element);
 
           return attachClosestCenterOrEdge(targetData, {
             element: draggableElement,