youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 01:48:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resize workflow canvas cause incorrect comment position

Browse Source
This commit is contained in:
hjlarry
2025-11-05 14:08:21 +08:00
parent ee3ded0fc2
commit 2f60288d86
5 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/components/workflow/comment/comment-icon.tsx
View File

@ -31,6 +31,12 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
hasMoved: boolean
} | null>(null)
const workflowContainerRect = typeof document !== 'undefined'
? document.getElementById('workflow-container')?.getBoundingClientRect()
: null
const containerLeft = workflowContainerRect?.left ?? 0
const containerTop = workflowContainerRect?.top ?? 0
const screenPosition = useMemo(() => {
return flowToScreenPosition({
x: comment.position_x,
@ -38,7 +44,11 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
})
}, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
const effectivePosition = dragPosition ?? screenPosition
const effectiveScreenPosition = dragPosition ?? screenPosition
const canvasPosition = useMemo(() => ({
x: effectiveScreenPosition.x - containerLeft,
y: effectiveScreenPosition.y - containerTop,
}), [effectiveScreenPosition.x, effectiveScreenPosition.y, containerLeft, containerTop])
const cursorClass = useMemo(() => {
if (!isAuthor)
return 'cursor-pointer'
@ -186,8 +196,8 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
<div
className="absolute z-10"
style={{
left: effectivePosition.x,
top: effectivePosition.y,
left: canvasPosition.x,
top: canvasPosition.y,
transform: 'translate(-50%, -50%)',
}}
data-role='comment-marker'
@ -224,8 +234,8 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
<div
className="absolute z-20"
style={{
left: (dragPosition ?? screenPosition).x - dynamicWidth / 2,
top: (dragPosition ?? screenPosition).y + 20,
left: (effectiveScreenPosition.x - containerLeft) - dynamicWidth / 2,
top: (effectiveScreenPosition.y - containerTop) + 20,
transform: 'translateY(-100%)',
}}
data-role='comment-preview'

13
web/app/components/workflow/comment/thread.tsx
View File

@ -247,6 +247,15 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
y: comment.position_y,
})
}, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
const workflowContainerRect = typeof document !== 'undefined'
? document.getElementById('workflow-container')?.getBoundingClientRect()
: null
const containerLeft = workflowContainerRect?.left ?? 0
const containerTop = workflowContainerRect?.top ?? 0
const canvasPosition = useMemo(() => ({
x: screenPosition.x - containerLeft,
y: screenPosition.y - containerTop,
}), [screenPosition.x, screenPosition.y, containerLeft, containerTop])
const handleStartEdit = useCallback((reply: WorkflowCommentDetailReply) => {
setEditingReply({ id: reply.id, content: reply.content })
@ -331,8 +340,8 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
<div
className='absolute z-50 w-[360px] max-w-[360px]'
style={{
left: screenPosition.x + 40,
top: screenPosition.y,
left: canvasPosition.x + 40,
top: canvasPosition.y,
transform: 'translateY(-20%)',
}}
>