Comments (4)
Hey @adarshsuresh12, thanks for reporting! To give you a bit of context on why this is happening:
This package uses a path-finding algorithm behind the scenes. It works by generating a 2D grid representation of the graph, with "free" and "occupied" cells, and then it "walks" through these cells using A-star. The problem is, path-finding is very resource intensive, so treating every pixel on screen as a possible free/occupied cell would have made this Edge terribly slow. My solution was to work with 10x10 pixel cells instead of individual pixels by default, so the problem scope is 10x smaller. You can actually control the cell size with the gridRatio
advanced option.
So, what you're seeing as a "bend" in the edge at this position, is the edge being drawn to the start of one of those cells before it follows the computed path. To fix this, I'd need to add edge cases for the start/end of the computed path, which I didn't have the time to implement. It's similar to the issue described here: #45
As a palliative measure in the meantime, you could try to either decrease the gridRatio
value (at the expense of more computing power), or add grid snapping to your React Flow graph so the nodes themselves will be aligned.
from react-flow-smart-edge.
@brootle I'm happy to take pull requests!
from react-flow-smart-edge.
@tisoap maybe you can just update the function that returns svgPathString
and straight up the ends? I checked it and it shouldn't be hard, for example
from M 792.652 840 L 790 830 L 790 820 L 780 820 L 770 820 L 760 820 L 750 820 L 740 820 L 730 820 L 720 820 L 710 820 L 710 810 L 710 800 L 710 790 L 710 780 L 710 770 L 710 760 L 710 750 L 710 740 L 710 730 L 710 720 L 710 710 L 710 700 L 710 690 L 710 680 L 710 670 L 710 660 L 710 650 L 710 640 L 710 630 L 710 620 L 710 610 L 700 610 L 690 610 L 680 610 L 670 610 L 660 610 L 650 610 L 640 610 L 630 610 L 620 610 L 610 610 L 600 610 L 590 610 L 580 610 L 570 610 L 560 610 L 550 610 L 540 610 L 530 610 L 520 610 L 510 610 L 500 610 L 490 610 L 480 610 L 470 610 L 460 610 L 450 610 L 440 610 L 430 610 L 420 610 L 410 610 L 400 610 L 390 610 L 380 610 L 370 610 L 360 610 L 360 600 L 364.348 594
to M 792.652 840 L 792.652 830 L 792.652 820 L 780 820 L 770 820 L 760 820 L 750 820 L 740 820 L 730 820 L 720 820 L 710 820 L 710 810 L 710 800 L 710 790 L 710 780 L 710 770 L 710 760 L 710 750 L 710 740 L 710 730 L 710 720 L 710 710 L 710 700 L 710 690 L 710 680 L 710 670 L 710 660 L 710 650 L 710 640 L 710 630 L 710 620 L 710 610 L 700 610 L 690 610 L 680 610 L 670 610 L 660 610 L 650 610 L 640 610 L 630 610 L 620 610 L 610 610 L 600 610 L 590 610 L 580 610 L 570 610 L 560 610 L 550 610 L 540 610 L 530 610 L 520 610 L 510 610 L 500 610 L 490 610 L 480 610 L 470 610 L 460 610 L 450 610 L 440 610 L 430 610 L 420 610 L 410 610 L 400 610 L 390 610 L 380 610 L 370 610 L 364.348 610 L 364.348 600 L 364.348 594
from react-flow-smart-edge.
Related Issues (20)
- Create templates for new issues
- Update Sponsor Badge
- Diagram becomes unresponsive with large data HOT 7
- Add draggable point to smart edge HOT 4
- 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
- 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.