Group Template doesn't display correctly

GoJS
1

Hello! Our team has been using a group template for quite sometime. Recently, we decided to make a slight modification for a different layout in some cases. To reuse the code, I pulled out some common stuff, but this resulted in a different rendering. I’m not very experienced with GoJS, so it may be that something makes this not allowed. Below is the code and how it is rendered for the each variation:

Original Code

    orgGroupTemplate =
        GO(go.Group, "Auto",
            GO(go.Shape, "Rectangle", shapeParameters),
            GO(go.Panel, "Vertical",
                { defaultAlignment: go.Spot.Left },
                GO(go.Panel, "Horizontal",
                    { defaultAlignment: go.Spot.Top },
                    GO("SubGraphExpanderButton"),
                    GO(go.TextBlock, { name: "GROUPTEXT", alignment: go.Spot.TopLeft, alignmentFocus: new go.Spot(0, 0, 4, 4), font: "Bold 10pt Sans-Serif" }, new go.Binding("text", "name"))
                ),
                GO(go.Placeholder, { padding: 20 })
            ),
            {
                contextMenu: GO(go.Adornment, "Vertical",
                    GO("ContextMenuButton", GO(go.TextBlock, "Organization View"), { click: jumpToGraph })
                )
            },
            {
                toolTip: toolTip
            },
            {
                click: showProperties
            }
        );

How it displays
image%20(1)

Modified Code

    var collapsibleGroupLabel =
        GO(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left },
            GO(go.Panel, "Horizontal",
                { defaultAlignment: go.Spot.Top },
                GO("SubGraphExpanderButton"),
                GO(go.TextBlock, { name: "GROUPTEXT", alignment: go.Spot.TopLeft, alignmentFocus: new go.Spot(0, 0, 4, 4), font: "Bold 10pt Sans-Serif" }, new go.Binding("text", "name"))
            ),
            GO(go.Placeholder, { padding: 20 })
        );
    ​
    let shapeParameters = { name: "OBJSHAPE", parameter1: 10, fill: "rgba(128,128,128,0.33)" };
    ​
    orgGroupTemplate =
        GO(go.Group, "Auto",
            GO(go.Shape, "Rectangle", shapeParameters),
            collapsibleGroupLabel,
            {
                contextMenu: GO(go.Adornment, "Vertical",
                    GO("ContextMenuButton", GO(go.TextBlock, "Organization View"), { click: jumpToGraph })
                )
            },
            {
                toolTip: toolTip
            },
            {
                click: showProperties
            }
        );

How it displays
image

2

The contextMenu, toolTip, and click properties affect behavior, not appearance, so you can ignore those properties for this discussion.

What do you do with orgGroupTemplate? Do you set Diagram.groupTemplate or add it to Diagram.groupTemplateMap? That should be fine and produce exactly the same results as before, assuming you have reorganized the code correctly. It looks that way to me, but I haven’t examined it carefully.

But do you use collapsibleGroupLabel in any other templates? You can’t do that without first copying. That’s because the visual tree cannot share any GraphObjects – the visual tree of a diagram really has to be tree-structured.

You’ll notice that samples that define functions to share bits of templates among multiple templates do so by being in functions that construct and return what’s needed. They do not actually share any GraphObjects or property sets or Bindings – instead they create new instances of those and return them to be used in a template.

By the way, Brushes and Geometrys can be shared by multiple GraphObjects, but they aren’t GraphObjects. There are some specific exceptions of not being able to share GraphObjects, but they are rare. Notice that properties such as contextMenu or toolTip are not in the visual tree of the template. Instead they are single instances that are shown at most once at any time, so it’s OK to refer to them from multiple places in the sample template or from multiple templates.

3

Thank you, that is very helpful. The original intention was to use orgGroupTemplate and another group template and switch between them on the fly. As you suspected, the collapsibleGroupLabel was being used in the other group template, but it sounds like this is not possible. I removed the other usage and the problem no longer occurs.

Can the groupTemplate (Diagram.groupTemplate) be changed on the fly? Our previous process was loading a new page when this change occured, but that is no longer happening.

4

Oops, I was just updating my response, above. Just adding more detail.

Regarding modifying templates: yes and no. Whenever a Group is instantiated from a group template, it makes a copy of the template. The template itself is never modified. So in general if you modify a template, it doesn’t matter until you create a new instance (i.e. copy) of the template. No existing instances will change.

Maybe you could set up a second unchanging template and change the category of the group to force it to be re-created using a new template. GoJS Template Maps -- Northwoods Software