Resize Handle

Selector: [fResizeHandle]
Class: FResizeHandleDirective

FResizeHandleDirective marks an element as a resize handle for a fNode or fGroup.
It works only when fDraggable is enabled on the parent f-flow.

Resize handles let users change node/group size directly on the canvas - similar to design tools.

Quick start

Add a resize handle to a node

Attach fResizeHandle to an element inside a node (or group) and specify the handle type.

Tip: In real UIs you usually render 8 handles (corners + sides) for the best UX.

How it works

• On pointer down, the drag pipeline detects fResizeHandle on the hit element.
• fResizeHandleType defines the resize direction (left/right/top/bottom and corners).
• During resize, the library updates the element internally for smooth interaction.
• Your app typically persists the final result using:
  • fNodeSizeChange from fNode
  • fGroupSizeChange from fGroup

This keeps your data model as the source of truth while interactions stay responsive.

The optional Managed Flow State plugin synchronizes the final fNodeSizeChange or fGroupSizeChange into its records, including user resize. That geometry amendment does not create a standalone undo step; keep this final-output persistence step only when your application owns the records itself or needs additional domain-side handling.

API

Inputs

• fResizeHandleType: EFResizeHandleType; Required. Defines which side/corner the handle represents.

Outputs

• No outputs.

Methods

• No public template API methods.

Types

EFResizeHandleType

Styling

The directive adds the base class .f-resize-handle and a type-specific class you can target:

• .f-resize-handle
• .f-resize-handle-left
• .f-resize-handle-left-top
• .f-resize-handle-top
• .f-resize-handle-right-top
• .f-resize-handle-right
• .f-resize-handle-right-bottom
• .f-resize-handle-bottom
• .f-resize-handle-left-bottom

Minimal example styles:

Notes and pitfalls

• Resize works only with fDraggable enabled on f-flow.
• If handles are too small, users will miss them. Make the hit area generous.
• If your nodes can become too small visually, enforce minimum sizes in your app logic (or via your node template/layout constraints).
• When using content-based sizing elsewhere, remember that manual resizing is an explicit user override - treat it as a persisted property.

Example