From e0a2a30b80abba68fc94105cc9c5b9d41326ed74 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 28 Sep 2022 11:08:11 +0100
Subject: [PATCH] Fix to enforce illegalchildren rules when dragging and
 dropping in the component tree

---
 .../navigation/ComponentTree.svelte           | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 31d6eb132b..427fd98775 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -18,6 +18,8 @@
 
   let closedNodes = {}
 
+  $: currentScreen = get(selectedScreen)
+
   $: filteredComponents = components?.filter(component => {
     return (
       !$store.componentToPaste?.isCut ||
@@ -68,9 +70,27 @@
     closedNodes = closedNodes
   }
 
-  const onDrop = async e => {
+  const onDrop = async (e, component) => {
     e.stopPropagation()
     try {
+      const compDef = store.actions.components.getDefinition(
+        $dndStore.source?._component
+      )
+      const compTypeName = compDef.name.toLowerCase()
+      const path = findComponentPath(currentScreen.props, component._id)
+
+      for (let pathComp of path) {
+        const pathCompDef = store.actions.components.getDefinition(
+          pathComp?._component
+        )
+        if (pathCompDef?.illegalChildren?.indexOf(compTypeName) > -1) {
+          notifications.warning(
+            `${compDef.name} cannot be a child of ${pathCompDef.name} (${pathComp._instanceName})`
+          )
+          return
+        }
+      }
+
       await dndStore.actions.drop()
     } catch (error) {
       console.error(error)
@@ -114,7 +134,9 @@
         on:dragstart={() => dndStore.actions.dragstart(component)}
         on:dragover={dragover(component, index)}
         on:iconClick={() => toggleNodeOpen(component._id)}
-        on:drop={onDrop}
+        on:drop={e => {
+          onDrop(e, component)
+        }}
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         withArrow={componentHasChildren(component)}