search

jerosoler / Drawflow

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

Can we create a grouped button node #220

Open amikum1997 opened 3 years ago

amikum1997 commented 3 years ago

I am willing to create a node that represents grouped button something like the screenshot I have attached. Screenshot from 2021-08-06 11-16-23

Is it possible with the current code or need some modifications?

jerosoler commented 3 years ago

Hi @amikum1997

That's just two nodes.

One with 4 outputs. And another with 1 entry and one exit.

You don't have to have a problem.

It would look something like this.

editor.addNode('buttons', 0, 4, 150, 300, 'buttons', {}, `Buttons`);
editor.addNode('question', 1, 1, 150, 300, 'question', {},  `Question Text`);
amikum1997 commented 3 years ago

@jerosoler thank you for the suggestion but the main issue I am facing is with the mapping of each output option with the next input node value I have tried your suggestion and got this Screenshot from 2021-08-06 12-29-30

in this, each option value is not getting mapped with the next input node id.

Need Help with this .

jerosoler commented 3 years ago

If you want it to connect to the new node automatically you can use this: #205

amikum1997 commented 3 years ago

@jerosoler Thanks for your reply.

But I want to know, how we map each output circle according to its correspondind button.

Like in the picture, output circles are at one place, not according to the buttons we have added.

The output circles are attached to the outer div, but I want them to link with each buttons.

jerosoler commented 3 years ago

The html content is not linked to the outputs. That is based on the logic of each component. But you can adjust each output using CSS. https://github.com/jerosoler/Drawflow/issues/149#issuecomment-813498435

jerosoler commented 2 years ago

Other option, more simple: