Port location in node template

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


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 :

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…

Maybe you just want to use a position panel. GoJS Panels -- Northwoods Software

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

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

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


Which is what i was looking for, yet if i set the picture to { width: 250, height: 35 }, hard coded,
I get :

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.

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.

I see,
Will try,
Thanks

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

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