fix handleModeComment

web/app/components/workflow/hooks/use-workflow-interactions.ts

@@ -70,9 +70,18 @@ export const useWorkflowMoveMode = () => {
     handleSelectionCancel()
   }, [getNodesReadOnly, setControlMode, handleSelectionCancel])
 
+  const handleModeComment = useCallback(() => {
+    if (getNodesReadOnly())
+      return
+
+    setControlMode(ControlMode.Comment)
+    handleSelectionCancel()
+  }, [getNodesReadOnly, setControlMode, handleSelectionCancel])
+
   return {
     handleModePointer,
     handleModeHand,
+    handleModeComment,
   }
 }
 

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

@@ -33,9 +33,9 @@ const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
-  const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
+  const { handleModePointer, handleModeHand, handleModeComment } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
-  const { handleAddNote, handleAddComment } = useOperator()
+  const { handleAddNote } = useOperator()
   const {
     nodesReadOnly,
     getNodesReadOnly,
@@ -50,14 +50,6 @@ const Control = () => {
     handleAddNote()
   }
 
-  const addComment = (e: MouseEvent<HTMLDivElement>) => {
-    if (getNodesReadOnly())
-      return
-
-    e.stopPropagation()
-    handleAddComment()
-  }
-
   return (
     <div className='pointer-events-auto flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
       <AddBlock />
@@ -104,7 +96,7 @@ const Control = () => {
             controlMode === ControlMode.Comment ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
             `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
           )}
-          onClick={addComment}
+          onClick={handleModeComment}
         >
           <Comment className='h-4 w-4' />
         </div>

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

@@ -5,7 +5,6 @@ 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'
-import { ControlMode } from '../types'
 
 export const useOperator = () => {
   const workflowStore = useWorkflowStore()
@@ -36,14 +35,7 @@ export const useOperator = () => {
     })
   }, [workflowStore, userProfile])
 
-  const handleAddComment = useCallback(() => {
-    workflowStore.setState({
-      controlMode: ControlMode.Comment,
-    })
-  }, [workflowStore])
-
   return {
     handleAddNote,
-    handleAddComment,
   }
 }