Snap Connection

Selector: f-snap-connection

It is used to help users create or reassign connections to the nearest input.

Inputs

• Similar to the f-connection component

• fSnapThreshold: number; The distance in pixels at which the connection snaps to the input. Default: 20.

Styles

• .f-connection Class specific to the connection component, providing styles for connection representation.

• .f-snap-connection Class specific to the snap connection component, providing styles for snap connection representation.

Usage

Add the f-snap-connection component to the f-canvas. Works with f-connection-for-create or f-connection components.

<f-flow |:|fDraggable|:|>
  <f-canvas>
    |:|<f-snap-connection></f-snap-connection>|:|
  </f-canvas>
</f-flow>

Examples

The following example shows how to create a connection between two nodes with snap connection.