===============
LIBRARY RULES
===============
From library maintainers:
- Use standalone components with FFlowModule import
- The library does NOT own graph state — your app owns nodes, groups, connections, ids, validation, and persistence
- Connections are connector-to-connector (fOutputId → fInputId), not generic node-to-node edges
- Do NOT assume React Flow style APIs such as [nodes], [edges], setNodes(), addEdge()
- Handle events from fDraggable (fCreateConnection, fReassignConnection, fMoveNodes, etc.) to update your own state
- Prefer non-deprecated event property names: sourceId/targetId over fOutputId/fInputId in FCreateConnectionEvent
- Import from @foblex/flow, not internal paths

### Grid System Example Component

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/editor-helpers/grid-system.md

Example component demonstrating the grid system setup in Foblex Flow for Angular.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'grid-system',
  templateUrl: './example.html',
  styleUrls: ['./example.scss']
})
export class GridSystemComponent {
  public nodes = [
    { id: '1', position: { x: 250, y: 50 } },
    { id: '2', position: { x: 350, y: 150 } },
    { id: '3', position: { x: 450, y: 250 } }
  ];
}
```

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

### Unified Connector Implementation

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/connectors/f-connector-directive.md

A complete example demonstrating the unified connector component setup.

```html
<f-canvas>
  <f-node [fNodePosition]="{ x: 100, y: 100 }">
    <f-connector fConnectorId="source-1" fConnectorType="source"></f-connector>
  </f-node>

  <f-node [fNodePosition]="{ x: 400, y: 100 }">
    <f-connector fConnectorId="target-1" fConnectorType="target"></f-connector>
  </f-node>

  <f-connection fSourceId="source-1" fTargetId="target-1"></f-connection>
