When we collapse a group getting error

Before collapse

After collapse

Also getting error

Could you please show us your group template?

var node =
$(go.Group, “Auto”,
new go.Binding(“location”, “pos”, go.Point.parse).makeTwoWay(go.Point.stringify),

                {
                    isSubGraphExpanded: false,
                    ungroupable: true,
                    subGraphExpandedChanged: function(group) {
                    }
                },
                new go.Binding("isSubGraphExpanded", "isSubGraphExpanded"), {
                    toolTip: myToolTips
                },
                $(go.Shape, "Rectangle", {
                    fill: background,
                    stroke: null,
                    spot1: go.Spot.TopLeft,
                    spot2: go.Spot.BottomRight,
                    angle: 90
                }, new go.Binding("stroke"), new go.Binding("fill")),
                $(go.Panel, "Vertical",
                    $(go.TextBlock, "Center", {
                            name: "txt",
                            row: 0,
                            font: "6pt sans-serif",
                            wrap: go.TextBlock.WrapFit,
                            textAlign: "center",
                            width: 40,
                            margin: 5,
                            editable: true
                        },
                        new go.Binding("text")),
                    $(go.Panel, "Table",
                        $(go.Panel, "Table", {
                                name: "img",
                            },
                            $(go.Picture, icon, {
                                    visible: false,
                                    row: 1,
                                    width: icon_width,
                                    height: icon_height,
                                },
                                new go.Binding("visible", "isSubGraphExpanded",
                                    function(exp) {
                                        return exp ? false : true;
                                    }).ofObject(),
                            ),
                            $("SubGraphExpanderButton", {
                                row: 1
                            }),
                            $(go.Placeholder, {
                                    row: 2,
                                    padding: 5
                                },
                                new go.Binding("padding", "isSubGraphExpanded",
                                    function(exp) {
                                        return exp ? 10 : 0;
                                    }).ofObject(),
                            ),

                        ),
                    ),
                ), 
                {
                contextMenu: $(go.Adornment, "Vertical", {
                        defaultStretch: go.GraphObject.None
                    },
                $("ContextMenuButton",
                    $(go.TextBlock, "Ungroup", {
                        width: 100,
                        height: 25,
                        background: '#004780',
                        stroke: '#fff',
                        textAlign: 'center',
                        verticalAlignment: go.Spot.Center,
                        margin: 0
                    }), 
                    { mouseOver: function(e, obj) {
                        var toolTipDIV = document.getElementById('groupsubheadermenu');
                        var pt = e.diagram.lastInput.viewPoint;
                        jQuery('#groupsubheadermenu').html('< Ctrl - Shift - G >');
                        toolTipDIV.style.left = (pt.x + 20) + "px";
                        toolTipDIV.style.top = (pt.y) + "px";
                    }
                    },
                    {
                        mouseLeave: function(e, obj) {
                            var toolTipDIV = document.getElementById('groupsubheadermenu');
                            toolTipDIV.style.left = -100 + "px";
                            toolTipDIV.style.top = -100 + "px";
                        }
                    },
                    {
                        click: function(e, obj) {
                            Ungroup();
                        }
                    }))},
                {
                    mouseEnter: function(e, obj, prev) {
                        myDiagram.toolManager.hideToolTip()
                    },
                    click: function(e, obj) {
                        myDiagram.toolManager.hideToolTip()
                        var node = obj.part;
                        myToolTip(node);

                    },
                    mouseHover: function(e, obj) {
                        var node = obj.part;
                        if (obj.part.data.__gohashid < 6000) {
                            jQuery('#myPaletteDiv' + obj.part.data.key).show();
                        }
                    },
                    mouseLeave: function(e, obj) {
                        if (obj.part.data) {
                            hidemyToolTip('myPaletteDiv' + obj.part.data.key);
                            myDiagram.toolManager.hideToolTip()
                        }
                    },
                    // mouseDrop: dropOntoNode
                },
            );

It is happening in few cases.

What are the values of icon, icon_height, and icon_width?

Do you get different behaviors in different browsers? Does GoJS Pictures -- Northwoods Software help?

icon , icon_height , and icon_width those fields are coming from DB. We dynamically put here.

Is there any particular reason for getting “InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable” this error, at the time of group collapse.

Clearly the error is happening when trying to draw an image, and I think the only image is the Picture in the Group. That is why I would like to know the exact values for those three variables for each Group. And that includes the contents of the image files.

And you haven’t answered whether you get that error in other browsers. Or even which browser on which platform you are getting that error.

I am checking in Firefox :

In Chrome:-

Ah, one error message mentions a zero-sized canvas. More details please, including what I"ve asked for twice already.

Please check

