"add block" shortcut update

langgenius · Aug 23, 2024 · 18b6159 · 18b6159
1 parent 5408e92
commit 18b6159
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 30 deletions.
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
@@ -239,8 +239,8 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleSelectionDrag,
   } = useSelectionInteractions()
   const {
-    handlePaneContextMenu,
-    handlePaneContextmenuCancel,
+    handlePanelContextMenu,
+    handlePanelContextmenuCancel,
   } = usePanelInteractions()
   const {
     isValidConnection,
@@ -304,7 +304,7 @@ const Workflow: FC<WorkflowProps> = memo(({
           <UpdateDSLModal
             onCancel={() => setShowImportDSLModal(false)}
             onBackup={exportCheck}
-            onImport={handlePaneContextmenuCancel}
+            onImport={handlePanelContextmenuCancel}
           />
         )
       }
@@ -338,7 +338,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         onSelectionStart={handleSelectionStart}
         onSelectionChange={handleSelectionChange}
         onSelectionDrag={handleSelectionDrag}
-        onPaneContextMenu={handlePaneContextMenu}
+        onPaneContextMenu={handlePanelContextMenu}
         connectionLineComponent={CustomConnectionLine}
         connectionLineContainerStyle={{ zIndex: ITERATION_CHILDREN_Z_INDEX }}
         defaultViewport={viewport}

diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
@@ -1,14 +1,9 @@
-import {
-  memo,
-  useCallback,
-} from 'react'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 import { RiAddCircleFill } from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import type { OffsetOptions } from '@floating-ui/react'
-import {
-  generateNewNode,
-} from '../utils'
+import { generateNewNode } from '../utils'
 import {
   useAvailableBlocks,
   useNodesReadOnly,
@@ -19,20 +14,19 @@ import { useStore, useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
 import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
-import type {
-  OnSelectBlock,
-} from '@/app/components/workflow/types'
-import {
-  BlockEnum,
-} from '@/app/components/workflow/types'
+import type { OnSelectBlock } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 type AddBlockProps = {
   renderTrigger?: (open: boolean) => React.ReactNode
   offset?: OffsetOptions
+  useShortcut?: boolean
 }
+
 const AddBlock = ({
   renderTrigger,
   offset,
+  useShortcut = false,
 }: AddBlockProps) => {
   const { t } = useTranslation()
   const store = useStoreApi()
@@ -44,16 +38,24 @@ const AddBlock = ({
   const showAddBlock = useStore(state => state.showAddBlock)
   const setShowAddBlock = useStore(state => state.setShowAddBlock)
 
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    if (useShortcut && showAddBlock)
+      setIsOpen(true)
+  }, [useShortcut, showAddBlock])
+
   const handleOpenChange = useCallback((open: boolean) => {
-    setShowAddBlock(open)
+    setIsOpen(open)
+    if (useShortcut)
+      setShowAddBlock(open)
+
     if (!open)
       handlePanelContextmenuCancel()
-  }, [setShowAddBlock, handlePanelContextmenuCancel])
+  }, [useShortcut, setShowAddBlock, handlePanelContextmenuCancel])
 
   const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
-    const {
-      getNodes,
-    } = store.getState()
+    const { getNodes } = store.getState()
     const nodes = getNodes()
     const nodesWithSameType = nodes.filter(node => node.data.type === type)
     const newNode = generateNewNode({
@@ -68,16 +70,12 @@ const AddBlock = ({
         y: 0,
       },
     })
-    workflowStore.setState({
-      candidateNode: newNode,
-    })
+    workflowStore.setState({ candidateNode: newNode })
   }, [store, workflowStore, t])
 
   const renderTriggerElement = useCallback((open: boolean) => {
     return (
-      <TipPopup
-        title={t('workflow.common.addBlock')}
-      >
+      <TipPopup title={t('workflow.common.addBlock')}>
         <div className={cn(
           'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
           `${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
@@ -91,7 +89,7 @@ const AddBlock = ({
 
   return (
     <BlockSelector
-      open={showAddBlock}
+      open={isOpen}
       onOpenChange={handleOpenChange}
       disabled={nodesReadOnly}
       onSelect={handleSelect}

diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
@@ -44,7 +44,9 @@ const Control = () => {
 
   return (
     <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
-      <AddBlock />
+      <AddBlock
+        useShortcut={true}
+      />
       <TipPopup title={t('workflow.nodes.note.addNote')}>
         <div
           className={cn(

diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
@@ -68,6 +68,7 @@ const PanelContextmenu = () => {
             mainAxis: -36,
             crossAxis: -4,
           }}
+          useShortcut={false}
         />
         <div
           className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'