Repository navigation
Extend edges functionality to support drag and drop to add relationship between tables. #12
Description
Hi wonderful work with the visualizer.
I have a specific request, maybe you could help me out in breaking down the implementation.
So is there a possibility to add a drag and drop functionality where I can select a field in a source table and drag a line(similar to the line present in edges) to a field in the target table and it will automatically generate the config for the edges.
So regarding generating the config for edges, it could be done when I implement the drag and drop functionality, so is there any way how I can achieve it on the UI.
Activity
makaroni4 commentedon Apr 23, 2024
Hey @keepcalmncode 👋
Brilliant idea, I love it! 👏
Yes, there's a
onConnectcallback in ReactFlow that's fired when you're drawing a new edge: https://reactflow.dev/api-reference/react-flow#on-connectAs you can see, I've disabled it (since edges are defined in the config file): 1fde8b1
We can have a very nice UX, where we draw a one-to-many relationship by default. If a user holds the
1key, then we draw a one-to-one relationship.❓ The question is – how do we deliver the edge config back to the app? You can do something similar to table positions and copy the edge config to the clipboard or even better – write it to a file.
Happy to help you with a PR review, but it has to be you to drive it 🚀