[AF-374] Virtualization

apps/angular-demo/src/app/app.component.html

@@ -6,10 +6,8 @@
     [config]="config"
     (diagramInit)="onDiagramInit($event)"
     (selectionChanged)="onSelectionChanged($event)"
-    (selectionMoved)="onSelectionMoved($event)"
     (groupMembershipChanged)="onGroupMembershipChanged($event)"
     (selectionRotated)="onSelectionRotated($event)"
-    (viewportChanged)="onViewportChanged($event)"
     (edgeDrawn)="onEdgeDrawn($event)"
     (clipboardPasted)="onClipboardPasted($event)"
     (nodeResized)="onNodeResized($event)"
@@ -19,6 +17,9 @@
     <ng-diagram-background type="grid"></ng-diagram-background>
   </ng-diagram>
   <ng-diagram-minimap [nodeStyle]="nodeStyle" [minimapNodeTemplateMap]="minimapNodeTemplateMap" />
-  <app-toolbar (reinitializeModelClick)="onReinitializeModel()" />
+  <app-toolbar
+    (testVirtualizationClick)="enableVirtualizationTest()"
+    (reinitializeModelClick)="onReinitializeModel()"
+  />
   <app-palette [model]="paletteModel" />
 </div>

apps/angular-demo/src/app/app.component.ts

@@ -19,18 +19,18 @@ import {
   PaletteItemDroppedEvent,
   provideNgDiagram,
   SelectionChangedEvent,
-  SelectionMovedEvent,
   SelectionRemovedEvent,
   SelectionRotatedEvent,
-  ViewportChangedEvent,
   type Edge,
   type EdgeLabel,
   type Node,
   type Port,
 } from 'ng-diagram';
 import { defaultModel } from './data/default-model';
+import { generateModel } from './data/generate-model';
 import { nodeTemplateMap } from './data/node-template';
 import { paletteModel } from './data/palette-model';
+import { virtualizationConfigOverrides, virtualizationTestConfig } from './data/virtualization-test.config';
 import { ButtonEdgeComponent } from './edge-template/button-edge/button-edge.component';
 import { CustomPolylineEdgeComponent } from './edge-template/custom-polyline-edge/custom-polyline-edge.component';
 import { DashedEdgeComponent } from './edge-template/dashed-edge/dashed-edge.component';
@@ -67,7 +67,7 @@ export class AppComponent {
 
   minimapNodeTemplateMap = new NgDiagramMinimapNodeTemplateMap([['image', ImageMinimapNodeComponent]]);
 
-  config = {
+  config: NgDiagramConfig = {
     zoom: {
       max: 2,
       zoomToFit: {
@@ -102,7 +102,17 @@ export class AppComponent {
         bindings: [{ key: 'd' }, { key: 'ArrowRight' }],
       },
     ]),
-  } satisfies NgDiagramConfig;
+  };
+
+  model = initializeModel(defaultModel);
+
+  enableVirtualizationTest(): void {
+    this.config = {
+      ...this.config,
+      ...virtualizationConfigOverrides,
+    };
+    this.model = initializeModel(generateModel(virtualizationTestConfig.nodeCount), this.injector);
+  }
 
   onDiagramInit(event: DiagramInitEvent): void {
     console.log('INIT');
@@ -133,19 +143,6 @@ export class AppComponent {
     });
   }
 
