Foblex Flow

https://flow.foblex.com/docs
Admin
Foblex Flow is an Angular-native library for building interactive node-based user interfaces,...
Tokens:113,735
Snippets:776
Trust Score:5.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example HTML

Source: https://flow.foblex.com/docs/f-connection-for-create-component

HTML template for the drag-to-connect example, showing the f-flow with f-connection-for-create and nodes.

```html
<f-flow fDraggable (fLoaded)="loaded()" (fCreateConnection)="createConnection($event)">
  <f-canvas>
    <f-connection-for-create/>

    @for (connection of connections(); track $index) {
      <f-connection
        [fReassignDisabled]="true"
        [fOutputId]="connection.source"
        [fInputId]="connection.target"
      />
    }

    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 24, y: 24 }"
      fNodeOutput
      fOutputConnectableSide="right"
    >
      drag me
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 244, y: 24 }"
      fNodeInput
      fInputConnectableSide="left"
    >
      to me
    </div>
  </f-canvas>
</f-flow>
```

--------------------------------

### Example SCSS: Background example styles

Source: https://flow.foblex.com/docs/f-background-component

SCSS styles for the background example. It includes theme tokens, connection, background, node, and connector styles from the Foblex Flow theme.

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
  @include flow-theme.background($scoped: false);
}

@include flow-theme.node($selectorless: false);
@include flow-theme.connector($scoped: false);
```

--------------------------------

### Install @foblex/flow with ng add

Source: https://flow.foblex.com/docs/default-theme-and-styling

Run this command to install the library and automatically add the default theme styles to your app styles if the entry is missing.

```bash
ng add @foblex/flow

```

--------------------------------

### fNodeOutlet with fNodeOutput example

Source: https://flow.foblex.com/docs/f-node-outlet-directive

Shows a node with a single outlet and two real outputs. The outlet provides the drag start point, while the final connection's fOutputId resolves to one of the outputs (out-a or out-b).

```html
<f-flow fDraggable>
  <f-canvas>
    <div fNode [fNodePosition]="{ x: 120, y: 80 }">
      <!-- One shared start point -->
      <div fNodeOutlet>Connect</div>

      <!-- Real outputs (final fOutputId always points to one of these) -->
      <div fNodeOutput fOutputId="out-a">A</div>
      <div fNodeOutput fOutputId="out-b">B</div>
    </div>
  </f-canvas>
</f-flow>
```

--------------------------------

### Foblex Flow example with fDraggable, fCanvas, and fZoom

Source: https://flow.foblex.com/docs/f-node-directive

HTML template for the flow example. Uses f-flow with fDraggable and a (fLoaded) event, plus an f-canvas with fZoom. The example is shown in a tabbed panel with example.html, example.ts, and example.scss files.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  <f-canvas fZoom (fLoaded)="loaded()">

```

--------------------------------

### Example TypeScript

Source: https://flow.foblex.com/docs/f-connection-for-create-component

TypeScript component for the drag-to-connect example, handling connection creation and canvas loading.

```ts
import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';

@Component({
  selector: 'drag-to-connect',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule],
})
export class Example {
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected readonly connections = signal<{ source: string; target: string }[]>([]);

  protected createConnection(event: FCreateConnectionEvent): void {
    const target = event.fInputId;
    if (!target) {
      return;
    }
    this.connections.update((x) => [...x, { source: event.fOutputId, target }]);
  }

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }
}
```

--------------------------------

### Reassign example HTML template

Source: https://flow.foblex.com/docs/f-connection-component

Defines the flow canvas with draggable nodes and connections, and a toolbar with a checkbox to toggle reassignable start. Uses fReassignConnection event to handle reassignment.

