From 22f6d285c775ebc9edffb032e7dd56a67d8c7342 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Tue, 16 Sep 2025 10:20:12 +0800
Subject: [PATCH] fix comment cursor in panel incorrect

---
 web/app/components/workflow/comment-manager.tsx |  6 +++++-
 web/app/components/workflow/index.tsx           | 10 ++++++++--
 web/app/components/workflow/style.css           |  4 +---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/comment-manager.tsx b/web/app/components/workflow/comment-manager.tsx
index 81a4d45842..03dbe583f2 100644
--- a/web/app/components/workflow/comment-manager.tsx
+++ b/web/app/components/workflow/comment-manager.tsx
@@ -13,9 +13,13 @@ const CommentManager = () => {
       const target = e.target as HTMLElement
       const isInDropdown = target.closest('[data-mention-dropdown]')
       const isInCommentInput = target.closest('[data-comment-input]')
+      const isOnCanvasPane = target.closest('.react-flow__pane')
 
-      if (!isInDropdown && !isInCommentInput) {
+      // Only when clicking on the React Flow canvas pane (background),
+      // and not inside comment input or its dropdown
+      if (!isInDropdown && !isInCommentInput && isOnCanvasPane) {
         e.preventDefault()
+        e.stopPropagation()
         handleCreateComment(mousePosition)
       }
     }
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index ea479dc86e..8e65d1a804 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -7,6 +7,7 @@ import {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 import { setAutoFreeze } from 'immer'
 import {
@@ -115,6 +116,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const workflowContainerRef = useRef<HTMLDivElement>(null)
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
+  const [isMouseOverCanvas, setIsMouseOverCanvas] = useState(false)
   const [nodes, setNodes] = useNodesState(originalNodes)
   const [edges, setEdges] = useEdgesState(originalEdges)
   const controlMode = useStore(s => s.controlMode)
@@ -238,6 +240,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
           elementY: e.clientY - containerClientRect.top,
         },
       })
+      const target = e.target as HTMLElement
+      const onPane = !!target?.closest('.react-flow__pane')
+      setIsMouseOverCanvas(onPane)
     }
   })
   const { handleFetchAllTools } = useFetchToolsData()
@@ -308,7 +313,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
         relative h-full w-full min-w-[960px]
         ${workflowReadOnly && 'workflow-panel-animation'}
         ${nodeAnimation && 'workflow-node-animation'}
-        ${controlMode === ControlMode.Comment ? 'cursor-crosshair' : ''}
       `}
       ref={workflowContainerRef}
     >
@@ -337,7 +341,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
         )
       }
       <LimitTips />
-      <CommentCursor mousePosition={mousePosition} />
+      {controlMode === ControlMode.Comment && isMouseOverCanvas && (
+        <CommentCursor mousePosition={mousePosition} />
+      )}
       {pendingComment && (
         <CommentInput
           position={pendingComment}
diff --git a/web/app/components/workflow/style.css b/web/app/components/workflow/style.css
index 00265c2921..e0ad764986 100644
--- a/web/app/components/workflow/style.css
+++ b/web/app/components/workflow/style.css
@@ -7,10 +7,8 @@
 }
 
 /* Comment mode cursor override */
-.comment-mode-flow,
 .comment-mode-flow .react-flow__pane,
-.comment-mode-flow .react-flow__viewport,
-.comment-mode-flow * {
+.comment-mode-flow .react-flow__viewport {
   cursor: none !important;
 }