Cannot remove all nodes/ add multiple nodes

[adelghaenian]

It is functional only if we want to add/remove a single node from the diagram. However, when I want to add multiple nodes at once using a for loop, it adds some of them (not all of them). The same thing happens for removing nodes.

[SeanMengis]

I had the same problem, but instead of not having enough nodes i had too many. I did something like that:

console.log(schema.nodes.length);

addNode(node1);
addNode(node2);
addNode(node3);
addNode(node4);

console.log(schema.nodes.length);

And output would say something like:

0
7

Sadly I haven't found a real solution. What I'm doing right now is to make my own custom addFunctions where I copy the previous schema modify it and then replace the old one.

Really eager to hear any other solutions.

[adelghaenian]

Thanks for the reply. But how do you change the schema? When I want to change the nodes like: schema.nodes = [...schema.nodes, theNewNode] the nodes of the schema will change but there is no change in the diagram.

[SeanMengis]

I have the schema in a React.useState const [schema, setSchema = useState(initialSchema)]

function addNewNode(schema: DiagramSchema<unknown>) { // I use Typescript
  const updatedNodes: Node<unknown>[] = [];
  const updatedLinks: Link[] = [];

  schema.nodes.forEach(node => {
    // Copy the node information and adjust whatever needs to be adjusted
  })

  // Do the same for the links

  // Add the new node
  updatedNodes.push({/*Node configuration*/})

  // Create a new schema
  const updatedSchema = createSchema({
     nodes: updatedNodes,
     links: updatedLinks
  })

  // Set state, I first set to null and "await" and then put the new schema. If you don't set it to null first your links don't get 
  // redrawn. It's really ugly and it's on my TODO list to find another solution for that. 
  setSchema(null); 
  setTimeout(() => {
     setSchema(updatedSchema);
   }, 1)
}

Also another problem I currently have with this library is, when you customize the render method of the nodes and pass the schema or other functions down with props, some references are not properly passed down. So I used useContext to save the state externally. Just in case you have the same problem.

I'm still working on this graph and havn't finished it yet. So if I find any solutions and better ways on how to solve them I'll post them here :)

[zihanxu3]

Same here - has anyone found a solution yet? Please kindly advise, thanks!

[SeanMengis]

Same here - has anyone found a solution yet? Please kindly advise, thanks!

I think the project is either temporarily paused or dead... The answer I posted works but is not nice. I think you'll either have to fix it yourself and make a PR (and send a message to the maintainer so he merges it) or look for another library.