Foblex Flow
Introduction
Overview
Nodes
Custom Nodes
Drag Handle
Node Selection
Resize Handle
Rotate Handle
Grouping
Drag to Group
Connectors
Node as Connector
Connector Inside Node
Connector Outlet
Limiting Connections
Connection Rules
Connectable Side
Updated
Connections - Editing
Drag to Connect
Drag to Reassign
Create Node on Connection Drop
Remove Connection on Drop
Assign Node to Connection on Drop
Auto Snap
Connections - Appearance
Connection Types (Straight, Segment, Bezier, Adaptive Curve)
Custom Connection Type
Connection Behaviours
Connection Markers
Connection Content
Updated
Connection Gradients
Updated
Connections - Routing
Connection Waypoints
New
Connection Connectable Side
New
Viewport
Minimap
Zoom
Background
Auto Pan
New
Canvas Layer Ordering
New
Editor Helpers
Selection Area
Magnetic Lines
New
Magnetic Rects
New
Grid System
Add Node from Palette
Help in Positioning (Legacy)
Deprecated
Layout Engines
Dagre Layout
New
Dagre Auto Layout
New
ELK.js Layout
New
ELK.js Auto Layout
New
Reflow
Reflow on Resize
New
Editor State
Cut/Copy/Paste
Undo/Redo
Undo/Redo V2
Events
Drag Start/End Events
Custom Event Triggers
Performance
Large Scene Performance
Connection Redraw Performance
Updated
Reference Apps
AI Low-Code Platform
Updated
Schema Designer
Updated
Call Center Flow
Updated
UML Diagram
Updated
Tournament Bracket
Updated
Foblex Flow

Large Scene Performance

Description

This example focuses on large-scene performance in Foblex Flow. It lets you compare several rendering strategies, including fCache and *fVirtualFor, while keeping the canvas fully interactive.

What you can test in this demo:

  • Large node counts: 200, 500, 1000, 2000, and 5000 nodes.
  • Cache toggle: enables fCache on f-flow to reduce repeated geometry work during redraws.
  • Virtualization toggle: uses *fVirtualFor to progressively render projected nodes and compare startup/render cost against the regular @for flow.
  • Connections toggle: adds a chained connection layer between nodes so you can compare node-only and node-plus-connection workloads.
  • Real interactions under load: drag, zoom, selection area, and fit-to-screen remain enabled.

Why this example is useful:

  • Measure how your editor behaves when the scene size grows quickly.
  • Compare the visual and runtime impact of cache and virtualization independently.
  • Check whether your layout and interaction choices still feel responsive once optional connections are enabled.

Example

[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/stress-test/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/stress-test/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/stress-test/example.scss

Edit this page on GitHub