Skip to main content

Group Node (INodeGroup)

Group Node (INodeGroup)​

INodeGroup is a hierarchy node:

export interface INodeGroup extends INode {}

It does not add shape-specific API.
Its primary role is to organize child nodes and apply shared transforms (move/rotate/scale) to the whole set.

:::note Current Renderer Status NodeGroup is currently a structural node. It has no standalone shape renderer of its own.
In practice, you work through grouped child nodes and their inherited transforms. :::

Live Preview​

The preview demonstrates two transformed groups with mixed child nodes (Rect + Ellipse):

Create Group Composition in Code​

import {
  NodeGroup,
  NodeRect,
  NodeEllipse,
  StrokeAlign,
} from '@flowscape-ui/core-sdk';

const group = new NodeGroup(100);
group.setName('PrimaryCluster');
group.setPosition(-210, -30);
group.setRotation(0.18);

const rect = new NodeRect(101);
rect.setName('GroupRectA');
rect.setSize(210, 130);
rect.setPosition(-120, -80);
rect.setFill('#3b82f6');
rect.setStrokeFill('#dbeafe');
rect.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
rect.setStrokeAlign(StrokeAlign.Inside);
rect.setCornerRadius({ tl: 18, tr: 18, br: 18, bl: 18 });
group.addChild(rect);

const ellipse = new NodeEllipse(102);
ellipse.setName('GroupEllipseA');
ellipse.setSize(150, 150);
ellipse.setPosition(120, 10);
ellipse.setFill('#f97316');
ellipse.setStrokeFill('#ffedd5');
ellipse.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
ellipse.setStrokeAlign(StrokeAlign.Inside);
ellipse.setInnerRatio(0.38);
ellipse.setStartAngle(0);
ellipse.setEndAngle(360);
group.addChild(ellipse);

// Group is also added to world, children are renderable nodes.
layerWorld.addNode(group);
scene.invalidate();

Practical Notes​

  • Use NodeGroup for hierarchy and shared transform ownership.
  • Use group.addChild(child) to bind child nodes into the group.
  • Add the group itself to layerWorld, then add renderable child nodes too.
  • Use getHierarchyWorldAABB() on group-related trees for selection and bounds logic.

Next​