Question: It's possible auto connect nodes?

[phpiando]

First, great lib, I am like very much

I am creating a flow that when the user places a new node automatically connects with the last node added.

Example, I have node A added. When I add node B automatically node A connects with B. When I add node C automatically B connects with C, and so on.

It is possible? If possible, would you have a use case?

Thanks very much!

[jerosoler]

Hello @over12

Use events to store last id created: https://github.com/jerosoler/Drawflow#events Event: nodeCreated

And Methods to create connection. https://github.com/jerosoler/Drawflow#methods Method addConnection

This I think will help you Jero

[phpiando]

Thanks very much @jerosoler

Another question its possible also add a label in outputs? example:

[jerosoler]

View https://github.com/jerosoler/Drawflow/issues/18

Jero

[Richard0323]

Hello @jerosoler

I have a further question.

Can I auto connect two exist nodes? I have already created two nodes A and B, then I select B and move it upon A. Is it possible to connect B to A?

Thanks a lot!

[jerosoler]

Hi @Richard0323

Exists force_first_input to force the first connection. But only with the connections.

editor.force_first_input = true;

The problem is that a node can have multiple inputs, which one would it connect to?

And once you do the drag, the connected node would be on top of the other.

Maybe you are thinking more about this: https://github.com/alyssaxuu/flowy

[Richard0323]

Thanks for the information

I've been tried flowy, it's awesome, too. But it can't add multiple connections to node...

There is another question, Here I have three nodes and be connected, the order is A--B--C I want to move C between A and B, and make it A--C--B Is there way to achieve that?

What I think is move C to A, and get A's node id by event, then I can rearrange the connections. Is there any exist event can provide me that id?

Thank you!

[jerosoler]

You can play with the events: nodeSelected,nodeUnselected, nodeMoved.

And you can delete connections and create with: addConnection andremoveSingleConnection

And get the information of the nodes with: getNodeFromId (id)

The nodes return their x and y position.

But I think it will be difficult to get what you want.

---

I have done a little test and you could do something like that. Modifying the Z-index and capturing the element of the position:

let last_element = null;
          editor.on("nodeSelected", (id) => {
            last_element = id;
            const ele = document.getElementById('node-'+id);
            ele.style.zIndex = "1";  
          })  

          editor.on("nodeUnselected", () => {
            const ele = document.getElementById('node-'+last_element);
            ele.style.zIndex = "2";  
          })  

        editor.on("nodeMoved", (id) => {
          const elem = document.elementFromPoint(editor.pos_x, editor.pos_y);
          if((elem.closest(".drawflow_content_node") != null || elem.classList[0] === 'drawflow-node')) {
            if(elem.closest(".drawflow_content_node") != null) {
            var input_id = elem.closest(".drawflow_content_node").parentElement.id;
            } else {
              var input_id = elem.id;
            }
            if(input_id.slice(5) != last_element) {
              console.log(input_id.slice(5)); // ID other element drag. 
            } 
          }

Other options ondrop https://www.w3schools.com/jsref/event_ondrop.asp

[Richard0323]

Thank you very much! I'll follow your steps and try to complete it.