<f-flow fDraggable
        (fLoaded)="onLoaded()"
        (fDragStarted)="onDragStarted($event)"
        (fDragEnded)="onDragEnded()"
        (fCreateConnection)="onConnectionCreated($event)"
        (fReassignConnection)="onConnectionReassigned($event)">
  <f-canvas fZoom>
    <f-connection-for-create fBehavior="fixed" fType="segment">
      <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>
      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_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>
    @for (connection of connections; track connection.id) {
      <f-connection [fConnectionId]="connection.id"
                    [fOutputId]="connection.source"
                    [fInputId]="connection.target" fBehavior="fixed" fType="segment">
        <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>
        <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_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 nodes; track node.id; let index = $index) {
      <div fNode [fNodePosition]="node.position"
           fDragHandle fConnectOnNode="false">{{ 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="overlay">
  <div>Event list:</div>
  @for (item of events(); track item) {
    <div>{{ item }}</div>
  }
</div>