Make adornments fit the boundary

GoJS
1

I have a simple graph. A new adornment will show clicking on each node.
The adornment on node[Alpha] is in the boundary. But the adornment on node[Gamma] or node[Delta] is beyond the bottom of the diagram.
How can I make the adornments inside the boundary of the diagram?

                click: (e, node) => {
                  if (node.findAdornment('Clicked')) {
                    node.removeAdornment('Clicked');
                  } else {
                      commonClickedTemplate.adornedObject = node;
                      node.addAdornment('Clicked', commonClickedTemplate);
                  }
                }

image

image

2

How do you define the Adornment?

You may want to increase the value of Diagram.padding to allow scrolling downwards or rightwards further. I suppose you don’t need to allow scrolling upwards or leftwards any further.

3 
        const commonClickedTemplate = $(
            go.Adornment,
            'Spot',
            $(go.Placeholder),
            $(
                go.Panel,
                'Auto',
                { alignment: go.Spot.Center, alignmentFocus: go.Spot.TopLeft },
                $(go.Shape, 'Rectangle', {
                    name: 'nodeBodyShape',
                    fill: '#FFFFFF',
                    minSize: new go.Size(NaN, 150),
                    height: 150,
                    width: 150,
                    stroke: '#000000',
                    margin: 0,
                }),
                $(go.TextBlock, {
                  name: 'labelText',
                  height: 20,
                  text: 'details'
                }),
            )
        );

This is my adornment.
I will have a try to see if increasing padding works for me. Thanks

4

As I think you already understand, that “Auto” Panel within the Adornment will always have its top-left corner at the center of the Node (the Adornment.adornedObject). It doesn’t matter where the node is or how the diagram has been scrolled or zoomed.