Whether there is any priviledge to add custom html content on node and accordingly output bubble?

[ishpreetkaurwebner]

I have following node:

When I will click on + icon, then it will add condition2 textbox and output bubble for it. If again I click on +icon, then again it will add condition3 textbox and output bubble for it.

With + icon, textbox can be appended with javascript-jquery, not an issue. Whether there is anything that will handle or add output bubble accordingly ?

[jerosoler]

Hello @ishpreetkaurwebner

Yes add a buble with:

editor.addNodeOutput(id)

View methods: https://github.com/jerosoler/Drawflow#methods

Although the text fields and the outputs are not related, you can relate them in your logic

[ishpreetkaurwebner]

Thanks @jerosoler. It is working.

[ishpreetkaurwebner]

Hi @jerosoler,

I am able to add bubble with solution suggested by you and able to import new dynamically created html with the help of https://github.com/jerosoler/Drawflow/issues/73. I am facing another problem is that when I add new html, then I add bubble also and bubble is adding on same position, as shown in Fig 2,

Figure 1 This is original node which is added on drawflow during drag and drop.

Now, on click of + icon, node looks like following image

Figure 2

With the help of editor.addNodeOutput(id), I am able to add bubble, and with https://github.com/jerosoler/Drawflow/issues/73, I am able to export dynamically created html, but problem is: all bubbles are adding at same place. Somehow I able to resolve the bubble positions' issue with javascript/jquery, some calculations on top and left margins while adding dynamic html and my node looks perfect as shown below:

Figure 3

But, bubble positions are not exported, and when I import the whole diagram I created, it becomes same as shown in figure 2.

Any workaround to handle bubble positions during export and import?

[jerosoler]

I would have to solve with css. It would be the simplest and most practical.

Another option would be to use the "https://github.com/jerosoler/Drawflow#events" "import" event and execute your javascript code.

[ishpreetkaurwebner]

Yes @jerosoler , it would be better solution if there is workaround with css instead of I have to calculate positions of bubble with javascript.

There is no limit for adding new html and then accordingly bubbles are also getting adding up and all bubbles are getting add to same position. So, that's better if position is handled through css without knowing number of bubbles adding up.

[jerosoler]

According to what I see in figure 3.

You have 3 types of bubbles.

The one up (Input)

The one down (Output) Those on the right (Output)

.drawflow .drawflow-node.YOU_CLASS_NODE .output {
 /* RIGHT BUBLES */
}

.drawflow .drawflow-node.YOU_CLASS_NODE .output:nth-child(1) {
  /*  DOWN BUBLE  */
}

[ishpreetkaurwebner]

Yes, One is up and that is input, second is at bottom and that is output. Both these bubbles are fixed. So, there is no problem for fixed css. On right sides, there can be multiple bubbles and they are output and number of right bubbles are uncertain. So, I need css for right bubbles.

[ishpreetkaurwebner]

I would have to solve with css. It would be the simplest and most practical.

Another option would be to use the "https://github.com/jerosoler/Drawflow#events" "import" event and execute your javascript code.

I was already trying with approach "first import and then apply css with javascript". But, still I thought if you have better way to solve such issue.

I have done with above approach.

[ishpreetkaurwebner]

@jerosoler, I will still wait if you found css solution for handling it. Please let me know whenever you will solve the problem with easy css approach.

[jerosoler]

The only approach that I see possible is the one I have discussed above.

https://github.com/jerosoler/Drawflow/issues/149#issuecomment-813498435

[iamnikhilrohan]

Thanks @jerosoler. It is working.

@ishpreetkaurwebner im facing a similar issue can you help me out?

[ishpreetkaurwebner]

@iamnikhilrohan : You are facing which problem here? Here, following points were the issues: (1) Add custom HTML in export (2) Add output bubble along with custom HTML added (3) Positions of output bubbles

[amikum1997]

@iamnikhilrohan please can you help me with the code that you have done for managing the dynamic position of bubbles as in figure 3