<f-flow fDraggable (fLoaded)="onLoaded()">
  @if (background === 'circle') {
    <f-background>
      <f-circle-pattern></f-circle-pattern>
    </f-background>
  } @else if (background === 'rect') {
    <f-background>
      <f-rect-pattern></f-rect-pattern>
    </f-background>
  }
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
    <div fNode [fNodePosition]="{ x: 0, y: 0 }" fDragHandle>
      <div fNodeOutput fOutputId="output1" class="right"></div>
      I'm a node
    </div>
    <div fNode [fNodePosition]="{ x: 200, y: 0 }"  fDragHandle>
      <div fNodeInput fInputId="input1" class="left"></div>
      I'm a node
    </div>
  </f-canvas>
</f-flow>
<div class="examples-toolbar">
  <mat-form-field appearance="fill" class="f-form-field">
    <mat-label>Select Background</mat-label>
    <mat-select panelClass="f-select-panel" [(value)]="background">
      @for (option of backgroundOptions; track option) {
        <mat-option [value]="option">{{ option }}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</div>