\r\n
{\r\n let activeEdge = parseInt(event.target.dataset.active ?? -1);\r\n if (activeEdge === -1) {\r\n return;\r\n }\r\n const position = reactFlowInstance.screenToFlowPosition({\r\n x: event.clientX,\r\n y: event.clientY,\r\n });\r\n reactFlowInstance.setEdges((edges) => {\r\n edges[activeEdge].id = Math.random();\r\n edges[activeEdge].data.positionHandlers[handlerIndex] = {\r\n x: position.x,\r\n y: position.y,\r\n active: activeEdge,\r\n };\r\n return edges;\r\n });\r\n }}\r\n // mouse up is used to release all the handlers\r\n onMouseUp={() => {\r\n reactFlowInstance.setEdges((edges) => {\r\n for (let i = 0; i < edges.length; i++) {\r\n const handlersLength =\r\n edges[i].data.positionHandlers.length;\r\n for (let j = 0; j < handlersLength; j++) {\r\n edges[i].data.positionHandlers[j].active = -1;\r\n }\r\n }\r\n\r\n return edges;\r\n });\r\n }}\r\n >\r\n \r\n
\r\n
\r\n