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