How to resize Node of type Spot based on text content?

GoJS
1

I have a node of type Spot in my Diagram because I want to position ports and TextBlock. However, I also want the node to resize based on the length of the text. How can I do this?

2

This is where you need to nest different kinds of Panels. Have the first/main element of the “Spot” Panel be an “Auto” Panel. Give that “Auto” Panel a name and set Part.resizeObjectName on the Node to that name, as well as resizable: true.

http://gojs.net/latest/intro/nodes.html

3

Hi walter, I don’t think I understood you correctly… This is what I get, but it doesn’t do what I want. It adds a resize handler to one of the panels, but I don’t want to manually resize it, only by the text in the textblock.

  $(go.Node, 'Spot', {

            // locationSpot: go.Spot.Center,
            // locationObjectName: 'BODY'
            resizeObjectName: 'BODY',
            resizable: true
        },
        $(go.Panel, 'Auto', {

            name: 'BODY',
        }),
        $(go.Shape, shapes.node, nodeShapeSettings(fillColor)),
        getPort(portTypes.input),
        getPort(portTypes.output),
        $(go.TextBlock, {editable: false, margin: 2, visible: true},
            new go.Binding('text', 'description'),
            new go.Binding('alignment', '', function (data, node) {

                return node.diagram.isReadOnly ? go.Spot.Bottom : go.Spot.Center
            }))
    );

I’ve also tried setting the ports and shape inside the Auto Panel, but it still doesn’t do what I wanted…

This is what I started with:

 $(go.Node, 'Spot', {

            locationSpot: go.Spot.Center,
            locationObjectName: 'BODY'
        },
        $(go.Shape, shapes.node, nodeShapeSettings(fillColor)),
        getPort(portTypes.input),
        getPort(portTypes.output),
        $(go.TextBlock, {editable: false, margin: 2, visible: true},
            new go.Binding('text', 'description'),
            new go.Binding('alignment', '', function (data, node) {

                return node.diagram.isReadOnly ? go.Spot.Bottom : go.Spot.Center
            }))
    );
4

Ah, OK, forget about setting resizable and resizeObjectName.

You want your visual tree to be something like:

Node, "Spot"
    Panel, "Auto",
        Shape
        TextBlock
    port1
    port2
5

Thanks Walter, that did it :-)
I hope you don’t mind if I asked an unrelated question… the textblock creates an area on the port from which one is unable to drag to create a link. Is there any way to solve this?

6

Are you saying that the TextBlock is overlapping one or both port objects? You can add a margin to the TextBlock so that the “Auto” Panel gets bigger. Or you could change the alignment on the ports so that they are farther away from where the text is.

Or if you really want the text to overlap the port(s) you could set pickable to false on the TextBlock.

7

Tnx Walter, Pickable was what I was looking for :-)