React-flow, edges changing place on creating new node

Paweł Piotr Owczarek — Sun, 27 Aug 2023 20:13:02 +0000

Edges change their place, when i create a new node.

Gif example Gif showing the problem
https://gifyu.com/image/SgWWG

Possible cause that I can't fix

ReactFlowKey is updating the website without previously saving edges as they were created, because

"Couldn't create edge for source/target handle id: "some-id"; edge id: "some-id"."

which i guess is because I cannot set the proper value to targetHandle or sourceHandle when connecting the edges with the handles.

*BiDirectionalNode.tsx *

I created custom node in BiDirectionalNode.tsx that has 4 handles (1 on each side of the square) that are sources and targets at the same time, they have unique ids

Example :

<Handle type="source" position={Position.Left} id="leftA" /> <Handle type="target" position={Position.Left} id="leftB" />

App.js

I then in my App.js use this custom node, by creating it (handleClick method), and onConnect method to connect the edges and save them to this.state.initialEdges

Creates new node

handleClick() { const newNode = { id:${this.state.initialNodes.length + 1}`,
data: { label: this.state.inputText },
type: "bidirectional",
position: {
x: 100,
y: 100
}
};

this.setState(
(prevState) => ({
initialNodes: [...prevState.initialNodes, newNode],
initialEdges: updatedEdges,
inputText: "",
reactFlowKey: prevState.reactFlowKey + 1
}),`

Creates Edges between the nodes

` const onConnect = (params) => {
const { source, target, sourceHandleId, targetHandleId } = params;

  console.log("source:", source);
  console.log("target:", target);

  const newEdge1 = {
    id: `edge-${this.state.edgeCounter}`,
    source: source,
    target: target,
    type: "bidirectional",
    sourceHandle: sourceHandleId,
    targetHandle: targetHandleId
  };

  const newEdge2 = {
    id: `edge-${this.state.edgeCounter + 1}`,
    source: source,
    target: target,
    type: "bidirectional",
    sourceHandle: sourceHandleId,
    targetHandle: targetHandleId
  };

  this.setState((prevState) => ({
    initialEdges: addEdge(
      newEdge1,
      addEdge(newEdge2, prevState.initialEdges)
    ),
    edgeCounter: prevState.edgeCounter + 2
  }));
};

console.log(newEdge1) after trying to connect the handles of the nodes

id: "edge-0"
source: "2"
target: "1"
type: "bidirectional"
sourceHandle: undefined
targetHandle: undefined`

https://codesandbox.io/s/affectionate-liskov-dsfzcd?file=/src/App.js

Here's the link to the full code

I tried targeting the handle's unique id's, with getelement by id, targetHandleId, and I can't even remember how many more ways, I've asked copilot and gpt for help in many ways but they can't help.

The main problem I guess is that I created this whole code with state method (because thats the only way I know, I am learning react for a week now), while whole docs on their react-flow website is done in a different way (hooks?) without using this.state etc.

Also, I tried removing ReactFlowKey and replacing updating the website with something else, but nothing helped, and without ReactFlowKey, the nodes don't show up in html (they do in the console tho).

DEV Community: Paweł Piotr Owczarek

React-flow, edges changing place on creating new node