opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-13 14:48:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix comment cursor position

Browse Source
This commit is contained in:
hjlarry 2025-09-18 09:17:45 +08:00
parent 4653981b6b
commit e8683bf957
3 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/components/workflow/comment/comment-input.tsx
View File

@ -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
>

4
web/app/components/workflow/comment/cursor.tsx
View File

@ -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%)',
}}
>

21
web/app/components/workflow/hooks/use-workflow-comment.ts
View File

@ -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,