Out-of-bounds nodes can break FlowChart

[jakubfaliszewski]

Hi @MrBlenny and everyone! While working with https://github.com/MrBlenny/react-flow-chart I encountered a problem with disappearing links between nodes. It occurs when nodes are far away from each other or when zoom factor is high enough so nodes are out of bounds. This causes children of InnerCanvas to not be rendered. It seems that nodesInView that contains of nodes that are only in view was designed to not render unnecessary nodes due to the performance issues, but it creates some problems. When nodes are removed links between them cannot exist which leads to hiding links that should be visible and to rendering errors.

Problem

Links that should be visible can be hidden because nodes are removed when they are positioned out of bounds. Demo - here you can see that links disappears after zooming in and everything goes wild after zooming out:

Solution

I propose two solutions here:

• [ ] allowing to remove filtering of out of bounds nodes by additional configuration - if new prop is set to true nodesInView will be just Object.keys(nodes)
• [ ] not removing nodes at all, just use some CSS styling to reduce performance impact (maybe visibility: hidden will do the job)

[Derick1530]

@jakubfaliszewski seems like this is no longer maintained any libray out there you can suggest?

[williank]

Has any lib replaced this?

[Derick1530]

Yeah, react flow

[williank]

Your have link repository ?

[Derick1530]

Nop

On Sun, Mar 3, 2024 at 9:39 PM Willian Kevenis @.***> wrote:

Your have link repository ?

— Reply to this email directly, view it on GitHub https://github.com/MrBlenny/react-flow-chart/issues/256#issuecomment-1975256090, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOYCTR4PRLDPZ5BPQV3XN23YWNU4XAVCNFSM6AAAAAARH4HMYOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZVGI2TMMBZGA . You are receiving this because you commented.Message ID: @.***>