</f-canvas>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'unified-connector',
  templateUrl: './example.html',
  styleUrls: ['./example.scss']
})
export class UnifiedConnectorComponent {}
```

```scss
f-node {
  width: 100px;
  height: 100px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

f-connector {
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 50%;
}
```

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

### Drag to Connect Example HTML

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-editing/drag-to-connect.md

HTML structure for the drag-to-connect example. This sets up the component and its properties.

```html
<ng-component [height]="600"></ng-component>
```

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

### HTML Structure for Connector Outlet Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connectors/connector-outlet.md

Defines the HTML template for the connector outlet example, including the f-flow canvas and node setup.

```html
<f-flow [height]="height">
  <f-node id="node-1" [x]="100" [y]="100">
    <f-node-content>
      <div class="f-node-content-wrapper">
        <div class="f-node-title">Node 1</div>
        <div class="f-node-description">This node has multiple outlets.</div>
      </div>
    </f-node-content>
    <f-node-outlet name="top"></f-node-outlet>
    <f-node-outlet name="right"></f-node-outlet>
    <f-node-outlet name="bottom"></f-node-outlet>
    <f-node-outlet name="left"></f-node-outlet>
  </f-node>

  <f-node id="node-2" [x]="300" [y]="100">
    <f-node-content>
      <div class="f-node-content-wrapper">
        <div class="f-node-title">Node 2</div>
        <div class="f-node-description">Receives connections.</div>
      </div>
    </f-node-content>
  </f-node>

  <f-node id="node-3" [x]="300" [y]="300">
    <f-node-content>
      <div class="f-node-content-wrapper">
        <div class="f-node-title">Node 3</div>
        <div class="f-node-description">Receives connections.</div>
      </div>
    </f-node-content>
  </f-node>

  <f-connection from="node-1" fromOutlet="top" to="node-2"></f-connection>
  <f-connection from="node-1" fromOutlet="right" to="node-3"></f-connection>
</f-flow>
```

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

### Background Example Component (SCSS)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/viewport/background.md

SCSS styles for the background example component, including layout and control button styling.

```scss
f-flow {
  display: block;
  height: 600px;
}

.controls {
  margin-top: 1rem;
  button {
    margin-right: 0.5rem;
  }
}

```

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

### Background Example Component (HTML)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/viewport/background.md

HTML structure for the background example component, demonstrating the integration of f-flow, f-canvas, and f-background.

```html
<f-flow>
  <f-canvas></f-canvas>
  <f-background [mode]="backgroundMode"></f-background>
</f-flow>

<div class="controls">
  <button (click)="backgroundMode = 'rect'">Rect Background</button>
  <button (click)="backgroundMode = 'circle'">Circle Background</button>
  <button (click)="backgroundMode = 'custom'">Custom Background</button>
</div>

```

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

### HTML for Connectable Side Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connectors/connectable-side.md

This HTML snippet sets up the basic structure for the connectable-side example, including the main component and its height.

```html
<connectable-side></connectable-side>
```

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

### Auto Snap Connection Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/connections/f-snap-connection-component.md

Demonstrates the auto-snap functionality for connections. This example requires associated HTML, TypeScript, and SCSS files for full implementation.

```html
<auto-snap></auto-snap>
```

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

### HTML Structure for Connection Types Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-appearance/connection-types.md

This HTML file sets up the basic structure for the connection types example, including the main component and its properties.

```html
<f-flow>
  <f-node *ngFor="let node of nodes" [id]="node.id" [fPosition]="node.position"></f-node>
  <f-connection
    *ngFor="let connection of connections"
    [id]="connection.id"
    [fFrom]="connection.from"
    [fTo]="connection.to"
    [fType]="connection.type"
    [fRadius]="connection.radius"
    [fOffset]="connection.offset"
  ></f-connection>
</f-flow>

```

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

### SCSS Styling for Connector Outlet Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connectors/connector-outlet.md

Provides basic styling for the nodes and content within the connector outlet example.

```css
.f-node-content-wrapper {
  padding: 10px;
}

.f-node-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.f-node-description {
  font-size: 0.9em;
}
```

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

### Custom Background Example Component (HTML)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/viewport/background.md

HTML structure for a custom background example, utilizing a custom SVG pattern.

```html
<f-flow>
  <f-canvas></f-canvas>
  <f-background mode="custom">
    <ng-template fBackgroundCustomTemplate>
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="custom-pattern" width="50" height="50" patternUnits="userSpaceOnUse">
            <circle cx="25" cy="25" r="5" fill="rgba(0, 0, 0, 0.1)" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#custom-pattern)" />
      </svg>
    </ng-template>
  </f-background>
</f-flow>

```

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

### Manual Installation of Foblex Packages

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/elk-layout-auto.md

Manually install Foblex Flow and related packages if not using `ng add`.

```bash
npm install @foblex/flow @foblex/flow-elk-layout @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

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

### Install ELK.js Layout Package

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/elk-layout-auto.md

Install the ELK.js layout package for Foblex Flow using npm or yarn.

```bash
ng add @foblex/flow-elk-layout
```

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

### HTML Structure for Remove Connection Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-editing/remove-connection-on-drop.md

This HTML file sets up the basic structure for the remove connection on drop example, including the custom component tag.

```html
<f-flow>
  <f-canvas>
    <f-node id="start" x="100" y="100"></f-node>
    <f-node id="end" x="400" y="100"></f-node>
    <f-connection id="conn1" from="start" to="end"></f-connection>
  </f-canvas>
</f-flow>
```

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

### SCSS Styling for Connection Types Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-appearance/connection-types.md

This SCSS file provides styling for the connection types example, ensuring visual clarity and proper layout.

```scss
connection-types {
  display: block;
  height: 100%;

  f-flow {
    width: 100%;
    height: 100%;
  }

  f-node {
    background-color: #3498db;
    border-radius: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }

  f-connection {
    stroke: #2c3e50;
    stroke-width: 2px;

    &[fType='straight'] {
      stroke: #e74c3c;
    }

    &[fType='segment'] {
      stroke: #f1c40f;
    }

    &[fType='bezier'] {
      stroke: #9b59b6;
    }

    &[fType='adaptive'] {
      stroke: #1abc9c;
    }
  }
}

```

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

### Background Example - SCSS

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/helpers/f-background-component.md

Example SCSS for styling the background component. The base class '.f-component' and host class '.f-background' are available for customization.

```scss
f-background {
  height: 100%;
  width: 100%;
}
```

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

### HTML Structure for Copy-Paste Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/editor-state/copy-paste.md

This HTML file sets up the basic structure for the copy-paste example, including the main component and its properties.

```html
<f-flow [nodes]="nodes" [connections]="connections" [snapGrid]="snapGrid" [height]="height" [width]="width" [clipboard]="clipboard" [clipboardEnabled]="clipboardEnabled" [clipboardOffset]="clipboardOffset" [clipboardRegenerateIds]="clipboardRegenerateIds" [clipboardConnections]="clipboardConnections" [clipboardConnectionValidation]="clipboardConnectionValidation"></f-flow>
```

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

### Install Foblex Flow Manually

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/building-ai-low-code-platform/building-ai-low-code-platform-in-angular-part-2-creating-your-first-flow.md

Install Foblex Flow and its required companion packages manually using npm.

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

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

### Background Example Component (TypeScript)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/viewport/background.md

TypeScript logic for the background example component, controlling the background mode and handling user interactions.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'background-example',
  templateUrl: './example.html',
  styleUrls: ['./example.scss']
})
export class BackgroundExampleComponent {
  backgroundMode: 'rect' | 'circle' | 'custom' = 'rect';
}

