use-nodes-interactions.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863
  1. import { useCallback, useRef } from 'react'
  2. import { useTranslation } from 'react-i18next'
  3. import produce from 'immer'
  4. import type {
  5. HandleType,
  6. NodeDragHandler,
  7. NodeMouseHandler,
  8. OnConnect,
  9. OnConnectStart,
  10. } from 'reactflow'
  11. import {
  12. getConnectedEdges,
  13. getOutgoers,
  14. useStoreApi,
  15. } from 'reactflow'
  16. import type { ToolDefaultValue } from '../block-selector/types'
  17. import type {
  18. Edge,
  19. Node,
  20. OnNodeAdd,
  21. } from '../types'
  22. import { BlockEnum } from '../types'
  23. import { useWorkflowStore } from '../store'
  24. import {
  25. NODES_INITIAL_DATA,
  26. NODE_WIDTH_X_OFFSET,
  27. Y_OFFSET,
  28. } from '../constants'
  29. import {
  30. generateNewNode,
  31. getNodesConnectedSourceOrTargetHandleIdsMap,
  32. } from '../utils'
  33. import { useNodesExtraData } from './use-nodes-data'
  34. import { useNodesSyncDraft } from './use-nodes-sync-draft'
  35. import {
  36. useNodesReadOnly,
  37. useWorkflow,
  38. } from './use-workflow'
  39. export const useNodesInteractions = () => {
  40. const { t } = useTranslation()
  41. const store = useStoreApi()
  42. const workflowStore = useWorkflowStore()
  43. const nodesExtraData = useNodesExtraData()
  44. const { handleSyncWorkflowDraft } = useNodesSyncDraft()
  45. const {
  46. getAfterNodesInSameBranch,
  47. getTreeLeafNodes,
  48. } = useWorkflow()
  49. const { getNodesReadOnly } = useNodesReadOnly()
  50. const dragNodeStartPosition = useRef({ x: 0, y: 0 } as { x: number; y: number })
  51. const connectingNodeRef = useRef<{ nodeId: string; handleType: HandleType } | null>(null)
  52. const handleNodeDragStart = useCallback<NodeDragHandler>((_, node) => {
  53. workflowStore.setState({ nodeAnimation: false })
  54. if (getNodesReadOnly())
  55. return
  56. dragNodeStartPosition.current = { x: node.position.x, y: node.position.y }
  57. }, [workflowStore, getNodesReadOnly])
  58. const handleNodeDrag = useCallback<NodeDragHandler>((e, node: Node) => {
  59. if (getNodesReadOnly())
  60. return
  61. const {
  62. getNodes,
  63. setNodes,
  64. } = store.getState()
  65. const {
  66. setHelpLineHorizontal,
  67. setHelpLineVertical,
  68. } = workflowStore.getState()
  69. e.stopPropagation()
  70. const nodes = getNodes()
  71. const showHorizontalHelpLineNodes = nodes.filter((n) => {
  72. if (n.id === node.id)
  73. return false
  74. const nY = Math.ceil(n.position.y)
  75. const nodeY = Math.ceil(node.position.y)
  76. if (nY - nodeY < 5 && nY - nodeY > -5)
  77. return true
  78. return false
  79. }).sort((a, b) => a.position.x - b.position.x)
  80. const showHorizontalHelpLineNodesLength = showHorizontalHelpLineNodes.length
  81. if (showHorizontalHelpLineNodesLength > 0) {
  82. const first = showHorizontalHelpLineNodes[0]
  83. const last = showHorizontalHelpLineNodes[showHorizontalHelpLineNodesLength - 1]
  84. const helpLine = {
  85. top: first.position.y,
  86. left: first.position.x,
  87. width: last.position.x + last.width! - first.position.x,
  88. }
  89. if (node.position.x < first.position.x) {
  90. helpLine.left = node.position.x
  91. helpLine.width = first.position.x + first.width! - node.position.x
  92. }
  93. if (node.position.x > last.position.x)
  94. helpLine.width = node.position.x + node.width! - first.position.x
  95. setHelpLineHorizontal(helpLine)
  96. }
  97. else {
  98. setHelpLineHorizontal()
  99. }
  100. const showVerticalHelpLineNodes = nodes.filter((n) => {
  101. if (n.id === node.id)
  102. return false
  103. const nX = Math.ceil(n.position.x)
  104. const nodeX = Math.ceil(node.position.x)
  105. if (nX - nodeX < 5 && nX - nodeX > -5)
  106. return true
  107. return false
  108. }).sort((a, b) => a.position.x - b.position.x)
  109. const showVerticalHelpLineNodesLength = showVerticalHelpLineNodes.length
  110. if (showVerticalHelpLineNodesLength > 0) {
  111. const first = showVerticalHelpLineNodes[0]
  112. const last = showVerticalHelpLineNodes[showVerticalHelpLineNodesLength - 1]
  113. const helpLine = {
  114. top: first.position.y,
  115. left: first.position.x,
  116. height: last.position.y + last.height! - first.position.y,
  117. }
  118. if (node.position.y < first.position.y) {
  119. helpLine.top = node.position.y
  120. helpLine.height = first.position.y + first.height! - node.position.y
  121. }
  122. if (node.position.y > last.position.y)
  123. helpLine.height = node.position.y + node.height! - first.position.y
  124. setHelpLineVertical(helpLine)
  125. }
  126. else {
  127. setHelpLineVertical()
  128. }
  129. const newNodes = produce(nodes, (draft) => {
  130. const currentNode = draft.find(n => n.id === node.id)!
  131. currentNode.position = {
  132. x: showVerticalHelpLineNodesLength > 0 ? showVerticalHelpLineNodes[0].position.x : node.position.x,
  133. y: showHorizontalHelpLineNodesLength > 0 ? showHorizontalHelpLineNodes[0].position.y : node.position.y,
  134. }
  135. })
  136. setNodes(newNodes)
  137. }, [store, workflowStore, getNodesReadOnly])
  138. const handleNodeDragStop = useCallback<NodeDragHandler>((_, node) => {
  139. const {
  140. setHelpLineHorizontal,
  141. setHelpLineVertical,
  142. } = workflowStore.getState()
  143. if (getNodesReadOnly())
  144. return
  145. const { x, y } = dragNodeStartPosition.current
  146. if (!(x === node.position.x && y === node.position.y)) {
  147. setHelpLineHorizontal()
  148. setHelpLineVertical()
  149. handleSyncWorkflowDraft()
  150. }
  151. }, [handleSyncWorkflowDraft, workflowStore, getNodesReadOnly])
  152. const handleNodeEnter = useCallback<NodeMouseHandler>((_, node) => {
  153. if (getNodesReadOnly())
  154. return
  155. const {
  156. getNodes,
  157. setNodes,
  158. edges,
  159. setEdges,
  160. } = store.getState()
  161. const nodes = getNodes()
  162. if (connectingNodeRef.current && connectingNodeRef.current.nodeId !== node.id) {
  163. const connectingNode: Node = nodes.find(n => n.id === connectingNodeRef.current!.nodeId)!
  164. const handleType = connectingNodeRef.current.handleType
  165. const currentNodeIndex = nodes.findIndex(n => n.id === node.id)
  166. const availablePrevNodes = nodesExtraData[connectingNode.data.type].availablePrevNodes
  167. const availableNextNodes = nodesExtraData[connectingNode.data.type].availableNextNodes
  168. const availableNodes = handleType === 'source' ? availableNextNodes : [...availablePrevNodes, BlockEnum.Start]
  169. const newNodes = produce(nodes, (draft) => {
  170. if (!availableNodes.includes(draft[currentNodeIndex].data.type))
  171. draft[currentNodeIndex].data._isInvalidConnection = true
  172. })
  173. setNodes(newNodes)
  174. }
  175. const newEdges = produce(edges, (draft) => {
  176. const connectedEdges = getConnectedEdges([node], edges)
  177. connectedEdges.forEach((edge) => {
  178. const currentEdge = draft.find(e => e.id === edge.id)
  179. if (currentEdge)
  180. currentEdge.data._connectedNodeIsHovering = true
  181. })
  182. })
  183. setEdges(newEdges)
  184. }, [store, nodesExtraData, getNodesReadOnly])
  185. const handleNodeLeave = useCallback<NodeMouseHandler>(() => {
  186. if (getNodesReadOnly())
  187. return
  188. const {
  189. getNodes,
  190. setNodes,
  191. edges,
  192. setEdges,
  193. } = store.getState()
  194. const newNodes = produce(getNodes(), (draft) => {
  195. draft.forEach((node) => {
  196. node.data._isInvalidConnection = false
  197. })
  198. })
  199. setNodes(newNodes)
  200. const newEdges = produce(edges, (draft) => {
  201. draft.forEach((edge) => {
  202. edge.data._connectedNodeIsHovering = false
  203. })
  204. })
  205. setEdges(newEdges)
  206. }, [store, getNodesReadOnly])
  207. const handleNodeSelect = useCallback((nodeId: string, cancelSelection?: boolean) => {
  208. if (getNodesReadOnly() && !workflowStore.getState().isRestoring)
  209. return
  210. const {
  211. getNodes,
  212. setNodes,
  213. edges,
  214. setEdges,
  215. } = store.getState()
  216. const nodes = getNodes()
  217. const selectedNode = nodes.find(node => node.data.selected)
  218. if (!cancelSelection && selectedNode?.id === nodeId)
  219. return
  220. const newNodes = produce(nodes, (draft) => {
  221. draft.forEach((node) => {
  222. if (node.id === nodeId)
  223. node.data.selected = !cancelSelection
  224. else
  225. node.data.selected = false
  226. })
  227. })
  228. setNodes(newNodes)
  229. const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges).map(edge => edge.id)
  230. const newEdges = produce(edges, (draft) => {
  231. draft.forEach((edge) => {
  232. if (connectedEdges.includes(edge.id)) {
  233. edge.data = {
  234. ...edge.data,
  235. _connectedNodeIsSelected: !cancelSelection,
  236. }
  237. }
  238. else {
  239. edge.data = {
  240. ...edge.data,
  241. _connectedNodeIsSelected: false,
  242. }
  243. }
  244. })
  245. })
  246. setEdges(newEdges)
  247. handleSyncWorkflowDraft()
  248. }, [store, handleSyncWorkflowDraft, getNodesReadOnly, workflowStore])
  249. const handleNodeClick = useCallback<NodeMouseHandler>((_, node) => {
  250. if (getNodesReadOnly() && !workflowStore.getState().isRestoring)
  251. return
  252. handleNodeSelect(node.id)
  253. }, [handleNodeSelect, getNodesReadOnly, workflowStore])
  254. const handleNodeConnect = useCallback<OnConnect>(({
  255. source,
  256. sourceHandle,
  257. target,
  258. targetHandle,
  259. }) => {
  260. if (source === target)
  261. return
  262. if (getNodesReadOnly())
  263. return
  264. const {
  265. getNodes,
  266. setNodes,
  267. edges,
  268. setEdges,
  269. } = store.getState()
  270. const nodes = getNodes()
  271. const targetNode = nodes.find(node => node.id === target!)
  272. if (targetNode && targetNode?.data.type === BlockEnum.VariableAssigner) {
  273. const treeNodes = getTreeLeafNodes(target!)
  274. if (!treeNodes.find(treeNode => treeNode.id === source))
  275. return
  276. }
  277. const needDeleteEdges = edges.filter((edge) => {
  278. if (edge.source === source) {
  279. if (edge.sourceHandle)
  280. return edge.sourceHandle === sourceHandle
  281. else
  282. return true
  283. }
  284. if (edge.target === target) {
  285. if (edge.targetHandle)
  286. return edge.targetHandle === targetHandle
  287. else
  288. return true
  289. }
  290. return false
  291. })
  292. const needDeleteEdgesIds = needDeleteEdges.map(edge => edge.id)
  293. const newEdge = {
  294. id: `${source}-${target}`,
  295. type: 'custom',
  296. source: source!,
  297. target: target!,
  298. sourceHandle,
  299. targetHandle,
  300. data: {
  301. sourceType: nodes.find(node => node.id === source)!.data.type,
  302. targetType: nodes.find(node => node.id === target)!.data.type,
  303. },
  304. }
  305. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  306. [
  307. ...needDeleteEdges.map(edge => ({ type: 'remove', edge })),
  308. { type: 'add', edge: newEdge },
  309. ],
  310. nodes,
  311. )
  312. const newNodes = produce(nodes, (draft: Node[]) => {
  313. draft.forEach((node) => {
  314. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  315. node.data = {
  316. ...node.data,
  317. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  318. }
  319. }
  320. })
  321. })
  322. setNodes(newNodes)
  323. const newEdges = produce(edges, (draft) => {
  324. const filtered = draft.filter(edge => !needDeleteEdgesIds.includes(edge.id))
  325. filtered.push(newEdge)
  326. return filtered
  327. })
  328. setEdges(newEdges)
  329. handleSyncWorkflowDraft()
  330. }, [store, handleSyncWorkflowDraft, getNodesReadOnly, getTreeLeafNodes])
  331. const handleNodeConnectStart = useCallback<OnConnectStart>((_, { nodeId, handleType }) => {
  332. if (nodeId && handleType) {
  333. connectingNodeRef.current = {
  334. nodeId,
  335. handleType,
  336. }
  337. }
  338. }, [])
  339. const handleNodeConnectEnd = useCallback(() => {
  340. connectingNodeRef.current = null
  341. }, [])
  342. const handleNodeDelete = useCallback((nodeId: string) => {
  343. if (getNodesReadOnly())
  344. return
  345. const {
  346. getNodes,
  347. setNodes,
  348. edges,
  349. setEdges,
  350. } = store.getState()
  351. const nodes = getNodes()
  352. const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
  353. if (nodes[currentNodeIndex].data.type === BlockEnum.Start)
  354. return
  355. const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges)
  356. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(connectedEdges.map(edge => ({ type: 'remove', edge })), nodes)
  357. const newNodes = produce(nodes, (draft: Node[]) => {
  358. draft.forEach((node) => {
  359. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  360. node.data = {
  361. ...node.data,
  362. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  363. }
  364. }
  365. })
  366. draft.splice(currentNodeIndex, 1)
  367. })
  368. setNodes(newNodes)
  369. const newEdges = produce(edges, (draft) => {
  370. return draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
  371. })
  372. setEdges(newEdges)
  373. handleSyncWorkflowDraft()
  374. }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
  375. const handleNodeAdd = useCallback<OnNodeAdd>((
  376. {
  377. nodeType,
  378. sourceHandle = 'source',
  379. targetHandle = 'target',
  380. toolDefaultValue,
  381. },
  382. {
  383. prevNodeId,
  384. prevNodeSourceHandle,
  385. nextNodeId,
  386. nextNodeTargetHandle,
  387. },
  388. ) => {
  389. if (getNodesReadOnly())
  390. return
  391. if (nodeType === BlockEnum.VariableAssigner)
  392. targetHandle = 'varNotSet'
  393. const {
  394. getNodes,
  395. setNodes,
  396. edges,
  397. setEdges,
  398. } = store.getState()
  399. const nodes = getNodes()
  400. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  401. const newNode = generateNewNode({
  402. data: {
  403. ...NODES_INITIAL_DATA[nodeType],
  404. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  405. ...(toolDefaultValue || {}),
  406. selected: true,
  407. },
  408. position: {
  409. x: 0,
  410. y: 0,
  411. },
  412. })
  413. if (prevNodeId && !nextNodeId) {
  414. const prevNodeIndex = nodes.findIndex(node => node.id === prevNodeId)
  415. const prevNode = nodes[prevNodeIndex]
  416. const outgoers = getOutgoers(prevNode, nodes, edges).sort((a, b) => a.position.y - b.position.y)
  417. const lastOutgoer = outgoers[outgoers.length - 1]
  418. if (prevNode.data.type === BlockEnum.KnowledgeRetrieval)
  419. targetHandle = prevNodeId
  420. newNode.data._connectedTargetHandleIds = [targetHandle]
  421. newNode.data._connectedSourceHandleIds = []
  422. newNode.position = {
  423. x: lastOutgoer ? lastOutgoer.position.x : prevNode.position.x + NODE_WIDTH_X_OFFSET,
  424. y: lastOutgoer ? lastOutgoer.position.y + lastOutgoer.height! + Y_OFFSET : prevNode.position.y,
  425. }
  426. const newEdge = {
  427. id: `${prevNodeId}-${newNode.id}`,
  428. type: 'custom',
  429. source: prevNodeId,
  430. sourceHandle: prevNodeSourceHandle,
  431. target: newNode.id,
  432. targetHandle,
  433. data: {
  434. sourceType: prevNode.data.type,
  435. targetType: newNode.data.type,
  436. _connectedNodeIsSelected: true,
  437. },
  438. }
  439. const newNodes = produce(nodes, (draft: Node[]) => {
  440. draft.forEach((node) => {
  441. node.data.selected = false
  442. if (node.id === prevNode.id)
  443. node.data._connectedSourceHandleIds?.push(prevNodeSourceHandle!)
  444. })
  445. draft.push(newNode)
  446. })
  447. setNodes(newNodes)
  448. const newEdges = produce(edges, (draft) => {
  449. draft.forEach((item) => {
  450. item.data = {
  451. ...item.data,
  452. _connectedNodeIsSelected: false,
  453. }
  454. })
  455. draft.push(newEdge)
  456. })
  457. setEdges(newEdges)
  458. }
  459. if (!prevNodeId && nextNodeId) {
  460. const nextNodeIndex = nodes.findIndex(node => node.id === nextNodeId)
  461. const nextNode = nodes[nextNodeIndex]!
  462. newNode.data._connectedSourceHandleIds = [sourceHandle]
  463. newNode.data._connectedTargetHandleIds = []
  464. newNode.position = {
  465. x: nextNode.position.x,
  466. y: nextNode.position.y,
  467. }
  468. const newEdge = {
  469. id: `${newNode.id}-${nextNodeId}`,
  470. type: 'custom',
  471. source: newNode.id,
  472. sourceHandle,
  473. target: nextNodeId,
  474. targetHandle: nextNodeTargetHandle,
  475. data: {
  476. sourceType: newNode.data.type,
  477. targetType: nextNode.data.type,
  478. _connectedNodeIsSelected: true,
  479. },
  480. }
  481. const afterNodesInSameBranch = getAfterNodesInSameBranch(nextNodeId!)
  482. const afterNodesInSameBranchIds = afterNodesInSameBranch.map(node => node.id)
  483. const newNodes = produce(nodes, (draft) => {
  484. draft.forEach((node) => {
  485. node.data.selected = false
  486. if (afterNodesInSameBranchIds.includes(node.id))
  487. node.position.x += NODE_WIDTH_X_OFFSET
  488. if (node.id === nextNodeId)
  489. node.data._connectedTargetHandleIds?.push(nextNodeTargetHandle!)
  490. })
  491. draft.push(newNode)
  492. })
  493. setNodes(newNodes)
  494. const newEdges = produce(edges, (draft) => {
  495. draft.forEach((item) => {
  496. item.data = {
  497. ...item.data,
  498. _connectedNodeIsSelected: false,
  499. }
  500. })
  501. draft.push(newEdge)
  502. })
  503. setEdges(newEdges)
  504. }
  505. if (prevNodeId && nextNodeId) {
  506. const prevNode = nodes.find(node => node.id === prevNodeId)!
  507. const nextNode = nodes.find(node => node.id === nextNodeId)!
  508. if (prevNode.data.type === BlockEnum.KnowledgeRetrieval)
  509. targetHandle = prevNodeId
  510. newNode.data._connectedTargetHandleIds = [targetHandle]
  511. newNode.data._connectedSourceHandleIds = [sourceHandle]
  512. newNode.position = {
  513. x: nextNode.position.x,
  514. y: nextNode.position.y,
  515. }
  516. const currentEdgeIndex = edges.findIndex(edge => edge.source === prevNodeId && edge.target === nextNodeId)
  517. const newPrevEdge = {
  518. id: `${prevNodeId}-${newNode.id}`,
  519. type: 'custom',
  520. source: prevNodeId,
  521. sourceHandle: prevNodeSourceHandle,
  522. target: newNode.id,
  523. targetHandle,
  524. data: {
  525. sourceType: prevNode.data.type,
  526. targetType: newNode.data.type,
  527. _connectedNodeIsSelected: true,
  528. },
  529. }
  530. let newNextEdge: Edge | null = null
  531. if (nodeType !== BlockEnum.IfElse && nodeType !== BlockEnum.QuestionClassifier) {
  532. newNextEdge = {
  533. id: `${newNode.id}-${nextNodeId}`,
  534. type: 'custom',
  535. source: newNode.id,
  536. sourceHandle,
  537. target: nextNodeId,
  538. targetHandle: nextNodeTargetHandle,
  539. data: {
  540. sourceType: newNode.data.type,
  541. targetType: nextNode.data.type,
  542. _connectedNodeIsSelected: true,
  543. },
  544. }
  545. }
  546. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  547. [
  548. { type: 'remove', edge: edges[currentEdgeIndex] },
  549. { type: 'add', edge: newPrevEdge },
  550. ...(newNextEdge ? [{ type: 'add', edge: newNextEdge }] : []),
  551. ],
  552. [...nodes, newNode],
  553. )
  554. const afterNodesInSameBranch = getAfterNodesInSameBranch(nextNodeId!)
  555. const afterNodesInSameBranchIds = afterNodesInSameBranch.map(node => node.id)
  556. const newNodes = produce(nodes, (draft) => {
  557. draft.forEach((node) => {
  558. node.data.selected = false
  559. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  560. node.data = {
  561. ...node.data,
  562. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  563. }
  564. }
  565. if (afterNodesInSameBranchIds.includes(node.id))
  566. node.position.x += NODE_WIDTH_X_OFFSET
  567. })
  568. draft.push(newNode)
  569. })
  570. setNodes(newNodes)
  571. const newEdges = produce(edges, (draft) => {
  572. draft.splice(currentEdgeIndex, 1)
  573. draft.forEach((item) => {
  574. item.data = {
  575. ...item.data,
  576. _connectedNodeIsSelected: false,
  577. }
  578. })
  579. draft.push(newPrevEdge)
  580. if (newNextEdge)
  581. draft.push(newNextEdge)
  582. })
  583. setEdges(newEdges)
  584. }
  585. handleSyncWorkflowDraft()
  586. }, [store, handleSyncWorkflowDraft, getAfterNodesInSameBranch, getNodesReadOnly, t])
  587. const handleNodeChange = useCallback((
  588. currentNodeId: string,
  589. nodeType: BlockEnum,
  590. sourceHandle: string,
  591. toolDefaultValue?: ToolDefaultValue,
  592. ) => {
  593. if (getNodesReadOnly())
  594. return
  595. const {
  596. getNodes,
  597. setNodes,
  598. edges,
  599. setEdges,
  600. } = store.getState()
  601. const nodes = getNodes()
  602. const currentNode = nodes.find(node => node.id === currentNodeId)!
  603. const connectedEdges = getConnectedEdges([currentNode], edges)
  604. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  605. const newCurrentNode = generateNewNode({
  606. data: {
  607. ...NODES_INITIAL_DATA[nodeType],
  608. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  609. ...(toolDefaultValue || {}),
  610. _connectedSourceHandleIds: [],
  611. _connectedTargetHandleIds: [],
  612. selected: currentNode.data.selected,
  613. },
  614. position: {
  615. x: currentNode.position.x,
  616. y: currentNode.position.y,
  617. },
  618. })
  619. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  620. [
  621. ...connectedEdges.map(edge => ({ type: 'remove', edge })),
  622. ],
  623. nodes,
  624. )
  625. const newNodes = produce(nodes, (draft) => {
  626. draft.forEach((node) => {
  627. node.data.selected = false
  628. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  629. node.data = {
  630. ...node.data,
  631. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  632. }
  633. }
  634. })
  635. const index = draft.findIndex(node => node.id === currentNodeId)
  636. draft.splice(index, 1, newCurrentNode)
  637. })
  638. setNodes(newNodes)
  639. const newEdges = produce(edges, (draft) => {
  640. const filtered = draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
  641. return filtered
  642. })
  643. setEdges(newEdges)
  644. handleSyncWorkflowDraft()
  645. }, [store, handleSyncWorkflowDraft, getNodesReadOnly, t])
  646. const handleNodeCopySelected = useCallback((): undefined | Node[] => {
  647. if (getNodesReadOnly())
  648. return
  649. const {
  650. setClipboardElements,
  651. shortcutsDisabled,
  652. } = workflowStore.getState()
  653. if (shortcutsDisabled)
  654. return
  655. const {
  656. getNodes,
  657. } = store.getState()
  658. const nodes = getNodes()
  659. const nodesToCopy = nodes.filter(node => node.data.selected && node.data.type !== BlockEnum.Start)
  660. setClipboardElements(nodesToCopy)
  661. return nodesToCopy
  662. }, [getNodesReadOnly, store, workflowStore])
  663. const handleNodePaste = useCallback((): undefined | Node[] => {
  664. if (getNodesReadOnly())
  665. return
  666. const {
  667. clipboardElements,
  668. shortcutsDisabled,
  669. } = workflowStore.getState()
  670. if (shortcutsDisabled)
  671. return
  672. const {
  673. getNodes,
  674. setNodes,
  675. } = store.getState()
  676. const nodesToPaste: Node[] = []
  677. const nodes = getNodes()
  678. for (const nodeToPaste of clipboardElements) {
  679. const nodeType = nodeToPaste.data.type
  680. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  681. const newNode = generateNewNode({
  682. data: {
  683. ...NODES_INITIAL_DATA[nodeType],
  684. ...nodeToPaste.data,
  685. _connectedSourceHandleIds: [],
  686. _connectedTargetHandleIds: [],
  687. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  688. selected: true,
  689. },
  690. position: {
  691. x: nodeToPaste.position.x + 10,
  692. y: nodeToPaste.position.y + 10,
  693. },
  694. })
  695. nodesToPaste.push(newNode)
  696. }
  697. setNodes([...nodes.map((n: Node) => ({ ...n, selected: false, data: { ...n.data, selected: false } })), ...nodesToPaste])
  698. handleSyncWorkflowDraft()
  699. return nodesToPaste
  700. }, [getNodesReadOnly, handleSyncWorkflowDraft, store, t, workflowStore])
  701. const handleNodeDuplicateSelected = useCallback(() => {
  702. if (getNodesReadOnly())
  703. return
  704. handleNodeCopySelected()
  705. handleNodePaste()
  706. }, [getNodesReadOnly, handleNodeCopySelected, handleNodePaste])
  707. const handleNodeCut = useCallback(() => {
  708. if (getNodesReadOnly())
  709. return
  710. const nodesToCut = handleNodeCopySelected()
  711. if (!nodesToCut)
  712. return
  713. for (const node of nodesToCut)
  714. handleNodeDelete(node.id)
  715. }, [getNodesReadOnly, handleNodeCopySelected, handleNodeDelete])
  716. const handleNodeDeleteSelected = useCallback(() => {
  717. if (getNodesReadOnly())
  718. return
  719. const {
  720. shortcutsDisabled,
  721. } = workflowStore.getState()
  722. if (shortcutsDisabled)
  723. return
  724. const {
  725. getNodes,
  726. edges,
  727. } = store.getState()
  728. const currentEdgeIndex = edges.findIndex(edge => edge.selected)
  729. if (currentEdgeIndex > -1)
  730. return
  731. const nodes = getNodes()
  732. const nodesToDelete = nodes.filter(node => node.data.selected)
  733. if (!nodesToDelete)
  734. return
  735. for (const node of nodesToDelete)
  736. handleNodeDelete(node.id)
  737. }, [getNodesReadOnly, handleNodeDelete, store, workflowStore])
  738. return {
  739. handleNodeDragStart,
  740. handleNodeDrag,
  741. handleNodeDragStop,
  742. handleNodeEnter,
  743. handleNodeLeave,
  744. handleNodeSelect,
  745. handleNodeClick,
  746. handleNodeConnect,
  747. handleNodeConnectStart,
  748. handleNodeConnectEnd,
  749. handleNodeDelete,
  750. handleNodeChange,
  751. handleNodeAdd,
  752. handleNodeDuplicateSelected,
  753. handleNodeCopySelected,
  754. handleNodeCut,
  755. handleNodeDeleteSelected,
  756. handleNodePaste,
  757. }
  758. }