This page explains the fConnectionCenter
directive in Foblex Flow for Angular. The fConnectionCenter
directive allows you to insert any custom content inside a block, which will be positioned relative to the center of the connection line. This is useful for adding labels, icons, or other elements that need to be dynamically displayed at the center of a connection.
The directive provides flexible styling and positioning, allowing you to fully customize the appearance and behavior of the centered content.
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss