From e8683bf957e46c73af24636ad7c16261b9210b55 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Thu, 18 Sep 2025 09:17:45 +0800
Subject: [PATCH] fix comment cursor position

---
 .../workflow/comment/comment-input.tsx        | 13 +++---------
 .../components/workflow/comment/cursor.tsx    |  4 ++--
 .../workflow/hooks/use-workflow-comment.ts    | 21 ++++++++++---------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
index 0a0bfb3ee3..bd8555ab76 100644
--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useReactFlow, useViewport } from 'reactflow'
+import { memo, useCallback, useEffect, useState } from 'react'
 import Avatar from '@/app/components/base/avatar'
 import { useAppContext } from '@/context/app-context'
 import { MentionInput } from './mention-input'
@@ -15,12 +14,6 @@ type CommentInputProps = {
 export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, onCancel }) => {
   const [content, setContent] = useState('')
   const { userProfile } = useAppContext()
-  const { flowToScreenPosition } = useReactFlow()
-  const viewport = useViewport()
-
-  const screenPosition = useMemo(() => {
-    return flowToScreenPosition(position)
-  }, [position.x, position.y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
 
   useEffect(() => {
     const handleGlobalKeyDown = (e: KeyboardEvent) => {
@@ -46,8 +39,8 @@ export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, o
     <div
       className="absolute z-50 w-96"
       style={{
-        left: screenPosition.x,
-        top: screenPosition.y,
+        left: position.x,
+        top: position.y,
       }}
       data-comment-input
     >
diff --git a/web/app/components/workflow/comment/cursor.tsx b/web/app/components/workflow/comment/cursor.tsx
index 70f3f12c6e..dbd430b019 100644
--- a/web/app/components/workflow/comment/cursor.tsx
+++ b/web/app/components/workflow/comment/cursor.tsx
@@ -17,8 +17,8 @@ export const CommentCursor: FC<CommentCursorProps> = memo(({ mousePosition }) =>
     <div
       className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center"
       style={{
-        left: mousePosition.elementX - 3,
-        top: mousePosition.elementY - 3,
+        left: mousePosition.elementX,
+        top: mousePosition.elementY,
         transform: 'translate(-50%, -50%)',
       }}
     >
diff --git a/web/app/components/workflow/hooks/use-workflow-comment.ts b/web/app/components/workflow/hooks/use-workflow-comment.ts
index 7e1cc4cdd1..cf94fbe7f1 100644
--- a/web/app/components/workflow/hooks/use-workflow-comment.ts
+++ b/web/app/components/workflow/hooks/use-workflow-comment.ts
@@ -68,9 +68,13 @@ export const useWorkflowComment = () => {
     }
 
     try {
+      // Convert screen position to flow position when submitting
+      const { screenToFlowPosition } = reactflow
+      const flowPosition = screenToFlowPosition({ x: pendingComment.x, y: pendingComment.y })
+
       const newComment = await createWorkflowComment(appId, {
-        position_x: pendingComment.x,
-        position_y: pendingComment.y,
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
         content,
         mentioned_user_ids: mentionedUserIds,
       })
@@ -85,7 +89,7 @@ export const useWorkflowComment = () => {
       setPendingComment(null)
       setControlMode(ControlMode.Pointer)
     }
-  }, [appId, pendingComment, setControlMode, setPendingComment, loadComments])
+  }, [appId, pendingComment, setControlMode, setPendingComment, loadComments, reactflow])
 
   const handleCommentCancel = useCallback(() => {
     setPendingComment(null)
@@ -270,18 +274,15 @@ export const useWorkflowComment = () => {
     activeCommentIdRef.current = null
   }, [setActiveComment, setActiveCommentId, setActiveCommentLoading])
 
-  const handleCreateComment = useCallback((mousePosition: { pageX: number; pageY: number }) => {
+  const handleCreateComment = useCallback((mousePosition: { elementX: number; elementY: number }) => {
     if (controlMode === ControlMode.Comment) {
-      const { screenToFlowPosition } = reactflow
-      const flowPosition = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
-
-      console.log('Setting pending comment at flow position:', flowPosition)
-      setPendingComment(flowPosition)
+      console.log('Setting pending comment at screen position:', mousePosition)
+      setPendingComment({ x: mousePosition.elementX, y: mousePosition.elementY })
     }
     else {
       console.log('Control mode is not Comment:', controlMode)
     }
-  }, [controlMode, setPendingComment, reactflow])
+  }, [controlMode, setPendingComment])
 
   return {
     comments,