Konvajs/Vue-Konva connect the shapes using the connector dynamically

[Aravinda93]

I am using Konvajs/Vue-Konva within my Vuejs/Nuxt application. Using Konva I am creating the Rect shape dynamically at run time. Now I would like to use some sort of Connectors to connect the different Rect Shapes so that I can have the logic of which is source Rect and which is Target Rect so as to build the Parent-Child relationship.

I am creating the connectors using the same approach as shapes but for some reason, it is not working as expected.

I have added my code sample here in CodeSandBox.

I am looking to build something like this, where I can draw the Nodes/Shapes and connect them using some sort of Connectors with Labels. Can someone please let me know how can I add the Connectors and build the logic to understand Rect/Shape that has been created using Vue-Konva

[lavrton]

Your code is too large. Make a small demo and ask a specific question.

What should we do with the demo? What exactly is not working?

[Aravinda93]

@lavrton Thanks a lot for your response. I have edited my question and added an image to provide you with a better idea of what I am trying to do. If you get a chance can you please suggest me something?

[roydekleijn]

Any luck ?

[Aravinda93]

@roydekleijn I used Drawflowlibrary and that worked perfectly for my requirement. https://github.com/jerosoler/Drawflow