Alignment of Port - shape

GoJS
1

I have nodes with ports, and need to display “labels” related to this ports. If i add a TextBlock and then the shape visualizing the port, the shape is aligned left in the “box” created by TextBlock. For the ports on left side of the node this looks a bit weird depending on size of the label. Is it possible to get the shape “floating” right… ?

2

I am confident that what you want is possible, but it would help a lot if you included a screenshot or two showing what you have and what you want, plus the current template.

3

Sure! You see here the labels creating a “box” and the shape aligns to right in the box.

Template (leftArray ports):

$go(go.Panel, "Vertical",
                    new go.Binding("itemArray", "leftArray"), {
                        row: 1, column: 0,
                        itemTemplate:
                        $go(go.Panel, {
                                _side: "left"                                    
                            },
                            $go(go.TextBlock, {
                                    margin: new go.Margin(35, 0, 0, 0)
                                }, new go.Binding("text", "description")),
                            $go(go.Panel, {
                                    _side: "right",                                                                        
                                },
                                $go(go.Shape, "Junction", {
                                        stroke: "black",
                                        fill: "white",
                                        width: 30, height: 30,
                                        margin: new go.Margin(50, 0, 50, 0),
                                        toLinkable: true, fromLinkable: true, cursor: "pointer",
                                        alignment: go.Spot.Right,
                                    }, 
                                    new go.Binding("portId", "portId")))),
                    }),

4

Is this screenshot just one small area of a single huge node?

5

It is a group node with 2 input ports.

6

Underscored property names are just used for app-specific purposes and are not recognized by GoJS.

I suggest that you set defaultAlignment: go.Spot.Right on the item template and also declare it to be a “Vertical” Panel too. Also, set defaultAlignment: go.Spot.Right on the Panel that binds itemArray, so that each item will be right aligned in the Panel of ports.

7

Thank you very much, i sorted it out Smile