Ports positioned outside a node using alignment positions the ports incorrectly when size of node changes

GoJS
#1

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,

  1. 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.
  2. 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) {
        }),
      )

image
image974×632 3.72 KB

#2

There are a lot of possibilities – a lot of ways to design features that meet your stated requirements.

You might be interested in: Shifting Ports Automatically

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.

#3

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.

#4

What Spot values are you using?

#5

alignment: new go.Spot(1.0, 0.4), alignmentFocus: go.Spot.BottomLeft

alignment: new go.Spot(1, 0.8),
alignmentFocus: go.Spot.BottomLeft,

#6

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.

#7

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

#8

It seems to me that the main element in your “Spot” Panel should be that blue rectangle. Is that the case in your node template?

The other elements of the “Spot” Panel will be the ports, aligned however you have set or bound their alignment and alignmentFocus properties.

#9

yes, the main element is the rectangle and is Spot.

#10

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.