File size: 2,006 Bytes
4304c6d |
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 |
import {
memo,
} from 'react'
import produce from 'immer'
import {
useReactFlow,
useStoreApi,
useViewport,
} from 'reactflow'
import { useEventListener } from 'ahooks'
import {
useStore,
useWorkflowStore,
} from './store'
import CustomNode from './nodes'
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()
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,
},
})
})
setNodes(newNodes)
workflowStore.setState({ candidateNode: undefined })
}
})
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',
}}
>
<CustomNode {...candidateNode as any} />
</div>
)
}
export default memo(CandidateNode)
|