How to design the Drawflow nodes from array of Objects?

[Aravinda93]

@jerosoler Hi, I was previously creating the Drawflow nodes based on the drag-and-drop approach which is working absolutely fine. What I was doing previously was I was storing the information related to Nodes in Vuex array. Now I would like to do the reverse of it i.e. I have a list of Objects in an Array I need to create Drawflow Nodes for it? I was wondering how to do it.

Following is the CodeSandBox link where I am dragging and dropping the Nodes into canvas and creating the Drawflow Nodes. During, the drop I am keeping track of the Nodes information within my Vues modules/ConfigureIdentifiersInfoStore identifiersArray.

Now I have the identifiersArray and I would like to create Drawflow Nodes based on it? But the identifiersArray does not contain the information on where to create the nodes (pos_x, pos_y, etc). Do I need to build this information on my own? Do I need to build the drawflowInfo -> drawflow -> Home information by myself?

Can you please guide me how to achieve this?

[jerosoler]

You have to do the same thing you are doing in the file: DrawflowSample.vue https://codesandbox.io/s/charming-panini-wzcq57?file=/components/DrawflowSample.vue:5108-5125

[Aravinda93]

@jerosoler Thanks for your response. I have one more question but in that case, I was able to get the posX and posY because I was dragging the events and dropping them so I knew the exact location where the Drawflow Nodes needed to be placed.

Now, I know how many Nodes need to be created but I do not have any information associated with Drawflow such as posX and posY.

Also, Can you please let provide the link to the source code for this: https://jerosoler.github.io/Drawflow/? I would like to add some beautification according to this to my project

[jerosoler]

The upper left corner is the 0,0 position.

Knowing that and the size of your nodes, you can create a map with your array.

Unless you want to place them in the center.

• https://github.com/jerosoler/Drawflow/issues/229

[Aravinda93]

@jerosoler Thanks a lot this is working as expected.

Can you please let provide the link to the source code for this: https://jerosoler.github.io/Drawflow/? I would like to add some beautification according to this to my Vuejs/Nuxtjs Drawflow project.

[jerosoler]

The source code demo, is the folder "docs" in repo. https://github.com/jerosoler/Drawflow/tree/master/docs Stylesheet file: https://github.com/jerosoler/Drawflow/blob/master/docs/beautiful.css

Other demo example with vue3: https://jerosoler.github.io/drawflow-vue3-example/ And repo: https://github.com/jerosoler/drawflow-vue3-example

[Aravinda93]

@jerosoler Thanks a lot for the links. I will try to incorporate something similar within my Vuejs/Nuxtjs project. Thanks again :)