```

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

### HTML for Add Node from Palette Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/editor-helpers/add-node-from-palette.md

This HTML sets up the structure for the add node from palette example, including the f-canvas and the external item that will be dragged.

```html
<div class="palette-container">
  <div class="palette-item"
    fExternalItem
    [fData]="{ type: 'custom', label: 'Custom Node' }"
    fPreview="<f-node type=\'custom\' label=\'Custom Node\'></f-node>"
    fPreviewMatchSize
  >
    <f-node type="custom" label="Custom Node"></f-node>
  </div>
</div>

<f-canvas
  [nodes]="nodes"
  (nodeDropped)="onNodeDropped($event)"
></f-canvas>

```

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

### Connection Waypoints Example - SCSS

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-routing/connection-waypoints.md

The SCSS styles for the connection waypoints example. This file is typically used for component-specific styling.

```scss
f-connection-waypoints {
  width: 100%;
  height: 100%;
  display: block;
}

```

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

### Connection Waypoints Example - HTML

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-routing/connection-waypoints.md

The HTML structure for the connection waypoints example. It includes the main component and binds to its height property.

```html
<f-flow>
  <f-flow-canvas>
    <f-connection
      [fSourceNode]="sourceNode"
      [fTargetNode]="targetNode"
      [fSourceAnchor]="sourceAnchor"
      [fTargetAnchor]="targetAnchor"
      [fSourceWaypoints]="sourceWaypoints"
      [fTargetWaypoints]="targetWaypoints"
      [(waypoints)]="waypoints"
      (fConnectionWaypointsChanged)="onWaypointsChanged($event)"
    ></f-connection>
  </f-flow-canvas>
</f-flow>

<f-connection-waypoints
  [fSourceNode]="sourceNode"
  [fTargetNode]="targetNode"
  [fSourceAnchor]="sourceAnchor"
  [fTargetAnchor]="targetAnchor"
  [fSourceWaypoints]="sourceWaypoints"
  [fTargetWaypoints]="targetWaypoints"
  [waypoints]="waypoints"
  [radius]="2"
></f-connection-waypoints>

```

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

### HTML for Drag to Reassign Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-editing/drag-to-reassign.md

This HTML snippet sets up the basic structure for the drag-to-reassign example, including the F-Flow component and its height configuration.

```html
<drag-to-reassign></drag-to-reassign>
```

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

### Example SCSS for Dagre Auto Layout

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/dagre-layout-auto.md

Styling for the Dagre auto layout example component, including layout and appearance of Flow elements.

```scss
dagre-layout-auto {
  display: block;
  height: 100%;

  f {
    height: 100%;
  }
}

```

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

### Example HTML for Dagre Auto Layout

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/dagre-layout-auto.md

The HTML structure for the Dagre auto layout example, typically containing the Foblex Flow component.

```html
<dagre-layout-auto></dagre-layout-auto>
```

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

### Install Dagre Layout Engine

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/dagre-layout.md

Install the Dagre layout engine package using npm or yarn. For Nx workspaces, use the provided schematic.

```bash
ng add @foblex/flow-dagre-layout
```

```bash
ng add @foblex/flow-dagre-layout --skipTheme
```

```bash
nx g @foblex/flow-dagre-layout:add
```

```bash
npm install @foblex/flow @foblex/flow-dagre-layout @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

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

### Define Output Connectors

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/connectors/f-node-output-directive.md

Examples showing how to implement output connectors either as a dedicated port element or directly on the node host.

```html
<f-flow fDraggable>
  <f-canvas>
    <div fNode [fNodePosition]="{ x: 120, y: 80 }">
      <div class="title" fDragHandle>Node</div>

      <div fNodeOutput fOutputId="out-1">
        Output
      </div>
    </div>
  </f-canvas>
</f-flow>
```