```html
<f-flow fDraggable (fLoaded)="loaded()" (fReassignConnection)="reassignConnection($event)">
  <f-canvas>
    @for (connection of connections(); track connection.id) {
    <f-connection
      fBehavior="floating"
      [fReassignableStart]="reassignableStart()"
      [fConnectionId]="connection.id"
      [fOutputId]="connection.source"
      [fInputId]="connection.target"
    />
    }

    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1">Output</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="2">Output</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 250, y: 0 }" fNodeInput fInputId="3">Input</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 250, y: 150 }" fNodeInput fInputId="4">Input</div>
  </f-canvas>
</f-flow>

<f-toolbar>
  <f-checkbox (change)="reassignStartChange()" [checked]="reassignableStart()">
    Enable Reassign Start
  </f-checkbox>
</f-toolbar>

```

--------------------------------

### Auto-pan example styles (example.scss)

Source: https://flow.foblex.com/docs/f-auto-pan-component

SCSS styles for the auto-pan example. It imports the flow theme and includes theme tokens, connection styles, node styles, connector styles, and selection area styles.

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
  @include flow-theme.connection-drag-handles-visible($scoped: false);
}

@include flow-theme.node($selectorless: false);
@include flow-theme.connector($scoped: false);
@include flow-theme.selection-area();

```

--------------------------------

### Connectable side example components

Source: https://flow.foblex.com/docs/f-node-input-directive

A complete example showing the HTML template, TypeScript logic, and SCSS styling for a flow diagram where node connection sides can be switched dynamically.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  <f-canvas>
    <f-connection fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment" />
    <f-connection fOutputId="1" fInputId="3" fBehavior="fixed" fType="segment" />
    <f-connection fOutputId="1" fInputId="4" fBehavior="fixed" fType="segment" />

    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 250, y: 0 }"
      fNodeOutput
      fOutputId="1"
      [fOutputConnectableSide]="node1Side()"
    >
      <b>{{ node1Side() }}</b> connectable side
    </div>

    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 150 }"
      fNodeInput
      fInputId="2"
      [fInputConnectableSide]="node2Side()"
    >
      <b>{{ node2Side() }}</b> connectable side
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 250, y: 300 }"
      fNodeInput
      fInputId="3"
      [fInputConnectableSide]="node3Side()"
    >
      <b>{{ node3Side() }}</b> connectable side
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 500, y: 150 }"
      fNodeInput
      fInputId="4"
      [fInputConnectableSide]="node4Side()"
    >
      <b>{{ node4Side() }}</b> connectable side
    </div>
  </f-canvas>
</f-flow>
<f-toolbar>
  <button class="f-button primary" (click)="switchSides()" [disabled]="calculateSides()">
    Switch Sides
  </button>
</f-toolbar>
```

```typescript
import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
import { EFConnectableSide, FCanvasComponent, FFlowModule } from '@foblex/flow';
import { FToolbarComponent } from '@foblex/m-render';

@Component({
  selector: 'connectable-side',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule, FToolbarComponent],
})
export class Example {
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected readonly calculateSides = signal(false);

  protected readonly node1Side = signal(EFConnectableSide.CALCULATE);
  protected readonly node2Side = signal(EFConnectableSide.TOP);
  protected readonly node3Side = signal(EFConnectableSide.RIGHT);
  protected readonly node4Side = signal(EFConnectableSide.BOTTOM);

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }

  protected switchSides(): void {
    this.node1Side.update((x) => this._updateSide(x));
    this.node2Side.update((x) => this._updateSide(x));
    this.node3Side.update((x) => this._updateSide(x));
    this.node4Side.update((x) => this._updateSide(x));
  }

  private _updateSide(currentSide: EFConnectableSide): EFConnectableSide {
    const sides = Object.values(EFConnectableSide);
    const index = sides.indexOf(currentSide);

    return sides[(index + 1) % sides.length];
  }
}
```

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
}

.f-node {
  @include flow-theme.node($selectorless: true);
  width: 200px;
}
```

--------------------------------

### Connection types example SCSS

Source: https://flow.foblex.com/docs/f-connection-component

SCSS styles for the connection types example. It imports the Foblex flow theme, includes theme tokens and connection styles, and applies node styles.

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
}

@include flow-theme.node($selectorless: false);
```

