Add async option for onCreateNode and onCreateEdge about react-digraph HOT 1 CLOSED

For background, the onCreateNode callback function is called from handleSvgClicked synchronously. The responsibility is on the parent website on how a node is created, or whether it's created at all.

Your onCreateNode implementation only has to add a new node to an array and call setState() so that the graph is updated, how you get to that point (synchronously or asynchronously) is up to you.

In an implementation that I maintain, the onCreateNode function is a simple wrapper that first checks if nodes are allowed to be created, then it calls an API to create the node. When the API responds with success we refresh the graph with setState(). This is all asynchronous, so I think it would solve your problem.

react-digraph call:

if (!this.props.readOnly && d3.event.shiftKey) {
  const xycoords = d3.mouse(d3.event.target);
  this.props.onCreateNode(xycoords[0], xycoords[1]);
}

External website implementation example:

async onCreateNode(x, y) {
    // fancy await example could instead be a promise with .then().
    const newNode = await myAPI.createNode({
      x, 
      y,
      authorId: theBrowserUser,
      otherMeta: {}
    });
    
    // update your node list
    nodes = [
      newNode,
      ...this.state.nodes
    ];

    // forces the graph to re-render the nodes
    this.setState({
      nodes
    });
}

from react-digraph.