search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Bi Directional Ports? #803

Open radding opened 3 years ago

radding commented 3 years ago

I am looking to build ports on my nodes that both create and accept new links. Is there support for this?

I tried by stacking both an in and an output port on top of each other, hoping that this library would figure out when I dropped ontop of the "stack", but no link gets created, and I tried making them both in or both out ports, and no link gets created between the two when using the library to make a diagram.

I tried looking at the events for creating ports and no event is fired when the link is dropped.

MarkMarsh commented 3 years ago

I think this link answers your question (I haven't tried it myself).

https://github.com/projectstorm/react-diagrams/blob/master/docs/customizing/ports.md#specifying-if-a-link-can-be-connected

amrit981 commented 3 years ago

@radding Have you got the answer. I can't find any solution

rzfzr commented 2 years ago

I just implemented this on my project image I'm learning how to manipulate this package, as result the code is very messy and duplicated, but you can see how its done on addBiPort: https://github.com/rzfzr/mdd4/blob/a7abb0d82801be833f61da8e5c4ff1d4d9170f9c/src/components/react-diagrams/editableNode/MyEditableNodeModel.ts#L124 And how its rendered on MyPortLabelWidget: https://github.com/rzfzr/mdd4/blob/a7abb0d82801be833f61da8e5c4ff1d4d9170f9c/src/components/react-diagrams/custom-port/MyPortLabelWidget.tsx#L46