--------------------------------

### Example HTML: f-background with pattern switch

Source: https://flow.foblex.com/docs/f-background-component

HTML template for the background example. It uses an @switch on the background signal to select between circle, rect, and custom patterns, and includes a toolbar with a select to change the background.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  @switch (background()) { @case ('circle') {
  <f-background>
    <f-circle-pattern />
  </f-background>
  } @case ('rect') {
  <f-background>
    <f-rect-pattern />
  </f-background>
  } @case ('custom') {
  <f-background>
    <custom-background-example />
  </f-background>
  } }
  <f-canvas fZoom>
    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating" />
    <div fNode [fNodePosition]="{ x: 0, y: 0 }" fDragHandle>
      <div fNodeOutput fOutputId="output1" class="right"></div>
      I'm a node
    </div>
    <div fNode [fNodePosition]="{ x: 200, y: 0 }" fDragHandle>
      <div fNodeInput fInputId="input1" class="left"></div>
      I'm a node
    </div>
  </f-canvas>
</f-flow>
<f-toolbar>
  <f-select [(value)]="background" [options]="backgroundOptions" label="Select Background" />
</f-toolbar>
```

--------------------------------

### Foblex Flow connection markers example (HTML)

Source: https://flow.foblex.com/docs/f-connection-marker-directive

Complete example showing three connection configurations: built-in circle/arrow markers, custom SVG markers with fMarker, and separate normal/selected markers. Each connection uses fReassignDisabled, floating behavior, and nodes with fNodeOutput/fNodeInput.

```html
<f-flow fDraggable (fFullRendered)="loaded()">
  <f-canvas>
    <!-- Built-in markers are the quickest option when the default circle and arrow are enough. -->
    <f-connection [fReassignDisabled]="true" fOutputId="1" fInputId="2" fBehavior="floating">
      <f-connection-marker-circle [type]="eMarkerType.START_ALL_STATES" />
      <f-connection-marker-arrow [type]="eMarkerType.END_ALL_STATES" />
    </f-connection>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 0 }"
      fNodeOutput
      fOutputId="1"
      fOutputConnectableSide="right"
    >
      I'm a node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 300, y: 0 }"
      fNodeInput
      fInputId="2"
      fInputConnectableSide="left"
    >
      I'm a node
    </div>

    <!-- Use svg[fMarker] when marker geometry, viewBox, and dimensions must be fully custom. -->
    <f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating">
      <svg
        viewBox="0 0 9 9"
        fMarker
        [type]="eMarkerType.START_ALL_STATES"
        class="connection-marker"
        [height]="9"
        [width]="9"
        [refX]="1.5"
        [refY]="4.2"
        markerUnits="strokeWidth"
      >
        <rect y="4.24219" width="6" height="6" transform="rotate(-45 0 4.24219)" />
      </svg>
      <svg
        viewBox="0 0 6 7"
        fMarker
        [type]="eMarkerType.END_ALL_STATES"
        class="connection-marker"
        [height]="7"
        [width]="6"
        [refX]="5.5"
        [refY]="3.5"
        markerUnits="strokeWidth"
        orient="auto"
      >
        <path d="M5.99961 7L0 3.5L5.99961 0V7Z" />
      </svg>
    </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>

    <!-- Define separate normal and selected markers only when selected connections need their own visuals. -->
    <f-connection [fReassignDisabled]="true" fOutputId="5" fInputId="6" fBehavior="floating">
      <svg
        viewBox="0 0 6 7"
        fMarker
        [type]="eMarkerType.START"
        class="connection-marker"
        [height]="7"
        [width]="6"
        [refX]="0.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_START"
        class="connection-marker"
        [height]="7"
        [width]="6"
        [refX]="0.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.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>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 300 }"
      fNodeOutput
      fOutputId="5"
      fOutputConnectableSide="right"
    >
      I'm a node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 300, y: 300 }"
      fNodeInput
      fInputId="6"
      fInputConnectableSide="left"
    >
      I'm a node
    </div>
  </f-canvas>
