react-digraph icon indicating copy to clipboard operation
react-digraph copied to clipboard

Port support

Open marcospassos opened this issue 8 years ago • 4 comments

Is there any plan to support input and output ports?

marcospassos avatar Jul 13 '17 00:07 marcospassos

Not at the moment, but I can definitely keep this in mind for a future version.

Also, if you'd like to submit a PR to add support for this, I'm totally open to it.

johnvf avatar Jul 19 '17 23:07 johnvf

Having input and output ports would be great, since we would be able to represent flow-based programming graphs and other use cases involving relationships of multiple types between nodes. @johnvf, how hard would be to implement this feature, in your opinion?

ruippeixotog avatar Jul 22 '17 22:07 ruippeixotog

I think it would be moderately complex. A decent starting point would be to extend the 'config' to support input/output ports within node types (perhaps a key/value of 'portName':{portType}). I would want to keep it backwards compatible, so if input/output ports aren't specified, I would want to fall back to the way things currently work (or at least create a single default input/output port if none is specified).

Ideally, the appearance of the ports is customizable (and reasonable defaults are provided) and they 'stick' to the outer boundary of whatever shape is specified for that node type. The port drawing code would have to be smart about moving around to 'receive' an incoming edge from a node at any angle (this would allow existing applications using our library to keep their graphs laid out in the same manner). Alternatively, the edge drawing code would have to be revised to handle ports that only appear to the right and left of nodes by breaking and bending in the middle, but I think this would be less desirable since it may break the layout of apps showing a vertically oriented graph.

The onCreateEdge and onSwapEdge events could be passed the relevant ports, and the handler code for that would have to be rewritten to 'know' which port is being interacted with. A parent component using GraphView would then be able to handle these interactions with the ports in whatever way they see fit.

Definitely open to somebody taking this on if they would like - realistically, It will probably be a few months before I have the bandwidth to begin revisiting/extending this, but if there is significant interest and nobody gets to it first, I can keep this in mind.

johnvf avatar Jul 25 '17 17:07 johnvf

This would be useful to have

peterclemenko avatar Jun 28 '19 08:06 peterclemenko