<f-flow fDraggable (fLoaded)="onLoaded()" (fReassignConnection)="reassignConnection($event)">
  <f-canvas>

    @for (connection of connections; track connection.inputId) {
      <f-connection fBehavior="floating" [fReassignDisabled]="false"
                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
      </f-connection>
    }

    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="1">Output</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 24 }" fNodeInput fInputId="input-1">Input</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 124 }" fNodeInput fInputId="input-2">Input</div>
  </f-canvas>
</f-flow>