</f-flow>
```

--------------------------------

### Auto-pan example template (example.html)

Source: https://flow.foblex.com/docs/f-auto-pan-component

Template for the auto-pan example. It includes an f-flow with fDraggable, an f-auto-pan component bound to edgeThreshold, speed, and acceleration signals, three draggable nodes, and a toolbar with checkboxes and inputs to control the auto-pan settings.

```html
<f-flow
  fDraggable
  (fCreateConnection)="createConnection($event)"
  (fReassignConnection)="reassignConnection($event)"
  (fLoaded)="loaded()"
>
  @if (enabled()) {
  <f-auto-pan
    [fEdgeThreshold]="edgeThreshold()"
    [fSpeed]="speed()"
    [fAcceleration]="acceleration()"
  />
  }
  <f-selection-area />
  <f-canvas fZoom>
    <f-connection-for-create />

    @for (connection of connections(); track $index) {
    <f-connection
      fInputSide="calculate"
      fOutputSide="calculate"
      [fOutputId]="connection.source"
      [fInputId]="connection.target"
    />
    }

    <div
      fNode
      fDragHandle
      fNodeInput
      fInputId="input1"
      [fNodePosition]="{ x: 24, y: 120 }"
      fNodeOutput
      fOutputId="output1"
    >
      Node 1
    </div>

    <div
      fNode
      fDragHandle
      fNodeInput
      fInputId="input2"
      [fNodePosition]="{ x: 24, y: 320 }"
      fNodeOutput
      fOutputId="output2"
    >
      Node 2
    </div>

    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 360, y: 320 }"
      fNodeInput
      fInputId="input3"
      fNodeOutput
      fOutputId="output3"
    >
      Node 3
    </div>
  </f-canvas>
</f-flow>

<f-toolbar>
  <f-checkbox [checked]="enabled()" (change)="onEnabledChange($event)">Enable Auto Pan</f-checkbox>
  <f-checkbox [checked]="acceleration()" (change)="onAccelerationChange($event)">
    Acceleration
  </f-checkbox>

  <f-input label="Edge Threshold" [(value)]="edgeThreshold" />
  <f-input label="Speed" [(value)]="speed" />
</f-toolbar>

```

--------------------------------

### Auto-pan example component (example.ts)

Source: https://flow.foblex.com/docs/f-auto-pan-component

Component logic for the auto-pan example. It manages signals for enabled, edgeThreshold, speed, and acceleration, handles connection creation and reassignment, and updates the canvas on load.

```ts
import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
import {
  FCanvasComponent,
  FCreateConnectionEvent,
  FFlowModule,
  FReassignConnectionEvent,
} from '@foblex/flow';
import { FCheckboxComponent, FInputComponent, FToolbarComponent } from '@foblex/m-render';

interface SourceTarget {
  source?: string;
  target?: string;
}

@Component({
  selector: 'auto-pan',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule, FCheckboxComponent, FToolbarComponent, FInputComponent],
})
export class Example {
  private readonly _canvas = viewChild(FCanvasComponent);

  protected readonly enabled = signal(true);
  protected readonly edgeThreshold = signal(20);
  protected readonly speed = signal(8);
  protected readonly acceleration = signal(true);

