feat(flow): add cache, connection worker, virtualization, and zoom during drag

Author: shuzarevich

projects/f-examples/extensions/minimap-example/minimap-example.component.html

@@ -1,13 +1,22 @@
 <f-flow fDraggable (fLoaded)="onLoaded()">
-  <f-canvas>
-    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
-    <div fNode [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fDragHandle>I'm a node</div>
-    <div fNode [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fDragHandle>I'm a node</div>
-    <div [fMinimapClass]="['custom-class-for-minimap']" fNode [fNodePosition]="{ x: 244, y: 164 }"  fDragHandle>I'm a node</div>
+  <f-canvas fZoom>
+    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating" />
+    <div fNode [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fDragHandle>
+      I'm a node
+    </div>
+    <div fNode [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fDragHandle>
+      I'm a node
+    </div>
+    <div
+      [fMinimapClass]="['custom-class-for-minimap']"
+      fNode
+      [fNodePosition]="{ x: 244, y: 164 }"
+      fDragHandle
+    >
+      I'm a node
+    </div>
   </f-canvas>
   <div class="any-container-or-without-container">
-    <f-minimap [fMinSize]="2000"></f-minimap>
+    <f-minimap [fMinSize]="2000" />
   </div>
-
 </f-flow>
-

projects/f-examples/extensions/selection-area/selection-area.component.html

@@ -1,15 +1,14 @@
 <f-flow fDraggable (fLoaded)="onLoaded()">
-  <f-selection-area></f-selection-area>
-  <f-canvas>
+  <f-selection-area />
+  <f-canvas fZoom>
     <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
     <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 fNode [fNodePosition]="{ x: 200, y: 0 }" fDragHandle>
       <div fNodeInput fInputId="input1" class="left"></div>
       I'm a node
     </div>
   </f-canvas>
 </f-flow>
-

projects/f-examples/extensions/selection-area/selection-area.component.ts

@@ -3,18 +3,13 @@ import { FCanvasComponent, FFlowModule } from '@foblex/flow';
 
 @Component({
   selector: 'selection-area',
-  styleUrls: [
-    './selection-area.component.scss'
-  ],
+  styleUrls: ['./selection-area.component.scss'],
   templateUrl: './selection-area.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    FFlowModule
-  ]
+  imports: [FFlowModule],
 })
 export class SelectionAreaComponent {
-
   @ViewChild(FCanvasComponent, { static: true })
   public fCanvas!: FCanvasComponent;
 

projects/f-examples/nodes/custom-nodes/custom-nodes.component.ts

@@ -28,7 +28,7 @@ export class CustomNodesComponent implements OnDestroy {
   private readonly _browser = inject(BrowserService);
 
   protected loaded(): void {
-    this._canvas()?.fitToScreen(PointExtensions.initialize(100, 100), false);
+    this._canvas()?.fitToScreen(PointExtensions.initialize(100, 100), true);
   }
 
   protected onCanvasChanged(event: FCanvasChangeEvent): void {

projects/f-examples/nodes/drag-handle/drag-handle.ts

@@ -18,25 +18,25 @@ export class DragHandle {
    * Resets the canvas scale and centers the view without animation.
    */
   protected loaded(): void {
-    this._canvas()?.resetScaleAndCenter(false);
+    this._canvas()?.resetScaleAndCenter(true);
   }
 
   /**
    * Called when one or more nodes are moved.
    * Can be used to track movements or persist state.
    *
-   * @param event - Node movement event containing affected nodes and delta.
+   * @param _event - Node movement event containing affected nodes and delta.
    */
-  protected moveNodes(event: FMoveNodesEvent): void {
+  protected moveNodes(_event: FMoveNodesEvent): void {
     // Handle node movement.
   }
 
   /**
    * Called when a single node's position changes.
    *
-   * @param position - The new position of the node.
+   * @param _position - The new position of the node.
    */
-  protected positionChanged(position: IPoint): void {
+  protected positionChanged(_position: IPoint): void {
     // Handle node position change.
   }
 }

projects/f-examples/nodes/resize-handle/resize-handle.component.ts

@@ -1,25 +1,17 @@
 import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
-import {
-  EFResizeHandleType,
-  FCanvasComponent,
-  FFlowModule
-} from '@foblex/flow';
+import { EFResizeHandleType, FCanvasComponent, FFlowModule } from '@foblex/flow';
 import { IRect } from '@foblex/2d';
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'resize-handle',
-  styleUrls: [ './resize-handle.component.scss' ],
+  styleUrls: ['./resize-handle.component.scss'],
   templateUrl: './resize-handle.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    FFlowModule,
-    MatIcon,
-  ]
+  imports: [FFlowModule, MatIcon],
 })
 export class ResizeHandleComponent {
-
   private _fCanvas = viewChild.required(FCanvasComponent);
 
   protected readonly eResizeHandleType = EFResizeHandleType;
@@ -28,7 +20,7 @@ export class ResizeHandleComponent {
     this._fCanvas().resetScaleAndCenter(false);
   }
 
-  protected onNodeSizeChanged(rect: IRect): void {
+  protected onNodeSizeChanged(_rect: IRect): void {
     //process data
   }
 }

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

@@ -1,23 +1,39 @@
-@if (columns()) {
-  <f-flow fDraggable (fLoaded)="loaded()">
+@if (cells()) {
+  <f-flow fDraggable (fLoaded)="loaded()" [fCache]="cache()">
+    <f-selection-area />
+
     <f-canvas fZoom>
-      <ng-container ngProjectAs="[fNodes]">
-        @for (column of columns(); track column; let cIndex = $index) {
-          @for (node of column; track node; let rIndex = $index) {
+      @if (virtualization()) {
+        <ng-container ngProjectAs="[fNodes]" *fVirtualFor="let cell of cells(); trackBy trackCell;">
+          <div
+            fNode
+            [fNodePosition]="{ x: 120 * cell.cIndex, y: cell.rIndex * 120 }"
+            fDragHandle
+            fNodeInput
+            [fInputId]="cell.node"
+            fNodeOutput
+            [fOutputId]="cell.node"
+          >
+            Node
+          </div>
+        </ng-container>
+      } @else {
+        <ng-container ngProjectAs="[fNodes]">
+          @for (cell of cells(); track $index) {
             <div
               fNode
-              [fNodePosition]="{ x: 120 * cIndex, y: rIndex * 120 }"
+              [fNodePosition]="{ x: 120 * cell.cIndex, y: cell.rIndex * 120 }"
               fDragHandle
               fNodeInput
-              [fInputId]="node"
+              [fInputId]="cell.node"
               fNodeOutput
-              [fOutputId]="node"
+              [fOutputId]="cell.node"
             >
               Node
             </div>
           }
-        }
-      </ng-container>
+        </ng-container>
+      }
 
       <ng-container ngProjectAs="[fConnections]">
         @if (showConnections()) {
@@ -36,6 +52,10 @@
     </f-canvas>
   </f-flow>
   <div class="examples-toolbar">
+    <f-checkbox [checked]="cache()" (change)="toggleCache()">Cache</f-checkbox>
+    <f-checkbox [checked]="virtualization()" (change)="toggleVirtualization()"
+      >Virtualization</f-checkbox
+    >
     <f-checkbox [checked]="showConnections()" (change)="toggleConnections()"
       >Show Connections</f-checkbox
     >

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

@@ -4,9 +4,17 @@
   @include flow-common.connection;
 }
 
+.f-selection-area {
+  background-color: var(--selection-area-color);
+}
+
 .f-node {
   @include flow-common.node;
   width: unset;
+
+  &.f-selected {
+    border: 1px solid var(--node-selected-border-color);
+  }
 }
 
 @include flow-common.examples-toolbar;

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

@@ -7,7 +7,6 @@ import {
   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';
@@ -16,6 +15,12 @@ import { FCheckboxComponent } from '@foblex/m-render';
 
 type Edge = { source: number; target: number };
 
+type Cell = {
+  node: number;
+  cIndex: number;
+  rIndex: number;
+};
+
 @Component({
   selector: 'stress-test',
   styleUrls: ['./stress-test.component.scss'],
@@ -24,7 +29,6 @@ type Edge = { source: number; target: number };
   standalone: true,
   imports: [
     FFlowModule,
-    NgForOf,
     FZoomDirective,
     MatFormField,
     MatLabel,
@@ -37,23 +41,37 @@ export class StressTestComponent {
   private readonly _canvas = viewChild.required(FCanvasComponent);
   private readonly _flow = viewChild(FFlowComponent);
 
-  protected readonly totals = [200, 500, 1000, 2000];
+  protected readonly totals = [200, 500, 1000, 2000, 5000];
 
   protected readonly showConnections = signal(false);
+  protected readonly virtualization = signal(false);
+  protected readonly cache = signal(false);
+
   protected readonly totalNodes = signal(200);
-  protected readonly columns = computed(() => {
+
+  protected readonly cells = computed<readonly Cell[]>(() => {
     const total = this.totalNodes();
+
     const cols = Math.ceil(Math.sqrt(total));
     const nodesPerCol = Math.ceil(total / cols);
 
     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),
-    );
+    const result: Cell[] = new Array(total);
+
+    for (let i = 0; i < total; i++) {
+      const node = i + 1;
+      const cIndex = Math.floor(i / nodesPerCol);
+      const rIndex = i - cIndex * nodesPerCol;
+
+      result[i] = { node, cIndex, rIndex };
+    }
+
+    return result;
   });
 
+  protected readonly trackCell = (_: number, c: Cell) => c.cIndex + '-' + c.rIndex;
+
   protected readonly connections = computed<Edge[]>(() => {
     const total = this.totalNodes();
     const edges: Edge[] = [];
@@ -71,4 +89,13 @@ export class StressTestComponent {
   protected toggleConnections(): void {
     this.showConnections.update((x) => !x);
   }
+
+  protected toggleVirtualization(): void {
+    this._flow()?.reset();
+    this.virtualization.update((x) => !x);
+  }
+
+  protected toggleCache(): void {
+    this.cache.update((x) => !x);
+  }
 }