search

woodenconsulting / react-js-diagrams

A flow based diagramming library written in React
MIT License
220 stars 61 forks source link

A pre-saved diagram doesn't render links on page load #6

Closed umarashfaq closed 7 years ago

umarashfaq commented 7 years ago

Hi, thanks for your great work. I'm using it in one my projects and liking it a lot.

I have noticed that on page load, a pre-saved diagram doesn't render links. Upon some investigation, I figured that for rendering a link, you've to find out coordinates of ports its connected with. Those coordinates are in turn calculated by selecting port's HTML elements present in the DOM. At the time of first rendering, those elements are not present in the DOM (you're rendering link layer before node layer in DiagramWidget), hence the querySelector returns nothing and your DiagramEngine#getNodePortElement method throws an error (which gets swallowed somewhere and doesn't make it to the console).

I've tried extending DiagramWidget and swapping the render order of links and nodes (nodes first, links later). It does render links on page load, but I can't select nodes or ports anymore.

Please let me know if you can suggest a workaround to this problem.

umarashfaq commented 7 years ago

Have forked your repo and fixed the issue there. Have also published the fork on NPM because I needed the fixes urgently for my project. The stated mission of the framework was to make customizations easy, but I found a lot of issues while doing that. My goal in the fork is to iron them out, so I can actually apply customizations for my project. If you like, I can send you a pull-request. Fix can be found here: https://github.com/emumba-com/react-js-diagrams/commit/6dcd39a63095fc88633fe893fd3d315139b19d32

sajadghawami commented 6 years ago

Is this fixed? Somehow i am still having the same problem!