  protected readonly connections = signal<SourceTarget[]>([
    { source: 'output1', target: 'input2' },
  ]);

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }

  protected createConnection({ sourceId, targetId }: FCreateConnectionEvent): void {
    if (!targetId) {
      return;
    }

    const exists = this._hasConnection(sourceId, targetId);
    if (exists) {
      return;
    }

    this.connections.update((x) => [
      ...x,
      {
        source: sourceId,
        target: targetId,
      },
    ]);
  }

  private _hasConnection(source: string, target: string): boolean {
    return this.connections().some((connection) => {
      return connection.source === source && connection.target === target;
    });
  }

  protected reassignConnection(event: FReassignConnectionEvent): void {
    if (!event.nextTargetId && !event.nextSourceId) {
      return;
    }

    this.connections.update((connections) => {
      const connection = connections.find((item) => {
        return item.source === event.previousSourceId && item.target === event.previousTargetId;
      });
      if (!connection) {
        throw new Error('Connection not found');
      }

      connection.source = event.nextSourceId || connection.source;
      connection.target = event.nextTargetId || connection.target;

      return [...connections];
    });
  }

  protected onEnabledChange(checked: boolean): void {
    this.enabled.set(checked);
  }

  protected onAccelerationChange(checked: boolean): void {
    this.acceleration.set(checked);
  }
}

```

--------------------------------

### Selection area example styles (example.scss)

Source: https://flow.foblex.com/docs/f-selection-area-component

SCSS for the selection-area example. It includes theme tokens, connection, node, connector, and selection-area styles. The selection-area mixin is required to make the selection rectangle visible.

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
}

@include flow-theme.node($selectorless: false);
@include flow-theme.connector($scoped: false);
@include flow-theme.selection-area();

```

--------------------------------

### Selection area example component (example.ts)

Source: https://flow.foblex.com/docs/f-selection-area-component

Component class for the selection-area example. It imports FFlowModule, uses OnPush change detection, and resets the canvas scale and center when the flow is loaded.

```typescript
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { FCanvasComponent, FFlowModule } from '@foblex/flow';

@Component({
  selector: 'selection-area',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule],
})
export class Example {
  @ViewChild(FCanvasComponent, { static: true })
  public fCanvas!: FCanvasComponent;

  public onLoaded(): void {
    this.fCanvas.resetScaleAndCenter(false);
  }
}

```

--------------------------------

### Example HTML template for f-flow with nodes and connections

Source: https://flow.foblex.com/docs/f-flow-component

HTML template for the f-flow example. It includes a flow with draggable nodes, connections, and a canvas with zoom. Uses f-select, mat-card, and video elements. The f-connection elements are configured with fReassignDisabled, fOutputId, fInputId, and fType attributes.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  <f-canvas fZoom (fCanvasChange)="canvasChanged($event)">
    <f-connection
      [fReassignDisabled]="true"
      fOutputId="fOutput1"
      fInputId="fInput1"
      fType="bezier"
    />
    <f-connection
      [fReassignDisabled]="true"
      fOutputId="fOutput2"
      fInputId="fInput2"
      fType="segment"
    />

    <div
      class="simple-node"
      fNode
      fDragHandle
      [fNodePosition]="{ x: -300, y: 200 }"
      fNodeOutput
      fOutputId="fOutput1"
      fOutputConnectableSide="right"
    >
      <f-select value="option1" [options]="options" />
    </div>

    <mat-card
      class="node-with-card"
      appearance="outlined"
      fNode
      [fNodePosition]="{ x: 24, y: 24 }"
      fDragHandle
      fNodeInput
      fInputId="fInput1"
      fInputConnectableSide="left"
      fNodeOutput
      fOutputId="fOutput2"
      fOutputConnectableSide="right"
    >
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img
        mat-card-image
        src="https://material.angular.io/assets/img/examples/shiba2.jpg"
        alt="Photo of a Shiba Inu"
      />
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
          Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
          originally bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>

    <div
      class="simple-node"
      fNode
      fDragHandle
      [fNodePosition]="{ x: 500, y: 200 }"
      fNodeInput
      fInputId="fInput2"
      fInputConnectableSide="left"
    >
      <video width="320" height="240" controls autoplay muted>
        <source src="./example.mov" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  </f-canvas>
</f-flow>