```html
<f-flow fDraggable>
  <f-canvas>
    <div
      fNode
      fNodeOutput
      fOutputId="out-1"
      [fNodePosition]="{ x: 120, y: 80 }"
    >
      Node (output on host)
    </div>
  </f-canvas>
</f-flow>
```

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

### Magnetic Lines Example Component

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/helpers/f-magnetic-lines-component.md

This example demonstrates the usage of the magnetic lines component in an Angular application. It includes HTML, TypeScript, and SCSS files for a complete setup.

```html
<div class="example-wrapper">
  <f-flow
    [nodes]="nodes"
    [edges]="edges"
    [layout]="layout"
    [nodeTemplates]="nodeTemplates"
    [edgeTemplates]="edgeTemplates"
    [height]="600"
  >
    <f-magnetic-lines></f-magnetic-lines>
  </f-flow>
</div>

```

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

### Drag Start and End Events Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/concepts/event-system.md

Demonstrates how to handle drag start and end events in f-flow. Ensure synchronous handlers are kept minimal to avoid impacting user experience.

```html
<f-flow
  [flow]="flow"
  [nodes]="nodes"
  [edges]="edges"
  [height]="600"
  (dragStart)="onDragStart($event)"
  (dragEnd)="onDragEnd($event)"
></f-flow>
```

```typescript
import { Component, OnInit } from '@angular/core';
import { Edge, Flow, Node } from '@foblex/f-flow';

@Component({
  selector: 'drag-start-end-events',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class DragStartEndEventsComponent implements OnInit {

  public flow: Flow;

  public nodes: Node[] = [
    { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },
    { id: '2', position: { x: 250, y: 50 }, data: { label: 'Node 2' } }
  ];

  public edges: Edge[] = [
    { id: 'e1', source: '1', target: '2' }
  ];

  ngOnInit(): void {
    this.flow = {
      id: 'custom-flow',
      name: 'Custom Flow'
    };
  }

  onDragStart(event: any): void {
    console.log('Drag start:', event);
  }

  onDragEnd(event: any): void {
    console.log('Drag end:', event);
  }
}
```

```scss
f-flow {
  width: 100%;
  height: 100%;
}
```

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

### HTML for Drag Start/End Events

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/events/drag-start-end-events.md

The HTML structure for the drag start and end events example.

```html
<f-flow [options]="options"></f-flow>
```

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

### Create Angular Project and Install Dependencies

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/call-flow-editor/creating-a-visual-call-workflow-editor-with-angular.md

Use the Angular CLI to create a new project and add the @foblex/flow library. For Nx workspaces, use the provided schematic. Manual installation of companion packages is also an option.

```bash
ng new call-workflow-editor
cd call-workflow-editor
ng add @foblex/flow
```

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

### Auto Pan Component Configuration Example (TypeScript)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/interaction/f-auto-pan-component.md

This TypeScript example shows how to configure the FAutoPanComponent with custom edge threshold and speed. It also includes the necessary imports and component setup for an Angular application.

```typescript
import { Component } from "@angular/core";
import { FFlowModule } from "@foblex/f-flow";

@Component({
  selector: "app-auto-pan-example",
  standalone: true,
  imports: [FFlowModule],
  templateUrl: "./example.html",
  styleUrls: ["./example.scss"]
})
export class AutoPanExampleComponent {
  public height = 600;
}
```

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

### Adding a Simple Circle Marker to Connection Start

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/building-ai-low-code-platform/building-ai-low-code-platform-in-angular-part-4-styling-and-handling-connections.md

This example demonstrates how to add a circular SVG marker to the start of a connection. It utilizes the fMarker directive and specifies marker properties like type, size, and reference point.

```html
<f-connection [fOutputId]="id1" [fInputId]="id2">
  <svg fMarker type="f-connection-marker-start"
       [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
</f-connection>
```

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

### Connection Rules Implementation Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/connectors/connection-rules.md

Demonstrates the implementation of connection rules using HTML, TypeScript, and SCSS components.

```html
<f-flow>
  <f-canvas>
    <f-node [fNodePosition]="{ x: 100, y: 100 }">
      <f-node-output fConnectorId="source-1" [fCanBeConnectedTo]="['target-1']">
        <div class="port"></div>
      </f-node-output>
    </f-node>

    <f-node [fNodePosition]="{ x: 400, y: 100 }">
      <f-node-input fConnectorId="target-1" fConnectorCategory="category-a">
        <div class="port"></div>
      </f-node-input>
    </f-node>
  </f-canvas>
</f-flow>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'connection-rules',
  templateUrl: './example.html',
  styleUrls: ['./example.scss']
})
export class ConnectionRulesComponent {}
```

