Group node and palette alignment

GoJS
1

I have the following Palette:

const taskPalette = new Palette({
    allowZoom: false,
    'animationManager.isEnabled': false,
    'draggingTool.nodropCursor': 'grabbing',
    'dragSelectingTool.isEnabled': false,
    nodeTemplate: taskPaletteNodeTemplate(),
    groupTemplate: paletteGroupTemplate(),
  });

Which uses the following groupTemplate:

export const paletteGroupTemplate = () => {
  return new Group('Auto', {
    selectable: false,
    name: 'parentGroup',
    layout: new GridLayout({
      wrappingColumn: 1,
      comparer: nameSort,
    }),
  })
    .add(
      new Shape('RoundedRectangle', {
        fill: '#F5F5F5',
        stroke: null,
      }),
    )
    .add(
      new Panel('Table')
        .add(
          new TextBlock({
            margin: new Margin(0, 0, 0, 5),
            row: 0,
            column: 0,
            name: 'groupHeader',
            font: 'normal 600 14px Open Sans',
            alignment: Spot.Center,
            text: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
            stroke: '#303030',
            textAlign: 'center',
          }),
          // .bind('text'),
        )
        .add(
          GraphObject.make(
            'Button',
            {
              margin: new Margin(0, 10, 0, 0),
              row: 0,
              column: 1,
              alignment: Spot.Right,
              opacity: 0,
              name: 'collapseButton',
              ...expandCollapseButtonStyling,
              click: (evt, graphObject) =>
                setGroupExpanded({ groupNode: graphObject.panel.panel, expand: false }),
            },
            GraphObject.make(TextBlock, {
              text: 'COLLAPSE',
              verticalAlignment: Spot.Center,
              margin: 2,
              font: 'normal 600 12px Montserrat',
              stroke: '#007DBC',
            }),
          ),
        )
        .add(
          GraphObject.make(
            'Button',
            {
              row: 2,
              columnSpan: 2,
              width: 262,
              stretch: GraphObject.Horizontal,
              alignment: Spot.Center,
              name: 'footerExpandCollapseButton',
              ...expandCollapseButtonStyling,
              click: (evt, graphObject) =>
                setGroupExpanded({
                  groupNode: graphObject.panel.panel,
                  expand: !graphObject.panel.findObject('collapseButton').opacity,
                }),
            },
            new Binding('visible', '', groupNode => groupNode.memberParts.count > 5).ofObject(),
            GraphObject.make(TextBlock, {
              margin: new Margin(0, 0, -8, 0),
              text: '\ue9d2',
              name: 'iconButton',
              stretch: GraphObject.Horizontal,
              textAlign: 'center',
              font: '24px rodeoicons, rodeoicons',
              stroke: '#007DBC',
            }),
          ),
        )
        .add(new Placeholder({ row: 1, columnSpan: 2, padding: 5 })),
    );
};

I have a group template that contains a header and a collection of nodes. All of the group nodes are housed inside a palette (background color is red to help visualize spacing). The current default layout/spacing of the palette and group template is centered and as the palette is expanded, the padding on each side grows until the width is large enough to fit two columns.

I want the group nodes to be left aligned in the palette so that as the palette expands, the group nodes stay to the left. Also I want the regular nodes and the header to both be left aligned within the group node.

I have looked at different alignment settings for Diagram and GraphObject but haven’t found any solution yet. How would I go about implementing these behaviors?

Thanks for any help you can provide!

PaletteGroupSpacing

2

Just as you have specified GridLayout.wrappingColumn in your Group.layout, you need to do that for your Palette.layout. Something like:

new Palette({
    layout: new GridLayout({ wrappingColumn: 1 }),
    . . .
  });
3

What properties could I utilize so the group nodes stay left aligned so it only grows to the right when expanded?

4

What do you mean? Are you talking about where the groups are, or where the nodes are within the groups?

5

Where the groups are, not the nodes in the groups.

6

So are you asking how to keep the “red” area fairly narrow on the left side?
If the “red” background was applied to the Div, and the Palette/Div occupies the full available width, then you probably want to set Diagram.contentAlignment to go.Spot.TopLeft.

7

Yep, that was what I was looking for and with that, it made me realize what changes were needed for the group node and which were for the palette itself. I was getting them mixed up.

Thanks for the help!