From 0675c5f71614fc9498c18be38e28a0b194a1901c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Tue, 30 Jul 2024 16:18:58 +0800
Subject: [PATCH] chore: add shortcut keys and hints for the shortcuts (#6779)

---
 web/app/components/workflow/header/undo-redo.tsx |  4 ++--
 web/app/components/workflow/operator/control.tsx | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index bd27e09173..796038ce98 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -30,7 +30,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
 
   return (
     <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
-      <TipPopup title={t('workflow.common.undo')!} >
+      <TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
         <div
           data-tooltip-id='workflow.undo'
           className={`
@@ -43,7 +43,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           <RiArrowGoBackLine className='h-4 w-4' />
         </div>
       </TipPopup>
-      <TipPopup title={t('workflow.common.redo')!} >
+      <TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}>
         <div
           data-tooltip-id='workflow.redo'
           className={`
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index daf628a2e3..4c1e952688 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -16,7 +16,7 @@ import {
   useSelectionInteractions,
   useWorkflow,
 } from '../hooks'
-import { isEventTargetInputArea } from '../utils'
+import { getKeyboardKeyCodeBySystem, isEventTargetInputArea } from '../utils'
 import { useStore } from '../store'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
@@ -78,6 +78,11 @@ const Control = () => {
     handleLayout()
   }
 
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.o`, (e) => {
+    e.preventDefault()
+    goLayout()
+  }, { exactMatch: true, useCapture: true })
+
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     if (getNodesReadOnly())
       return
@@ -101,7 +106,7 @@ const Control = () => {
         </div>
       </TipPopup>
       <div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
-      <TipPopup title={t('workflow.common.pointerMode')}>
+      <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
         <div
           className={cn(
             'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
@@ -113,7 +118,7 @@ const Control = () => {
           <RiCursorLine className='w-4 h-4' />
         </div>
       </TipPopup>
-      <TipPopup title={t('workflow.common.handMode')}>
+      <TipPopup title={t('workflow.common.handMode')} shortcuts={['h']}>
         <div
           className={cn(
             'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
@@ -126,7 +131,7 @@ const Control = () => {
         </div>
       </TipPopup>
       <div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
-      <TipPopup title={t('workflow.panel.organizeBlocks')}>
+      <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
           className={cn(
             'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',