feat: undo/redo for workflow editor (#3927)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/workflow/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './use-selection-interactions'
 export * from './use-panel-interactions'
 export * from './use-workflow-start-run'
 export * from './use-nodes-layout'
+export * from './use-workflow-history'

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

@@ -13,11 +13,13 @@ import type {
 import { getNodesConnectedSourceOrTargetHandleIdsMap } from '../utils'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useNodesReadOnly } from './use-workflow'
+import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
 
 export const useEdgesInteractions = () => {
   const store = useStoreApi()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const { saveStateToHistory } = useWorkflowHistory()
 
   const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
     if (getNodesReadOnly())
@@ -83,7 +85,8 @@ export const useEdgesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
+    saveStateToHistory(WorkflowHistoryEvent.EdgeDeleteByDeleteBranch)
+  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgeDelete = useCallback(() => {
     if (getNodesReadOnly())
@@ -123,7 +126,8 @@ export const useEdgesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, getNodesReadOnly, handleSyncWorkflowDraft])
+    saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
+  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgesChange = useCallback<OnEdgesChange>((changes) => {
     if (getNodesReadOnly())

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

@@ -42,18 +42,21 @@ import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 import type { IterationNodeType } from '../nodes/iteration/types'
 import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
 import { useNodeIterationInteractions } from '../nodes/iteration/use-interactions'
+import { useWorkflowHistoryStore } from '../workflow-history-store'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useHelpline } from './use-helpline'
 import {
   useNodesReadOnly,
   useWorkflow,
 } from './use-workflow'
+import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
 
 export const useNodesInteractions = () => {
   const { t } = useTranslation()
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
+  const { store: workflowHistoryStore } = useWorkflowHistoryStore()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const {
     getAfterNodesInSameBranch,
@@ -66,6 +69,8 @@ export const useNodesInteractions = () => {
   } = useNodeIterationInteractions()
   const dragNodeStartPosition = useRef({ x: 0, y: 0 } as { x: number; y: number })
 
+  const { saveStateToHistory, undo, redo } = useWorkflowHistory()
+
   const handleNodeDragStart = useCallback<NodeDragHandler>((_, node) => {
     workflowStore.setState({ nodeAnimation: false })
 
@@ -137,8 +142,13 @@ export const useNodesInteractions = () => {
       setHelpLineHorizontal()
       setHelpLineVertical()
       handleSyncWorkflowDraft()
+
+      if (x !== 0 && y !== 0) {
+        // selecting a note will trigger a drag stop event with x and y as 0
+        saveStateToHistory(WorkflowHistoryEvent.NodeDragStop)
+      }
     }
-  }, [handleSyncWorkflowDraft, workflowStore, getNodesReadOnly])
+  }, [workflowStore, getNodesReadOnly, saveStateToHistory, handleSyncWorkflowDraft])
 
   const handleNodeEnter = useCallback<NodeMouseHandler>((_, node) => {
     if (getNodesReadOnly())
@@ -359,8 +369,10 @@ export const useNodesInteractions = () => {
       return filtered
     })
     setEdges(newEdges)
+
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
+    saveStateToHistory(WorkflowHistoryEvent.NodeConnect)
+  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodeConnectStart = useCallback<OnConnectStart>((_, { nodeId, handleType, handleId }) => {
     if (getNodesReadOnly())
@@ -544,7 +556,13 @@ export const useNodesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly, workflowStore, t])
+
+    if (currentNode.type === 'custom-note')
+      saveStateToHistory(WorkflowHistoryEvent.NoteDelete)
+
+    else
+      saveStateToHistory(WorkflowHistoryEvent.NodeDelete)
+  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, t])
 
   const handleNodeAdd = useCallback<OnNodeAdd>((
     {
@@ -877,7 +895,8 @@ export const useNodesInteractions = () => {
       setEdges(newEdges)
     }
     handleSyncWorkflowDraft()
-  }, [store, workflowStore, handleSyncWorkflowDraft, getAfterNodesInSameBranch, getNodesReadOnly, t])
+    saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
+  }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory, workflowStore, getAfterNodesInSameBranch])
 
   const handleNodeChange = useCallback((
     currentNodeId: string,
@@ -955,7 +974,9 @@ export const useNodesInteractions = () => {
     })
     setEdges(newEdges)
     handleSyncWorkflowDraft()
-  }, [store, handleSyncWorkflowDraft, getNodesReadOnly, t])
+
+    saveStateToHistory(WorkflowHistoryEvent.NodeChange)
+  }, [getNodesReadOnly, store, t, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleNodeCancelRunningStatus = useCallback(() => {
     const {
@@ -1107,9 +1128,10 @@ export const useNodesInteractions = () => {
       })
 
       setNodes([...nodes, ...nodesToPaste])
+      saveStateToHistory(WorkflowHistoryEvent.NodePaste)
       handleSyncWorkflowDraft()
     }
-  }, [getNodesReadOnly, store, workflowStore, handleSyncWorkflowDraft, reactflow, handleNodeIterationChildrenCopy])
+  }, [getNodesReadOnly, workflowStore, store, reactflow, saveStateToHistory, handleSyncWorkflowDraft, handleNodeIterationChildrenCopy])
 
   const handleNodesDuplicate = useCallback(() => {
     if (getNodesReadOnly())
@@ -1208,7 +1230,52 @@ export const useNodesInteractions = () => {
     })
     setNodes(newNodes)
     handleSyncWorkflowDraft()
-  }, [store, getNodesReadOnly, handleSyncWorkflowDraft])
+    saveStateToHistory(WorkflowHistoryEvent.NodeResize)
+  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
+
+  const handleHistoryBack = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    const {
+      shortcutsDisabled,
+    } = workflowStore.getState()
+
+    if (shortcutsDisabled)
+      return
+
+    const { setEdges, setNodes } = store.getState()
+    undo()
+
+    const { edges, nodes } = workflowHistoryStore.getState()
+    if (edges.length === 0 && nodes.length === 0)
+      return
+
+    setEdges(edges)
+    setNodes(nodes)
+  }, [store, undo, workflowHistoryStore, workflowStore, getNodesReadOnly])
+
+  const handleHistoryForward = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    const {
+      shortcutsDisabled,
+    } = workflowStore.getState()
+
+    if (shortcutsDisabled)
+      return
+
+    const { setEdges, setNodes } = store.getState()
+    redo()
+
+    const { edges, nodes } = workflowHistoryStore.getState()
+    if (edges.length === 0 && nodes.length === 0)
+      return
+
+    setEdges(edges)
+    setNodes(nodes)
+  }, [redo, store, workflowHistoryStore, workflowStore, getNodesReadOnly])
 
   return {
     handleNodeDragStart,
@@ -1232,5 +1299,7 @@ export const useNodesInteractions = () => {
     handleNodesDuplicate,
     handleNodesDelete,
     handleNodeResize,
+    handleHistoryBack,
+    handleHistoryForward,
   }
 }

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

