<f-flow fDraggable (fLoaded)="onLoaded()"> <f-canvas> <f-connection [fReassignDisabled]="true" fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment" class="gradient-color" fStartColor="var(--connection-gradient-1)" fEndColor="var(--connection-gradient-2)"> </f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="bottom"> I'm a node </div> <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="top"> I'm a node </div> <f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating"> </f-connection> <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right"> I'm a node </div> <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left"> I'm a node </div> </f-canvas> </f-flow>