feat: workflow add note node (#5164)

web/app/components/workflow/operator/control.tsx

@@ -1,4 +1,8 @@
-import { memo, useCallback } from 'react'
+import type { MouseEvent } from 'react'
+import {
+  memo,
+  useCallback,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import { useKeyPress } from 'ahooks'
@@ -11,6 +15,7 @@ import { isEventTargetInputArea } from '../utils'
 import { useStore } from '../store'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
+import { useOperator } from './hooks'
 import {
   Cursor02C,
   Hand02,
@@ -20,12 +25,14 @@ import {
   Hand02 as Hand02Solid,
 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { OrganizeGrid } from '@/app/components/base/icons/src/vender/line/layout'
+import { StickerSquare } from '@/app/components/base/icons/src/vender/line/files'
 
 const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
   const setControlMode = useStore(s => s.setControlMode)
   const { handleLayout } = useWorkflow()
+  const { handleAddNote } = useOperator()
   const {
     nodesReadOnly,
     getNodesReadOnly,
@@ -75,9 +82,28 @@ const Control = () => {
     handleLayout()
   }
 
+  const addNote = (e: MouseEvent<HTMLDivElement>) => {
+    if (getNodesReadOnly())
+      return
+
+    e.stopPropagation()
+    handleAddNote()
+  }
+
   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 />
+      <TipPopup title={t('workflow.nodes.note.addNote')}>
+        <div
+          className={cn(
+            'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
+            `${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
+          )}
+          onClick={addNote}
+        >
+          <StickerSquare />
+        </div>
+      </TipPopup>
       <div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
       <TipPopup title={t('workflow.common.pointerMode')}>
         <div

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

@@ -0,0 +1,41 @@
+import { useCallback } from 'react'
+import { generateNewNode } from '../utils'
+import { useWorkflowStore } from '../store'
+import type { NoteNodeType } from '../note-node/types'
+import { CUSTOM_NOTE_NODE } from '../note-node/constants'
+import { NoteTheme } from '../note-node/types'
+import { useAppContext } from '@/context/app-context'
+
+export const useOperator = () => {
+  const workflowStore = useWorkflowStore()
+  const { userProfile } = useAppContext()
+
+  const handleAddNote = useCallback(() => {
+    const newNode = generateNewNode({
+      type: CUSTOM_NOTE_NODE,
+      data: {
+        title: '',
+        desc: '',
+        type: '' as any,
+        text: '',
+        theme: NoteTheme.blue,
+        author: userProfile?.name || '',
+        showAuthor: true,
+        width: 240,
+        height: 88,
+        _isCandidate: true,
+      } as NoteNodeType,
+      position: {
+        x: 0,
+        y: 0,
+      },
+    })
+    workflowStore.setState({
+      candidateNode: newNode,
+    })
+  }, [workflowStore, userProfile])
+
+  return {
+    handleAddNote,
+  }
+}