Layout on Groups consistent between expand/collapse

We are trying to make a custom layout and to position Groups.

We can position the groups correctly at first when not expanded. However, when a group is expanded, it appears the locationObject changes to be the Placeholder, and the group is no longer aligned by its border.

What can we do to have the TopLeft of the Group remain in the same position when collapsed and expanded?

That depends on your Group template. The one I defined for you at:

happens to have that behavior.

Sorry, I don’t understand. Does your example have the behavior I want to change, or does it behave in the way I want it to?

If your example does work in the way I’m requesting, what is it specifically about that Group Template that causes it to behave the way I’d like it to? I can’t just work from your example, we already have several weeks of development that I need to incorporate this solution into.

Please understand, I’m trying to learn how this system works so I can solve problems on my own, but I cannot do that without either: access to the code, reference to documentation that explains my problem, or a careful explanation of how to do what I’m trying to do. I’ve read everything in your documentation related to coordinates, positioning, layouts, and groups. Pointing at example code with no explanation just isn’t helpful when a system is as complex and subtle as GoJS.

Thank you in advance for your assistance.

That example app I posted earlier has a group template whose Group.position does not change after expanding or collapsing. That’s what you want, isn’t it?

image

image

I think you want to keep the offset between the Group.position and the Group.location to be constant whether the group is expanded or collapsed. Is that a sufficient explanation?

I don’t think I have seen your group template, so it’s hard for me to provide any specific advice.

The goal here is just to be able to expand/collapse groups and have them remain in the same position.

Based on our other thread, I’m guessing the issue here could be that we start our groups collapsed. We set a padding of 10 on the Placeholder. Before the group is ever expanded, that padding doesn’t seem to be taken into account, but every time after it is. If I set the padding to 0, this issue goes away.

I think it may also only happen when the group being expanded has another group inside of it? Does that make any sense? It appears when the group being expanded has only non-group nodes inside, this doesn’t happen.

Here’s a description to the behavior we’re seeing:

  1. start a group collapsed
  2. expand the group, the top-left corner of the group moves up-left a few pixels, and the group is now in a new position.
  3. collapse the group, the top-left corner stays stationary
  4. expand the group again, the top-left corner moves, but then immediately animates back to its previous position. (To be clear, this jump is not a problem, because its final position is consistent.)

Is there something we can do to initialize the Placeholders to prevent this? Or, if we can detect the placeholder is “unready” (not sure how), we could set a locationSpot of (0, 0, 20, 20) and that seems to correct for it.

Any thoughts?

OK, your requirements are getting sufficiently complex (and to me sufficiently ambiguous) that I think it might be better if you defined your own custom Layout that does what you want. That way you will know before the layout the exact position (if any) and size of each node, and you can then assign each node its preferred position by calling Part.move or Part.moveTo.
https://gojs.net/latest/intro/extensions.html#OverridingMethodsBySubclassingLayout

Since it seems that you have nested groups, remember that the default value for Group.layout is an instance of Layout, just as it is for Diagram.layout. But you can set Group.layout to be some other layout (such as your custom layout) or you can set it to null. The latter allows the responsible layout, the Diagram.layout, to arrange everything including the member nodes.

Here is a custom layout that only shifts nodes rightward:
Automatically Shift Nodes Aside Righward to Make Room