search

antonioru / beautiful-react-diagrams

💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
https://antonioru.github.io/beautiful-react-diagrams/
MIT License
2.68k stars 177 forks source link

Link Customization #106

Open yasaspeiris opened 3 years ago

yasaspeiris commented 3 years ago

**Is your feature request related to a problem?

The documentation shows how to customize nodes and it works brilliantly. I would also like to modify links, such as changing the fill color, adding an on-hover tool tip to display information etc.

Describe the solution you'd like

Include an example on how to modify links in documentation.

Describe alternatives you've considered

I tried modifying the original code but had little success.

Additional context

Thank you for this library! It is absolutely brilliant and easy to use. A few more examples can help beginners like me.

allexxis commented 3 years ago

Yes an example on how to modify link will be awesome and state for the animation to be triggered manually could help a lot

maofmoran commented 3 years ago

I would also like to be able to customize the links as @yasaspeiris described. It can be very useful.

masterofdon commented 3 years ago

Not a real solution maybe but i have added css rules for links. In order to achive that you need to first use className attr of link such as : 

links: [
    { input: 'node-1', output: 'node-2', readonly: true, className: "completed-link" },
  ]

then created a css rule more specific than original one such as

.bi.bi-diagram
  .bi-link-canvas-layer
  .bi-diagram-link.readonly-link.completed-link
  .bi-link-path {
  stroke: blue;
}

as I said. not neat but hey it works:D

chrisp-jama commented 2 years ago

Related to Link Customization, is it possible to have 2 labels on 1 link path?