Group Placeholder with padding amount bound to memberParts.count

GoJS
1

Trying to achieve groups where the padding amount around members increase depending on how many members the group has. So in essence making Placeholder.padding bound to ...memberParts.count.

It seems making a Binding that depends on .memberParts.count does not cut it. It works when interactively working with the diagram, but when loading an existing diagram using .fromJson(), the counts are always zero. It is not until you poke the group that the padding gets calculated correctly.

I have already gotten around this using tips from other posts in this forum, with this code, which gives me a data property that I can bind to instead, which works fine:

	// Since memberParts.count do not update on load, we maintain our own counter...
	const updateGroupCount = g => {
		g.diagram.model.setDataProperty( g.data, 'count', g.memberParts.count )
	}

	diagram.groupTemplate =
		goObject( go.Group, "Horizontal",
			{
				ungroupable: true, // User can ungroup nodes from this
				avoidable: false, // Links can route across (otherwise we can't get in!)
				computesBoundsAfterDrag: true,
				mouseDrop( e, grp ) {
					const ok = ( grp !== null
						? grp.addMembers( grp.diagram.selection, true )
						: e.diagram.commandHandler.addTopLevelParts( e.diagram.selection, true ) )
					if( !ok ) e.diagram.currentTool.doCancel()
				},
				handlesDragDropForMembers: true,  // Don't need to define handlers on member Nodes and Links
				memberAdded: updateGroupCount,
				memberRemoved: updateGroupCount
			},

…but it seems a bit unnecessary to have to do this. Is counts not updating on model load the expected behaviour, or is this maybe a bug?

2

As GoJS Data Binding -- Northwoods Software discusses, the source property has to be settable for the binding to be evaluated whenever the property changes value. Read-only properties, and especially computed properties, are not monitored every microsecond to see if they return a different value.

Basically, the implementation of each settable GraphObject property is to first check if the new value is valid, then to see if the new value is different from the old value, then to modify the state, and then to notify about the change. It is the latter step that checks if there are any Bindings that depend on the value.

So you were observant and clever enough to figure out how to do what you wanted, but I noticed that in doing so you may have added a data property to your model data. That’s fine if that is what you wanted anyway, but if you didn’t want to save that state, you could not use Bindings and just modify the Placeholder.padding property directly.

const updateGroupCount = g => { g.placeholder.padding = ... };
3

Ok, so all is good. Thanks for the tip, I’ll implement that.