File size: 2,953 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import {
memo,
} from 'react'
import produce from 'immer'
import {
useReactFlow,
useStoreApi,
useViewport,
} from 'reactflow'
import { useEventListener } from 'ahooks'
import {
useStore,
useWorkflowStore,
} from './store'
import { WorkflowHistoryEvent, useNodesInteractions, useWorkflowHistory } from './hooks'
import { CUSTOM_NODE } from './constants'
import { getIterationStartNode } from './utils'
import CustomNode from './nodes'
import CustomNoteNode from './note-node'
import { CUSTOM_NOTE_NODE } from './note-node/constants'
import { BlockEnum } from './types'
const CandidateNode = () => {
const store = useStoreApi()
const reactflow = useReactFlow()
const workflowStore = useWorkflowStore()
const candidateNode = useStore(s => s.candidateNode)
const mousePosition = useStore(s => s.mousePosition)
const { zoom } = useViewport()
const { handleNodeSelect } = useNodesInteractions()
const { saveStateToHistory } = useWorkflowHistory()
useEventListener('click', (e) => {
const { candidateNode, mousePosition } = workflowStore.getState()
if (candidateNode) {
e.preventDefault()
const {
getNodes,
setNodes,
} = store.getState()
const { screenToFlowPosition } = reactflow
const nodes = getNodes()
const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
const newNodes = produce(nodes, (draft) => {
draft.push({
...candidateNode,
data: {
...candidateNode.data,
_isCandidate: false,
},
position: {
x,
y,
},
})
if (candidateNode.data.type === BlockEnum.Iteration)
draft.push(getIterationStartNode(candidateNode.id))
})
setNodes(newNodes)
if (candidateNode.type === CUSTOM_NOTE_NODE)
saveStateToHistory(WorkflowHistoryEvent.NoteAdd)
else
saveStateToHistory(WorkflowHistoryEvent.NodeAdd)
workflowStore.setState({ candidateNode: undefined })
if (candidateNode.type === CUSTOM_NOTE_NODE)
handleNodeSelect(candidateNode.id)
}
})
useEventListener('contextmenu', (e) => {
const { candidateNode } = workflowStore.getState()
if (candidateNode) {
e.preventDefault()
workflowStore.setState({ candidateNode: undefined })
}
})
if (!candidateNode)
return null
return (
<div
className='absolute z-10'
style={{
left: mousePosition.elementX,
top: mousePosition.elementY,
transform: `scale(${zoom})`,
transformOrigin: '0 0',
}}
>
{
candidateNode.type === CUSTOM_NODE && (
<CustomNode {...candidateNode as any} />
)
}
{
candidateNode.type === CUSTOM_NOTE_NODE && (
<CustomNoteNode {...candidateNode as any} />
)
}
</div>
)
}
export default memo(CandidateNode)
|