@let model = viewModel();
<f-flow
  fDraggable
  (fLoaded)="editorLoaded()"
  (fCreateConnection)="createConnection($event)"
  (fReassignConnection)="reassignConnection($event)"
  (fMoveNodes)="moveNodes($event)"
  (fSelectionChange)="changeSelection($event)"
>
  <f-canvas
    fZoom
    [scale]="model?.transform?.scale"
    [position]="model?.transform?.position"
    [debounceTime]="fCanvasChangeEventDebounce"
    (fCanvasChange)="changeCanvasTransform($event)"
  >
    <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>
    </f-connection-for-create>

    <f-snap-connection [fSnapThreshold]="100" 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>
    </f-snap-connection>

    @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" [fNodeId]="node.id" fDragHandle>
      {{ 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)="state.undo()" [disabled]="!state.canUndo()">Undo</button>
  <button class="f-button" (click)="state.redo()" [disabled]="!state.canRedo()">Redo</button>
</div>