Comments (4)
Hi @picxy3d , thanks for the suggestion! Could you share the name of the website/app where you got your example screenshots from?
I'm unsure if React Flow allows for development of edges with draggable points, but I'll leave this open to investigate. But one thing for sure is that:
- pathfinder avoid collapse between edge
... is impossible to accomplish. Is the same as trying so solve the three utilities problem.
from react-flow-smart-edge.
HI @tisoap thx for your response
i got my example screen shots from here
live example can be found here
you are right actually avoid collapse between edge was unnecessary as long as user can drag and customize it
but it will be great to have because when we use smart edge with large amount of node the edge will look like spaghetti
it was so hard to find what it connect to so i want it to look clean like pcb path for inspiration
to be clear i mean get draggable points and put it to path finder as obj to avoid (as same as nodes)
so it will draw path like this
instead of this
sory i dont explaind it clearly at the first comment
from react-flow-smart-edge.
about draggable points it was possible with custom edge but react flow doesn't have any official support on this
joey request this feature on react flow discord before
from react-flow-smart-edge.
feature
- draggable
- show it on focus
- save coordinate of it
- update those point position with pathfinder
- if user drag the point find path from that point
- pathfinder avoid collapse between edge
EX
thx for your great work
+1, it would be an awesome addition to the package
from react-flow-smart-edge.
Related Issues (20)
- Create templates for new issues
- Update Sponsor Badge
- Diagram becomes unresponsive with large data HOT 7
- Update to be compatible with React Flow 11 HOT 5
- In version 3.0 Beta - Edge between 2 nodes goes away if the nodes are close to each other HOT 3
- Props that are generated when you start dragging new connection are missing for <StepEdge /> in react flow v11 HOT 2
- Make edges not overlap each other HOT 1
- Connection line appears broken when using specific grid snapping HOT 3
- Connection line appears broken when using specific grid snapping HOT 1
- Demo page/Storybook is no longer working HOT 2
- Smart Edge Not Considering nodes inside a group. HOT 2
- Edges not starting/ending on XY coords HOT 1
- Bending of edge from source HOT 4
- Edge labels getting overlapped HOT 6
- Add SmoothStepPath HOT 3
- edgeCenterX and edgeCenterY sometimes aren't calculated properly! HOT 1
- Option to propagate exceptions outside of getSmartEdge HOT 2
- engine warning when installing latest version HOT 2
- Add helper function for EdgeTypes and Options
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flow-smart-edge.