```

--------------------------------

### Connection types example HTML

Source: https://flow.foblex.com/docs/f-connection-component

HTML template for the connection types example. It defines four f-connection elements with different fType values (straight, segment, bezier, adaptive-curve) and corresponding fNode elements with fNodeOutput and fNodeInput directives. Each connection is configured with fReassignDisabled set to true and uses fOutputId and fInputId to link to the nodes.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  <f-canvas>
    <f-connection [fReassignDisabled]="true" fType="straight" fOutputId="1" fInputId="2"/>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 0 }"
      fNodeOutput
      fOutputId="1"
      fOutputConnectableSide="right"
    >
      Node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 200, y: 50 }"
      fNodeInput
      fInputId="2"
      fInputConnectableSide="left"
    >
      Node
    </div>

    <f-connection [fReassignDisabled]="true" fType="segment" fOutputId="3" fInputId="4"/>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 150 }"
      fNodeOutput
      fOutputId="3"
      fOutputConnectableSide="right"
    >
      Node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 200, y: 200 }"
      fNodeInput
      fInputId="4"
      fInputConnectableSide="left"
    >
      Node
    </div>

    <f-connection [fReassignDisabled]="true" fType="bezier" fOutputId="5" fInputId="6"/>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 300 }"
      fNodeOutput
      fOutputId="5"
      fOutputConnectableSide="right"
    >
      Node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 200, y: 350 }"
      fNodeInput
      fInputId="6"
      fInputConnectableSide="left"
    >
      Node
    </div>

    <f-connection [fReassignDisabled]="true" fType="adaptive-curve" fOutputId="7" fInputId="8"/>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 0, y: 450 }"
      fNodeOutput
      fOutputId="7"
      fOutputConnectableSide="right"
    >
      Node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 200, y: 500 }"
      fNodeInput
      fInputId="8"
      fInputConnectableSide="left"
    >
      Node
    </div>
  </f-canvas>
</f-flow>
```

--------------------------------

### Connection types example TypeScript

Source: https://flow.foblex.com/docs/f-connection-component

Angular component class for the connection types example. It imports FCanvasComponent and FFlowModule, uses viewChild.required to get the canvas, and calls resetScaleAndCenter(false) on load.

```ts
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { FCanvasComponent, FFlowModule } from '@foblex/flow';

@Component({
  selector: 'connection-types',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule],
})
export class Example {
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }
}
```

--------------------------------

### Example TypeScript: Background example component

Source: https://flow.foblex.com/docs/f-background-component

Angular component for the background example. It uses a signal for the background selection, provides options for circle, rect, custom, and none, and resets the canvas scale and center on load.

```ts
import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
import { FCanvasComponent, FFlowModule } from '@foblex/flow';
import { MatSelectModule } from '@angular/material/select';
import { FlowBackground } from './custom-background-example/custom-background-example';
import { FSelectComponent, FToolbarComponent } from '@foblex/m-render';

@Component({
  selector: 'background-example',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule, MatSelectModule, FlowBackground, FToolbarComponent, FSelectComponent],
})
export class Example {
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected readonly background = signal('custom');

  protected readonly backgroundOptions = ['circle', 'rect', 'custom', 'none'];

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }
}
```

--------------------------------

### Node with outlet and outputs example (HTML, TypeScript, SCSS)

Source: https://flow.foblex.com/docs/f-node-outlet-directive

Complete example of a node with an outlet and three outputs, including the HTML template, TypeScript component, and SCSS styles. The template defines a draggable flow with floating connections, a node with three outputs and an outlet, and a toolbar with buttons to delete connections and toggle drawing connections from the outlet. The component manages connections, handles creation events, and toggles the isConnectionFromOutlet flag. The styles include the flow theme and custom styling for the outlet.

