hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-11 03:46:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Pascal M
2024-06-26 08:37:12 +02:00
committed by GitHub
parent d0fe56a98e
commit af9448e6f2
38 changed files with 2049 additions and 778 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/app/components/workflow/index.tsx
View File

@@ -76,6 +76,7 @@ import {
ITERATION_CHILDREN_Z_INDEX,
WORKFLOW_DATA_UPDATE,
} from './constants'
import { WorkflowHistoryProvider, useWorkflowHistoryStore } from './workflow-history-store'
import Loading from '@/app/components/base/loading'
import { FeaturesProvider } from '@/app/components/base/features'
import type { Features as FeaturesData } from '@/app/components/base/features/types'
@@ -181,6 +182,8 @@ const Workflow: FC<WorkflowProps> = memo(({
useEventListener('keydown', (e) => {
if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
e.preventDefault()
if ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey))
e.preventDefault()
})
useEventListener('mousemove', (e) => {
const containerClientRect = workflowContainerRef.current?.getBoundingClientRect()
@@ -212,6 +215,8 @@ const Workflow: FC<WorkflowProps> = memo(({
handleNodesPaste,
handleNodesDuplicate,
handleNodesDelete,
handleHistoryBack,
handleHistoryForward,
} = useNodesInteractions()
const {
handleEdgeEnter,
@@ -242,6 +247,8 @@ const Workflow: FC<WorkflowProps> = memo(({
},
})
const { shortcutsEnabled: workflowHistoryShortcutsEnabled } = useWorkflowHistoryStore()
useKeyPress('delete', handleNodesDelete)
useKeyPress(['delete', 'backspace'], handleEdgeDelete)
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.c`, (e) => {
@@ -258,6 +265,18 @@ const Workflow: FC<WorkflowProps> = memo(({
}, { exactMatch: true, useCapture: true })
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.d`, handleNodesDuplicate, { exactMatch: true, useCapture: true })
useKeyPress(`${getKeyboardKeyCodeBySystem('alt')}.r`, handleStartWorkflowRun, { exactMatch: true, useCapture: true })
useKeyPress(`${getKeyboardKeyCodeBySystem('alt')}.r`, handleStartWorkflowRun, { exactMatch: true, useCapture: true })
useKeyPress(
`${getKeyboardKeyCodeBySystem('ctrl')}.z`,
() => workflowHistoryShortcutsEnabled && handleHistoryBack(),
{ exactMatch: true, useCapture: true },
)
useKeyPress(
[`${getKeyboardKeyCodeBySystem('ctrl')}.y`, `${getKeyboardKeyCodeBySystem('ctrl')}.shift.z`],
() => workflowHistoryShortcutsEnabled && handleHistoryForward(),
{ exactMatch: true, useCapture: true },
)
return (
<div
@@ -271,9 +290,9 @@ const Workflow: FC<WorkflowProps> = memo(({
>
<SyncingDataModal />
<CandidateNode />
<Header />
<Header/>
<Panel />
<Operator />
<Operator handleRedo={handleHistoryForward} handleUndo={handleHistoryBack} />
{
showFeaturesPanel && <Features />
}
@@ -403,13 +422,17 @@ const WorkflowWrap = memo(() => {
return (
<ReactFlowProvider>
<FeaturesProvider features={initialFeatures}>
<Workflow
nodes={nodesData}
edges={edgesData}
viewport={data?.graph.viewport}
/>
</FeaturesProvider>
<WorkflowHistoryProvider
nodes={nodesData}
edges={edgesData} >
<FeaturesProvider features={initialFeatures}>
<Workflow
nodes={nodesData}
edges={edgesData}
viewport={data?.graph.viewport}
/>
</FeaturesProvider>
</WorkflowHistoryProvider>
</ReactFlowProvider>
)
})