fixed: Layout components issue, children components depth issues

lowcoder-org · raheeliftikhar5 · Jul 22, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 9, 2025
commit 86a12f01fc20bc0bffb1a7bd15e93069a4a70dfc
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/actions/componentManagement.ts
@@ -12,7 +12,7 @@ import {
     wrapChildAction, 
     deleteCompAction 
 } from "lowcoder-core";
-import { getEditorComponentInfo } from "../utils";
+import { getEditorComponentInfo, findTargetComponent } from "../utils";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 import { hookCompCategory, HookCompType } from "@lowcoder-ee/comps/hooks/hookCompTypes";
 
@@ -314,17 +314,22 @@ export const deleteComponentAction: ActionConfig = {
         return;
       }
 
-      const { componentKey, currentLayout, simpleContainer, componentType } = componentInfo;
-
-      if (!componentKey || !currentLayout[componentKey]) {
-        message.error(`Component "${selectedEditorComponent}" not found in layout`);
+      const { allAppComponents } = componentInfo;
+      const targetComponent = allAppComponents.find(comp => comp.name === selectedEditorComponent);
+
+      if (!targetComponent) {
+        message.error(`Component "${selectedEditorComponent}" not found in application`);
         return;
       }
 
-      const newLayout = { ...currentLayout };
-      delete newLayout[componentKey];
+      const targetInfo = findTargetComponent(editorState, selectedEditorComponent);
 
-      simpleContainer.dispatch(
+      if (targetInfo) {
+        const { container, layout, componentKey } = targetInfo;
+        const newLayout = { ...layout };
+        delete newLayout[componentKey];
+
+        container.dispatch(
         wrapActionExtraInfo(
           multiChangeAction({
             layout: changeValueAction(newLayout, true),
@@ -333,7 +338,7 @@ export const deleteComponentAction: ActionConfig = {
           { 
             compInfos: [{ 
               compName: selectedEditorComponent, 
-              compType: componentType || 'unknown', 
+              compType: targetComponent.compType || 'unknown', 
               type: "delete" 
             }] 
           }
@@ -343,6 +348,9 @@ export const deleteComponentAction: ActionConfig = {
       editorState.setSelectedCompNames(new Set(), "deleteComp");
 
       message.success(`Component "${selectedEditorComponent}" deleted successfully`);
+      } else {
+        message.error(`Component "${selectedEditorComponent}" not found in any container`);
+      }
     } catch (error) {
       console.error('Error deleting component:', error);
       message.error('Failed to delete component. Please try again.');
@@ -401,22 +409,29 @@ export const moveComponentAction: ActionConfig = {
         return;
       }
 
+      const targetInfo = findTargetComponent(editorState, selectedEditorComponent);
+
+      if (!targetInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found in any container`);
+        return;
+      }
+
+      const { container, layout, componentKey } = targetInfo;
+
       const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
 
       if (!componentInfo) {
         message.error(`Component "${selectedEditorComponent}" not found`);
         return;
       }
 
-      const { componentKey, currentLayout, simpleContainer } = componentInfo;
-
-      if (!componentKey || !currentLayout[componentKey]) {
+      if (!componentKey || !layout[componentKey]) {
         message.error(`Component "${selectedEditorComponent}" not found in layout`);
         return;
       }
 
-      const currentLayoutItem = currentLayout[componentKey];
-      const items = simpleContainer.children.items.children;
+      const currentLayoutItem = layout[componentKey];
+      const items = container.children.items.children;
 
       const newLayoutItem = {
         ...currentLayoutItem,
@@ -425,11 +440,11 @@ export const moveComponentAction: ActionConfig = {
       };
 
       const newLayout = {
-        ...currentLayout,
+        ...layout,
         [componentKey]: newLayoutItem,
       };
 
-      simpleContainer.dispatch(
+      container.dispatch(
         wrapActionExtraInfo(
           multiChangeAction({
             layout: changeValueAction(newLayout, true),
@@ -568,21 +583,22 @@ export const resizeComponentAction: ActionConfig = {
         return;
       }
 
-      const componentInfo = getEditorComponentInfo(editorState, selectedEditorComponent);
-      
-      if (!componentInfo) {
-        message.error(`Component "${selectedEditorComponent}" not found`);
+      const targetInfo = findTargetComponent(editorState, selectedEditorComponent);
+
+      if (!targetInfo) {
+        message.error(`Component "${selectedEditorComponent}" not found in any container`);
         return;
       }
 
-      const { componentKey, currentLayout, simpleContainer, items } = componentInfo;
+      const { container, layout, componentKey } = targetInfo;
 
-      if (!componentKey || !currentLayout[componentKey]) {
+      if (!componentKey || !layout[componentKey]) {
         message.error(`Component "${selectedEditorComponent}" not found in layout`);
         return;
       }
 
-      const currentLayoutItem = currentLayout[componentKey];
+      const currentLayoutItem = layout[componentKey];
+      const items = container.children.items.children;
 
       const newLayoutItem = {
         ...currentLayoutItem,
@@ -591,11 +607,11 @@ export const resizeComponentAction: ActionConfig = {
       };
 
       const newLayout = {
-        ...currentLayout,
+        ...layout,
         [componentKey]: newLayoutItem,
       };
 
-      simpleContainer.dispatch(
+      container.dispatch(
         wrapActionExtraInfo(
           multiChangeAction({
             layout: changeValueAction(newLayout, true),

diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp/utils.ts b/client/packages/lowcoder/src/comps/comps/preLoadComp/utils.ts
@@ -5,6 +5,7 @@ import { UICompCategory, UICompManifest, uiCompCategoryNames, uiCompRegistry } f
 import { MenuProps } from "antd/es/menu";
 import React from "react";
 import { EditorState } from "@lowcoder-ee/comps/editorState";
+import { getAllCompItems } from "comps/comps/containerBase/utils";
 
 export function runScript(code: string, inHost?: boolean) {
   if (inHost) {
@@ -60,6 +61,7 @@ export function getEditorComponentInfo(editorState: EditorState, componentName?:
   simpleContainer: any;
   componentType?: string | null;
   items: any;
+  allAppComponents: any[];
 } | null {
   try {
     // Get the UI component container
@@ -83,7 +85,9 @@ export function getEditorComponentInfo(editorState: EditorState, componentName?:
 
     // Get current layout and items
     const currentLayout = simpleContainer.children.layout.getView();
+
     const items = getCombinedItems(uiCompTree);
+    const allAppComponents = getAllLayoutComponentsFromTree(uiCompTree);
 
     // If no componentName is provided, return all items
     if (!componentName) {
@@ -92,6 +96,7 @@ export function getEditorComponentInfo(editorState: EditorState, componentName?:
         currentLayout,
         simpleContainer,
         items,
+        allAppComponents,
       };
     }
 
@@ -113,38 +118,35 @@ export function getEditorComponentInfo(editorState: EditorState, componentName?:
       simpleContainer,
       componentType,
       items,
+      allAppComponents,
     };  
   } catch(error) {
     console.error('Error getting editor component key:', error);
     return null;
   }
 }
 
-interface Container {
-  items?: Record<string, any>; 
-}
-
-function getCombinedItems(uiCompTree: any) {
+function getCombinedItems(uiCompTree: any, parentPath: string[] = []): Record<string, any> {
   const combined: Record<string, any> = {};
 
-  if (uiCompTree.items) {
-    Object.entries(uiCompTree.items).forEach(([itemKey, itemValue]) => {
-      combined[itemKey] = itemValue;
-    });
-  }
+  function processContainer(container: any, currentPath: string[]) {
+    if (container.items) {
+      Object.entries(container.items).forEach(([itemKey, itemValue]) => {
+        (itemValue as any).parentPath = [...currentPath];
+        combined[itemKey] = itemValue;
+      });
+    }
 
-  if (uiCompTree.children) {
-    Object.entries(uiCompTree.children).forEach(([parentKey, container]) => {
-      const typedContainer = container as Container; 
-      if (typedContainer.items) {
-        Object.entries(typedContainer.items).forEach(([itemKey, itemValue]) => {
-          itemValue.parentContainer = parentKey;
-          combined[itemKey] = itemValue;
-        });
-      }
-    });
+    if (container.children) {
+      Object.entries(container.children).forEach(([childKey, childContainer]) => {
+        const newPath = [...currentPath, childKey];
+        processContainer(childContainer, newPath);
+      });
+    }
   }
 
+  processContainer(uiCompTree, parentPath);
+
   return combined;
 }
 
@@ -156,3 +158,78 @@ export function getLayoutItemsOrder(layoutItems: any[]){
     value: index.toString()
   }));
 }
+
+function getAllLayoutComponentsFromTree(compTree: any): any[] {
+  try {
+    const allCompItems = getAllCompItems(compTree);
+
+    return Object.entries(allCompItems).map(([itemKey, item]) => {
+      const compItem = item as any;
+      if (compItem && compItem.children) {
+        return {
+          id: itemKey,
+          compType: compItem.children.compType?.getView(),
+          name: compItem.children.name?.getView(),
+          key: itemKey,
+          comp: compItem.children.comp,
+          autoHeight: compItem.autoHeight?.(),
+          hidden: compItem.children.comp?.children?.hidden?.getView(),
+          parentPath: compItem.parentPath || []
+        };
+      }
+    });
+  } catch (error) {
+    console.error('Error getting all app components from tree:', error);
+    return [];
+  }
+}
+
+export function getAllContainers(editorState: any) {
+  const containers: Array<{container: any, path: string[]}> = [];
+
+  function findContainers(comp: any, path: string[] = []) {
+    if (!comp) return;
+
+    if (comp.realSimpleContainer && typeof comp.realSimpleContainer === 'function') {
+      const simpleContainer = comp.realSimpleContainer();
+      if (simpleContainer) {
+        containers.push({ container: simpleContainer, path });
+      }
+    }
+
+    if (comp.children) {
+      Object.entries(comp.children).forEach(([key, child]) => {
+        findContainers(child, [...path, key]);
+      });
+    }
+  }
+
+  const uiComp = editorState.getUIComp();
+  const container = uiComp.getComp();
+  if (container) {
+    findContainers(container);
+  }
+
+  return containers;
+}
+
+export function findTargetComponent(editorState: any, selectedEditorComponent: string) {
+  const allContainers = getAllContainers(editorState);
+
+  for (const containerInfo of allContainers) {
+    const containerLayout = containerInfo.container.children.layout.getView();
+    const containerItems = containerInfo.container.children.items.children;
+
+    for (const [key, item] of Object.entries(containerItems)) {
+      if ((item as any).children.name.getView() === selectedEditorComponent) {
+        return {
+          container: containerInfo.container,
+          layout: containerLayout,
+          componentKey: key
+        };
+      }
+    }
+  }
+
+  return null;
+}