fix(demo-free-layout): loop collapsed from selector-box (#738)

apps/demo-free-layout/src/form-components/form-header/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useContext, useState } from 'react';
+import { useContext, useState, useEffect } from 'react';
 
 import { useClientContext, CommandService } from '@flowgram.ai/free-layout-editor';
 import { Button } from '@douyinfe/semi-ui';
@@ -26,10 +26,6 @@ export function FormHeader() {
   const isSidebar = useIsSidebar();
   const handleExpand = (e: React.MouseEvent) => {
     toggleExpand();
-    // 折叠 loop 子节点
-    if (node.flowNodeType === 'loop') {
-      toggleLoopExpanded(node);
-    }
     e.stopPropagation(); // Disable clicking prevents the sidebar from opening
   };
   const handleDelete = () => {
@@ -38,6 +34,12 @@ export function FormHeader() {
   const handleClose = () => {
     setNodeId(undefined);
   };
+  useEffect(() => {
+    // 折叠 loop 子节点
+    if (node.flowNodeType === 'loop') {
+      toggleLoopExpanded(node, expanded);
+    }
+  }, [expanded]);
 
   return (
     <Header>

apps/demo-free-layout/src/utils/toggle-loop-expanded.ts

@@ -10,6 +10,9 @@ export function toggleLoopExpanded(
   expanded: boolean = node.transform.collapsed,
   heightCollapsed = 54
 ) {
+  if (!node.getNodeMeta().isContainer || node.transform.collapsed === !expanded) {
+    return;
+  }
   const bounds = node.bounds.clone();
   const prePosition = {
     x: node.transform.position.x,