hi ,
I am working on implementing two ports outside at the border of a node. I was able to achieve it using alignment in spot panel and alignmentfocus, but i have few issue,
The positions of the ports change when the node size changes , is it possible to keep the ports at the same positions even if the node size change.
Is it possible to change the port position to right/left side of node when the node is moved in order to show connected links in shortest path
3)When i use spot panel, the entire node size also changes, it looks like some margin is getting added. I would require the node size to stay the same . Is there a way to solve this.
eg-
$(
go.Shape,
'Circle',
portStyle(true),
{ portId: '', alignment: new go.Spot(1.0, 0.4), alignmentFocus: go.Spot.BottomLeft },
new go.Binding('portId', 'id', function (id) {
}),
),
$(
go.Shape,
'Circle',
portStyle(true),
{
portId: '',
alignment: new go.Spot(1, 0.8),
alignmentFocus: go.Spot.BottomLeft,
},
new go.Binding('portId', 'id', function (id) {
}),
)
That sample automatically moves ports to be top&bottom or to be left&right, depending on the relative positions of the nodes. I think you have slightly different requirements, though.
I’m not sure what you mean by changing the size of the node. If you add these property settings to the nodeStyle function in that sample:
resizable: true, resizeObjectName: "BODY",
you will see the behavior that I think you are asking for.
By changing the size of the node , I mean to say that , we have nodes which can be expanded and the itemarray to be displayed inside it may vary, thus the height of the node also may change, so different nodes may hav different heights. When we expand, the node gets appended with another section below. In this case how can we give a particular spot alignment to the ports. I tried giving same alignment spot for these nodes and could see that the positions of the ports are different (sometimes near and sometimes far) .Is there a way to give spot alignment based on the height of node.
Those Spot values for alignment are fractional – it means that the first one is on the right side and 0.4 of the way down. So no matter how big or how small the main element of the “Spot” Panel is, that object will be positioned relative to that main element’s bounding rectangle. That means if the height of the “Spot” Panel’s main element changes, so will the effective Y position of that aligned object.
And when we add spot’ to panel at the entire node, the width of the node is increasing , some margins are added corresponding to the ports alignment. Is it a default behaviour? When the panel is spot’ , and if there are ports which has an alignment , will the node width increase or any margin get added? In my case I can c dat some margins are getting added n hence the width of node is increasing.
If I add Auto instead of Spot, no extra width is added to node, but the ports tend to position inside the node border and not outside
Yes, the width of a Node includes all of the elements in it. So if there were no ports on the right side of your blue rectangular area, and you add a port, that would increase its width. Adding additional ports on the right might not change the width if the ports are all the same width.
The same goes if you add ports on the left side.
Depending on what your Diagram.layout is, you might want to set the Node.locationObjectName to be the name of that blue rectangular panel or shape.
