From 4d52b82d30636a34fa46f73c07569aa4de4cb302 Mon Sep 17 00:00:00 2001
From: joe <joe@myshell.ai>
Date: Thu, 19 Sep 2024 19:00:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtransition=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/app/transition-sheet/index.tsx | 42 ++++++-------------
 .../components/app/transition-sheet/utils.ts  | 24 +++++------
 2 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/web/apps/web/src/components/app/transition-sheet/index.tsx b/web/apps/web/src/components/app/transition-sheet/index.tsx
index 8c55f110..9a2756fa 100644
--- a/web/apps/web/src/components/app/transition-sheet/index.tsx
+++ b/web/apps/web/src/components/app/transition-sheet/index.tsx
@@ -2,9 +2,9 @@
 
 import { useReactFlowStore, getColor } from '@shellagent/flow-engine';
 import { TValues } from '@shellagent/form-engine';
-import { FormRef, Drawer } from '@shellagent/ui';
+import { Drawer } from '@shellagent/ui';
 import { useInjection } from 'inversify-react';
-import { useEffect, useRef, useMemo, useCallback, memo } from 'react';
+import { useMemo, useCallback, memo } from 'react';
 
 import {
   ICondition,
@@ -45,19 +45,13 @@ const TransitionSheet: React.FC<{}> = () => {
     runDrawerWidth: state.runDrawerWidth,
   }));
 
-  const formRef = useRef<FormRef>(null);
-  const loaded = useRef<boolean>(false);
-
-  useEffect(() => {
-    if (!loaded.current && transitionSheetOpen) {
-      const transitions = edgeData2Form(edges as ICustomEdge[], sourceHandle);
-      formRef.current?.reset({ transitions });
-      loaded.current = true;
-    }
-  }, [edges, sourceHandle, transitionSheetOpen]);
+  const handleClose = useCallback(() => {
+    setTransitionSheetOpen({ open: false, source: '', sourceHandle: '' });
+  }, [setTransitionSheetOpen]);
 
-  const handleTransitionsChange = useCallback(
-    (transitions: ICondition[] = []) => {
+  const handleChange = useCallback(
+    (values: TValues) => {
+      const transitions = (values?.transitions || []) as ICondition[];
       const { edgesToAdd, edgesToDelete, edgesToModify } = form2EdgeData({
         edges: edges as ICustomEdge[],
         values: transitions.map(transition => ({
@@ -130,22 +124,12 @@ const TransitionSheet: React.FC<{}> = () => {
         }),
       );
     },
-    [edges, onConnect, setEdges, sourceHandle, source],
-  );
-
-  const handleClose = useCallback(() => {
-    setTransitionSheetOpen({ open: false, source: '', sourceHandle: '' });
-  }, [setTransitionSheetOpen]);
-
-  const handleChange = useCallback(
-    (values: TValues) => {
-      handleTransitionsChange(values?.transitions || []);
-    },
-    [handleTransitionsChange],
+    [edges, onConnect, setEdges, sourceHandle],
   );
 
-  const values = useMemo<ICondition[]>(() => {
-    return edgeData2Form(edges as ICustomEdge[], sourceHandle);
+  const values = useMemo(() => {
+    const transitions = edgeData2Form(edges as ICustomEdge[], sourceHandle);
+    return { transitions };
   }, [edges, sourceHandle]);
 
   return (
@@ -167,7 +151,7 @@ const TransitionSheet: React.FC<{}> = () => {
       push={false}>
       <VariableProvider id={source} eventKey={currentEdegData?.event_key}>
         <NodeForm
-          ref={formRef}
+          key={sourceHandle}
           schema={transitionConfigSchema}
           values={values}
           onChange={handleChange}
diff --git a/web/apps/web/src/components/app/transition-sheet/utils.ts b/web/apps/web/src/components/app/transition-sheet/utils.ts
index 629c506e..2ab743b0 100644
--- a/web/apps/web/src/components/app/transition-sheet/utils.ts
+++ b/web/apps/web/src/components/app/transition-sheet/utils.ts
@@ -44,6 +44,13 @@ export const form2EdgeData = ({
   const edgesToDelete: ICustomEdge[] = [];
   const edgesToModify: { edge: ICustomEdge; newData: ICondition }[] = [];
 
+  const edgeMap = new Map<string, ICustomEdge>();
+  edges.forEach(edge => {
+    if (edge.sourceHandle === sourceHandle) {
+      edgeMap.set(edge.target, edge);
+    }
+  });
+
   values.forEach(v => {
     const id = `${sourceHandle}-${v.target}`;
     if (!result[id] || !result[id]?.conditions) {
@@ -53,10 +60,7 @@ export const form2EdgeData = ({
     }
     result[id].conditions?.push(v.condition);
 
-    // 检查是否需要添加新边
-    const existingEdge = edges.find(
-      edge => edge.sourceHandle === sourceHandle && edge.target === v.target,
-    );
+    const existingEdge = edgeMap.get(v.target);
     if (!existingEdge) {
       edgesToAdd.push(v);
     } else if (JSON.stringify(existingEdge.data) !== JSON.stringify(v)) {
@@ -64,15 +68,9 @@ export const form2EdgeData = ({
     }
   });
 
-  // 检查需要删除的边
-  edges.forEach(edge => {
-    if (edge.sourceHandle === sourceHandle) {
-      const matchingNewTransition = values.find(
-        nt => nt.target === edge.target,
-      );
-      if (!matchingNewTransition) {
-        edgesToDelete.push(edge);
-      }
+  edgeMap.forEach((edge, target) => {
+    if (!values.some(v => v.target === target)) {
+      edgesToDelete.push(edge);
     }
   });