'onConnectionRemoved' called before 'onConnectionCreated'

This issue has been created since 2022-06-17.

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);
}
jerosoler wrote this answer on 2022-07-02

Have you modified the library?
Have you overridden any method?

Can you show your code?

MyIsaak wrote this answer on 2022-07-02

Hi, @jerosoler thanks for the swift reply. I've not modified, nor overrode any methods. I've edited my issue including a codepen example

jerosoler wrote this answer on 2022-07-02

Hello!

I see what the problem is.
It's not really a problem. It's the way it runs. It runs synchronously.

Callbacks in events are executed on the moment.

The events are fired one by one.

Example:

1

  editor.on("connectionCreated", () => console.log("connectionCreated1"));
    editor.on("connectionCreated", () => console.log("connectionCreated2"));
    editor.on("connectionCreated", () => console.log("connectionCreated3"));

Return:

connectionCreated1
connectionCreated2
connectionCreated3

In this case execute 1, 2, 3. How the events were recorded in order of creation.

2

If we now execute this other:

editor.on("connectionCreated", (info) => {
        console.log("connectionCreated1")
        deleteCreatedConnection(info);
    });
editor.on("connectionCreated", () => console.log("connectionCreated2"));
editor.on("connectionCreated", () => console.log("connectionCreated3"));
editor.on("connectionRemoved", () => console.log("connectionRemoved"));

Return:

connectionCreated1
connectionRemoved
connectionCreated2
connectionCreated3

Until one event is finished, the next one is not executed.

Explanation in a diagram.

image

The flow follows the red numbers.

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

MyIsaak wrote this answer on 2022-07-02

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.

MyIsaak wrote this answer on 2022-07-02

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);
}
More Details About Repo
Owner Name jerosoler
Repo Name Drawflow
Full Name jerosoler/Drawflow
Language JavaScript
Created Date 2020-04-21
Updated Date 2022-09-16
Star Count 2585
Watcher Count 56
Fork Count 444
Issue Count 80

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
[ERROR] [plugin vite:dep-scan] Missing "./es/_mixins" export in "naive-ui" package 9 2022-08-19 2022-09-09
Allow enable/disable package cache for specific directories. 11 2022-04-07 2022-09-14
livereload server not start without "--ignore-file-extensions" option 0 2019-01-26 2022-05-10
When multiple static files are changed in a short time it goes into a reload loop. 0 2020-07-02 2022-07-12
how to change the port exactly? 5 2020-01-07 2022-07-12
Make reloading timeout configurable 1 2019-04-16 2022-07-28
No module named Pyperclip 1 2022-05-13 2022-08-07
Better error feedback when loading? Unable to locate load method 0 2020-11-18 2022-09-18
Property or method "sliderProps" is not defined 1 2021-08-04 2022-09-23
Crash on recording.pause() for windows 1 2019-11-29 2022-09-06
can i use node-record-lpcm16 in browser /client-side? 3 2020-02-02 2022-03-04
Change default Locale throw exceptions on hub... 1 2022-02-25 2022-04-15
Add translation value for attribute cause exception 0 2022-02-25 2022-04-15
Add dump status to OpenAPI 0 2021-12-23 2021-12-18
Feedback do Prazo de Entrega 0 2021-03-11 2022-01-24
git ftp push - russian letters Windows system issue 5 2015-08-13 2022-09-09
Remove and warn about STRICT in functions 2 2019-06-22 2022-08-01
support v4 - requires peer of [email protected]"2.x || 3.x" 2 2021-02-13 2022-08-20
Marginal effects for a fixest regression with lagged variables 1 2021-09-19 2022-09-11
Add `ec2_instance_facts` to `ansible::task-keywords-regex` 2 2017-12-21 2022-07-12
Bump rope from 0.20.1 to 0.22.0 1 2021-11-23 2022-02-09
documentation cannot be added in structurizr lite 4 2021-12-29 2022-09-22
Add example screenshots for configuring Okta, OneLogin, etc 1 2020-12-18 2022-09-13
DSL to JSON exporter unnecessarily escapes single quote 2 2021-12-29 2022-09-11
Missing line terminators in some help messages 3 2020-11-12 2022-09-02
Kernel not conn 1 2021-09-30 2021-12-09
ImportError: cannot import name 'YOLOXModeSwitchHook' from 'mmdet.core' 2 2022-01-31 2022-09-17
Is there an easy way to try instance segmentation? 12 2021-11-08 2022-04-03
[serve] Weird quote escaping in "waiting to be placed" error in `serve status` 1 2022-06-29 2022-09-26
Crash on restart PHP FPM 5 2022-07-05 2022-08-22
Wrong product stock check on order-pay page with a custom status 1 2022-06-03 2022-09-21
WC: 6.5.1 - PHP Undefined index Notices/Warnings on disabling WooCommerce Analytics in WooCommerce > Settings > Advanced > Features 2 2022-06-03 2022-09-14
Planning to contribute to this project 0 2022-05-05 2022-09-20
Ruby package name is incorrect 0 2022-03-01 2022-09-22
java.lang.NullPointerException in NavigationModule 2 2021-12-30 2022-09-23
TypeError: Cannot read properties of undefined (reading 'code_snippet') 1 2022-06-30 2022-09-18
[BugBash][Portal] Issues with hub settings 4 2021-10-29 2022-09-16
[Bug]: Screen permissions are granted but have no effect 4 2022-07-25 2022-09-17
Do we need to parse the grammar at all in the Word converter? 2 2022-03-15 2022-09-28
信号崩溃SIGTRAP 6 2019-08-06 2022-01-22
[QUESTION]Is this SDK thread-safe? 7 2022-06-23 2022-09-28
Buttons disappear in other sim after opening Nao sim 2 2022-01-06 2022-08-29
TagBot trigger issue 8 2021-09-01 2022-09-22
How to include zlib into CMake project correctly? 5 2021-09-10 2022-09-12
Allow to pass group.id to the push query 0 2022-02-15 2022-09-13
AttributeError: module 'tensorflow.compat.v2.__internal__.distribute' has no attribute 'strategy_supports_no_merge_call' 6 2022-04-24 2022-09-21
Improved UI within SIEM/Security for Administrators 0 2022-03-04 2022-02-27
Error launch New interactive NoteBook 32 2021-11-11 2022-09-28
[wasm][debugger] protected override property not showing in inspector 2 2022-09-16 2022-09-13
[Bug] Missing Add method for AbsoluteLayout that takes 3 args 1 2021-10-23 2022-08-07