<f-flow fDraggable
        (fLoaded)="onLoaded()"
        fEmitOnNodeIntersect
        (fNodeIntersectedWithConnections)="onNodeIntersectedWithConnection($event)">
  <f-canvas>
    @for (connection of connections; track connection.inputId)  {
      <f-connection [fReassignDisabled]="false"
                    fBehavior="floating"
                    [fConnectionId]="connection.id"
                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
      </f-connection>
    }

    @for (node of nodes; track node.id) {
      <div fNode [fNodeId]="node.id" fDragHandle [fNodePosition]="node.position">
        <div fNodeInput [fInputId]="node.id" class="left"></div>
        <div fNodeOutput [fOutputId]="node.id" class="right"></div>
        @if (node.isConnected) {
         I'm connected node
        } @else {
           Drag me to connection
        }
      </div>
    }
  </f-canvas>
</f-flow>