Magnetic Lines

Description

Magnetic Lines add snap-to-align guides while you drag nodes in Foblex Flow for Angular.
When a dragged node gets close to another node, the plugin shows alignment lines and can snap the node to:

Left / center / right (X axis)
Top / center / bottom (Y axis)

This makes it easy to keep diagrams clean and consistent without manual pixel-perfect positioning.

Example

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/magnetic-lines/magnetic-lines.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/magnetic-lines/magnetic-lines.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/magnetic-lines/magnetic-lines.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss

How it works

Add <f-magnetic-lines> inside <f-flow>.
Set a threshold in pixels for when guide rendering and snapping should begin.
Drag nodes until matching edges or centers enter the threshold zone.

Tip: Start with threshold="30–50" for a more Figma-like feel.

Configuration

threshold

threshold controls when magnetic lines appear and when snapping is applied.

Smaller value → fewer snaps, more manual control
Larger value → stronger snapping, easier alignment

Notes

Magnetic Lines are purely UX helpers: they don’t change your data model - they only help users position nodes while dragging.
You can style the guide lines via CSS (see the example .f-magnetic-lines .f-line rule).