Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: Edge offset property #36

Open
Gargafield opened this issue Mar 22, 2024 · 1 comment
Open

Proposal: Edge offset property #36

Gargafield opened this issue Mar 22, 2024 · 1 comment

Comments

@Gargafield
Copy link

fromOffset and toOffset property

Currently creating three edges between a pair of nodes will create this clutter:

image

This is of course not very useful, and I therefor propose fromOffset and toOffset. The properties store an integer for the pixel offset of the edge. Where 0 is center of the side, positive being 'up' the side and negative being 'down' it. Meaning a positive offset will push the edge towards the positive axis of the side. For example, with toSide: 'bottom' will toOffset: -100 push the edge arrow 100 pixels towards -x (left).
Offsets other than 0 need to be clamped with in sideLength/2 and -sideLength/2, as the edge shouldn't be able to start and end past the node side.
The properties are optional and default to 0 (the center) when not defined.

image

// Edge object
{
   ...properties,
  "fromOffset": 0,
  "toOffset": 100
},
  • fromOffset (optional, integer) is the pixel offset on the side where this edge starts.
  • toOffset (optional, integer) is the pixel offset on the side where this edge ends.

This proposal shouldn't be considered done. I will try to accommodate any feedback.

@richardi-gentrack
Copy link

Overlapping edges is a problem, but adding new offset properties is overkill.

Most graph/diagram implementations (Mermaid, PlantUml etc) handle this automatically, by routing the edges to avoid each other:

graph LR
    A -- L1 --> B
    A -- L2 --> B
    A -- L3 --> B
Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants