Panel Auto truncating content

[Wojtek Krzesaj]

Problem

One of the most commonly used panel types in GoJS is the Auto panel. It adjusts its size according to the content.
Adding go.Shape as first element to an Auto panel will result in the shape being used as a background for other elements added to the panel after it.
Depending on the shape’s figure we use for the background, by setting the figure property, it changed the properties responsible for panel Auto positioning. These properties are spot1 and spot2, whose default values are the top left corner for spot1 and bottom right corner for spot2.
An example of shape that would change these properties is RoundedRectangle, where the spot1 and spot2 properties will be compensated by the value parameter1 * 0.3 where parameter1 is equal to the border radius of the RoundedRectangle shape. This behaviour prevents content from extending beyond the shape's outline.
Unfortunately, this leads to the situation of cutting of the content of the Auto panel, which tries to use all its space (responsiveness).

Example

Let’s look at the example of such behaviour.
A panel of type Auto with the light blue, rounded at the top, rectangle background, and inside a panel of type Table, with stretch set to go.Stretch.Horizontal, positioning the text. The Auto panel is placed inside a GoJS Node with desiredSize property defined.

At the picture above we can see a red parent Auto panel, blue background shape and a TextBlock with yellow background inside a Table panel.
Since we set stretch to go.Stretch.Horizontal in order to stretch the Table panel to always use the entire available width of the parent panel we encounter a situation where our text is cut off.

And without extra background colours:

This is because the Table panel will have the same width as the parent panel (Auto), which in turn has compensated spot1 and spot2 properties by which the extended content of the Table panel will be truncated.

Solution

In order to fix this problem, we need to override the values of the properties responsible for content positioning in the Auto panel. In the properties of the panels background shape (go.Shape) we set values for spot1 and spot2 as follows:

spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight,

The result will be as follows:


As we can see, the text is no longer cut off, however it sticks out beyond the rounded corners of the panels Auto background shape. Because of the setting spot1 and spot2 properties back to uncompensated values, we have to take care of the correct positioning of the panel content ourselves so that it does not stick out beyond the parent panel. To do this, we can use margins. We add a margin with the value new go.Margin(0, 10) to the Table panel to achieve the following result.


This way we fixed the truncated text, and our Table panel is still responsive without the need to calculate its width manually