Node Resizable constraint such that text inside textblock is not hidden upon resizing

GoJS
1

What is Want is Text to be fully visible inside a node and node should not be able to shrink beyond the area of textblock such that whole text is fully visible inside node.

Original Image:
image

After Resizing (Text gets cut):
image

Desired (Full text is visible):
image

Here is the current Code:

public static getTemplate(
    diagram: go.Diagram,
    contextMenu: go.Adornment | go.HTMLInfo
  ): go.Node {
    const $ = go.GraphObject.make;
    return $(
      go.Node,
      "Spot",
      {
        contextMenu,
        resizable: true,
        resizeObjectName: "BODY",
        selectionObjectName: "BODY",
      },
      new go.Binding("location", "position", parseNodeLocation).makeTwoWay(
        convertNodeLocationPoint
      ),
      new go.Binding("isSelected", "isSelected").makeTwoWay(),
      $(
        go.Panel,
        "Spot",
        $(
          go.Panel,
          "Auto",
          {
            name: "BODY",
            minSize: new go.Size(160, 55),
            desiredSize: new go.Size(160, 55),
          },
          new go.Binding("desiredSize", "size", parseEntitySize).makeTwoWay(
            parseShapeSize
          ),
          $(
            go.Shape,
            "RoundedRectangle",
            {
              fill: GRAPH_CONFIG.SHAPE_COLORS.whiteColor,
              stretch: go.GraphObject.Fill,
              stroke: null,
              strokeWidth: 1,
              shadowVisible: true,
            },
            new go.Binding("figure", "shape"),            
          ),
          $(
            go.TextBlock,
            {
              alignment: go.Spot.Left,
              margin: new go.Margin(10),
              stroke: "#060322",
              shadowVisible: false,
              font: "normal 12px sans-serif",
              editable: true,
              overflow: go.TextBlock.UniformToFill,
              isMultiline: false,
              textValidation: GRAPH_CONFIG.TEXT_VALIDATIONS.TEXT_ANNOTATION,
              textEdited: GRAPH_CONFIG.TEXT_EDITED.TEXT_ANNOTATION,
            },
            new go.Binding("text", "textAnnotation").makeTwoWay()
          )
        ),
        $(
          go.Shape,
          "LeftCShape", // A left bracket shape
          {
            alignment: go.Spot.Left,
            alignmentFocus: go.Spot.Left,
            stretch: go.GraphObject.Vertical,
            cursor: "pointer",
            strokeWidth: 2,
            stroke: "#4F5590",
            fill: "transparent",
          }
        )
      ),
    );
  }

NOTE: I have looked into the lineCount property for textblock node resizing, but not sure how to use it. Link : TextBlock | GoJS API

2

First, I should point out that:

        $(go.TextBlock,
          { . . .
            overflow: go.TextBlock.UniformToFill,

UniformToFill is not a valid value for the TextBlock.overflow property.

Second, I should point out that you have a “Spot” Panel inside of a “Spot” Panel without any other elements in the outer “Spot” Panel. That seems both wasteful and confusing. Just keep the outer one.

If I understand you correctly, you want to limit the resizing so that all of the text is always visible – it’s never clipped. Normally it might be straight-forward to customize the ResizingTool so that it sets the minimum size based on a simple measurement of the text, but that’s not clear to me. After all when the resized width is wider, there’s less wrapping needed, so the height can be shorter while still showing all of the text. So, did you want to allow a shorter TextBlock when it is wider?

3

So we require, only the text should be visible (wrapped) and, that text size should be the minimum size of the node.
That’s all we need, Also, we don’t allow new line of text
PS: Thanks for the correction will fix those things.

4

I’m finding this too hard to design and implement.

Part of the problem is that the size of the TextBlock is not the object that is being resized by the ResizingTool. But that difference in size and position can vary a lot – it depends on how those Panels are defined, which affects how the TextBlock is shown as the Panel is being resized.

Even if it were the TextBlock being resized instead of some other object, it’s very hard to determine what resizing should be allowed, because the height of the text depends a great deal on the properties of the TextBlock and the available width.

So I think it would be better to change the resizing behavior so that if at the end the resized panel is too small, then remove the desiredSize constraint on the panel (by setting desiredSize to NaNxNaN) and let it take its natural smallest size.