feat: improve stress-test example and performance for large-scale node dragging

Author: siarheihuzarevich

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

@@ -1,7 +1,7 @@
-@if (columns) {
+@if (columns()) {
   <f-flow fDraggable (fLoaded)="loaded()">
     <f-canvas fZoom>
-      @for (column of columns; track column; let cIndex = $index) {
+      @for (column of columns(); track column; let cIndex = $index) {
         <div
           fNode
           *ngFor="let node of column; let rIndex = index"
@@ -13,4 +13,14 @@
       }
     </f-canvas>
   </f-flow>
+  <div class="examples-toolbar">
+    <mat-form-field>
+      <mat-label>Number</mat-label>
+      <mat-select [(value)]="totalNodes">
+        @for (option of totals; track option) {
+          <mat-option [value]="option">{{ option }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
 }

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

@@ -4,3 +4,5 @@
   @include flow-common.node;
   width: unset;
 }
+
+@include flow-common.examples-toolbar;

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

@@ -1,30 +1,45 @@
-import { ChangeDetectionStrategy, Component, OnInit, viewChild } from '@angular/core';
-import { FCanvasComponent, FFlowModule, FZoomDirective } from '@foblex/flow';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import { FCanvasComponent, FFlowComponent, FFlowModule, FZoomDirective } from '@foblex/flow';
 import { NgForOf } from '@angular/common';
 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';
 
 @Component({
   selector: 'stress-test',
   styleUrls: ['./stress-test.component.scss'],
   templateUrl: './stress-test.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [FFlowModule, NgForOf, FZoomDirective],
+  imports: [FFlowModule, NgForOf, FZoomDirective, MatFormField, MatLabel, MatOption, MatSelect],
 })
-export class StressTestComponent implements OnInit {
+export class StressTestComponent {
   private readonly _canvas = viewChild.required(FCanvasComponent);
+  private readonly _flow = viewChild(FFlowComponent);
 
-  protected columns: number[][] | undefined;
+  protected readonly totals = [500, 1000, 2000, 5000];
 
-  public ngOnInit(): void {
-    const totalNodes = 500;
-    const nodesPerColumn = Math.ceil(totalNodes / 25);
+  protected readonly totalNodes = signal(1000);
+  protected readonly columns = computed(() => {
+    const total = this.totalNodes();
+    const cols = Math.ceil(Math.sqrt(total));
+    const nodesPerCol = Math.ceil(total / cols);
 
-    const numbers = Array.from({ length: totalNodes }, (_, i) => i + 1);
-    this.columns = Array.from({ length: 25 }, (_, i) =>
-      numbers.slice(i * nodesPerColumn, (i + 1) * nodesPerColumn),
+    untracked(() => this._flow()?.reset());
+    const numbers = Array.from({ length: total }, (_, i) => i + 1);
+
+    return Array.from({ length: cols }, (_, i) =>
+      numbers.slice(i * nodesPerCol, (i + 1) * nodesPerCol),
     );
-  }
+  });
 
   protected loaded(): void {
     this._canvas()?.fitToScreen(PointExtensions.initialize(20, 20), false);

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "17.8.5",
+  "version": "17.8.6",
   "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/src/f-canvas/f-canvas.component.scss

@@ -7,4 +7,6 @@
   top: 0;
   transform-origin: 0 0;
   pointer-events: none;
+  will-change: transform;
+  transform: translateZ(0);
 }

projects/f-flow/src/f-flow/f-flow.component.scss

@@ -18,4 +18,14 @@
     transform-origin: 50% 50%;
     will-change: transform;
   }
+
+  .f-node,
+  .f-group {
+    position: absolute;
+    transform-origin: center;
+    user-select: none;
+    pointer-events: all;
+    left: 0;
+    top: 0;
+  }
 }

projects/f-flow/src/f-node/f-group.directive.ts

@@ -106,12 +106,6 @@ export class FGroupDirective
   }
 
   public ngOnInit(): void {
-    this.setStyle('position', 'absolute');
-    this.setStyle('transform-origin', 'center');
-    this.setStyle('user-select', 'none');
-    this.setStyle('pointer-events', 'all');
-    this.setStyle('left', '0');
-    this.setStyle('top', '0');
     super.redraw();
 
     this._mediator.execute<void>(new AddNodeToStoreRequest(this));

projects/f-flow/src/f-node/f-node.directive.ts

@@ -110,12 +110,6 @@ export class FNodeDirective
   }
 
   public ngOnInit(): void {
-    this.setStyle('position', 'absolute');
-    this.setStyle('transform-origin', 'center');
-    this.setStyle('user-select', 'none');
-    this.setStyle('pointer-events', 'all');
-    this.setStyle('left', '0');
-    this.setStyle('top', '0');
     super.redraw();
 
     this._mediator.execute<void>(new AddNodeToStoreRequest(this));