<f-flow fDraggable (fLoaded)="onLoaded()"
        (fCreateConnection)="onConnectionCreated($event)"
        (fReassignConnection)="onConnectionReassigned($event)">
  <f-canvas fZoom [scale]="viewModel.scale" [position]="viewModel.position" (fCanvasChange)="onCanvasChange($event)">
    <f-connection-for-create fBehavior="fixed" fType="segment">
      <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.START" class="connection-marker"
           [height]="5" [width]="5"
           [refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
        <circle cx="350" cy="350" r="350"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>

    </f-connection-for-create>
    <f-snap-connection [fSnapThreshold]="100" fBehavior="fixed" fType="segment">
      <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.START" class="connection-marker"
           [height]="5" [width]="5"
           [refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
        <circle cx="350" cy="350" r="350"/>
      </svg>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
           [height]="7" [width]="6"
           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
      </svg>

    </f-snap-connection>
    @for (connection of viewModel.connections; track connection.id) {
      <f-connection [fConnectionId]="connection.id"
                    [fOutputId]="connection.source"
                    [fInputId]="connection.target" fBehavior="fixed" fType="segment" [fSelectionDisabled]="true">
        <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.START" class="connection-marker"
             [height]="5" [width]="5"
             [refX]="2.5" [refY]="2.5" markerUnits="strokeWidth">
          <circle cx="350" cy="350" r="350"/>
        </svg>
        <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
             [height]="7" [width]="6"
             [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
          <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
        </svg>
      </f-connection>
    }
    @for (node of viewModel.nodes; track node.id; let index = $index) {
      <div fNode [fNodePosition]="node.position"
           fDragHandle (fNodePositionChange)="onNodeChanged(node.id, $event)">{{ node.text }}
        <div fNodeInput fInputId="{{node.id}}-input-{{index}}" fInputConnectableSide="left" class="left"></div>
        <div fNodeOutput fOutputId="{{node.id}}-output-{{index}}" [isSelfConnectable]="false" fOutputConnectableSide="top" class="top"></div>
        <div fNodeInput fInputId="{{node.id}}-input-{{index+1}}" fInputConnectableSide="right" class="right"></div>
        <div fNodeOutput fOutputId="{{node.id}}-output-{{index+1}}" [isSelfConnectable]="false" fOutputConnectableSide="bottom" class="bottom"></div>
      </div>
    }
  </f-canvas>
</f-flow>
<div class="examples-toolbar">
  <button class="f-button" (click)="onUndoClick()" [disabled]="!isUndoEnabled">Undo</button>
  <button class="f-button" (click)="onRedoClick()" [disabled]="!isRedoEnabled">Redo</button>
</div>