About group collapse style

GoJS
1

Hi!
I think each change with&height and picture on group not expanded, But i can’t find about simple or API document.

Default collapse group style like this

Screen Shot 2015-09-23 at 11.34.53 AM.png600×694 46.5 KB

Hope collapse group style like this

Screen Shot 2015-09-23 at 1.42.55 PM.png836×412 37.5 KB

Who can help me.
Thanks!

2

How did you define your Group template?

3 
nodeTemplate =
		_g(go.Node , 'Spot',

			{ width: 70, locationSpot: go.Spot.Center },

			_g(go.Panel, 'Vertical',

				_g(go.Panel, 'Auto',

					_g(go.Shape,
						{ fill: null , stroke: null},
						new go.Binding('stroke', 'light', function(msg){
							if(msg) return 'red';
							return null;
						})),

					_g(go.Picture,
						{ margin: 10, width: 50, height: 50},
						new go.Binding('source'))

					//_g(go.Panel, 'Spot',
					//	{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight},
					//	_g(go.Shape, 'Ellipse', { width: 20, height: 20, margin: 4, fill: 'red'}),
					//	_g(go.TextBlock, '1', { margin: 2, stroke: 'white' }, new go.Binding('text', 'num2'))
					//),
					//
					//_g(go.Panel, 'Spot',
					//	{ alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft },
					//	_g(go.Shape, 'Ellipse', { width: 20, height: 20, margin: 4, fill: 'blue'}),
					//	_g(go.TextBlock, '2', { margin: 2, stroke: 'white' }, new go.Binding('text', 'num2'))
					//)

				),

				_g(go.TextBlock,
					'Default Text',
					{ margin: 0, stroke: 'black', font: 'bold 12px sans-serif' },
					new go.Binding('text', 'name'), new go.Binding('stroke', 'light', function(msg){
						if(msg) return 'red';
						return 'gray';
					}))

			),

			_g('TreeExpanderButton',
				{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
				{ visible: true })
		);
4

That is clearly is not a Group but a regular Node.

Perhaps I am not understanding what it is that you want. Your two images are quite different from each other and I do not know what should be different and I do not understand what behavior you want before and after some event.

Are you sure that there are no samples at GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software or any examples at GoJS Introduction -- Northwoods Software that do what you want?

5

I just want group style different on collapse or expand. But node template only setting one fix style. When node collapse use template1, When node expand use template2.

6

OK, let’s assume you have two group templates. You can implement Group.subGraphExpanded event handlers to change the group’s Part.category.

I’ll assume that groups start off expanded by default, so I’ll use the empty string category name for expanded groups and “Collapsed” for collapsed groups.

  myDiagram.groupTemplate =
    $(go.Group, . . .,
      {
        subGraphExpanded: function(grp) { grp.category = "Collapsed"; }
      },
      // remember the expansion state in the model data
      new go.Binding("isSubGraphExpanded").makeTwoWay(),
      . . .
    );

  myDiagram.groupTemplateMap.add("Collapsed",
    $(go.Group, . . .,
      {
        isSubGraphExpanded: false,  // for groups using this template
        subGraphExpanded: function(grp) { grp.category = ""; }
      },
      // remember the expansion state in the model data
      new go.Binding("isSubGraphExpanded").makeTwoWay(),
      . . .
      // presumably this template does NOT have a Placeholder
    ));