```html
<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="onCreateConnection($event)">
  <f-canvas>
    <f-connection-for-create fBehavior="floating"></f-connection-for-create>

    @for (connection of connections; track connection.to) {
    <f-connection
      [fReassignDisabled]="true"
      [fOutputId]="connection.from"
      [fInputId]="connection.to"
      fBehavior="floating"
    >
    </f-connection>
    }

    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 80 }">
      <div fNodeOutput fOutputId="1" class="top-right"></div>
      <div fNodeOutput fOutputId="2" class="right"></div>
      <div fNodeOutput fOutputId="3" class="bottom-right"></div>
      I'm node with outlet
      <div fNodeOutlet [isConnectionFromOutlet]="isConnectionFromOutlet">
        <mat-icon>arrow_forward</mat-icon>
      </div>
    </div>

    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="1">I'm node</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 100 }" fNodeInput fInputId="2">
      I'm node
    </div>
    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 200 }" fNodeInput fInputId="3">
      I'm node
    </div>
  </f-canvas>
</f-flow>
<f-toolbar>
  <button class="f-button primary" (click)="onDeleteConnections()">Delete Connections</button>
  <f-checkbox [checked]="isConnectionFromOutlet" (change)="onConnectionFromOutletChange($event)"
    >Draw connection from outlet
  </f-checkbox>
</f-toolbar>
```

```ts
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  inject,
  ViewChild,
} from '@angular/core';
import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
import { FCheckboxComponent, FToolbarComponent } from '@foblex/m-render';
import { MatIcon } from '@angular/material/icon';

@Component({
  selector: 'connector-outlet',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule, FCheckboxComponent, MatIcon, FToolbarComponent],
})
export class Example {
  @ViewChild(FCanvasComponent, { static: true })
  public fCanvas!: FCanvasComponent;

  public connections: { from: string; to: string }[] = [];

  public isConnectionFromOutlet: boolean = false;

  private readonly _changeDetectorRef = inject(ChangeDetectorRef);

  public onLoaded(): void {
    this.fCanvas.resetScaleAndCenter(false);
  }

  public onCreateConnection(event: FCreateConnectionEvent): void {
    if (!event.fInputId) {
      return;
    }
    this.connections.push({ from: event.fOutputId, to: event.fInputId });
  }

  public onDeleteConnections(): void {
    this.connections = [];
    this._changeDetectorRef.detectChanges();
  }

  public onConnectionFromOutletChange(checked: boolean): void {
    this.isConnectionFromOutlet = checked;
  }
}
```

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
}

@include flow-theme.node($selectorless: false);
@include flow-theme.connector($scoped: false);

.f-node-outlet {
  position: absolute;
  border: 0.2px solid var(--ff-node-border-color);
  background-color: var(--ff-node-background-color);
  top: 50%;
  right: -90px;
  transform: translateY(-50%);
  border-radius: 2px;

  .mat-icon {
    display: block;
  }
}
```

--------------------------------

### HTML template for unified connector example

Source: https://flow.foblex.com/docs/f-connector-directive

Defines the flow with a canvas, floating connection-for-create, dynamic connections, a source node with multiple connectors and an outlet, target nodes, and a toolbar with delete and checkbox controls.

```html
<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="onCreateConnection($event)">
  <f-canvas>
    <f-connection-for-create fBehavior="floating"></f-connection-for-create>

    @for (connection of connections; track connection.to) {
    <f-connection
      [fReassignDisabled]="true"
      [fSourceId]="connection.from"
      [fTargetId]="connection.to"
      fBehavior="floating"
    >
    </f-connection>
    }

    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 80 }">
      <div
        fConnector
        fConnectorType="source"
        fConnectorId="out-1"
        [fConnectorMultiple]="false"
        class="top-right"
      ></div>
      <div
        fConnector
        fConnectorType="source"
        fConnectorId="out-2"
        [fConnectorMultiple]="false"
        class="right"
      ></div>
      <div
        fConnector
        fConnectorType="source"
        fConnectorId="out-3"
        [fConnectorMultiple]="false"
        class="bottom-right"
      ></div>
      I'm node with outlet
      <div fConnector fConnectorType="outlet" [fConnectionFromOutlet]="isConnectionFromOutlet">
        <mat-icon>arrow_forward</mat-icon>
      </div>
    </div>

    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 300, y: 0 }"
      fConnector
      fConnectorType="target"
      fConnectorId="in-1"
    >
      I'm node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 300, y: 100 }"
      fConnector
      fConnectorType="target"
      fConnectorId="in-2"
    >
      I'm node
    </div>
    <div
      fNode
      fDragHandle
      [fNodePosition]="{ x: 300, y: 200 }"
      fConnector
      fConnectorType="target"
      fConnectorId="in-3"
    >
      I'm node
    </div>
  </f-canvas>
