clear connected input if node/edge is removed

This commit is contained in:
Henry
2023-04-17 20:33:32 +01:00
parent 4cf0f0d92d
commit 180990b025
@@ -13,13 +13,51 @@ export const flowContext = createContext(initialValue)
export const ReactFlowContext = ({ children }) => { export const ReactFlowContext = ({ children }) => {
const [reactFlowInstance, setReactFlowInstance] = useState(null) const [reactFlowInstance, setReactFlowInstance] = useState(null)
const deleteNode = (id) => { const deleteNode = (nodeid) => {
reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== id)) deleteConnectedInput(nodeid, 'node')
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== id && ns.target !== id)) reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== nodeid))
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== nodeid && ns.target !== nodeid))
} }
const deleteEdge = (id) => { const deleteEdge = (edgeid) => {
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((edge) => edge.id !== id)) 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)
if (inputAnchor && inputAnchor.list) {
const values = node.data.inputs[targetInput] || []
value = values.filter((item) => !item.includes(sourceNodeId))
} else {
value = ''
}
node.data = {
...node.data,
inputs: {
...node.data.inputs,
[targetInput]: value
}
}
}
return node
})
)
}
} }
return ( return (