Group

Selector: [fGroup]
Class: FGroupDirective

FGroupDirective turns an element into a group container inside a Foblex Flow diagram.
A group behaves like a node (position, size, rotation, selection, drag), but it’s intended to contain other nodes/groups and act as a bounded area for organizing the diagram.

Groups must be placed inside f-canvas (which itself must be inside f-flow).

Quick start

A group with a fixed position and size

Make it draggable

To drag groups, enable fDraggable on the flow and provide a drag handle on the group (or inside it):

Put nodes inside the group

Groups are “containers” via parent ids.
To attach a node to a group, set the node’s fNodeParentId to the group’s fGroupId:

How it works

• A group registers in the same internal store as nodes and participates in rendering and hit-testing.
• During interactions (drag/resize/rotate), the library updates the group internally for smooth UX.
• Children are associated to the group via fNodeParentId / fGroupParentId, which enables container behaviors (bounds restrictions, auto-size rules, auto-expand rules).
• Your app typically persists changes on “final” outputs (for example fGroupPositionChange after a drag ends), keeping your data model as the source of truth.

With the optional Managed Flow State plugin, completed move gestures update group records automatically. User resize and rotation are not captured by managed state v1, so applications using those interactions still persist their final outputs themselves.

API

Inputs

• fGroupId: string; Group identifier. Default: f-group-${uniqueId++}.
• fGroupParentId: string | null; Parent group or node ID.
• fGroupPosition: IPoint; Model. Position of the group.
• fGroupSize: ISize; Size of the group.
• fGroupRotate: number; Model. Rotation angle in degrees.
• fConnectOnNode: boolean; Default: true. Allows dropping connections on the group.
• fMinimapClass: string | string[]; CSS class for the minimap representation.
• fGroupDraggingDisabled: boolean; Default: false. Disables dragging.
• fGroupSelectionDisabled: boolean; Default: false. Disables selection.
• fIncludePadding: boolean; Default: true. Include padding in bounds calculation.
• fAutoExpandOnChildHit: boolean; Default: false. Expand group when child hits bounds.
• fAutoSizeToFitChildren: boolean; Default: false. Auto-resize to fit children.

Outputs

• fGroupPositionChange: OutputEmitterRef<IPoint>; Emits when position changes.
• fGroupRotateChange: OutputEmitterRef<number>; Emits when rotation changes.
• fGroupSizeChange: OutputEmitterRef<IRect>; Emits when size changes.

Methods

• refresh(): void; Force refresh of the group.

Types

IPoint

ISize

IRect

Styling

• .f-component Base class for flow primitives.
• .f-group Group host class.
• .f-group-dragging-disabled Applied when fGroupDraggingDisabled = true.
• .f-group-selection-disabled Applied when fGroupSelectionDisabled = true.
• .f-selected Applied when the group is selected.

Notes and pitfalls

• Groups don’t “contain” children by DOM nesting — hierarchy is controlled by fNodeParentId / fGroupParentId.
• If you want strict bounded movement for children, ensure the parent id is set correctly and keep fIncludePadding in mind.
• Auto-size/auto-expand features can change group bounds during child movement — handle fGroupSizeChange if you persist layout.
• For consistent UX, style selected groups clearly (for example a stronger border or background).

Example