search

jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.64k stars 722 forks source link

Unable to connect the dynamically created Nodes using the Connector #296

Closed Aravinda93 closed 2 years ago

Aravinda93 commented 2 years ago

I am new to the library and trying to create a few Nodes dynamically and connect them using the Connector but for some reason, I am unable to connect the created nodes. Can you please let me know how can I connect these nodes?

I have added complete code in Codesandbox.

Also, why does the Nodes have only one Port for connection? Is there any option for the Nodes to have Port on all 4 sides of it? Any help with regards to this issue would be really appreciated.

Following is the issue I am facing: CPT2111102205-1288x856

RuslanHimikEvchev commented 2 years ago

You are trying to connect output to output. In your example, 

this.editor.addNode(name, 0, 1, 150, 300, "github", data, html);

second and third arguments - is num of inputs and outputs

Drawflow.addNode (name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false){...}
jerosoler commented 2 years ago

Hi @Aravinda93

Nodes have inputs and outputs. The outputs can only be connected to the inputs. It is a flow tool not a drawing tool.

As @RuslanHimikEvchev comments

You can put as many inputs and outputs as you want. Change in your code for example:

this.editor.addNode (name, 2, 3, 150, 300, "github", data, html);

If you want connectors on all 4 sides you can take a look at: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-679976512

Aravinda93 commented 2 years ago

Hello @RuslanHimikEvchev @jerosoler Thanks a lot for the response and clarification, I am understanding things more clearly now. As I am a bit new to this visualization tool I was a bit confused.

I have two small doubts and am unable to find anything with regards to it in the doc:

  1. Can we assign the Unique ID to Connector? The Nodes have the automatic ID assigned during creation but there isn't anything for Connector when its Created just the Input/Output Node ID with the Port IDs. Is there any possibility to add it during creation for Connector?

  2. I am adding the HTML Button and Input fields during the creation of the Nodes, I would like to perform some tasks after the Button click but for some reason, nothing happens when I click even though I have added the method. Also, upon the click, I would like to know which Nodes button was clicked. Is there a way to achieve this? Should I rely on nodeSelected for this? Also, would like to update the text in the Input fields after the creation and based on user input.

I have posted the complete working code in CodeSandbox.

Any idea or suggestion would be really appreciated. Thanks a lot in advance.

jerosoler commented 2 years ago

Hi @Aravinda93

The question one: We cannot pass a unique id to the connections.

The question Two: Seeing as you are using nuxt - vue2, I recommend that you take a look at this example: https://github.com/jerosoler/Drawflow/issues/263#issuecomment-930449781

The example shows how to use SFC de vue as nodes. Also how to get the id of each node. What I see in codesandbox is using the html nodes.

I close the issue so as not to mix problems.