</f-flow>
<f-toolbar>
  <button class="f-button primary" (click)="onDeleteConnections()">Delete Connections</button>
  <f-checkbox [checked]="isConnectionFromOutlet" (change)="onConnectionFromOutletChange($event)"
    >Draw connection from outlet
  </f-checkbox>
</f-toolbar>

```

--------------------------------

### Install @foblex/flow@19 for Angular 17.3+

Source: https://flow.foblex.com/docs/angular-version-compatibility

Use this command for Angular 17.3 and above. It installs the current 19.x line with its companion packages.

```bash
npm install @foblex/flow@19 @foblex/platform@1.0.4 @foblex/mediator@1.1.3 @foblex/2d@1.2.2 @foblex/utils@1.1.1

```

--------------------------------

### Magnetic Lines Example SCSS

Source: https://flow.foblex.com/docs/f-magnetic-lines-component

SCSS styles for the magnetic lines example. It includes theme tokens, connection and plugins styles, and node styles.

```scss
@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
  @include flow-theme.plugins($scoped: false);
}

@include flow-theme.node($selectorless: false);

```

--------------------------------

### Magnetic Lines Example TypeScript

Source: https://flow.foblex.com/docs/f-magnetic-lines-component

TypeScript component for the magnetic lines example. It uses viewChild to access the canvas and resets scale and center on load.

```ts
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { FCanvasComponent, FFlowModule } from '@foblex/flow';

@Component({
  selector: 'magnetic-lines',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule],
})
export class Example {
  private readonly _canvas = viewChild.required(FCanvasComponent);

  protected loaded(): void {
    this._canvas()?.resetScaleAndCenter(false);
  }
}

```

--------------------------------

### TypeScript: Connectors inside node example component

Source: https://flow.foblex.com/docs/f-node-input-directive

Angular component for the example. Uses @foblex/flow, imports FFlowModule, and resets the canvas scale and center on load.

```ts
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { FCanvasComponent, FFlowModule } from '@foblex/flow';

@Component({
  selector: 'connector-inside-node',
  styleUrls: ['./example.scss'],
  templateUrl: './example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FFlowModule],
})
export class Example {
  @ViewChild(FCanvasComponent, { static: true })
  public fCanvas!: FCanvasComponent;

  public onLoaded(): void {
    this.fCanvas.resetScaleAndCenter(false);
  }
}
```

--------------------------------

### Magnetic Lines Example HTML

Source: https://flow.foblex.com/docs/f-magnetic-lines-component

HTML template for the magnetic lines example. It includes a flow with magnetic lines, a canvas with a connection and two draggable nodes.

```html
<f-flow fDraggable (fLoaded)="loaded()">
  <f-magnetic-lines [threshold]="40" />
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating" />
    <div fNode [fNodePosition]="{ x: 0, y: 0 }" fDragHandle fNodeOutput fOutputId="output1">
      Node 1
    </div>
    <div fNode [fNodePosition]="{ x: 200, y: 100 }" fDragHandle fNodeInput fInputId="input1">
      Node 2
    </div>
  </f-canvas>
</f-flow>

```
Tokens:
Raw