```scss
.port {
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
}

.f-connector-connectable {
  background: green;
}

.f-connector-not-connectable {
  background: red;
}
```

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

### Magnetic Rects Example Component

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/helpers/f-magnetic-rects-component.md

This example demonstrates the usage of the magnetic rects component within an Angular application. It includes HTML, TypeScript, and SCSS configurations for a complete setup. Ensure fDraggable is used for the magnetic rects to render.

```html
<div class="f-component f-magnetic-rects" [height]="600">
</div>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'magnetic-rects',
  templateUrl: './example.html',
  styleUrls: ['./example.scss']
})
export class MagneticRectsExample {
  public alignThreshold = 100;
  public spacingThreshold = 100;
}
```

```scss
.f-component.f-magnetic-rects {
  width: 100%;
  height: 100%;

  .f-rect {
    background-color: rgba(0, 150, 136, 0.5);
    border: 1px dashed rgba(0, 150, 136, 0.8);
    pointer-events: none;
  }
}
```

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

### Applying All Four Marker Types to a Connection

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/building-ai-low-code-platform/building-ai-low-code-platform-in-angular-part-4-styling-and-handling-connections.md

This comprehensive example shows how to apply all four types of SVG markers (start, end, selected start, selected end) to a single connection. It includes the TypeScript enum for marker types and the HTML structure with corresponding SVG elements.

```typescript
protected readonly eMarkerType = EFMarkerType;
```

```html
<f-connection [fConnectionId]="connection.id"
              fBehavior="fixed"
              fType="bezier"
              [fOutputId]="connection.from"
              [fInputId]="connection.to">
  <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
  <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
    <path fill="var(--connection-color)" d="M0,0L700,350L0,700L150,350z" />
  </svg>
  <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.SELECTED_START" [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
  <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.SELECTED_END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
    <path fill="var(--connection-color)" d="M0,0L700,350L0,700L150,350z" />
  </svg>
</f-connection>
```

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

### Angular Component for Grouping Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/releases/foblex-flow-17-7-smarter-grouping-copy-paste-and-undo-redo-in-angular.md

This component demonstrates the usage of Foblex Flow's grouping features within an Angular application. Ensure the Foblex Flow library is installed and configured.

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "grouping",
  template: "<f-flow></f-flow>",
  styles: [
    ":host {\n      display: block;\n      height: 600px;\n    }"
  ]
})
export class GroupingComponent {}

```

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

### Custom Background Example Component (TypeScript)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/viewport/background.md

TypeScript for the custom background example component. This example does not require specific logic for the custom background itself, as the SVG is defined in the template.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'custom-background-example',
  templateUrl: './custom-background-example.html'
})
export class CustomBackgroundExampleComponent {}

```

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

### Install Dagre Layout Adapter for Nx Workspaces

Source: https://github.com/foblex/f-flow/blob/main/libs/f-layout/dagre/README.md

For Nx workspaces, use the `nx g` command to generate and add the Dagre layout adapter.

```bash
nx g @foblex/flow-dagre-layout:add
```

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

### Manual Installation of F-Flow Dependencies

Source: https://github.com/foblex/f-flow/blob/main/README.md

Use this command to manually install the F-Flow library and all required companion packages.

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

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

### Manual Installation Dependencies

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/layout-engines/dagre-layout-auto.md

Alternatively, install the required Foblex Flow and layout dependencies manually using npm. Note that 'dagre' is included as a runtime dependency by the adapter.

```bash
npm install @foblex/flow @foblex/flow-dagre-layout @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

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

### Assign Node to Connection on Drop Example (HTML)

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-editing/assign-node-to-connection-on-drop.md

The HTML structure for the assign node to connection on drop example. This file defines the visual elements and component usage.

```html
<f-flow [data]="data" [config]="config" [context]="context"></f-flow>
```

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

### Default Theme Equivalent SCSS

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/guides/styling/default-theme-and-styling.md

The `default.scss` entry point is equivalent to importing the selective API and including all theme tokens and features.

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

@include flow-theme.theme-tokens();
@include flow-theme.theme-all();
```

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

### Minimal Shape with Virtualization and Caching

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/blog/releases/foblex-flow-v18-2-0-caching-virtualization-connection-worker-performance-refresh.md

Demonstrates the minimal HTML structure for using `*fVirtualFor` for progressive rendering of node lists and enabling `fCache` for reusing geometry information.

