$ show Foblex/f-flow
Foblex Flow is an Angular-native library for building visual node editors, workflow builders, diagram editors, and AI pipeline UIs. It provides a comprehensive set of components and directives (f-flow, f-canvas, f-node, f-connection, f-connector, f-draggable, f-minimap, f-selection-area, etc.) along with plugins for managed state (undo/redo), accessibility (keyboard navigation), layout engines (dagre, elk), reflow-on-resize, and control schemes. The repository is a monorepo (NX) containing the core library, layout packages, a markdown renderer, a documentation portal with SSR, and multiple example applications (call center, schema designer, tournament bracket, UML diagram, marketing automation). The library is production-ready, actively maintained, and demonstrates high craftsmanship with decoupled architecture (mediator pattern), signal-based state management, Web Worker offloading for connection rendering, and extensive E2E testing.
The LLM identified 5 files worth highlighting for reuse:
A typed, signal-based graph store with undo/redo, batching, and automatic gesture handling. It provides `injectFlowState()` for typed access, `beginBatch`/`commit`/`amendCurrent` for atomic updates, and overridable CRUD methods. This component is self-contained and could be extracted as a generic undo/redo store for any graph-like data structure.
Implements spatial keyboard navigation for flow editors, including topology-aware neighbor search, grab-and-move, connection creation, and screen-reader announcements with localizable messages. It is a standalone controller that can be reused in any Angular application requiring accessible graph navigation.
A pure, injectable planner that computes node shifts when a node is resized. Supports configurable modes (X_RANGE, DOWNSTREAM_CONNECTIONS), scopes (GROUP, CONNECTED_SUBGRAPH), collision resolvers (STOP, CHAIN_PUSH), and axis constraints. It is well-tested and can be extracted as a standalone layout utility for any grid-based editor.
Builds SVG path data for connections based on source/target rectangles and connection behavior (fixed, floating). It uses a `ConnectionBehaviourBuilder` to resolve endpoint sides and generates cubic bezier or polyline paths. This is a self-contained geometry utility that could be reused in any SVG-based connection rendering system.
A generic registry for managing items by ID with lazy compaction (removes deleted items on next iteration). Used for nodes, connections, and connectors. It is a simple, efficient data structure that can be extracted for any ID-based collection management.