var node =
$(go.Group, “Auto”,
new go.Binding(“location”, “pos”, go.Point.parse).makeTwoWay(go.Point.stringify),

                {
                    isSubGraphExpanded: false,
                    ungroupable: true,
                    subGraphExpandedChanged: function(group) {
                    }
                },
                new go.Binding("isSubGraphExpanded", "isSubGraphExpanded"), {
                    toolTip: myToolTips
                },
                $(go.Shape, "Rectangle", {
                    fill: background,
                    stroke: null,
                    spot1: go.Spot.TopLeft,
                    spot2: go.Spot.BottomRight
                }, new go.Binding("stroke"), new go.Binding("fill")),
                $(go.Panel, "Vertical",
                    $(go.TextBlock, "Center", {
                            name: "txt",
                            row: 0,
                            font: "6pt sans-serif",
                            wrap: go.TextBlock.WrapFit,
                            width: 60,
                            editable: true
                        },
                        new go.Binding("text")),
                    $(go.Panel, "Table",
                        $(go.Panel, "Table", {
                                name: "img",
                            },
                            $(go.Picture, 'images/default-group.jpg', {
                                    visible: false,
                                    row: 1,
                                    width: 55,
                                    height: 55,
                                },
                                new go.Binding("visible", "isSubGraphExpanded",
                                    function(exp) {
                                        return exp ? false : true;
                                    }).ofObject(),
                            ),
                            $("SubGraphExpanderButton", {
                                row: 1
                            }),
                            $(go.Placeholder, {
                                    row: 2,
                                    padding: 5
                                },
                                new go.Binding("padding", "isSubGraphExpanded",
                                    function(exp) {
                                        return exp ? 10 : 0;
                                    }).ofObject(),
                            ),

                        ),
                    ),
                ), 
                {
                    contextMenu: $(go.Adornment, "Vertical", {
                            defaultStretch: go.GraphObject.None
                        },
                    $("ContextMenuButton",
                        $(go.TextBlock, "Ungroup", {
                            width: 100,
                            height: 25,
                            background: '#004780',
                            stroke: '#fff',
                            textAlign: 'center',
                            verticalAlignment: go.Spot.Center,
                            margin: 0
                        }), 
                        { mouseOver: function(e, obj) {
                            var toolTipDIV = document.getElementById('groupsubheadermenu');
                            var pt = e.diagram.lastInput.viewPoint;
                            jQuery('#groupsubheadermenu').html('< Ctrl - Shift - G >');
                            toolTipDIV.style.left = (pt.x + 20) + "px";
                            toolTipDIV.style.top = (pt.y) + "px";
                        }
                        },
                        {
                            mouseLeave: function(e, obj) {
                                var toolTipDIV = document.getElementById('groupsubheadermenu');
                                toolTipDIV.style.left = -100 + "px";
                                toolTipDIV.style.top = -100 + "px";
                            }
                        },
                        {
                            click: function(e, obj) {
                                Ungroup();
                            }
                        }))},
                {
                    mouseEnter: function(e, obj, prev) {
                        myDiagram.toolManager.hideToolTip()
                    },
                    click: function(e, obj) {
                        myDiagram.toolManager.hideToolTip()
                        var node = obj.part;
                        myToolTip(node);

                    },
                    mouseHover: function(e, obj) {
                        var node = obj.part;
                        if (obj.part.data.__gohashid < 6000) {
                            jQuery('#myPaletteDiv' + obj.part.data.key).show();
                        }
                    },
                    mouseLeave: function(e, obj) {
                        hidemyToolTip('myPaletteDiv' + obj.part.data.key);
                        myDiagram.toolManager.hideToolTip()
                    },
                    // mouseDrop: dropOntoNode
                },
            );

We are using NodeJS

Since I do not have a lot of your supporting definitions, I just tried this simplification of your group template:

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        { isSubGraphExpanded: false, ungroupable: true },
        new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("isSubGraphExpanded"),
        $(go.Shape, "Rectangle",
          { fill: "lightgray", strokeWidth: 0 },
          new go.Binding("stroke"),
          new go.Binding("fill")),
        $(go.Panel, "Table",
          $(go.TextBlock, "Center",
            {
              row: 0,
              font: "6pt sans-serif",
              wrap: go.TextBlock.WrapFit,
              width: 60,
              editable: true
            },
            new go.Binding("text")),
          $(go.Picture, 'images/default-group.png',
            { row: 1, width: 55, height: 55, visible: false },
            new go.Binding("visible", "isSubGraphExpanded",
                           function(exp) { return !exp; }).ofObject()),
          $("SubGraphExpanderButton", { row: 1 }),
          $(go.Placeholder, { row: 2, padding: 5 })
        )
    );

I did not encounter any errors. What is the simplest group template that results in an error?

For example, I assumed that context menus have no effect on producing the problem, so I deleted that code from the group template. But I did add a 55x55 image file at images/default-group.png, and it behaved as I think you would want.

EDIT: I have updated the group template to remove a lot of extraneous property settings and to remove the unnecessary (outer) “Table” Panel.

When we add a node name “spacer (with width * height is 14 * 2)” into group, then this issue is happening.

Could you please modify my code to produce the problem? Or at least give me a complete group template definition that exhibits the problem?

We applied your group template in our system, then also same issue is there.

OK, then there must be something else going on.

Have you defined any DiagramEvent listeners? If so, what do they do?

Are you using go-debug.js? If not, please do so, and then check the console output for any warnings or errors.

We are using many DiagramEvents
BackgroundSingleClicked
BackgroundContextClicked
LinkDrawn
ClipboardPasted
ExternalObjectsDropped
TextEdited
doKeyDown

there work are different.

We are using go-debug.js. Then also find same error in console.

Those DiagramEvents probably do not affect collapsing/expanding groups, so that’s not the problem.

Precisely which version of GoJS are you using? Perhaps it’s a bug that has already been fixed.

We are using GoJS v2.0.9.