Comments (6)
Hey @NithishG ! This isn't an issue that's exclusive to react-flow-smart-edge
, this would happen with any edge by default. As proof, I've edited your example to use React Flow's StepEdge
instead and was also able to reproduce overlapping labels:
https://codesandbox.io/s/edge-overlapping-counter-example-lbfiq2?file=/src/Flow.js
The built-in smart edges by default will render labels as text roughly in the middle of the drawn line. If you want more control over when, where and how they are rendered, you'll need to use the getSmartEdge
custom hook and build your own edge component. There's the smart edge with button example from this repo, and the Edge Label Renderer example from React Flow that should help you get started.
from react-flow-smart-edge.
This issue is related to this feature request: #25
from react-flow-smart-edge.
Hey @tisoap, I agree that it's not an issue exclusive to react-flow-smart-edge
but the reason for posting over here is that as this is the custom implementation to connect nodes other than provided by reactflow
.
Just to let you know we have a custom edge that uses getSmartEdge
to get the svgPathString
as you mentioned and we do have control on the edge labels, but the catch over here is they don't know about the other labels residing at the same position.
So, can we do it in a different way where we can redraw the edge paths according to the user's will as per shown in the video
Screen.Recording.2023-05-29.at.1.19.15.PM.mov
from react-flow-smart-edge.
By default, the label rendered does not have knowledge of other labels in the graph. Using the getSmartEdge
custom hook exposes the label renderer to you, which would allow for a custom implementation that looks at some global store with every other label position and renders the new one accordingly, for example.
Your video suggestion maps to another feature request for adding draggable points in the Edge, which is also not officially supported by React Flow: #36
from react-flow-smart-edge.
This issue is stale because it has been open for 7 days with no activity.
from react-flow-smart-edge.
This issue was closed because it has been inactive for 7 days since being marked as stale.
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
- Bending of edge from source HOT 4
- 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.