```html
<f-flow fDraggable [fCache]="true">
  <f-canvas fZoom>
    <ng-container ngProjectAs="[fNodes]" *fVirtualFor="let item of items">
      <div fNode [fNodePosition]="item.position">Node</div>
    </ng-container>
  </f-canvas>
</f-flow>
```

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

### Undo/Redo Example SCSS

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/editor-state/undo-redo.md

SCSS styles for the undo/redo example. This file customizes the appearance of the editor's toolbar and container.

```scss
.container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .toolbar {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  f-flow {
    flex: 1;
  }
}

```

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

### Undo/Redo Example HTML

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/editor-state/undo-redo.md

HTML structure for the undo/redo example. This file defines the basic layout and elements for the editor interface.

```html
<div class="container">
  <div class="toolbar">
    <button id="undo" [disabled]="!canUndo">Undo</button>
    <button id="redo" [disabled]="!canRedo">Redo</button>
  </div>
  <f-flow
    [nodes]="nodes"
    [edges]="edges"
    [layout]="layout"
    (ready)="ready($event)"
    (nodeMoved)="nodeMoved($event)"
    (edgeAdded)="edgeAdded($event)"
    (edgeRemoved)="edgeRemoved($event)"
    (nodeRemoved)="nodeRemoved($event)"
  ></f-flow>
</div>

```

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

### HTML for Create Node on Connection Drop

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/connections-editing/create-node-on-connection-drop.md

The HTML structure for the create node on connection drop example. It sets up the main container for the f-flow editor.

```html
<f-flow [data]="data" [config]="config" (connectionDrop)="onConnectionDrop($event)"></f-flow>
```

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

### Reflow Basics Example

Source: https://github.com/foblex/f-flow/blob/main/apps/f-flow-portal/public/markdown/examples/reflow/reflow-on-resize.md

Demonstrates the fundamental behavior of the withReflowOnResize plugin. It shows how nodes shift automatically when the source node's size changes, such as when an inner block is toggled open.

```html
<reflow-basics></reflow-basics>
```

```typescript
import { Component } from '@angular/core';
import { FFComponent, FFNode, FFEdge, FFLayout, FFEvent, FFEventBus, FFPlugin, FFEventBusEvents, FFNodeEvent, FFNodeEvents, FFNodeSize, FFNodeSizeEvent, FFNodeSizeEvents, FFNodeSizeEventPayload, FFNodeSizeEventPayloadType, FFNodeSizeEventPayloadTypeEnum, FFNodeSizeEventPayloadTypeEnum as FFNodeSizeEventPayloadTypeEnum_1 } from '@foblex/flow';

@Component({
  selector: 'reflow-basics',
  templateUrl: './example.html',
  styleUrls: ['./example.scss'],
  providers: [
    FFComponent,
    FFLayout,
    FFEventBus,
    FFPlugin,
    FFNodeEvent,
    FFNodeSizeEvent,
    FFNodeSizeEvents,
    FFNodeSizeEventPayload,
    FFNodeSizeEventPayloadType,
    FFNodeSizeEventPayloadTypeEnum,
    FFNodeSizeEventPayloadTypeEnum_1
  ]
})
export class ReflowBasicsComponent {
  public nodes: FFNode[] = [
    { id: 'source', label: 'Source', x: 100, y: 100, width: 100, height: 50 },
    { id: 'connected', label: 'Connected', x: 300, y: 100, width: 100, height: 50 },
    { id: 'unconnected', label: 'Unconnected', x: 100, y: 200, width: 100, height: 50 }
  ];

  public edges: FFEdge[] = [
    { id: 'edge-1', source: 'source', target: 'connected' }
  ];

  constructor(private eventBus: FFEventBus) {
    this.eventBus.listen(FFNodeSizeEvents.NODE_SIZE_CHANGED, (event: FFNodeSizeEvent) => {
      if (event.payload.type === FFNodeSizeEventPayloadTypeEnum.NODE_RESIZED) {
        const node = this.nodes.find(node => node.id === event.payload.nodeId);
        if (node) {
          node.width = event.payload.width;
          node.height = event.payload.height;
        }
      }
    });
  }
}

```

```scss
.flow-canvas {
  width: 100%;
  height: 100%;
}

.node {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.node.source {
  background-color: #e0f7fa;
}

.node.connected {
  background-color: #fff9c4;
}

.node.unconnected {
  background-color: #ffe0b2;
}

```