This commit is contained in:
StyleZhang
2024-03-14 11:19:17 +08:00
parent ae9e7acd77
commit 8b2a63e545
9 changed files with 130 additions and 36 deletions

View File

@ -6,6 +6,7 @@ import type {
} from 'reactflow'
import { useStoreApi } from 'reactflow'
import { useStore } from '../store'
import type { Node } from '../types'
import { useNodesSyncDraft } from './use-nodes-sync-draft'
export const useEdgesInteractions = () => {
@ -55,14 +56,26 @@ export const useEdgesInteractions = () => {
return
const {
getNodes,
setNodes,
edges,
setEdges,
} = store.getState()
const newEdges = produce(edges, (draft) => {
const index = draft.findIndex(edge => edge.source === nodeId && edge.sourceHandle === branchId)
const currentEdgeIndex = edges.findIndex(edge => edge.source === nodeId && edge.sourceHandle === branchId)
const currentEdge = edges[currentEdgeIndex]
const newNodes = produce(getNodes(), (draft: Node[]) => {
const sourceNode = draft.find(node => node.id === currentEdge.source)
const targetNode = draft.find(node => node.id === currentEdge.target)
if (index > -1)
draft.splice(index, 1)
if (sourceNode)
sourceNode.data._connectedSourceHandleIds = sourceNode.data._connectedSourceHandleIds?.filter(handleId => handleId !== currentEdge.sourceHandle)
if (targetNode)
targetNode.data._connectedTargetHandleIds = targetNode.data._connectedTargetHandleIds?.filter(handleId => handleId !== currentEdge.targetHandle)
})
setNodes(newNodes)
const newEdges = produce(edges, (draft) => {
draft.splice(currentEdgeIndex, 1)
})
setEdges(newEdges)
handleSyncWorkflowDraft()
@ -75,14 +88,26 @@ export const useEdgesInteractions = () => {
return
const {
getNodes,
setNodes,
edges,
setEdges,
} = store.getState()
const newEdges = produce(edges, (draft) => {
const index = draft.findIndex(edge => edge.selected)
const currentEdgeIndex = edges.findIndex(edge => edge.selected)
const currentEdge = edges[currentEdgeIndex]
const newNodes = produce(getNodes(), (draft: Node[]) => {
const sourceNode = draft.find(node => node.id === currentEdge.source)
const targetNode = draft.find(node => node.id === currentEdge.target)
if (index > -1)
draft.splice(index, 1)
if (sourceNode)
sourceNode.data._connectedSourceHandleIds = sourceNode.data._connectedSourceHandleIds?.filter(handleId => handleId !== currentEdge.sourceHandle)
if (targetNode)
targetNode.data._connectedTargetHandleIds = targetNode.data._connectedTargetHandleIds?.filter(handleId => handleId !== currentEdge.targetHandle)
})
setNodes(newNodes)
const newEdges = produce(edges, (draft) => {
draft.splice(currentEdgeIndex, 1)
})
setEdges(newEdges)
handleSyncWorkflowDraft()

View File

@ -260,9 +260,8 @@ export const useNodesInteractions = () => {
edges,
setEdges,
} = store.getState()
const newEdges = produce(edges, (draft) => {
const filtered = draft.filter(edge => edge.source !== source && edge.target !== target)
const filtered = draft.filter(edge => (edge.source !== source && edge.sourceHandle !== sourceHandle) || (edge.target !== target && edge.targetHandle !== targetHandle))
filtered.push({
id: `${source}-${target}`,
@ -292,14 +291,25 @@ export const useNodesInteractions = () => {
setEdges,
} = store.getState()
const newNodes = produce(getNodes(), (draft) => {
const index = draft.findIndex(node => node.id === nodeId)
const nodes = getNodes()
const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
const currentNode = nodes[currentNodeIndex]
const incomersIds = getIncomers(currentNode, nodes, edges).map(incomer => incomer.id)
const outgoersIds = getOutgoers(currentNode, nodes, edges).map(outgoer => outgoer.id)
const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges)
const sourceEdgesHandleIds = connectedEdges.filter(edge => edge.target === nodeId).map(edge => edge.sourceHandle)
const targetEdgesHandleIds = connectedEdges.filter(edge => edge.source === nodeId).map(edge => edge.targetHandle)
const newNodes = produce(nodes, (draft: Node[]) => {
draft.forEach((node) => {
if (incomersIds.includes(node.id))
node.data._connectedSourceHandleIds = node.data._connectedSourceHandleIds?.filter(handleId => !sourceEdgesHandleIds.includes(handleId))
if (index > -1)
draft.splice(index, 1)
if (outgoersIds.includes(node.id))
node.data._connectedTargetHandleIds = node.data._connectedTargetHandleIds?.filter(handleId => !targetEdgesHandleIds.includes(handleId))
})
draft.splice(currentNodeIndex, 1)
})
setNodes(newNodes)
const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges)
const newEdges = produce(edges, (draft) => {
return draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
})
@ -325,7 +335,8 @@ export const useNodesInteractions = () => {
setEdges,
} = store.getState()
const nodes = getNodes()
const currentNode = nodes.find(node => node.id === currentNodeId)!
const currentNodeIndex = nodes.findIndex(node => node.id === currentNodeId)
const currentNode = nodes[currentNodeIndex]
const outgoers = getOutgoers(currentNode, nodes, edges).sort((a, b) => a.position.y - b.position.y)
const lastOutgoer = outgoers[outgoers.length - 1]
const nextNode: Node = {
@ -334,6 +345,7 @@ export const useNodesInteractions = () => {
data: {
...nodesInitialData[nodeType],
...(toolDefaultValue || {}),
_connectedTargetHandleIds: ['target'],
selected: true,
},
position: {
@ -350,9 +362,12 @@ export const useNodesInteractions = () => {
target: nextNode.id,
targetHandle: 'target',
}
const newNodes = produce(nodes, (draft) => {
draft.forEach((node) => {
const newNodes = produce(nodes, (draft: Node[]) => {
draft.forEach((node, index) => {
node.data.selected = false
if (index === currentNodeIndex)
node.data._connectedSourceHandleIds?.push(sourceHandle)
})
draft.push(nextNode)
})