Merge pull request #244 from Foblex/feature/shuzarevich/connection-paint-optimization

Unify installation flow (Angular CLI + Nx) and improve canvas rendering performance

Author: siarheihuzarevich

projects/f-examples/nodes/stress-test-with-connections/stress-test-with-connections.component.html

@@ -1,6 +1,6 @@
-<f-flow fDraggable (fLoaded)="onLoaded()">
+<f-flow fDraggable (fLoaded)="loaded()">
   <f-canvas fZoom>
-    @for (node of nodes; track node.position; let index = $index) {
+    @for (node of nodes(); track node.id) {
       <div
         fNode
         [fNodePosition]="node.position"
@@ -24,14 +24,16 @@
       Move me
     </div>
 
-    @for (node of nodes; track node.position; let index = $index) {
+    @for (node of nodes(); track node.position; let index = $index) {
       <f-connection
-        [fType]="type"
-        [fBehavior]="behavior"
+        [fType]="type()"
+        [fBehavior]="behavior()"
         fOutputId="0"
         [fInputId]="node.id"
         fReassignDisabled="true"
         fSelectionDisabled="true"
+        fOutputSide="calculate"
+        fInputSide="calculate"
       >
         <svg
           viewBox="0 0 700 700"
@@ -67,7 +69,7 @@
 <div class="examples-toolbar">
   <mat-form-field>
     <mat-label>Number</mat-label>
-    <mat-select [(value)]="count" (selectionChange)="onSelectionChange($event)">
+    <mat-select [(value)]="count">
       @for (option of counts; track option) {
         <mat-option [value]="option">{{ option }}</mat-option>
       }
@@ -82,7 +84,7 @@
     </mat-select>
   </mat-form-field>
   <mat-form-field>
-    <mat-label>Select Background</mat-label>
+    <mat-label>Type</mat-label>
     <mat-select [(value)]="type">
       @for (option of types; track option) {
         <mat-option [value]="option">{{ option }}</mat-option>

projects/f-examples/nodes/stress-test-with-connections/stress-test-with-connections.component.ts

@@ -1,62 +1,62 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
 import {
   EFConnectableSide,
   EFConnectionBehavior,
   EFConnectionType,
   EFMarkerType,
   FCanvasComponent,
-  FFlowComponent,
   FFlowModule,
   FZoomDirective,
 } from '@foblex/flow';
 import { IPoint, PointExtensions } from '@foblex/2d';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatOption } from '@angular/material/core';
-import { MatSelect, MatSelectChange } from '@angular/material/select';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'stress-test-with-connections',
   styleUrls: ['./stress-test-with-connections.component.scss'],
   templateUrl: './stress-test-with-connections.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [FFlowModule, MatFormField, MatLabel, MatOption, MatSelect, FZoomDirective],
 })
-export class StressTestWithConnectionsComponent implements OnInit, AfterViewInit {
-  @ViewChild(FFlowComponent, { static: false })
-  public fFlow!: FFlowComponent;
-
-  @ViewChild(FCanvasComponent, { static: false })
-  public fCanvas!: FCanvasComponent;
-
-  public counts: number[] = [25, 50, 75, 100, 150];
-  public count = 25;
+export class StressTestWithConnectionsComponent {
+  private readonly _canvas = viewChild.required(FCanvasComponent);
 
-  public behaviors: string[] = [
+  protected readonly eMarkerType = EFMarkerType;
+  protected readonly counts = [25, 50, 75, 100, 150];
+  protected readonly behaviors: string[] = [
     EFConnectionBehavior.FIXED,
     EFConnectionBehavior.FIXED_CENTER,
     EFConnectionBehavior.FLOATING,
   ];
-  public behavior = EFConnectionBehavior.FLOATING;
-
-  public types: string[] = [
+  protected readonly types: string[] = [
     EFConnectionType.STRAIGHT,
     EFConnectionType.SEGMENT,
     EFConnectionType.BEZIER,
+    EFConnectionType.ADAPTIVE_CURVE,
   ];
-  public type = EFConnectionType.STRAIGHT;
 
-  public nodes: { id: number; position: IPoint; side: EFConnectableSide }[] = [];
+  protected readonly count = signal(50);
+  protected readonly behavior = signal(EFConnectionBehavior.FLOATING);
+  protected readonly type = signal(EFConnectionType.STRAIGHT);
 
-  public onLoaded(): void {
-    this.fCanvas?.fitToScreen(PointExtensions.initialize(20, 20), false);
-  }
+  protected readonly nodes = computed(() => {
+    const count = this.count();
 
-  public ngOnInit(): void {
-    this.nodes = this._generateNodes(this.count);
-  }
+    return untracked(() => this._generateNodes(count));
+  });
 
-  public ngAfterViewInit(): void {
-    this.fFlow.reset();
+  protected loaded(): void {
+    this._canvas()?.fitToScreen(PointExtensions.initialize(20, 20), false);
   }
 
   private _generateNodes(
@@ -115,10 +115,4 @@ export class StressTestWithConnectionsComponent implements OnInit, AfterViewInit
 
     return result;
   }
-
-  protected readonly eMarkerType = EFMarkerType;
-
-  public onSelectionChange(event: MatSelectChange): void {
-    this.nodes = this._generateNodes(event.value);
-  }
 }

projects/f-examples/nodes/stress-test/stress-test.component.html

@@ -1,19 +1,44 @@
 @if (columns()) {
   <f-flow fDraggable (fLoaded)="loaded()">
     <f-canvas fZoom>
-      @for (column of columns(); track column; let cIndex = $index) {
-        <div
-          fNode
-          *ngFor="let node of column; let rIndex = index"
-          [fNodePosition]="{ x: 120 * cIndex, y: rIndex * 120 }"
-          fDragHandle
-        >
-          Node
-        </div>
-      }
+      <ng-container ngProjectAs="[fNodes]">
+        @for (column of columns(); track column; let cIndex = $index) {
+          @for (node of column; track node; let rIndex = $index) {
+            <div
+              fNode
+              [fNodePosition]="{ x: 120 * cIndex, y: rIndex * 120 }"
+              fDragHandle
+              fNodeInput
+              [fInputId]="node"
+              fNodeOutput
+              [fOutputId]="node"
+            >
+              Node
+            </div>
+          }
+        }
+      </ng-container>
+
+      <ng-container ngProjectAs="[fConnections]">
+        @if (showConnections()) {
+          @for (connection of connections(); track connection) {
+            <f-connection
+              fType="adaptive-curve"
+              fBehavior="fixed"
+              [fInputId]="connection.target"
+              [fOutputId]="connection.source"
+              fInputSide="calculate"
+              fOutputSide="calculate"
+            />
+          }
+        }
+      </ng-container>
     </f-canvas>
   </f-flow>
   <div class="examples-toolbar">
+    <f-checkbox [checked]="showConnections()" (change)="toggleConnections()"
+      >Show Connections</f-checkbox
+    >
     <mat-form-field>
       <mat-label>Number</mat-label>
       <mat-select [(value)]="totalNodes">

projects/f-examples/nodes/stress-test/stress-test.component.scss

@@ -1,5 +1,9 @@
 @use '../../flow-common';
 
+::ng-deep f-flow {
+  @include flow-common.connection;
+}
+
 .f-node {
   @include flow-common.node;
   width: unset;

projects/f-examples/nodes/stress-test/stress-test.component.ts

@@ -12,22 +12,35 @@ import { PointExtensions } from '@foblex/2d';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatOption } from '@angular/material/core';
 import { MatSelect } from '@angular/material/select';
+import { FCheckboxComponent } from '@foblex/m-render';
+
+type Edge = { source: number; target: number };
 
 @Component({
   selector: 'stress-test',
   styleUrls: ['./stress-test.component.scss'],
   templateUrl: './stress-test.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [FFlowModule, NgForOf, FZoomDirective, MatFormField, MatLabel, MatOption, MatSelect],
+  imports: [
+    FFlowModule,
+    NgForOf,
+    FZoomDirective,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect,
+    FCheckboxComponent,
+  ],
 })
 export class StressTestComponent {
   private readonly _canvas = viewChild.required(FCanvasComponent);
   private readonly _flow = viewChild(FFlowComponent);
 
-  protected readonly totals = [500, 1000, 2000, 5000];
+  protected readonly totals = [200, 500, 1000, 2000];
 
-  protected readonly totalNodes = signal(1000);
+  protected readonly showConnections = signal(false);
+  protected readonly totalNodes = signal(200);
   protected readonly columns = computed(() => {
     const total = this.totalNodes();
     const cols = Math.ceil(Math.sqrt(total));
@@ -41,7 +54,21 @@ export class StressTestComponent {
     );
   });
 
+  protected readonly connections = computed<Edge[]>(() => {
+    const total = this.totalNodes();
+    const edges: Edge[] = [];
+    for (let i = 1; i < total; i++) {
+      edges.push({ source: i, target: i + 1 });
+    }
+
+    return edges;
+  });
+
   protected loaded(): void {
     this._canvas()?.fitToScreen(PointExtensions.initialize(20, 20), false);
   }
+
+  protected toggleConnections(): void {
+    this.showConnections.update((x) => !x);
+  }
 }

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "17.9.0",
+  "version": "17.9.5",
   "description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
   "main": "index.js",
   "types": "index.d.ts",

projects/f-flow/schematics/collection.json

@@ -6,10 +6,15 @@
       "factory": "./ng-add/index#ngAdd",
       "schema": "./ng-add/schema.json"
     },
+    "add": {
+      "description": "Installs @foblex/flow and its dependencies (alias for Nx users)",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
     "ng-update": {
       "description": "Updates @foblex/flow to the latest version",
       "factory": "./ng-update/index#ngUpdate",
       "schema": "./ng-update/schema.json"
-    },
+    }
   }
 }