Gojs group resize bug

Resize objects as attached error occurs

My Gruop Template:

this.diagram.groupTemplateMap.add("", goMake(go.Group, "Vertical",

            {

                resizeObjectName: "PANEL",

                ungroupable: true,

                computesBoundsAfterDrag: true,

                mouseDrop: this.finishDrop,

                handlesDragDropForMembers: true,

                computesBoundsIncludingLinks: false,

                computesBoundsIncludingLocation: true,

                selectable: true,

                selectionAdornmentTemplate: nodeSelectionGroupAdornmentTemplate,

                resizeAdornmentTemplate: nodeResizeAdornmentTemplate,

                subGraphExpandedChanged: (group: go.Group) => {

                    group.findObject("mainPanel").visible = !group.findObject("mainPanel").visible;

                    group.updateTargetBindings("source");

                },

                mouseDragLeave: (e: any, grp: go.Group, prev: any) => {

                    this.dropGroupState = true;

                }

            },  // enable Ctrl-Shift-G to ungroup a selected Group

            new go.Binding("location", "location", this.bindGroupLocation).makeTwoWay(),

            new go.Binding("background", "color", this.bindGroupBackgroundColor),

            new go.Binding("movable", "isLock", this.bindIsLock),

            new go.Binding("deletable", "isLock", this.bindIsLock),

            new go.Binding("resizable", "isLock", this.bindIsLock),

            goMake(go.Panel, "Auto",

                {

                    stretch: go.GraphObject.Fill,

                    background: "#ffffff",

                    height: 25

                },

                new go.Binding("width", "size", this.bindGroupWidthSize),

                new go.Binding("background", "textBackgroundColor", this.bindGroupTextBackgroundColor),

                goMake(go.Panel, "Horizontal",

                    {

                        alignment: go.Spot.Left,

                    },

                    goMake("SubGraphExpanderButton", { margin: 5 }),

                    goMake(go.TextBlock,

                        {

                            font: "bold 19px sans-serif",

                            isMultiline: false,

                            editable: false,

                            margin: new go.Margin(0, 25, 0, 0),

                            maxLines: 1,

                            overflow: go.TextBlock.OverflowEllipsis

                        },

                        new go.Binding("text", "caption", this.bindShapeText),

                        new go.Binding("stroke", "font", this.bindGroupTextColor),

                        new go.Binding("isUnderline", "font", this.bindGroupTextUnderline),

                        new go.Binding("font", "font", this.bindGroupTextFont),

                        new go.Binding("maxSize", "size", (size: ISize) => {

                            if (size && !isNullOrUndefined(size.width)) {

                                return new go.Size(size.width - 55, NaN);

                            } else {

                                return new go.Size(this.props.config.nodeConfig.size.width, NaN);

                            }

                        })

                    )

                ),

                goMake(go.Panel, "Horizontal",

                    {

                        alignment: go.Spot.Right

                    },

                    goMake(go.Picture, {

                        height: 20,

                        width: 20,

                        name: "groupIcon"

                    },

                        new go.Binding("source", "", (sourceData: IFlowItemBase, picture: go.Picture) => {

                            return picture.part.findObject("mainPanel").visible ? groupBase64Opened : groupBase64Closed;

                        })

                    )

                )

            ),

            goMake(go.Panel, "Auto",

                {

                    name: "mainPanel"

                },

                goMake(go.Shape, "Rectangle",  // the rectangular shape around the members

                    {

                        fromLinkable: false,

                        toLinkable: false,

                        name: "PANEL",

                        strokeWidth: 0,

                        fill: "transparent"

                    },

                    new go.Binding("desiredSize", "size", this.bindShapeSize).makeTwoWay()

                ),

                goMake(go.Placeholder, { alignment: go.Spot.TopLeft, background: "transparent" })

            ),

            { // this tooltip Adornment is shared by all groups

                toolTip: this.bindToolTipTemplate()

            }

        ));

What is the error? I do not see any error message.

I do see three potential problems:

  • A “Horizontal” panel should have two or more elements in them; if there is only one you can probably get rid of the panel and keep that one element.
  • The user is resizing the border or main element of an “Auto” panel; probably should be resizing the "mainPanel. GoJS Panels -- Northwoods Software
  • There are limits on resizing groups that have Placeholders. GoJS Sized Groups -- Northwoods Software

The mistake must be where I draw these rectangles.

I shared my code, can you show it as a code?

I just tried to use your code, but there are way too many dependencies on its environment for me to begin to get it to work, so I stopped trying.

Did you make the second change that I suggested? Which GraphObject in your template has the bounds that would match where you are drawing your preferred locations for resize handles?