How to evenly spread out large number of ports
Closed this issue · 6 comments
Hi, I have nodes that may have a handful of ports (e.g., 10-20 ports) on a single side (input/output). I would like to know how ensure that ports are evenly spread out. See image below for a canonical example of issue I'm having with large number of ports. The ports are either un-evenly positioned (oval on left in the image) or bunched up together (right oval).
Will the portSpacing
attribute help with this, if so how should I be using it? I am using the JavaScript library.
Thanks!
What would be the expected result? Even if the ports were spaced evenly (and it's a bit puzzling to me that they aren't, because that's what the algorithm usually tries to do) they wouldn't really be readable because there's not enough space. Would you be okay with the algorithm resizing the nodes appropriately?
@le-cds Thanks for your response. Yes, while readability of port-labels is an issue with large number of ports, I control scaling of fonts through user's zooming behavior on the SVG canvas. I am also using color to represent port types, which provides some indication about port type when text is small/hidden.
Regarding behavior of the algorithm, I experimented with changing the node height, and it seems that the default algorithm tries to fit all ports within a fixed vertical space that is equal to node height. Below is image with modified node height (nodes are taller than in previously posted image).
What I am trying to achieve is to keep node sizes same, but allow ports to be separated evenly. So an option that allows port drawing area to scale freely based on number of port, without having to change node dimension. Something like below:
Sorry for the delay, I was on leave.
You should be able to do this by setting the node's de.cau.cs.kieler.portAlignment
to CENTER
and specifying a reasonable value for de.cau.cs.kieler.portSpacing
, e.g. 5
.
Thanks. Will try that out..
@uruuru Port spacing solution worked! Thanks. Here's the code and results:
nodeJSON.width = 18;
nodeJSON.height = 10;
nodeJSON ["properties"] = {
"portConstraints" : "FIXED_SIDE",
"de.cau.cs.kieler.portAlignment" : "CENTER",
"de.cau.cs.kieler.portSpacing": 5
};
Is there working sample with hierarchy ,grouping with ports?