Selector: [fMarker]
The FMarkerDirective is a directive that represents a start or end marker for a connection.
type: EFMarkerType; The type of the marker, either start or end. Accepts a value from EFMarkerType enum.
height: number; The height of the marker.
width: number; The width of the marker.
refX: number; The x-coordinate of the marker relative to the connection.
refY: number; The y-coordinate of the marker relative to the connection.
Example of how to create a custom connection marker. The marker is created using an SVG element and fMarker directive. FMarkerDirective requires the following attributes: type, height, width, refX, refY. [type] attribute accepted values are from the EFMarkerType enum.
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/connection-markers/connection-markers.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/connection-markers/connection-markers.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/connection-markers/connection-markers.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/_flow-common.scss