<f-flow fDraggable (fCreateConnection)="addConnection($event)" (fLoaded)="onLoaded()">
  <f-canvas>
    <f-connection-for-create [fBehavior]="'floating'"></f-connection-for-create>
    @for (connection of connections; track connection.inputId)  {
      <f-connection [fReassignDisabled]="true"
                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
      </f-connection>
    }
    <div class="node-with-outlet" fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }">
      <div class="node-line">
        <div>Output 1</div><div fNodeOutput fOutputConnectableSide="right"></div>
      </div>
      <div class="node-line">
        <div>Output 2</div><div fNodeOutput fOutputConnectableSide="right"></div>
      </div>
      <div class="node-line">
        <div>Output 3</div><div fNodeOutput fOutputConnectableSide="right"></div>
      </div>

      <div class="node-line">
        <div>Outlet. Drag me</div>
        <div fNodeOutlet [isConnectionFromOutlet]="true"></div>
      </div>
    </div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputConnectableSide="left">to Me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 100 }" fNodeInput fInputConnectableSide="left">to Me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 200 }" fNodeInput fInputConnectableSide="left">to Me</div>
  </f-canvas>
</f-flow>