fix:修复条件节点数据不同步问题

Author: 昔梦

packages/x-flow/src/XFlow.tsx

@@ -202,17 +202,27 @@ const XFlow: FC<FlowProps> = memo(props => {
     setEdges(newEdges);
   });
 
-  const handleNodeValueChange = debounce((data: any) => {
-    for (let node of nodes) {
-      if (node.id === data.id) {
-        node.data = {
-          ...node?.data,
-          ...data?.values,
-        };
-        break;
-      }
+  const handleNodeValueChange = debounce((data: any, id: string) => {
+    // for (let node of nodes) {
+    //   if (node.id === data.id) {
+    //     node.data = {
+    //       ...node?.data,
+    //       ...data?.values,
+    //     };
+    //     break;
+    //   }
+    // }
+    // setNodes([...nodes], false);
+    // 同时更新 activeNode 状态，确保面板数据同步
+    if (activeNode && activeNode.id === id) {
+      setActiveNode({
+        ...activeNode,
+        values: {
+          ...activeNode.values,
+          ...data,
+        },
+      });
     }
-    setNodes([...nodes], false);
   }, 200);
 
   const nodeTypes = useMemo(() => {
@@ -252,6 +262,7 @@ const XFlow: FC<FlowProps> = memo(props => {
   }, [layout]);
 
   const NodeEditorWrap = useMemo(() => {
+
     return (
       <NodeEditor
         ref={nodeEditorRef}
@@ -262,13 +273,14 @@ const XFlow: FC<FlowProps> = memo(props => {
 
       />
     );
+    // JSON.stringify(activeNode)
   }, [activeNode?.id]);
 
   const NodeLogWrap = useMemo(() => {
     return (
       <NodeLogPanel
         data={activeNode?.values}
-        onChange={handleNodeValueChange}
+        // onChange={handleNodeValueChange}
         nodeType={activeNode?._nodeType}
         id={activeNode?.id}
         node={activeNode}
@@ -285,18 +297,6 @@ const XFlow: FC<FlowProps> = memo(props => {
   const deletable = globalConfig?.edge?.deletable ?? true;
   const panelonClose = globalConfig?.nodePanel?.onClose;
 
-  const getNodesJ = nodes => {
-    const result = nodes.map(item => {
-      const { data, ...rest } = item;
-      const { _nodeType, ...restData } = data;
-      return {
-        ...rest,
-        data: restData,
-        type: _nodeType,
-      };
-    });
-    return result;
-  };
 
   return (
     <div id="xflow-container" ref={workflowContainerRef}>

packages/x-flow/src/components/NodeEditor/index.tsx

@@ -17,10 +17,11 @@ import { safeJsonStringify, uuid } from '../../utils';
 
 interface INodeEditorProps {
   data: any;
-  onChange: (data: any) => void;
+  onChange: (data: any, id?: string) => void;
   nodeType: string;
   id: string;
   ref?: React.Ref<any>; // 添加 ref 属性
+  // activeNode?: any;
 }
 
 const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
@@ -35,6 +36,20 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
   const getSettingSchema = nodeSetting['getSettingSchema'];
   const [asyncSchema, setAsyncSchema] = useState<Schema>({});
   const nodeWidgetRef = useRef(null);
+  const { nodes, setNodes } = useStore(
+    (state: any) => ({
+      nodes: state.nodes,
+      setNodes: state.setNodes,
+    }),
+    shallow
+  );
+  const [internalData, setInternalData] = useState();
+
+  useEffect(() => {
+    const activeNode = nodes.find(node => node.id === id);
+    const { _nodeType, _status, ...restData } = activeNode?.data || {};
+    setInternalData(restData);
+  }, []);
 
   useImperativeHandle(ref, () => ({
     validateForm: async () => {
@@ -51,7 +66,10 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
           .catch(err => {
             return false;
           });
-      } else if (nodeSetting?.settingWidget && nodeWidgetRef.current?.validateForm) {
+      } else if (
+        nodeSetting?.settingWidget &&
+        nodeWidgetRef.current?.validateForm
+      ) {
         result = await nodeWidgetRef.current.validateForm();
       }
       return result;
@@ -68,20 +86,13 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
     ).catch(() => ({}));
     setAsyncSchema(shema);
   }
+
   useEffect(() => {
     if (isFunction(getSettingSchema)) {
       getSchema();
     }
   }, []);
 
-  const { nodes, setNodes } = useStore(
-    (state: any) => ({
-      nodes: state.nodes,
-      setNodes: state.setNodes,
-    }),
-    shallow
-  );
-
   useEffect(() => {
     if (nodeSetting?.settingSchema) {
       // 自定义Schema
@@ -115,14 +126,14 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
             if (item?._id) {
               return item;
             } else {
-              if (node?.data?.list?.length && node?.data?.list[index]?._id) {
-                return {
-                  ...item,
-                  _id: node?.data?.list[index]?._id,
-                };
-              } else {
-                return { ...item, _id: `id_${uuid()}` };
-              }
+              // if (node?.data?.list?.length && node?.data?.list[index]?._id) {
+              //   return {
+              //     ...item,
+              //     _id: node?.data?.list[index]?._id,
+              //   };
+              // } else {
+              return { ...item, _id: `id_${uuid()}` };
+              // }
             }
           });
         }
@@ -131,6 +142,11 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
       }
     });
     setNodes(newNodes, false);
+
+    // if (onChange) {
+    //   onChange(data, id);
+    // }
+      setInternalData(data);
   }, 100);
 
   const watch = {
@@ -193,7 +209,8 @@ const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref: any) => {
         onChange={val => {
           handleNodeValueChange({ ...val });
         }}
-        value={data}
+        value={internalData} // data
+        // value={data}
         readOnly={readOnly}
       />
     );

packages/x-flow/src/components/NodeLogPanel/index.tsx

@@ -8,7 +8,7 @@ import './index.less';
 
 interface INodeEditorProps {
   data: any;
-  onChange: (data: any) => void;
+  onChange?: (data: any) => void;
   nodeType: string;
   id: string;
   node: any;