'onConnectionRemoved' called before 'onConnectionCreated'

For some reason, my code emits the ‘onConnectionRemoved’ before ‘onConnectionCreated’ when I try to delete a connection after it is made.

Steps to reproduce below: (See codepen.io)

let editor = new Drawflow(document.querySelector("#drawflow"));
editor.start();

editor.addNode("Home", 0, 1, 10, 10, "node-test", {}, "Drag from here =>", false);
editor.addNode("Home", 1, 0, 300, 10, "node-test", {}, "<= Connect to here", false);

// Issue: When we delete just after creating a connection, the events
// below get fired incorrently. First "connectionRemoved", then "connectionCreated"
editor.on("connectionCreated", deleteCreatedConnection)

editor.on("connectionCreated", () => console.log("connectionCreated"));
editor.on("connectionRemoved", () => console.log("connectionRemoved"));

// Registering the listener after fixes the problem somehow?
// editor.on("connectionCreated", deleteCreatedConnection)


function deleteCreatedConnection({input_id, output_id, input_class, output_class}) {
  editor.removeSingleConnection(output_id, input_id, output_class, input_class);
}

[MyIsaak]

I found a workaround by deleting the connection in the next event loop using a timeout (still not ideal):

function deleteCreatedConnection({input_id, output_id, input_class, output_class}) {
  setTimeout(() => editor.removeSingleConnection(output_id, input_id, output_class, input_class), 0);
}

[MyIsaak]

Thanks for the thorough explanation, and yes internally events are handled in a synchronous fashion, however logically one could sort the scheduled events to avoid this.

The question is why are you using the same event twice?

I wrote a wrapper class that makes instantiates Drawflow and make internal changes, like modifying the curves and listening to connectionCreated to delete specified connections. After instantiating my wrapper class, one might want to use the same event twice. In this case, I add a listener to connectionCreated, and connectionRemove, to update the state of the connected nodes, but events aren’t played in order.