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

comments display on canvas

Browse Source
This commit is contained in:
hjlarry
2025-09-15 14:16:06 +08:00
parent d7f5da5df4
commit dd8577f832
3 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,22 @@
import { useCallback, useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { useReactFlow } from 'reactflow'
import { useStore } from '../store'
import { ControlMode } from '../types'
import type { WorkflowComment } from '@/service/workflow-comment'
import type { WorkflowCommentList } from '@/service/workflow-comment'
import { createWorkflowComment, fetchWorkflowComments } from '@/service/workflow-comment'
export const useWorkflowComment = () => {
const params = useParams()
const appId = params.appId as string
const reactflow = useReactFlow()
const controlMode = useStore(s => s.controlMode)
const setControlMode = useStore(s => s.setControlMode)
const pendingComment = useStore(s => s.pendingComment)
const setPendingComment = useStore(s => s.setPendingComment)
const [comments, setComments] = useState<WorkflowComment[]>([])
const [comments, setComments] = useState<WorkflowCommentList[]>([])
const [loading, setLoading] = useState(false)
// 加载评论列表
const loadComments = useCallback(async () => {
if (!appId) return
@ -32,7 +33,6 @@ export const useWorkflowComment = () => {
}
}, [appId])
// 初始化时加载评论
useEffect(() => {
loadComments()
}, [loadComments])
@ -56,47 +56,39 @@ export const useWorkflowComment = () => {
})
console.log('Comment created successfully:', newComment)
setComments(prev => [...prev, newComment])
await loadComments()
setPendingComment(null)
setControlMode(ControlMode.Pointer)
}
catch (error) {
catch (error) {
console.error('Failed to create comment:', error)
setPendingComment(null)
setControlMode(ControlMode.Pointer)
}
}, [appId, pendingComment, setControlMode, setPendingComment, setComments])
}, [appId, pendingComment, setControlMode, setPendingComment, loadComments])
const handleCommentCancel = useCallback(() => {
setPendingComment(null)
setControlMode(ControlMode.Pointer)
}, [setControlMode, setPendingComment])
const handleCommentIconClick = useCallback((comment: WorkflowComment) => {
const handleCommentIconClick = useCallback((comment: WorkflowCommentList) => {
// TODO: display comment details
console.log('Comment clicked:', comment)
}, [])
const handleCreateComment = useCallback((mousePosition: { pageX: number; pageY: number }) => {
if (controlMode === ControlMode.Comment) {
const containerElement = document.querySelector('#workflow-container')
if (containerElement) {
const containerBounds = containerElement.getBoundingClientRect()
const position = {
x: mousePosition.pageX - containerBounds.left,
y: mousePosition.pageY - containerBounds.top,
}
console.log('Setting pending comment at position:', position)
setPendingComment(position)
}
else {
console.error('Could not find workflow container element')
}
const { screenToFlowPosition } = reactflow
const flowPosition = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
console.log('Setting pending comment at flow position:', flowPosition)
setPendingComment(flowPosition)
}
else {
else {
console.log('Control mode is not Comment:', controlMode)
}
}, [controlMode, setPendingComment])
}, [controlMode, setPendingComment, reactflow])
return {
comments,