synergycodes/ng-diagram/ng-diagram-groups

import { initializeModel, type GroupNode, type Node } from 'ng-diagram';
export const model = initializeModel({
  nodes: [
    // A group with an explicit size; without size + autoSize: false the default group is a fixed 145 × 145 px box
    { id: 'lane', isGroup: true, position: { x: 0, y: 0 }, size: { width: 500, height: 300 }, autoSize: false, data: {} },
    // Children keep global coordinates
    { id: 'a', groupId: 'lane', position: { x: 40, y: 60 }, data: { label: 'A' } },
    // Nested group
    { id: 'sub', isGroup: true, groupId: 'lane', position: { x: 220, y: 40 }, size: { width: 240, height: 200 }, autoSize: false, data: {} },
    { id: 'b', groupId: 'sub', position: { x: 260, y: 100 }, data: { label: 'B' } },
  ],
});
// Typed arrays: GroupNode requires `highlighted`
export const group: GroupNode = {
  id: 'g2', isGroup: true, highlighted: false, position: { x: 600, y: 0 }, size: { width: 300, height: 200 }, autoSize: false, data: {},
};
export const nodes: Node[] = [group, { id: 'c', groupId: 'g2', position: { x: 640, y: 60 }, data: {} }];
// Narrow the Node union with `in` (`node.isGroup` alone does not compile)
export const isGroupNode = (node: Node): node is GroupNode => 'isGroup' in node && node.isGroup;

import { Component, input } from '@angular/core';
import {
  NgDiagramGroupHighlightedDirective, NgDiagramNodeResizeAdornmentComponent, NgDiagramNodeSelectedDirective,
  type GroupNode, type GroupingConfig, type NgDiagramConfig, type NgDiagramGroupNodeTemplate, type ResizeConfig,
} from 'ng-diagram';
@Component({
  selector: 'app-lane-group',
  imports: [NgDiagramNodeResizeAdornmentComponent, NgDiagramGroupHighlightedDirective, NgDiagramNodeSelectedDirective],
  styles: `
    :host { display: block; width: 100%; height: 100%; }
    .lane { width: 100%; height: 100%; border: 1px solid #888; border-radius: 8px; }
  `,
  template: `
    <ng-diagram-node-resize-adornment>
      <div class="lane" ngDiagramGroupHighlighted ngDiagramNodeSelected [node]="node()">
        <div class="header">{{ node().data.title }}</div>
      </div>
    </ng-diagram-node-resize-adornment>
  `,
})
export class LaneGroupComponent implements NgDiagramGroupNodeTemplate<{ title: string }> {
  node = input.required<GroupNode<{ title: string }>>();
}
const grouping: Partial<GroupingConfig> = {
  // called for drag-and-drop membership, the drop highlight and addToGroup
  canGroup: (node, group) => group.type === 'lane' && node.type !== 'lane',
};
const resize: Partial<ResizeConfig> = {
  allowResizeBelowChildrenBounds: false, // default true: a group can be resized smaller than its children
  getMinNodeSize: (node) => ('isGroup' in node && node.isGroup ? { width: 200, height: 120 } : { width: 80, height: 40 }),
};
export const config = { grouping, resize } satisfies NgDiagramConfig;

import { Component, inject } from '@angular/core';
import {
  NgDiagramGroupsService, NgDiagramModelService, NgDiagramNodeService, NgDiagramSelectionService,
  type GroupMembershipChangedEvent, type PaletteItemDroppedEvent,
} from 'ng-diagram';
@Component({ selector: 'app-group-toolbar', template: '' })
export class GroupToolbarComponent {
  private readonly groupsService = inject(NgDiagramGroupsService);
  private readonly modelService = inject(NgDiagramModelService);
  private readonly nodeService = inject(NgDiagramNodeService);
  private readonly selectionService = inject(NgDiagramSelectionService);
  // Positions stay as they are (global coordinates); canGroup and cycle checks apply.
  async addSelectionTo(groupId: string): Promise<void> {
    const ids = this.selectionService.selection().nodes.map((n) => n.id).filter((id) => id !== groupId);
    await this.groupsService.addToGroup(groupId, ids);
  }
  // deleteNodes deletes the whole subtree (since 1.4.0), so detach the children first.
  // Use two awaited calls, not one transaction: commands in a transaction see the state before it.
  async ungroup(groupId: string): Promise<void> {
    const childIds = this.modelService.getChildren(groupId).map((n) => n.id);
    await this.groupsService.removeFromGroup(groupId, childIds);
    await this.modelService.deleteNodes([groupId]);
  }
  // moveNodesBy moves only the nodes you pass: include the descendants.
  async moveGroup(groupId: string, dx: number, dy: number): Promise<void> {
    const group = this.modelService.getNodeById(groupId);
    if (!group) return;
    await this.nodeService.moveNodesBy([group, ...this.modelService.getChildrenNested(groupId)], { x: dx, y: dy });
  }
  // Groups never grow on their own. Fit around the visible, measured children only:
  // with none, computePartsBounds returns a 0×0 rect at (0, 0).
  async fitToChildren(groupId: string, padding = 24): Promise<void> {
    const children = this.modelService.getChildrenNested(groupId).filter((n) => !n.computedHidden && n.measuredBounds);
    if (children.length === 0) return;
    const bounds = this.modelService.computePartsBounds(children, []);
    await this.modelService.updateNode(groupId, {
      position: { x: bounds.x - padding, y: bounds.y - padding },
      size: { width: bounds.width + 2 * padding, height: bounds.height + 2 * padding },
      autoSize: false,
    });
  }
  // <ng-diagram (paletteItemDropped)="onPaletteDrop($event)" ...>: a palette drop does not join a group by itself
  async onPaletteDrop({ node, dropPosition }: PaletteItemDroppedEvent): Promise<void> {
    const group = this.modelService
      .getNodesInRange(dropPosition, 1)
      .filter((n) => n.id !== node.id && 'isGroup' in n && n.isGroup)
      .sort((a, b) => (b.computedZIndex ?? 0) - (a.computedZIndex ?? 0))[0]; // innermost group first
    if (group) {
      await this.groupsService.addToGroup(group.id, [node.id]);
    }
  }
  // <ng-diagram (groupMembershipChanged)="onMembershipChanged($event)" ...>
  onMembershipChanged({ grouped, ungrouped }: GroupMembershipChangedEvent): void {
    for (const { targetGroup, nodes } of grouped) {
      console.log(`${nodes.length} node(s) added to ${targetGroup.id}`);
    }
    console.log(`${ungrouped.length} node(s) left their group`);
  }
}