File size: 4,473 Bytes
4114d85 |
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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
import { createContext, useState } from 'react'
import PropTypes from 'prop-types'
import { getUniqueNodeId } from 'utils/genericHelper'
import { cloneDeep } from 'lodash'
const initialValue = {
reactFlowInstance: null,
setReactFlowInstance: () => {},
duplicateNode: () => {},
deleteNode: () => {},
deleteEdge: () => {}
}
export const flowContext = createContext(initialValue)
export const ReactFlowContext = ({ children }) => {
const [reactFlowInstance, setReactFlowInstance] = useState(null)
const deleteNode = (nodeid) => {
deleteConnectedInput(nodeid, 'node')
reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== nodeid))
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== nodeid && ns.target !== nodeid))
}
const deleteEdge = (edgeid) => {
deleteConnectedInput(edgeid, 'edge')
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((edge) => edge.id !== edgeid))
}
const deleteConnectedInput = (id, type) => {
const connectedEdges =
type === 'node'
? reactFlowInstance.getEdges().filter((edge) => edge.source === id)
: reactFlowInstance.getEdges().filter((edge) => edge.id === id)
for (const edge of connectedEdges) {
const targetNodeId = edge.target
const sourceNodeId = edge.source
const targetInput = edge.targetHandle.split('-')[2]
reactFlowInstance.setNodes((nds) =>
nds.map((node) => {
if (node.id === targetNodeId) {
let value
const inputAnchor = node.data.inputAnchors.find((ancr) => ancr.name === targetInput)
const inputParam = node.data.inputParams.find((param) => param.name === targetInput)
if (inputAnchor && inputAnchor.list) {
const values = node.data.inputs[targetInput] || []
value = values.filter((item) => !item.includes(sourceNodeId))
} else if (inputParam && inputParam.acceptVariable) {
value = node.data.inputs[targetInput].replace(`{{${sourceNodeId}.data.instance}}`, '') || ''
} else {
value = ''
}
node.data = {
...node.data,
inputs: {
...node.data.inputs,
[targetInput]: value
}
}
}
return node
})
)
}
}
const duplicateNode = (id) => {
const nodes = reactFlowInstance.getNodes()
const originalNode = nodes.find((n) => n.id === id)
if (originalNode) {
const newNodeId = getUniqueNodeId(originalNode.data, nodes)
const clonedNode = cloneDeep(originalNode)
const duplicatedNode = {
...clonedNode,
id: newNodeId,
position: {
x: clonedNode.position.x + 400,
y: clonedNode.position.y
},
positionAbsolute: {
x: clonedNode.positionAbsolute.x + 400,
y: clonedNode.positionAbsolute.y
},
data: {
...clonedNode.data,
id: newNodeId
},
selected: false
}
const dataKeys = ['inputParams', 'inputAnchors', 'outputAnchors']
for (const key of dataKeys) {
for (const item of duplicatedNode.data[key]) {
if (item.id) {
item.id = item.id.replace(id, newNodeId)
}
}
}
reactFlowInstance.setNodes([...nodes, duplicatedNode])
}
}
return (
<flowContext.Provider
value={{
reactFlowInstance,
setReactFlowInstance,
deleteNode,
deleteEdge,
duplicateNode
}}
>
{children}
</flowContext.Provider>
)
}
ReactFlowContext.propTypes = {
children: PropTypes.any
}
|