Make textbox bigger overlap shape

GoJS
1

We define the node template as below (relevant code only). Our users are complaining that the text is truncated for diamond shapes and they have to make them ridiculously big in order to see the fulltext.
They are asking instead for the text to overlap the borders of the shape and go beyond it.

currently :
image

instead it should fit :

image

The textbox should go beyond shape borders so that the fulltext is visible without making the shape any bigger.

Is this possible ? If so, how should we change the below ?

dia.nodeTemplate =
      $(go.Node, 'Auto',
        {      
          resizable: true, resizeCellSize: new go.Size(20, 20), resizeObjectName: 'SHAPE',
        },
        new go.Binding('location', 'location', go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, 'Auto',
          $(go.Shape, new go.Binding('figure', 'figure'), {
            name: 'SHAPE',
            desiredSize: new go.Size(120, 60), minSize: new go.Size(60, 40),
            portId: '',
            fromLinkable: false, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
            toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,

            cursor: 'pointer'
          },
            new go.Binding('fill', 'color1', convertLinearBrush),
            new go.Binding('fill', 'color2', convertLinearBrush),
            new go.Binding('stroke', 'isHighlighted', h => h ? 'red' : 'black').ofObject(),
            new go.Binding('strokeWidth', 'isHighlighted', h => h ? 2 : 0.5).ofObject(),
          ),
          $(go.TextBlock, { margin: 2  },
            new go.Binding('text', 'label'))
        ),
2

Any shape figure, when used as the border or main element of an “Auto” Panel, causes the “Auto” Panel to put all its other elements inside the rectangular area specified by the Shape.spot1 and Shape.spot2 properties.

You can see how they are defined for the “Diamond” figure at https://gojs.net/latest/extensions/Figures.js. Shape.spot1 defaults to Spot(0.25, 0.25) and spot2 defaults to Spot(0.75, 0.75), so only a quarter of the diamond shape’s bounds is available for holding “content”. In your case it’s just a TextBlock.

So if you don’t mind some of the content/text to overlap with the sloped edges of the diamond shape, just increase the area covered by Shape.spot1 and Shape.spot2. I don’t know how much you want to expand that area, but you could start experimenting with:

  {
    spot1: new go.Spot(0.15, 0.15), spot2: new go.Spot(0.85, 0.85)
  }
3

that seems to do the trick ! thanks !

4

Oh, I should point out that the “Auto” Panel clips its elements if they are too big to fit in the bounds. So even with spot1 being go.Spot.TopLeft and spot2 being go.Spot.BottomRight, if the text is too big, it will be clipped.

If you don’t want any clipping, use a “Spot” Panel.

5

Thanks for the additional info. That’s weird, if I change the Panel from Auto to Spot, I get this :

image

instead of

image

Also, I didn’t know about go.Spot.ToLeft constant, but when I try it, the IDE complains :

image
image721×148 10.7 KB

Am I missing something here ?

6

That’s surprising. I don’t know what might be in your template that prevents it from working normally.

You cannot new a constant.

7

You cannot new a constant.

duh… Don’t know what I was thinking here…

Anyway, even without the ‘new’, the text is still truncated to the first letter when using ‘Spot’, instead of ‘Auto’.
It looks ok with Auto so nevermind.

8

If you are using an “Auto” Panel, you probably should not allow the user to resize the Shape. Instead have the user resize the Panel. (And so that’s where the initial setting of the desiredSize property would be, and the TwoWay Binding of that property.)
GoJS Panels -- Northwoods Software

It’s not that it cannot work the way that you have it, but in some cases the behavior might not be what you want. Try resizing when there is a lot of text.