diff --git a/web/app/components/workflow/hooks/use-panel-interactions.ts b/web/app/components/workflow/hooks/use-panel-interactions.ts index 1f02ac7c74..902b246d59 100644 --- a/web/app/components/workflow/hooks/use-panel-interactions.ts +++ b/web/app/components/workflow/hooks/use-panel-interactions.ts @@ -5,7 +5,7 @@ import { useWorkflowStore } from '../store' export const usePanelInteractions = () => { const workflowStore = useWorkflowStore() - const handlePaneContextMenu = useCallback((e: MouseEvent) => { + const handlePanelContextMenu = useCallback((e: MouseEvent) => { e.preventDefault() const container = document.querySelector('#workflow-container') const { x, y } = container!.getBoundingClientRect() @@ -17,7 +17,7 @@ export const usePanelInteractions = () => { }) }, [workflowStore]) - const handlePaneContextmenuCancel = useCallback(() => { + const handlePanelContextmenuCancel = useCallback(() => { workflowStore.setState({ panelMenu: undefined, }) @@ -30,8 +30,8 @@ export const usePanelInteractions = () => { }, [workflowStore]) return { - handlePaneContextMenu, - handlePaneContextmenuCancel, + handlePanelContextMenu, + handlePanelContextmenuCancel, handleNodeContextmenuCancel, } } diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts index 097bf07864..f7a9b6fb4c 100644 --- a/web/app/components/workflow/hooks/use-shortcuts.ts +++ b/web/app/components/workflow/hooks/use-shortcuts.ts @@ -91,8 +91,10 @@ export const useShortcuts = (): void => { }, { exactMatch: true, useCapture: true }) useKeyPress(`${getKeyboardKeyCodeBySystem('shift')}.a`, (e) => { - if (shouldHandleShortcut(e)) + if (shouldHandleShortcut(e)) { e.preventDefault() + workflowStore.setState({ showAddBlock: true }) + } }, { exactMatch: true, useCapture: true }) useKeyPress(`${getKeyboardKeyCodeBySystem('alt')}.r`, (e) => { diff --git a/web/app/components/workflow/node-contextmenu.tsx b/web/app/components/workflow/node-contextmenu.tsx index 311bf1fddf..26b8ebf533 100644 --- a/web/app/components/workflow/node-contextmenu.tsx +++ b/web/app/components/workflow/node-contextmenu.tsx @@ -13,14 +13,14 @@ import { usePanelInteractions } from './hooks' const NodeContextmenu = () => { const ref = useRef(null) const nodes = useNodes() - const { handleNodeContextmenuCancel, handlePaneContextmenuCancel } = usePanelInteractions() + const { handleNodeContextmenuCancel, handlePanelContextmenuCancel } = usePanelInteractions() const nodeMenu = useStore(s => s.nodeMenu) const currentNode = nodes.find(node => node.id === nodeMenu?.nodeId) as Node useEffect(() => { if (nodeMenu) - handlePaneContextmenuCancel() - }, [nodeMenu, handlePaneContextmenuCancel]) + handlePanelContextmenuCancel() + }, [nodeMenu, handlePanelContextmenuCancel]) useClickAway(() => { handleNodeContextmenuCancel() diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx index 48222cc528..4dc7bd6a7f 100644 --- a/web/app/components/workflow/operator/add-block.tsx +++ b/web/app/components/workflow/operator/add-block.tsx @@ -1,7 +1,6 @@ import { memo, useCallback, - useState, } from 'react' import { RiAddCircleFill } from '@remixicon/react' import { useStoreApi } from 'reactflow' @@ -16,7 +15,7 @@ import { usePanelInteractions, } from '../hooks' import { NODES_INITIAL_DATA } from '../constants' -import { useWorkflowStore } from '../store' +import { useStore, useWorkflowStore } from '../store' import TipPopup from './tip-popup' import cn from '@/utils/classnames' import BlockSelector from '@/app/components/workflow/block-selector' @@ -39,15 +38,17 @@ const AddBlock = ({ const store = useStoreApi() const workflowStore = useWorkflowStore() const { nodesReadOnly } = useNodesReadOnly() - const { handlePaneContextmenuCancel } = usePanelInteractions() - const [open, setOpen] = useState(false) + const { handlePanelContextmenuCancel } = usePanelInteractions() const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, false) + const showAddBlock = useStore(state => state.showAddBlock) + const setShowAddBlock = useStore(state => state.setShowAddBlock) + const handleOpenChange = useCallback((open: boolean) => { - setOpen(open) + setShowAddBlock(open) if (!open) - handlePaneContextmenuCancel() - }, [handlePaneContextmenuCancel]) + handlePanelContextmenuCancel() + }, [setShowAddBlock, handlePanelContextmenuCancel]) const handleSelect = useCallback((type, toolDefaultValue) => { const { @@ -90,7 +91,7 @@ const AddBlock = ({ return ( { const clipboardElements = useStore(s => s.clipboardElements) const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal) const { handleNodesPaste } = useNodesInteractions() - const { handlePaneContextmenuCancel, handleNodeContextmenuCancel } = usePanelInteractions() + const { handlePanelContextmenuCancel, handleNodeContextmenuCancel } = usePanelInteractions() const { handleStartWorkflowRun } = useWorkflowStartRun() const { handleAddNote } = useOperator() const { exportCheck } = useDSL() @@ -35,7 +35,7 @@ const PanelContextmenu = () => { }, [panelMenu, handleNodeContextmenuCancel]) useClickAway(() => { - handlePaneContextmenuCancel() + handlePanelContextmenuCancel() }, ref) const renderTrigger = () => { @@ -74,7 +74,7 @@ const PanelContextmenu = () => { onClick={(e) => { e.stopPropagation() handleAddNote() - handlePaneContextmenuCancel() + handlePanelContextmenuCancel() }} > {t('workflow.nodes.note.addNote')} @@ -83,7 +83,7 @@ const PanelContextmenu = () => { className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => { handleStartWorkflowRun() - handlePaneContextmenuCancel() + handlePanelContextmenuCancel() }} > {t('workflow.common.run')} @@ -100,7 +100,7 @@ const PanelContextmenu = () => { onClick={() => { if (clipboardElements.length) { handleNodesPaste() - handlePaneContextmenuCancel() + handlePanelContextmenuCancel() } }} > diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts index 2e5e774191..e3178d0627 100644 --- a/web/app/components/workflow/store.ts +++ b/web/app/components/workflow/store.ts @@ -162,6 +162,8 @@ type Shape = { setControlPromptEditorRerenderKey: (controlPromptEditorRerenderKey: number) => void showImportDSLModal: boolean setShowImportDSLModal: (showImportDSLModal: boolean) => void + showAddBlock: boolean + setShowAddBlock: (showAddBlock: boolean) => void } export const createWorkflowStore = () => { @@ -262,6 +264,8 @@ export const createWorkflowStore = () => { setControlPromptEditorRerenderKey: controlPromptEditorRerenderKey => set(() => ({ controlPromptEditorRerenderKey })), showImportDSLModal: false, setShowImportDSLModal: showImportDSLModal => set(() => ({ showImportDSLModal })), + showAddBlock: false, + setShowAddBlock: showAddBlock => set(() => ({ showAddBlock })), })) }