Dynamic Input-Output

[cage81]

How to "bind" input/output's position created with node's body elements (created dynamically)?

[jerosoler]

Hello

Didn't I just understand your question?

You mean the functions, addNodeInput or addNodeOutput?

[cage81]

Hello

Didn't I just understand your question?

You mean the functions, addNodeInput or addNodeOutput?

Hi, I'm using your Drawflow (great work! Thank you very much) in VueJS and I would like to add dynamic content (element) to the node (body) and have the possibility to "bind" one dynamic output to each dynamic body element.

i.e.: I create a button inside the node and bind one output to this button (a call to action the goes to another node)

I hope I have clearify my request. Thanks

[jerosoler]

I understand that you could use this vue example. https://github.com/jerosoler/Drawflow/issues/37

When clicking the button emit data to other node

[cage81]

I understand that you could use this vue example. #37

When clicking the button emit data to other node

That example really helped me to start your library integration in Vue (thanks again!). And, unfortunately, it's not my question's answer.

Starting from this example: let's think the '<button @click="exportData">Export' is inside a component element. I send the click to the parent using EventBus and it works.

I would like to set the output node's (vertical) position just created as the middle of another element (it could be an input text, a button, a text area...or anything else) created inside node's body.

[jerosoler]

I get it...

The inputs, textarea, buttons are not linked to an input or output, they are independent. That is a matter of your logic.

When you add a node you also add a css class to it. I think that knowing the node and the configurations it has could be done by CSS. Or as you are using Vue you can customize each node with your code.

You can modify the css for adapart-lo as in the example: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-679976512

[cage81]

I get it...

The inputs, textarea, buttons are not linked to an input or output, they are independent. That is a matter of your logic.

When you add a node you also add a css class to it. I think that knowing the node and the configurations it has could be done by CSS. Or as you are using Vue you can customize each node with your code.

You can modify the css for adapart-lo as in the example: #20 (comment)

Ok, I'm trying to change the input/output position based on the node's bodies elements via CSS...I'll let you know if I'll succeed :P

Thank you very much!