@@ -0,0 +1,150 @@
+import {
+  useCallback,
+  useRef, useState,
+} from 'react'
+import { debounce } from 'lodash-es'
+import {
+  useStoreApi,
+} from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import { useWorkflowHistoryStore } from '../workflow-history-store'
+
+/**
+ * All supported Events that create a new history state.
+ * Current limitations:
+ * - InputChange events in Node Panels do not trigger state changes.
+ * - Resizing UI elements does not trigger state changes.
+ */
+export enum WorkflowHistoryEvent {
+  NodeTitleChange = 'NodeTitleChange',
+  NodeDescriptionChange = 'NodeDescriptionChange',
+  NodeDragStop = 'NodeDragStop',
+  NodeChange = 'NodeChange',
+  NodeConnect = 'NodeConnect',
+  NodePaste = 'NodePaste',
+  NodeDelete = 'NodeDelete',
+  EdgeDelete = 'EdgeDelete',
+  EdgeDeleteByDeleteBranch = 'EdgeDeleteByDeleteBranch',
+  NodeAdd = 'NodeAdd',
+  NodeResize = 'NodeResize',
+  NoteAdd = 'NoteAdd',
+  NoteChange = 'NoteChange',
+  NoteDelete = 'NoteDelete',
+  LayoutOrganize = 'LayoutOrganize',
+}
+
+export const useWorkflowHistory = () => {
+  const store = useStoreApi()
+  const { store: workflowHistoryStore } = useWorkflowHistoryStore()
+  const { t } = useTranslation()
+
+  const [undoCallbacks, setUndoCallbacks] = useState<any[]>([])
+  const [redoCallbacks, setRedoCallbacks] = useState<any[]>([])
+
+  const onUndo = useCallback((callback: unknown) => {
+    setUndoCallbacks((prev: any) => [...prev, callback])
+    return () => setUndoCallbacks(prev => prev.filter(cb => cb !== callback))
+  }, [])
+
+  const onRedo = useCallback((callback: unknown) => {
+    setRedoCallbacks((prev: any) => [...prev, callback])
+    return () => setRedoCallbacks(prev => prev.filter(cb => cb !== callback))
+  }, [])
+
+  const undo = useCallback(() => {
+    workflowHistoryStore.temporal.getState().undo()
+    undoCallbacks.forEach(callback => callback())
+  }, [undoCallbacks, workflowHistoryStore.temporal])
+
+  const redo = useCallback(() => {
+    workflowHistoryStore.temporal.getState().redo()
+    redoCallbacks.forEach(callback => callback())
+  }, [redoCallbacks, workflowHistoryStore.temporal])
+
+  // 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) => {
+    workflowHistoryStore.setState({
+      workflowHistoryEvent: event,
+      nodes: store.getState().getNodes(),
+      edges: store.getState().edges,
+    })
+  }, 500))
+
+  const saveStateToHistory = useCallback((event: WorkflowHistoryEvent) => {
+    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)
+        break
+      case WorkflowHistoryEvent.NodeTitleChange:
+      case WorkflowHistoryEvent.NodeDescriptionChange:
+      case WorkflowHistoryEvent.NodeDragStop:
+      case WorkflowHistoryEvent.NodeChange:
+      case WorkflowHistoryEvent.NodeConnect:
+      case WorkflowHistoryEvent.NodePaste:
+      case WorkflowHistoryEvent.NodeDelete:
+      case WorkflowHistoryEvent.EdgeDelete:
+      case WorkflowHistoryEvent.EdgeDeleteByDeleteBranch:
+      case WorkflowHistoryEvent.NodeAdd:
+      case WorkflowHistoryEvent.NodeResize:
+      case WorkflowHistoryEvent.NoteAdd:
+      case WorkflowHistoryEvent.LayoutOrganize:
+      case WorkflowHistoryEvent.NoteDelete:
+        saveStateToHistoryRef.current(event)
+        break
+      default:
+        // We do not create a history state for every event.
+        // Some events of reactflow may change things the user would not want to undo/redo.
+        // For example: UI state changes like selecting a node.
+        break
+    }
+  }, [])
+
+  const getHistoryLabel = useCallback((event: WorkflowHistoryEvent) => {
+    switch (event) {
+      case WorkflowHistoryEvent.NodeTitleChange:
+        return t('workflow.changeHistory.nodeTitleChange')
+      case WorkflowHistoryEvent.NodeDescriptionChange:
+        return t('workflow.changeHistory.nodeDescriptionChange')
+      case WorkflowHistoryEvent.LayoutOrganize:
+      case WorkflowHistoryEvent.NodeDragStop:
+        return t('workflow.changeHistory.nodeDragStop')
+      case WorkflowHistoryEvent.NodeChange:
+        return t('workflow.changeHistory.nodeChange')
+      case WorkflowHistoryEvent.NodeConnect:
+        return t('workflow.changeHistory.nodeConnect')
+      case WorkflowHistoryEvent.NodePaste:
+        return t('workflow.changeHistory.nodePaste')
+      case WorkflowHistoryEvent.NodeDelete:
+        return t('workflow.changeHistory.nodeDelete')
+      case WorkflowHistoryEvent.NodeAdd:
+        return t('workflow.changeHistory.nodeAdd')
+      case WorkflowHistoryEvent.EdgeDelete:
+      case WorkflowHistoryEvent.EdgeDeleteByDeleteBranch:
+        return t('workflow.changeHistory.edgeDelete')
+      case WorkflowHistoryEvent.NodeResize:
+        return t('workflow.changeHistory.nodeResize')
+      case WorkflowHistoryEvent.NoteAdd:
+        return t('workflow.changeHistory.noteAdd')
+      case WorkflowHistoryEvent.NoteChange:
+        return t('workflow.changeHistory.noteChange')
+      case WorkflowHistoryEvent.NoteDelete:
+        return t('workflow.changeHistory.noteDelete')
+      default:
+        return 'Unknown Event'
+    }
+  }, [t])
+
+  return {
+    store: workflowHistoryStore,
+    saveStateToHistory,
+    getHistoryLabel,
+    undo,
+    redo,
+    onUndo,
+    onRedo,
+  }
+}

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

@@ -42,6 +42,7 @@ import { findUsedVarNodes, getNodeOutputVars, updateNodeVars } from '../nodes/_b
 import { useNodesExtraData } from './use-nodes-data'
 import { useWorkflowTemplate } from './use-workflow-template'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
+import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   fetchNodesDefaultConfigs,
@@ -71,6 +72,7 @@ export const useWorkflow = () => {
   const workflowStore = useWorkflowStore()
   const nodesExtraData = useNodesExtraData()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { saveStateToHistory } = useWorkflowHistory()
 
   const setPanelWidth = useCallback((width: number) => {
     localStorage.setItem('workflow-node-panel-width', `${width}`)
@@ -122,10 +124,11 @@ export const useWorkflow = () => {
       y: 0,
       zoom,
     })
+    saveStateToHistory(WorkflowHistoryEvent.LayoutOrganize)
     setTimeout(() => {
       handleSyncWorkflowDraft()
     })
-  }, [store, reactflow, handleSyncWorkflowDraft, workflowStore])
+  }, [workflowStore, store, reactflow, saveStateToHistory, handleSyncWorkflowDraft])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
     const {