Unable to resize the shape

GoJS
1

Hi,

I am trying to set the width and height to my custom shape. I have the following node structure.

 const node =
        $(go.Node, 'Table',

            { linkConnected: this.updatePort, linkDisconnected: this.updatePort },
            new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),


            // the body
            $(go.Panel, 'Auto',
                {
                    row: 1, column: 1, name: 'BODY'                        
                },
                $(go.Shape, 'TriggerCompRect',
                    {
                        stroke: '#D7D7D7', fill: 'yellow',  fromLinkable: true, toLinkable: true,
                        width: 240, height: 120,
                        stretch: go.GraphObject.Fill,
                        minSize: new go.Size(240, 120)
                    },
                ),
                $(go.Panel, 'Table',
                    {
                        row: 0, column: 0, name: 'BODY',
                        stretch: go.GraphObject.Fill,                 
                        margin: new go.Margin(0, 0, 0, 25)
                    },

The shape itself is not changing as per the size 240x120. The container size is increasing while the shape itself remains the same, causing empty spaces in my node. Please see the result:
tempsnip

This is how i have generated the shape:

go.Shape.defineFigureGenerator('TriggerCompRect', function(shape, w, h) {
        const geo = go.Geometry.parse('M30.36.5H196c9.113,0,17.621-2.612,16.5,16.5V78.042c0,.276,3.145,26.137-12.838,26.458H30.36C-6.553,93.241-8.643,41.97,6.227,17,13.681,4.482,30.36.5,30.36.5Z', true);
        return geo;
    });

I am unable to resize the shape. How can this be done?

2

The problem is that your figure generator is supposed to return a Geometry whose size is the given w width and h height. But you are just returning a fixed size Geometry. It would be easier not to define a figure generator at all.

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        {
          selectionObjectName: "SHAPE",
          resizable: true, resizeObjectName: "SHAPE"
        },
        $(go.Shape,
          {
            name: "SHAPE",
            geometryString: "F1 M0 0 L50 20 20 50z",
            fill: "green"
          },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

Notice that this uses a fixed size Geometry, but because by default the Shape.geometryStretch is treated as go.GraphObject.Fill, it will automatically be stretched to the desired width and height as the user resizes the Shape.

If you do not want the shape’s geometry’s aspect ratio to change, just set geometryStretch: go.GraphObject.Uniform, but then you’ll probably have some empty space on one side or the other.

3

How do i get the geometry string for a custom shape whose size is the given w width and h height?

4

I’m saying that you don’t need to. Just let the Shape stretch the fixed geometry.

5

Sorry, i misunderstood. Ok the stretch is working fine now. But one problem is that im not able to fill in the required color for the shape.

this is the updated structure of the node:

$(go.Shape, 
                    {
                        name: 'SHAPE',
                        geometryString: 'M30.36.5H196c9.113,0,17.621-2.612,16.5,16.5V78.042c0,.276,3.145,26.137-12.838,26.458H30.36C-6.553,93.241-8.643,41.97,6.227,17,13.681,4.482,30.36.5,30.36.5Z',
                        stroke: 'white',
                        strokeWidth: 3,
                        fill: 'yellow',  fromLinkable: true, toLinkable: true,
                        width: 240, height: 120,
                        stretch: go.GraphObject.Fill,
                    },
                    new go.Binding("fill", "yellow")
                ),

What am i missing?
Currently, im just able to see the outline of the required shape. with a transparent background.

6

You need to declare which figures should be filled. Normally one can just prefix "F1 " to the string. Or more generally, call Geometry | GoJS API.

https://gojs.net/latest/intro/geometry.html#ConvertingPathStrings