<f-flow fDraggable (fLoaded)="onLoaded()">
  <f-canvas>
    @for (connection of connections; track connection.id) {
      <f-connection [fOffset]="8" [fOutputId]="connection.from" [fInputId]="connection.to" fType="segment"
                    fBehavior="fixed"></f-connection>
    }

    @for (node of nodes; track node.id) {
      <div fNode [fNodePosition]="node.position"
           fDragHandle
           fNodeInput [fInputId]="node.connectorId"
           [fInputConnectableSide]="configuration.inputSide">
        {{ node.connectorId }}
        <div fNodeOutput [fOutputId]="node.connectorId"
             [fOutputConnectableSide]="configuration.outputSide"
             [ngClass]="configuration.outputSide"></div>
      </div>
    }
  </f-canvas>
</f-flow>
<div class="examples-toolbar">
  <button class="f-button" (click)="horizontal()">Horizontal</button>
  <button class="f-button" (click)="vertical()">Vertical</button>
  <f-checkbox [checked]="isAutoLayout" (change)="onAutoLayoutChange($event)">Auto Layout
  </f-checkbox>
</div>