use-nodes-interactions.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858
  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 (
  279. (edge.source === source && edge.sourceHandle === sourceHandle)
  280. || (edge.target === target && edge.targetHandle === targetHandle)
  281. )
  282. return true
  283. return false
  284. })
  285. const needDeleteEdgesIds = needDeleteEdges.map(edge => edge.id)
  286. const newEdge = {
  287. id: `${source}-${target}`,
  288. type: 'custom',
  289. source: source!,
  290. target: target!,
  291. sourceHandle,
  292. targetHandle,
  293. data: {
  294. sourceType: nodes.find(node => node.id === source)!.data.type,
  295. targetType: nodes.find(node => node.id === target)!.data.type,
  296. },
  297. }
  298. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  299. [
  300. ...needDeleteEdges.map(edge => ({ type: 'remove', edge })),
  301. { type: 'add', edge: newEdge },
  302. ],
  303. nodes,
  304. )
  305. const newNodes = produce(nodes, (draft: Node[]) => {
  306. draft.forEach((node) => {
  307. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  308. node.data = {
  309. ...node.data,
  310. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  311. }
  312. }
  313. })
  314. })
  315. setNodes(newNodes)
  316. const newEdges = produce(edges, (draft) => {
  317. const filtered = draft.filter(edge => !needDeleteEdgesIds.includes(edge.id))
  318. filtered.push(newEdge)
  319. return filtered
  320. })
  321. setEdges(newEdges)
  322. handleSyncWorkflowDraft()
  323. }, [store, handleSyncWorkflowDraft, getNodesReadOnly, getTreeLeafNodes])
  324. const handleNodeConnectStart = useCallback<OnConnectStart>((_, { nodeId, handleType }) => {
  325. if (nodeId && handleType) {
  326. connectingNodeRef.current = {
  327. nodeId,
  328. handleType,
  329. }
  330. }
  331. }, [])
  332. const handleNodeConnectEnd = useCallback(() => {
  333. connectingNodeRef.current = null
  334. }, [])
  335. const handleNodeDelete = useCallback((nodeId: string) => {
  336. if (getNodesReadOnly())
  337. return
  338. const {
  339. getNodes,
  340. setNodes,
  341. edges,
  342. setEdges,
  343. } = store.getState()
  344. const nodes = getNodes()
  345. const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
  346. if (nodes[currentNodeIndex].data.type === BlockEnum.Start)
  347. return
  348. const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges)
  349. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(connectedEdges.map(edge => ({ type: 'remove', edge })), nodes)
  350. const newNodes = produce(nodes, (draft: Node[]) => {
  351. draft.forEach((node) => {
  352. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  353. node.data = {
  354. ...node.data,
  355. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  356. }
  357. }
  358. })
  359. draft.splice(currentNodeIndex, 1)
  360. })
  361. setNodes(newNodes)
  362. const newEdges = produce(edges, (draft) => {
  363. return draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
  364. })
  365. setEdges(newEdges)
  366. handleSyncWorkflowDraft()
  367. }, [store, handleSyncWorkflowDraft, getNodesReadOnly])
  368. const handleNodeAdd = useCallback<OnNodeAdd>((
  369. {
  370. nodeType,
  371. sourceHandle = 'source',
  372. targetHandle = 'target',
  373. toolDefaultValue,
  374. },
  375. {
  376. prevNodeId,
  377. prevNodeSourceHandle,
  378. nextNodeId,
  379. nextNodeTargetHandle,
  380. },
  381. ) => {
  382. if (getNodesReadOnly())
  383. return
  384. if (nodeType === BlockEnum.VariableAssigner)
  385. targetHandle = 'varNotSet'
  386. const {
  387. getNodes,
  388. setNodes,
  389. edges,
  390. setEdges,
  391. } = store.getState()
  392. const nodes = getNodes()
  393. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  394. const newNode = generateNewNode({
  395. data: {
  396. ...NODES_INITIAL_DATA[nodeType],
  397. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  398. ...(toolDefaultValue || {}),
  399. selected: true,
  400. },
  401. position: {
  402. x: 0,
  403. y: 0,
  404. },
  405. })
  406. if (prevNodeId && !nextNodeId) {
  407. const prevNodeIndex = nodes.findIndex(node => node.id === prevNodeId)
  408. const prevNode = nodes[prevNodeIndex]
  409. const outgoers = getOutgoers(prevNode, nodes, edges).sort((a, b) => a.position.y - b.position.y)
  410. const lastOutgoer = outgoers[outgoers.length - 1]
  411. if (prevNode.data.type === BlockEnum.KnowledgeRetrieval)
  412. targetHandle = prevNodeId
  413. newNode.data._connectedTargetHandleIds = [targetHandle]
  414. newNode.data._connectedSourceHandleIds = []
  415. newNode.position = {
  416. x: lastOutgoer ? lastOutgoer.position.x : prevNode.position.x + NODE_WIDTH_X_OFFSET,
  417. y: lastOutgoer ? lastOutgoer.position.y + lastOutgoer.height! + Y_OFFSET : prevNode.position.y,
  418. }
  419. const newEdge = {
  420. id: `${prevNodeId}-${newNode.id}`,
  421. type: 'custom',
  422. source: prevNodeId,
  423. sourceHandle: prevNodeSourceHandle,
  424. target: newNode.id,
  425. targetHandle,
  426. data: {
  427. sourceType: prevNode.data.type,
  428. targetType: newNode.data.type,
  429. _connectedNodeIsSelected: true,
  430. },
  431. }
  432. const newNodes = produce(nodes, (draft: Node[]) => {
  433. draft.forEach((node) => {
  434. node.data.selected = false
  435. if (node.id === prevNode.id)
  436. node.data._connectedSourceHandleIds?.push(prevNodeSourceHandle!)
  437. })
  438. draft.push(newNode)
  439. })
  440. setNodes(newNodes)
  441. const newEdges = produce(edges, (draft) => {
  442. draft.forEach((item) => {
  443. item.data = {
  444. ...item.data,
  445. _connectedNodeIsSelected: false,
  446. }
  447. })
  448. draft.push(newEdge)
  449. })
  450. setEdges(newEdges)
  451. }
  452. if (!prevNodeId && nextNodeId) {
  453. const nextNodeIndex = nodes.findIndex(node => node.id === nextNodeId)
  454. const nextNode = nodes[nextNodeIndex]!
  455. newNode.data._connectedSourceHandleIds = [sourceHandle]
  456. newNode.data._connectedTargetHandleIds = []
  457. newNode.position = {
  458. x: nextNode.position.x,
  459. y: nextNode.position.y,
  460. }
  461. const newEdge = {
  462. id: `${newNode.id}-${nextNodeId}`,
  463. type: 'custom',
  464. source: newNode.id,
  465. sourceHandle,
  466. target: nextNodeId,
  467. targetHandle: nextNodeTargetHandle,
  468. data: {
  469. sourceType: newNode.data.type,
  470. targetType: nextNode.data.type,
  471. _connectedNodeIsSelected: true,
  472. },
  473. }
  474. const afterNodesInSameBranch = getAfterNodesInSameBranch(nextNodeId!)
  475. const afterNodesInSameBranchIds = afterNodesInSameBranch.map(node => node.id)
  476. const newNodes = produce(nodes, (draft) => {
  477. draft.forEach((node) => {
  478. node.data.selected = false
  479. if (afterNodesInSameBranchIds.includes(node.id))
  480. node.position.x += NODE_WIDTH_X_OFFSET
  481. if (node.id === nextNodeId)
  482. node.data._connectedTargetHandleIds?.push(nextNodeTargetHandle!)
  483. })
  484. draft.push(newNode)
  485. })
  486. setNodes(newNodes)
  487. const newEdges = produce(edges, (draft) => {
  488. draft.forEach((item) => {
  489. item.data = {
  490. ...item.data,
  491. _connectedNodeIsSelected: false,
  492. }
  493. })
  494. draft.push(newEdge)
  495. })
  496. setEdges(newEdges)
  497. }
  498. if (prevNodeId && nextNodeId) {
  499. const prevNode = nodes.find(node => node.id === prevNodeId)!
  500. const nextNode = nodes.find(node => node.id === nextNodeId)!
  501. if (prevNode.data.type === BlockEnum.KnowledgeRetrieval)
  502. targetHandle = prevNodeId
  503. newNode.data._connectedTargetHandleIds = [targetHandle]
  504. newNode.data._connectedSourceHandleIds = [sourceHandle]
  505. newNode.position = {
  506. x: nextNode.position.x,
  507. y: nextNode.position.y,
  508. }
  509. const currentEdgeIndex = edges.findIndex(edge => edge.source === prevNodeId && edge.target === nextNodeId)
  510. const newPrevEdge = {
  511. id: `${prevNodeId}-${newNode.id}`,
  512. type: 'custom',
  513. source: prevNodeId,
  514. sourceHandle: prevNodeSourceHandle,
  515. target: newNode.id,
  516. targetHandle,
  517. data: {
  518. sourceType: prevNode.data.type,
  519. targetType: newNode.data.type,
  520. _connectedNodeIsSelected: true,
  521. },
  522. }
  523. let newNextEdge: Edge | null = null
  524. if (nodeType !== BlockEnum.IfElse && nodeType !== BlockEnum.QuestionClassifier) {
  525. newNextEdge = {
  526. id: `${newNode.id}-${nextNodeId}`,
  527. type: 'custom',
  528. source: newNode.id,
  529. sourceHandle,
  530. target: nextNodeId,
  531. targetHandle: nextNodeTargetHandle,
  532. data: {
  533. sourceType: newNode.data.type,
  534. targetType: nextNode.data.type,
  535. _connectedNodeIsSelected: true,
  536. },
  537. }
  538. }
  539. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  540. [
  541. { type: 'remove', edge: edges[currentEdgeIndex] },
  542. { type: 'add', edge: newPrevEdge },
  543. ...(newNextEdge ? [{ type: 'add', edge: newNextEdge }] : []),
  544. ],
  545. [...nodes, newNode],
  546. )
  547. const afterNodesInSameBranch = getAfterNodesInSameBranch(nextNodeId!)
  548. const afterNodesInSameBranchIds = afterNodesInSameBranch.map(node => node.id)
  549. const newNodes = produce(nodes, (draft) => {
  550. draft.forEach((node) => {
  551. node.data.selected = false
  552. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  553. node.data = {
  554. ...node.data,
  555. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  556. }
  557. }
  558. if (afterNodesInSameBranchIds.includes(node.id))
  559. node.position.x += NODE_WIDTH_X_OFFSET
  560. })
  561. draft.push(newNode)
  562. })
  563. setNodes(newNodes)
  564. const newEdges = produce(edges, (draft) => {
  565. draft.splice(currentEdgeIndex, 1)
  566. draft.forEach((item) => {
  567. item.data = {
  568. ...item.data,
  569. _connectedNodeIsSelected: false,
  570. }
  571. })
  572. draft.push(newPrevEdge)
  573. if (newNextEdge)
  574. draft.push(newNextEdge)
  575. })
  576. setEdges(newEdges)
  577. }
  578. handleSyncWorkflowDraft()
  579. }, [store, handleSyncWorkflowDraft, getAfterNodesInSameBranch, getNodesReadOnly, t])
  580. const handleNodeChange = useCallback((
  581. currentNodeId: string,
  582. nodeType: BlockEnum,
  583. sourceHandle: string,
  584. toolDefaultValue?: ToolDefaultValue,
  585. ) => {
  586. if (getNodesReadOnly())
  587. return
  588. const {
  589. getNodes,
  590. setNodes,
  591. edges,
  592. setEdges,
  593. } = store.getState()
  594. const nodes = getNodes()
  595. const currentNode = nodes.find(node => node.id === currentNodeId)!
  596. const connectedEdges = getConnectedEdges([currentNode], edges)
  597. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  598. const newCurrentNode = generateNewNode({
  599. data: {
  600. ...NODES_INITIAL_DATA[nodeType],
  601. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  602. ...(toolDefaultValue || {}),
  603. _connectedSourceHandleIds: [],
  604. _connectedTargetHandleIds: [],
  605. selected: currentNode.data.selected,
  606. },
  607. position: {
  608. x: currentNode.position.x,
  609. y: currentNode.position.y,
  610. },
  611. })
  612. const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
  613. [
  614. ...connectedEdges.map(edge => ({ type: 'remove', edge })),
  615. ],
  616. nodes,
  617. )
  618. const newNodes = produce(nodes, (draft) => {
  619. draft.forEach((node) => {
  620. node.data.selected = false
  621. if (nodesConnectedSourceOrTargetHandleIdsMap[node.id]) {
  622. node.data = {
  623. ...node.data,
  624. ...nodesConnectedSourceOrTargetHandleIdsMap[node.id],
  625. }
  626. }
  627. })
  628. const index = draft.findIndex(node => node.id === currentNodeId)
  629. draft.splice(index, 1, newCurrentNode)
  630. })
  631. setNodes(newNodes)
  632. const newEdges = produce(edges, (draft) => {
  633. const filtered = draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
  634. return filtered
  635. })
  636. setEdges(newEdges)
  637. handleSyncWorkflowDraft()
  638. }, [store, handleSyncWorkflowDraft, getNodesReadOnly, t])
  639. const handleNodeCopySelected = useCallback((): undefined | Node[] => {
  640. if (getNodesReadOnly())
  641. return
  642. const {
  643. setClipboardElements,
  644. shortcutsDisabled,
  645. } = workflowStore.getState()
  646. if (shortcutsDisabled)
  647. return
  648. const {
  649. getNodes,
  650. } = store.getState()
  651. const nodes = getNodes()
  652. const nodesToCopy = nodes.filter(node => node.data.selected && node.data.type !== BlockEnum.Start)
  653. setClipboardElements(nodesToCopy)
  654. return nodesToCopy
  655. }, [getNodesReadOnly, store, workflowStore])
  656. const handleNodePaste = useCallback((): undefined | Node[] => {
  657. if (getNodesReadOnly())
  658. return
  659. const {
  660. clipboardElements,
  661. shortcutsDisabled,
  662. } = workflowStore.getState()
  663. if (shortcutsDisabled)
  664. return
  665. const {
  666. getNodes,
  667. setNodes,
  668. } = store.getState()
  669. const nodesToPaste: Node[] = []
  670. const nodes = getNodes()
  671. for (const nodeToPaste of clipboardElements) {
  672. const nodeType = nodeToPaste.data.type
  673. const nodesWithSameType = nodes.filter(node => node.data.type === nodeType)
  674. const newNode = generateNewNode({
  675. data: {
  676. ...NODES_INITIAL_DATA[nodeType],
  677. ...nodeToPaste.data,
  678. _connectedSourceHandleIds: [],
  679. _connectedTargetHandleIds: [],
  680. title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${nodeType}`)} ${nodesWithSameType.length + 1}` : t(`workflow.blocks.${nodeType}`),
  681. selected: true,
  682. },
  683. position: {
  684. x: nodeToPaste.position.x + 10,
  685. y: nodeToPaste.position.y + 10,
  686. },
  687. })
  688. nodesToPaste.push(newNode)
  689. }
  690. setNodes([...nodes.map((n: Node) => ({ ...n, selected: false, data: { ...n.data, selected: false } })), ...nodesToPaste])
  691. handleSyncWorkflowDraft()
  692. return nodesToPaste
  693. }, [getNodesReadOnly, handleSyncWorkflowDraft, store, t, workflowStore])
  694. const handleNodeDuplicateSelected = useCallback(() => {
  695. if (getNodesReadOnly())
  696. return
  697. handleNodeCopySelected()
  698. handleNodePaste()
  699. }, [getNodesReadOnly, handleNodeCopySelected, handleNodePaste])
  700. const handleNodeCut = useCallback(() => {
  701. if (getNodesReadOnly())
  702. return
  703. const nodesToCut = handleNodeCopySelected()
  704. if (!nodesToCut)
  705. return
  706. for (const node of nodesToCut)
  707. handleNodeDelete(node.id)
  708. }, [getNodesReadOnly, handleNodeCopySelected, handleNodeDelete])
  709. const handleNodeDeleteSelected = useCallback(() => {
  710. if (getNodesReadOnly())
  711. return
  712. const {
  713. shortcutsDisabled,
  714. } = workflowStore.getState()
  715. if (shortcutsDisabled)
  716. return
  717. const {
  718. getNodes,
  719. edges,
  720. } = store.getState()
  721. const currentEdgeIndex = edges.findIndex(edge => edge.selected)
  722. if (currentEdgeIndex > -1)
  723. return
  724. const nodes = getNodes()
  725. const nodesToDelete = nodes.filter(node => node.data.selected)
  726. if (!nodesToDelete)
  727. return
  728. for (const node of nodesToDelete)
  729. handleNodeDelete(node.id)
  730. }, [getNodesReadOnly, handleNodeDelete, store, workflowStore])
  731. return {
  732. handleNodeDragStart,
  733. handleNodeDrag,
  734. handleNodeDragStop,
  735. handleNodeEnter,
  736. handleNodeLeave,
  737. handleNodeSelect,
  738. handleNodeClick,
  739. handleNodeConnect,
  740. handleNodeConnectStart,
  741. handleNodeConnectEnd,
  742. handleNodeDelete,
  743. handleNodeChange,
  744. handleNodeAdd,
  745. handleNodeDuplicateSelected,
  746. handleNodeCopySelected,
  747. handleNodeCut,
  748. handleNodeDeleteSelected,
  749. handleNodePaste,
  750. }
  751. }