Foblex/f-flow v18.2.0

18.2.0 - Caching, Virtualization, Connection Worker, and Interaction Refresh

on GitHub

This release focuses on performance and large-scale editor scenarios.

It adds optional caching, progressive virtualization, worker-assisted connection calculation, and a broad interaction refresh across drag-and-drop flows. It also expands examples, tests, and docs around large scenes and product-style editors.

✨ Highlights

• Optional caching for f-flow to reduce repeated geometry work during redraws.
• *fVirtualFor for large scenes so projected node lists can be rendered progressively.
• Connection Worker for worker-assisted connection calculation in heavier diagrams.
• Zoom during drag so wheel zoom is no longer blocked for the whole drag session.
• Interaction architecture refresh across external item drag, minimap drag, resize, rotate, connection create/reassign, and waypoint drag.
• Examples, tests, and docs refresh with stronger large-scene and production-style reference demos.

🚀 New / Expanded APIs

• Added fCache input on f-flow.
• Exposed public f-cache module.
• Exposed public f-virtual module.
• Exposed public f-connection-worker module.
• Added fNodeRenderLimit for minimap scenarios with very large scenes.

🧩 Interaction Improvements

• Wheel zoom now stays available during supported drag-and-drop flows.
• Connection redraws are more scalable with chunked updates and improved change streams.
• Resize flows keep dependent connections in sync, including soft-parent scenarios.
• External item, minimap, resize, and rotate internals were reworked for a more consistent interaction model.

📚 Examples, Docs, and Reference Apps

• Refreshed example structure and metadata across the portal.
• Added stronger performance-oriented demos for:
  • Large Scene Performance
  • Connection Redraw Performance
• Elevated the AI Low-Code Platform demo as the flagship reference app:
  • JSON import/export
  • multiple themes
  • right-side config panels
  • validation reflected back onto the nodes
  • undo/redo, persistence, multi-select, animated connections
• Expanded Cypress regression coverage for examples and interactions.
• Reworked and cleaned up larger reference apps like UML and Tournament Bracket.

⚠️ Breaking Changes

External Item directive class names were renamed:

• FExternalItemDirective → FExternalItem
• FExternalItemPlaceholderDirective → FExternalItemPlaceholder
• FExternalItemPreviewDirective → FExternalItemPreview

Migration

Update imports from:

import {
  FExternalItemDirective,
  FExternalItemPlaceholderDirective,
  FExternalItemPreviewDirective,
} from '@foblex/flow';

to:

import {
  FExternalItem,
  FExternalItemPlaceholder,
  FExternalItemPreview,
} from '@foblex/flow';

🔧 Install / Update

Angular CLI:

ng add @foblex/flow

NX:

nx g @foblex/flow:add

🌍 Links

• Docs: https://flow.foblex.com/
• Examples: https://flow.foblex.com/examples
• Repo: https://github.com/Foblex/f-flow

If Foblex Flow has been useful in your work, a GitHub star is always appreciated.