Placeholder desiredSize is not working

GoJS
1

Hello,
I resizing group template but placeholder size is not changed.
my code:

goMake(go.Group, “Vertical”,
{

            ungroupable: true,
            computesBoundsAfterDrag: true,
            mouseDrop: this.finishDrop,
            handlesDragDropForMembers: true,
            selectable: true,
            selectionAdornmentTemplate: this.nodeSelectionAdornmentTemplate,
            resizable: true,
            resizeAdornmentTemplate: this.nodeResizeAdornmentTemplate,
            mouseDragEnter: (e: go.InputEvent, grp: go.Group, prev: any) => {
                this.highlightGroup(e, grp, true);
            },
            mouseDragLeave: (e: any, grp: go.Group, prev: any) => { this.highlightGroup(e, grp, false); },
        },  // enable Ctrl-Shift-G to ungroup a selected Group

        new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
        new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
        goMake(go.Panel, "Horizontal",
            {
                alignment: go.Spot.Left
            },
            goMake("SubGraphExpanderButton"),
            goMake(go.TextBlock,
                {
                    font: "bold 19px sans-serif",
                    isMultiline: false,  // don't allow newlines in text
                    editable: true,  // allow in-place editing by user
                },
                new go.Binding("text", "text").makeTwoWay(),
                new go.Binding("stroke", "", this.bindShapeTextColor).makeTwoWay(),
                new go.Binding("font", "", this.bindShapeTextFont).makeTwoWay(),
                new go.Binding("background", "", this.bindShapeTextBackgroundColor).makeTwoWay(),
            )
        ),
        goMake(go.Panel,"Auto",
            {
                name: "PANEL",
            },
            new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(),
            goMake(go.Shape, "Rectangle",  // the rectangular shape around the members
                {
                    fromLinkable: false,
                    toLinkable: false,
                },
                new go.Binding("stroke", "", this.bindShapeBorderColor).makeTwoWay(),
                new go.Binding("strokeDashArray", "", this.bindShapeBorderType).makeTwoWay(),
                new go.Binding("strokeWidth", "", this.bindShapeBorderThicknees).makeTwoWay(),
                new go.Binding("fill", "", this.bindShapeColor).makeTwoWay(),
            ),
            new go.Binding("desiredSize", "", this.bindGroupSize).makeTwoWay(),
            goMake(go.Placeholder,
                {
                    name: "PlaceHolder",
                    background: "green",
                },
                new go.Binding("desiredSize", "", this.bindGroupSize).makeTwoWay(),

            )  // represents where the members are
        ),
        { // this tooltip Adornment is shared by all groups
            toolTip:
                goMake(go.Adornment, "Auto",
                    goMake(go.Shape, { fill: "#FFFFCC" }),
                    goMake(go.TextBlock, { margin: 4 },
                        // bind to tooltip, not to Group.data, to allow access to Group properties
                        new go.Binding("text", "").ofObject())
                ),
        }
    );

This state image:

desiredSizePalceHolder.png849×378 9.1 KB

Green place is not resizeing and all center position :/

I checked this.bindGroupSize return value.
There is no problem.
what do i have to do ?

2

Are you using the go-debug.js library to notice if there are any warnings or errors?

Do you really need to have so many Bindings where the source is the empty string?

Do you really need to have so many TwoWay Bindings? If so, it is almost certainly an error to have a conversion function in one direction but not the other.

It is likely an error to try to set or bind the desiredSize of both an object and its containing Panel to the same value.

It doesn’t make sense to try to set the desiredSize of a Placeholder, because its size is determined by the area occupied by its members.

3

i not used go-debug.js.
I do not understand what is the alternative method.
I want to resize the placeholder when the group is resized.
Is there way to grow independent of placeholder objects

4

Either don’t use a Placeholder in your Group template or have the Group.resizeObjectName refer to something other than the Placeholder.

5

when I do not use placeholders
i not set resize object name.
I want to set the placeholder size parent to stretch

6

Then choose the second option I gave you: use a Placeholder but have the user resize something else, such as a Shape that surrounds the Placeholder. That’s what the Swim Lanes sample does, for example: Swim Lanes

7

I almost did the same but is not my want this.
The latest situation:

I do not use layout objects, so it might not work ?
my code:

let myTemplate = goMake(go.Group, “Vertical”,
{
resizeObjectName: “PANEL”,
ungroupable: true,
//locationSpot: go.Spot.Left,
computesBoundsAfterDrag: true,
mouseDrop: this.finishDrop,
handlesDragDropForMembers: true,
computesBoundsIncludingLinks: false, // to reduce occurrences of links going briefly outside the lane
computesBoundsIncludingLocation: true, // to support empty space at top-left corner of lane
selectable: true,
selectionAdornmentTemplate: this.nodeSelectionAdornmentTemplate,
resizable: true,
resizeAdornmentTemplate: this.nodeResizeAdornmentTemplate,
mouseDragEnter: (e: go.InputEvent, grp: go.Group, prev: any) => {
this.highlightGroup(e, grp, true);
},
mouseDragLeave: (e: any, grp: go.Group, prev: any) => { this.highlightGroup(e, grp, false); },
}, // enable Ctrl-Shift-G to ungroup a selected Group

        new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
        goMake(go.Panel, "Horizontal",
            {
                alignment: go.Spot.Left
            },
            goMake("SubGraphExpanderButton"),
            goMake(go.TextBlock,
                {
                    font: "bold 19px sans-serif",
                    isMultiline: false,  // don't allow newlines in text
                    editable: true,  // allow in-place editing by user
                },
                new go.Binding("text", "text").makeTwoWay(),
                new go.Binding("stroke", "", this.bindShapeTextColor).makeTwoWay(),
                new go.Binding("font", "", this.bindShapeTextFont).makeTwoWay(),
                new go.Binding("background", "", this.bindShapeTextBackgroundColor).makeTwoWay(),
            )
        ),
        goMake(go.Panel, "Auto",
            { 
            },
          
            goMake(go.Shape, "Rectangle",  // the rectangular shape around the members
                {  
                    fromLinkable: false,
                    toLinkable: false,
                    name: "PANEL",
                },
                new go.Binding("stroke", "", this.bindShapeBorderColor).makeTwoWay(),
                new go.Binding("strokeDashArray", "", this.bindShapeBorderType).makeTwoWay(),
                new go.Binding("strokeWidth", "", this.bindShapeBorderThicknees).makeTwoWay(),
                new go.Binding("fill", "", this.bindShapeColor).makeTwoWay(),
                new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize.bind(this)),
            ),
            goMake(go.Placeholder,
                {
                    padding: 12, alignment: go.Spot.TopLeft,
                    background:"green"
                },

            ) 
        ),
        { // this tooltip Adornment is shared by all groups
            toolTip:
                goMake(go.Adornment, "Auto",
                    goMake(go.Shape, { fill: "#FFFFCC" }),
                    goMake(go.TextBlock, { margin: 4 },
                        // bind to tooltip, not to Group.data, to allow access to Group properties
                        new go.Binding("text", "").ofObject())
                ),
        }
    );
8

What is the problem now?

9

minimize button is minimizing green place. But minimize not worked for shape.
other issues resolved

10

Don’t set the Placeholder.background to green, but change the appearance of whatever the user is resizing.

11

ok thanks walter