From 0031c715948fd3e222ab5f151ec15552db5747d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Sat, 7 Mar 2026 21:23:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=94=B6=E8=B5=B7=E5=90=8E=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E8=BF=9E=E7=BA=BF=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 tinyflow 条件节点收起态保留分支 handle，避免连线因 DOM 卸载消失

- 在节点折叠切换后刷新 xyflow 内部信息，确保连线锚点位置同步
---
 .../src/components/core/NodeWrapper.svelte    | 11 +++-
 .../src/components/nodes/ConditionNode.svelte | 62 ++++++++++++++++---
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/core/NodeWrapper.svelte b/easyflow-ui-admin/packages/tinyflow-ui/src/components/core/NodeWrapper.svelte
index 68ea40b..8d518a8 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/core/NodeWrapper.svelte
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/core/NodeWrapper.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-  import {Handle, type NodeProps, NodeToolbar, Position, useSvelteFlow} from '@xyflow/svelte';
+  import {
+    Handle,
+    type NodeProps,
+    NodeToolbar,
+    Position,
+    useSvelteFlow,
+    useUpdateNodeInternals
+  } from '@xyflow/svelte';
   import {Button, Collapse, FloatingTrigger, Input, Textarea} from '../base';
   import {type Snippet} from 'svelte';
   import {useDeleteNode} from '../utils/useDeleteNode.svelte';
@@ -41,6 +48,7 @@
 
     let activeKeys = data.expand ? ['key'] : [];
     const { updateNodeData, getNode } = useSvelteFlow();
+    const updateNodeInternals = useUpdateNodeInternals();
 
     const items = $derived.by(() => {
         return [{
@@ -244,6 +252,7 @@
     <div class="tf-node-wrapper-body">
         <Collapse {items} activeKeys={activeKeys} onChange={(_,actionKeys) => {
             updateNodeData(id, {expand: actionKeys?.includes('key')})
+            updateNodeInternals(id);
             onCollapse?.(actionKeys?.includes('key') ? 'key' : '')
         }} />
     </div>
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/ConditionNode.svelte b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/ConditionNode.svelte
index 008551e..e775837 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/ConditionNode.svelte
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/ConditionNode.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
   import NodeWrapper from '../core/NodeWrapper.svelte';
-  import {type Edge, Handle, type NodeProps, Position, useSvelteFlow} from '@xyflow/svelte';
+  import {
+    type Edge,
+    Handle,
+    type NodeProps,
+    Position,
+    useSvelteFlow,
+    useUpdateNodeInternals
+  } from '@xyflow/svelte';
   import {Button, Input, MixedInput, Select} from '../base';
   import ParamTokenEditor from '../core/ParamTokenEditor.svelte';
   import {getCurrentNodeId} from '#components/utils/NodeUtils';
@@ -75,6 +82,7 @@
 
   const currentNodeId = getCurrentNodeId();
   const { updateNodeData } = useSvelteFlow();
+  const updateNodeInternals = useUpdateNodeInternals();
   const refOptions = useRefOptions(false);
 
   let activeBranchId = $state('');
@@ -214,6 +222,18 @@
     return label || `条件分支${index + 1}`;
   };
 
+  const isExpanded = () => Boolean(data?.expand);
+
+  const collapsedHandleTop = (index: number, count: number) => {
+    if (count <= 1) {
+      return '54px';
+    }
+    const start = 38;
+    const end = 74;
+    const step = (end - start) / (count - 1);
+    return `${start + index * step}px`;
+  };
+
   const syncManagedEdges = (branches: ConditionBranch[]) => {
     const branchMap = new Map(branches.map((branch) => [branch.id, branch]));
     const currentEdges = store.getEdges();
@@ -568,6 +588,12 @@
 
     syncManagedEdges(normalized.branches);
   });
+
+  $effect(() => {
+    branches.map((branch) => branch.id).join('|');
+    isExpanded();
+    updateNodeInternals(currentNodeId);
+  });
 </script>
 
 <NodeWrapper {data} {...rest} showSourceHandle={false} allowSettingOfCondition={false}>
@@ -577,6 +603,20 @@
         </svg>
     {/snippet}
 
+    {#snippet handle()}
+        {#if !isExpanded()}
+            {#each branches as branch, index}
+                <Handle
+                    type="source"
+                    position={Position.Right}
+                    id={`branch_${branch.id}`}
+                    class="condition-branch-handle condition-branch-handle-collapsed"
+                    style={`right: -28px; top: ${collapsedHandleTop(index, branches.length)};`}
+                />
+            {/each}
+        {/if}
+    {/snippet}
+
     <div class="condition-node-content">
     <div class="condition-rail-head">
         <div class="condition-rail-title">分支出口</div>
@@ -644,13 +684,15 @@
                         </svg>
                     </Button>
                 {/if}
-                <Handle
-                    type="source"
-                    position={Position.Right}
-                    id={`branch_${branch.id}`}
-                    class="condition-branch-handle"
-                    style="right: -28px; top: 50%; transform: translateY(-50%);"
-                />
+                {#if isExpanded()}
+                    <Handle
+                        type="source"
+                        position={Position.Right}
+                        id={`branch_${branch.id}`}
+                        class="condition-branch-handle"
+                        style="right: -28px; top: 50%; transform: translateY(-50%);"
+                    />
+                {/if}
             </div>
         {/each}
     </div>
@@ -876,6 +918,10 @@
     box-shadow: none;
   }
 
+  :global(.condition-branch-handle-collapsed) {
+    transform: translateY(-50%);
+  }
+
   .condition-editor-actions-inline {
     display: flex;
     align-items: center;