Port location in node template

GoJS
#1

Hi,
I need to implement ports in the following device template :

image
image.jpg980×219 78.1 KB

For each port hole (marked with blue arrow) i would like to implement a yellow rectangle “port”
I started with two ports, as shown below, but i’m having problems locating them on the exact spot :
image
image.jpg957×196 72.5 KB

I tried to use Table panel with alignment and Spots values, as follows, (sorry, forgot how to format the code) :
(go.Panel, "Table", (go.RowColumnDefinition, { row: 0, alignment: go.Spot.Left }),
{ alignment: new go.Spot(0.34, 0.66) },
(go.Panel, "Horizontal", { column: 0, row: 0, }, (go.Shape,
{ width: 50, height: 35, portId: “A”, fill: “yellow” })
),
(go.Panel, "Horizontal", { column: 1, row: 0 }, (go.Shape,
{ width: 50, height: 35, portId: “B”, fill: “yellow” })
),
)
But i have the feeling, there’s a simple way…

#2

Maybe you just want to use a position panel. https://gojs.net/latest/intro/panels.html#PositionPanels

#3

Looks good,
The question is if i use the resizing tool, will the port panels also resize accordingly ?

#4

If you are going to be doing resizing, it is probably better to use a spot panel and align the ports relative to the main object. You will probably need a binding on the width/height of the ports that allows them to resize based on the size of the main object as well.

Here’s a simple example: https://codepen.io/jhardy/pen/OJPxyKZ?editors=1010

#5

Ok,
So when i dont set the picture w/h and set the port rectnasgulrt w/h i get :

image
image.jpg990×209 72.9 KB

Which is what i was looking for, yet if i set the picture to { width: 250, height: 35 }, hard coded,
I get :
image
image.png946×176 23.8 KB

So, even if don’t use resizing tool and only change the pic w/h, i have to adapt the port w/h.
I’m looking for a generic algorithm that gets the pic w/h and sets the port w/h accordingly.

#6

Set the “size” property in the data if you don’t want the default size for your picture. This way your ports can be sized properly from the beginning. I’ve updated the first node in the sample to set a different size for the first node.

#7

I see,
Will try,
Thanks

#8

Is there any way in GOJS to select a rectangular area and to get its h/w ?

#9

Normally you could use the actualBounds, but as noted in the Binding.ofObject documentation, you can only reliably data bind to settable properties.