<f-flow fDraggable>
  <f-canvas>
    <f-connection fText="fixed" [fReassignDisabled]="true" fType="straight" [fBehavior]="eConnectionBehaviour.FIXED" fOutputId="output1" fInputId="input1"></f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 144, y: 140 }" fNodeInput fInputId="input1" fInputConnectableSide="left">drag me</div>

    <f-connection fText="fixed_center" [fReassignDisabled]="true" fType="straight" [fBehavior]="eConnectionBehaviour.FIXED_CENTER" fOutputId="output2" fInputId="input2"></f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 320, y: 24 }" fNodeOutput fOutputId="output2" fOutputConnectableSide="right">drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 440, y: 140 }" fNodeInput fInputId="input2" fInputConnectableSide="left">drag me</div>

    <f-connection fText="floating" [fReassignDisabled]="true" fType="straight" [fBehavior]="eConnectionBehaviour.FLOATING" fOutputId="output3" fInputId="input3"></f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 596, y: 24 }" fNodeOutput fOutputId="output3" fOutputConnectableSide="right">drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 716, y: 140 }" fNodeInput fInputId="input3" fInputConnectableSide="left">drag me</div>
  </f-canvas>
</f-flow>