fix comment cursor in panel incorrect

This commit is contained in:
hjlarry 2025-09-16 10:20:12 +08:00
parent 10aa16b471
commit 22f6d285c7
3 changed files with 14 additions and 6 deletions

View File

@ -13,9 +13,13 @@ const CommentManager = () => {
const target = e.target as HTMLElement const target = e.target as HTMLElement
const isInDropdown = target.closest('[data-mention-dropdown]') const isInDropdown = target.closest('[data-mention-dropdown]')
const isInCommentInput = target.closest('[data-comment-input]') 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.preventDefault()
e.stopPropagation()
handleCreateComment(mousePosition) handleCreateComment(mousePosition)
} }
} }

View File

@ -7,6 +7,7 @@ import {
useEffect, useEffect,
useMemo, useMemo,
useRef, useRef,
useState,
} from 'react' } from 'react'
import { setAutoFreeze } from 'immer' import { setAutoFreeze } from 'immer'
import { import {
@ -115,6 +116,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
const workflowContainerRef = useRef<HTMLDivElement>(null) const workflowContainerRef = useRef<HTMLDivElement>(null)
const workflowStore = useWorkflowStore() const workflowStore = useWorkflowStore()
const reactflow = useReactFlow() const reactflow = useReactFlow()
const [isMouseOverCanvas, setIsMouseOverCanvas] = useState(false)
const [nodes, setNodes] = useNodesState(originalNodes) const [nodes, setNodes] = useNodesState(originalNodes)
const [edges, setEdges] = useEdgesState(originalEdges) const [edges, setEdges] = useEdgesState(originalEdges)
const controlMode = useStore(s => s.controlMode) const controlMode = useStore(s => s.controlMode)
@ -238,6 +240,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
elementY: e.clientY - containerClientRect.top, elementY: e.clientY - containerClientRect.top,
}, },
}) })
const target = e.target as HTMLElement
const onPane = !!target?.closest('.react-flow__pane')
setIsMouseOverCanvas(onPane)
} }
}) })
const { handleFetchAllTools } = useFetchToolsData() const { handleFetchAllTools } = useFetchToolsData()
@ -308,7 +313,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
relative h-full w-full min-w-[960px] relative h-full w-full min-w-[960px]
${workflowReadOnly && 'workflow-panel-animation'} ${workflowReadOnly && 'workflow-panel-animation'}
${nodeAnimation && 'workflow-node-animation'} ${nodeAnimation && 'workflow-node-animation'}
${controlMode === ControlMode.Comment ? 'cursor-crosshair' : ''}
`} `}
ref={workflowContainerRef} ref={workflowContainerRef}
> >
@ -337,7 +341,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
) )
} }
<LimitTips /> <LimitTips />
<CommentCursor mousePosition={mousePosition} /> {controlMode === ControlMode.Comment && isMouseOverCanvas && (
<CommentCursor mousePosition={mousePosition} />
)}
{pendingComment && ( {pendingComment && (
<CommentInput <CommentInput
position={pendingComment} position={pendingComment}

View File

@ -7,10 +7,8 @@
} }
/* Comment mode cursor override */ /* Comment mode cursor override */
.comment-mode-flow,
.comment-mode-flow .react-flow__pane, .comment-mode-flow .react-flow__pane,
.comment-mode-flow .react-flow__viewport, .comment-mode-flow .react-flow__viewport {
.comment-mode-flow * {
cursor: none !important; cursor: none !important;
} }