feat: change history by supplementary node information (#25294)

Co-authored-by: alleschen <alleschen@tencent.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/workflow/hooks/use-nodes-interactions.ts

@@ -174,7 +174,7 @@ export const useNodesInteractions = () => {
 
       if (x !== 0 && y !== 0) {
         // selecting a note will trigger a drag stop event with x and y as 0
-        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop)
+        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop, { nodeId: node.id })
       }
     }
   }, [workflowStore, getNodesReadOnly, saveStateToHistory, handleSyncWorkflowDraft])
@@ -423,7 +423,7 @@ export const useNodesInteractions = () => {
       setEdges(newEdges)
 
       handleSyncWorkflowDraft()
-      saveStateToHistory(WorkflowHistoryEvent.NodeConnect)
+      saveStateToHistory(WorkflowHistoryEvent.NodeConnect, { nodeId: targetNode?.id })
     }
     else {
       const {
@@ -659,10 +659,10 @@ export const useNodesInteractions = () => {
     handleSyncWorkflowDraft()
 
     if (currentNode.type === CUSTOM_NOTE_NODE)
-      saveStateToHistory(WorkflowHistoryEvent.NoteDelete)
+      saveStateToHistory(WorkflowHistoryEvent.NoteDelete, { nodeId: currentNode.id })
 
     else
-      saveStateToHistory(WorkflowHistoryEvent.NodeDelete)
+      saveStateToHistory(WorkflowHistoryEvent.NodeDelete, { nodeId: currentNode.id })
   }, [getNodesReadOnly, store, deleteNodeInspectorVars, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, t])
 
   const handleNodeAdd = useCallback<OnNodeAdd>((
@@ -1100,7 +1100,7 @@ export const useNodesInteractions = () => {
       setEdges(newEdges)
     }
     handleSyncWorkflowDraft()
-    saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
+    saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: newNode.id })
   }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, getAfterNodesInSameBranch, checkNestedParallelLimit])
 
   const handleNodeChange = useCallback((
@@ -1182,7 +1182,7 @@ export const useNodesInteractions = () => {
     setEdges(newEdges)
     handleSyncWorkflowDraft()
 
-    saveStateToHistory(WorkflowHistoryEvent.NodeChange)
+    saveStateToHistory(WorkflowHistoryEvent.NodeChange, { nodeId: currentNodeId })
   }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodesCancelSelected = useCallback(() => {
@@ -1404,7 +1404,7 @@ export const useNodesInteractions = () => {
 
       setNodes([...nodes, ...nodesToPaste])
       setEdges([...edges, ...edgesToPaste])
-      saveStateToHistory(WorkflowHistoryEvent.NodePaste)
+      saveStateToHistory(WorkflowHistoryEvent.NodePaste, { nodeId: nodesToPaste?.[0]?.id })
       handleSyncWorkflowDraft()
     }
   }, [getNodesReadOnly, workflowStore, store, reactflow, saveStateToHistory, handleSyncWorkflowDraft, handleNodeIterationChildrenCopy, handleNodeLoopChildrenCopy])
@@ -1501,7 +1501,7 @@ export const useNodesInteractions = () => {
     })
     setNodes(newNodes)
     handleSyncWorkflowDraft()
-    saveStateToHistory(WorkflowHistoryEvent.NodeResize)
+    saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId })
   }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodeDisconnect = useCallback((nodeId: string) => {

web/app/components/workflow/hooks/use-workflow-history.ts

@@ -8,6 +8,7 @@ import {
 } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { useWorkflowHistoryStore } from '../workflow-history-store'
+import type { WorkflowHistoryEventMeta } from '../workflow-history-store'
 
 /**
  * All supported Events that create a new history state.
@@ -64,20 +65,21 @@ export const useWorkflowHistory = () => {
   // Some events may be triggered multiple times in a short period of time.
   // We debounce the history state update to avoid creating multiple history states
   // with minimal changes.
-  const saveStateToHistoryRef = useRef(debounce((event: WorkflowHistoryEvent) => {
+  const saveStateToHistoryRef = useRef(debounce((event: WorkflowHistoryEvent, meta?: WorkflowHistoryEventMeta) => {
     workflowHistoryStore.setState({
       workflowHistoryEvent: event,
+      workflowHistoryEventMeta: meta,
       nodes: store.getState().getNodes(),
       edges: store.getState().edges,
     })
   }, 500))
 
-  const saveStateToHistory = useCallback((event: WorkflowHistoryEvent) => {
+  const saveStateToHistory = useCallback((event: WorkflowHistoryEvent, meta?: WorkflowHistoryEventMeta) => {
     switch (event) {
       case WorkflowHistoryEvent.NoteChange:
         // Hint: Note change does not trigger when note text changes,
         // because the note editors have their own history states.
-        saveStateToHistoryRef.current(event)
+        saveStateToHistoryRef.current(event, meta)
         break
       case WorkflowHistoryEvent.NodeTitleChange:
       case WorkflowHistoryEvent.NodeDescriptionChange:
@@ -93,7 +95,7 @@ export const useWorkflowHistory = () => {
       case WorkflowHistoryEvent.NoteAdd:
       case WorkflowHistoryEvent.LayoutOrganize:
       case WorkflowHistoryEvent.NoteDelete:
-        saveStateToHistoryRef.current(event)
+        saveStateToHistoryRef.current(event, meta)
         break
       default:
         // We do not create a history state for every event.