Change group template based on SubGraph Expansion

GoJS
#1

Hello,

I’m not sure if this is the proper way to go about this, but I want to have different visual displays of a group depending on its SubGraph Expansion state.

When the Subgraph is collapsed, I just want to display a single image, the expansion icon, a solid border outline, and a title. I have this aspect working great.

When the Subgraph expands, I want to remove the image, change the title color, change the border to a dashedArray, and fill the space where the image was with multiple images that represent each node in the group (basically, display each node image instead of a generalized image representing the group, rather than appending each node image) (assume my node array is properly built with the correct properties).

Any insight into the proper way to go about this?

Thanks in advance!

#2

You could use two different Group templates in the Diagram.groupTemplateMap. In each template you could have a Group.subGraphExpandedChanged handler that changed the category of the group. Say one template has the category name “EXPANDED” and another template has the name “COLLAPSED”. Then the “EXPANDED” template would have:

{ subGraphExpandedChanged: function(g) { g.category = "COLLAPSED"; } },and the “COLLAPSED” template would have:

    { subGraphExpandedChanged: function(g) { g.category = "EXPANDED"; } },
#3

I made this change, and while it is what I would want, I’m getting the error “The diagram for this layout is not set” when I click the subGraphExpansion button.

#4

That’s coming from a GridLayout that you did not associate with a Diagram. Did you not set Diagram.layout and/or Group.layout to a new instance of GridLayout?

#5

I don’t have a Diagram.layout and both of my groupTemplates in my groupTemplateMap include:

layout: $go(go.GridLayout,
{
wrappingWidth: Infinity, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4)
}),

EDIT: Adding a GridLayout to the Diagram did not solve the issue either.

#6

That’s a bug. Thanks for reporting it. A fix will be in the next release (1.3.11 or 1.4.0-beta4), which should be within several days.

#7

This bug was fixed with the 1.4.0 beta4 update.

Although, I’m curious as to wonder if/how I can maintain the position of a group between the COLLAPSED and EXPANDED templates? Right now, if I expand a group, it will shift drastically down and to the right, and then go back to its original position when collapsing again.

I would like for the upper right corner to be the anchor for both templates, so that the upper right corner stays in place no matter which state the group is in.

Thanks!

#8

Thanks for confirming the bug fix.

My first impression is that you need to set the { locationSpot: go.Spot.TopRight } and you need to TwoWay bind the Node.location to some node data property.

Note that the location spot is a spot in the Placeholder, not of the whole Group. One might not need to have a TwoWay Binding of Node.location if one saves and then restores the Node.location in a subGraphExpandedChanged event handler. Then you could use points that are not relative to the Placeholder, too. But I haven’t tried these things to make sure that they do what you want.

#9

I’m not sure I understand.

I applied locationSpot: go.Spot.TopRight to my go.Placeholder properties for both groups, but I’m getting the following exception: “Trying to set undefined property “locationSpot” on object: Placeholder#1132”

I also set new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify), on each group template.

#10

"locationSpot" is a property on Part, not on Placeholder.