-  onSelectionMoved(event: SelectionMovedEvent): void {
-    console.log('Selection Moved:', {
-      nodes: event.nodes.map((n: Node) => n.id),
-    });
-  }
-
-  onViewportChanged(event: ViewportChangedEvent): void {
-    console.log('Viewport Changed:', {
-      current: event.viewport,
-      previous: event.previousViewport,
-    });
-  }
-
   onEdgeDrawn(event: EdgeDrawnEvent): void {
     console.log('Edge Drawn:', {
       edge: event.edge.id,
@@ -213,11 +210,15 @@ export class AppComponent {
   }
 
   onReinitializeModel(): void {
+    this.config = {
+      ...this.config,
+      virtualization: {
+        enabled: false,
+      },
+    };
     this.model = initializeModel(defaultModel, this.injector);
   }
 
-  model = initializeModel(defaultModel);
-
   nodeStyle(node: Node): MinimapNodeStyle {
     const style: MinimapNodeStyle = {};
 

apps/angular-demo/src/app/data/default-model.ts

@@ -109,6 +109,12 @@ export const defaultModel: DiagramModel = {
       data: { label: 'not draggable' },
       draggable: false,
     },
+    {
+      id: '17',
+      type: 'port-toggle',
+      position: { x: 100, y: 850 },
+      data: { text: 'Port Toggle Test' },
+    },
   ],
   edges: [
     {

apps/angular-demo/src/app/data/generate-model.ts

@@ -0,0 +1,51 @@
+import { type Edge, type Node } from 'ng-diagram';
+
+export function generateModel(nodeCount: number): { nodes: Node[]; edges: Edge[] } {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const cols = Math.ceil(Math.sqrt(nodeCount));
+  const rows = Math.ceil(nodeCount / cols);
+
+  const spacingX = 200;
+  const spacingY = 150;
+
+  for (let i = 0; i < nodeCount; i++) {
+    const row = Math.floor(i / cols);
+    const col = i % cols;
+
+    nodes.push({
+      id: `node-${i}`,
+      position: {
+        x: col * spacingX,
+        y: row * spacingY,
+      },
+      data: { label: `Node ${i}` },
+    });
+
+    if (col < cols - 1 && i + 1 < nodeCount) {
+      edges.push({
+        id: `edge-h-${i}`,
+        source: `node-${i}`,
+        target: `node-${i + 1}`,
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        data: {},
+      });
+    }
+
+    if (row < rows - 1 && i + cols < nodeCount && col % 5 === 0) {
+      edges.push({
+        id: `edge-v-${i}`,
+        source: `node-${i}`,
+        target: `node-${i + cols}`,
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        data: {},
+      });
+    }
+  }
+
+  console.log(`Generated ${nodes.length} nodes and ${edges.length} edges`);
+  return { nodes, edges };
+}

apps/angular-demo/src/app/data/node-template.ts

@@ -4,6 +4,7 @@ import { CustomizedDefaultNodeComponent } from '../node-template/customized-defa
 import { GroupNodeComponent } from '../node-template/group-node/group-node.component';
 import { ImageNodeComponent } from '../node-template/image-node/image-node.component';
 import { InputFieldNodeComponent } from '../node-template/input-field-node/input-field-node.component';
+import { PortToggleNodeComponent } from '../node-template/port-toggle-node/port-toggle-node.component';
 import { ResizableNodeComponent } from '../node-template/resizable-node/resizable-node.component';
 
 export enum NodeTemplateType {
@@ -13,6 +14,7 @@ export enum NodeTemplateType {
   CustomizedDefault = 'customized-default',
   Group = 'custom-group',
   Chip = 'chip',
+  PortToggle = 'port-toggle',
 }
 
 export const nodeTemplateMap = new NgDiagramNodeTemplateMap([
@@ -22,4 +24,5 @@ export const nodeTemplateMap = new NgDiagramNodeTemplateMap([
   [NodeTemplateType.Group, GroupNodeComponent],
   [NodeTemplateType.CustomizedDefault, CustomizedDefaultNodeComponent],
   [NodeTemplateType.Chip, ChipNodeComponent],
+  [NodeTemplateType.PortToggle, PortToggleNodeComponent],
 ]);

apps/angular-demo/src/app/data/virtualization-test.config.ts

@@ -0,0 +1,12 @@
+import { type NgDiagramConfig } from 'ng-diagram';
+
+export const virtualizationTestConfig = {
+  /** Number of nodes to generate for virtualization test */
+  nodeCount: 5000,
+} as const;
+
+export const virtualizationConfigOverrides: Partial<NgDiagramConfig> = {
+  virtualization: {
+    enabled: true,
+  },
+};

apps/angular-demo/src/app/node-template/port-toggle-node/port-toggle-node.component.html

@@ -0,0 +1,18 @@
+<label class="port-toggle-label">
+  <input
+    class="port-toggle-checkbox"
+    type="checkbox"
+    [checked]="showPorts()"
+    (change)="togglePorts()"
+    (keydown)="$event.stopPropagation()"
+    (keypress)="$event.stopPropagation()"
+    (keyup)="$event.stopPropagation()"
+  />
+  Render Ports
+</label>
+<div>
+  @if (showPorts()) {
+    <ng-diagram-port id="port-left" type="both" side="left" />
+    <ng-diagram-port id="port-right" type="both" side="right" />
+  }
+</div>

apps/angular-demo/src/app/node-template/port-toggle-node/port-toggle-node.component.scss

@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  background-color: var(--ngd-node-bg-primary-default);
+  border: var(--ngd-node-border-size) solid var(--ngd-node-border-color);
+  color: var(--ngd-txt-primary-default);
+  border-radius: var(--ngd-node-border-radius);
+  min-width: 150px;
+
+  .port-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+
+    .port-toggle-checkbox {
+      cursor: pointer;
+    }
+  }
+}

apps/angular-demo/src/app/node-template/port-toggle-node/port-toggle-node.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { NgDiagramNodeSelectedDirective, NgDiagramNodeTemplate, NgDiagramPortComponent, Node } from 'ng-diagram';
+
+@Component({
+  selector: 'app-port-toggle-node',
+  imports: [NgDiagramPortComponent],
+  templateUrl: './port-toggle-node.component.html',
+  styleUrls: ['./port-toggle-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgDiagramNodeSelectedDirective, inputs: ['node'] }],
+  host: {
+    '[class.ng-diagram-port-hoverable]': 'true',
+  },
+})
+export class PortToggleNodeComponent implements NgDiagramNodeTemplate<{ text: string }> {
+  node = input.required<Node<{ text: string }>>();
+
+  showPorts = signal(true);
+
+  togglePorts(): void {
+    this.showPorts.update((v) => !v);
+  }
+}

apps/angular-demo/src/app/toolbar/toolbar.component.html

@@ -5,5 +5,6 @@
   <button [disabled]="!isNodeSelected()" (click)="onChangeNodeTypeClick()">Change Node Type</button>
   <button (click)="onZoomToFitClick()">Zoom to fit</button>
   <button (click)="onAsyncTransactionWithMeasurementsDemo()">Async + Measurements + Zoom</button>
+  <button (click)="testVirtualizationClick.emit()">Test Virtualization</button>
   <button (click)="reinitializeModelClick.emit()">Reinitialize Model</button>
 </div>

apps/angular-demo/src/app/toolbar/toolbar.component.ts

@@ -24,6 +24,7 @@ export class ToolbarComponent {
   private readonly nodeTypes = Array.from(nodeTemplateMap.keys()) as NodeTemplateType[];
 
   reinitializeModelClick = output<void>();
+  testVirtualizationClick = output<void>();
 
   isNodeSelected = computed(() => this.ngDiagramSelectionService.selection().nodes.length > 0);
 

apps/docs/src/components/angular/examples/custom-model/diagram.component.ts

@@ -95,8 +95,8 @@ export class DiagramComponent {
           id: 'edge-1',
           source: '1',
           target: '2',
-          sourcePort: 'port-right',
-          targetPort: 'port-left',
+          sourcePort: 'port-bottom',
+          targetPort: 'port-top',
           data: {},
         },
       ],

apps/docs/src/components/angular/nodes/custom-default-node/node/node.component.ts

@@ -8,7 +8,7 @@ import {
 @Component({
   imports: [NgDiagramBaseNodeTemplateComponent],
   template: `
-    <ng-diagram-base-node-template [node]="node">
+    <ng-diagram-base-node-template [node]="node()">
       <input
         type="text"
         [placeholder]="'Enter text'"

apps/docs/src/content/docs/api/Internals/ActionState.md

@@ -46,6 +46,14 @@ State related to linking nodes
 
 ***
 
+### panning?
+
+> `optional` **panning**: `PanningActionState`
+
+State related to panning the viewport
+
+***
+
 ### resize?
 
 > `optional` **resize**: [`ResizeActionState`](/docs/api/internals/resizeactionstate/)