DOCSEARCHbyAlgolia
Submit Docs

Foblex Flow

repository·main·Indexed 19 days ago

https://github.com/foblex/f-flow

An Angular-native node editor library for building production workflow builders, AI pipelines, and interactive diagram editors. It provides a high-performance set of building blocks including f-flow, f-canvas, fNode, and fConnection, with support for state management, undo/redo transactions, and custom layout engines. Version 19.1.6.

Tokens
123.6K
Snippets
315
Records
693
Agent score
66%

What's inside f-flow

  1. What is Foblex Flow and when to use it

    main

    Foblex Flow is an Angular diagram library for interactive, editable graph UIs. Unlike static charting packages or SVG helpers, it is designed for scenarios where users actively create, connect, move, and organize diagram elements.

    Use Cases

    • Custom architecture diagrams
    • UML or domain-specific modeling tools
    • Relationship editors
    • Interactive system maps
    • Large canvases with draggable connected elements

    Key Advantages

    • Real Angular UI: Nodes can contain any standard Angular component/UI, not just labels.
    • First-class Connections: Supports markers, custom content, and editable routing.
    • Editor Behaviors: Includes built-in support for zoom, selection, minimaps, and snapping.
    • Extensibility: Allows defining domain-specific rules rather than being locked into a fixed diagram grammar.

  2. Overview of the Schema Designer Example

    main

    The Schema Designer is an interactive schema-modeling reference application built using Angular and Foblex Flow. It demonstrates how to build complex, data-driven editors by combining Foblex Flow primitives with standard UI components like Angular Material.

    Key capabilities demonstrated include:

    • Dragging tables (nodes) while maintaining relations (connections).
    • Creating new relations by dragging from column outputs to compatible inputs.
    • Reassigning existing relations to different target columns.
    • Inline editing of column names, data types, and key types (primary, unique, index).
    • Managing relation cardinality via floating toolbars.
    • Canvas controls including selection areas, minimaps, zoom, and fit-to-screen.

  3. Overview of Foblex Flow capabilities

    main

    Foblex Flow is an Angular-native library for building customizable visual flow editors, workflow builders, and diagram systems. Its capabilities are categorized into:

    • State and persistence: Managing graph data and history (e.g., undo/redo, snapshots).
    • Performance and scale: Optimizations for large flows, including cached geometry and batched registry work.
    • Connection authoring and routing: Tools for defining how nodes connect, including custom routing and validation.
    • Editor UX and interactions: Features like click-to-connect, keyboard accessibility, zoom/pan, and grid-based dragging.
    • Platform and integration: Support for SSR, Angular Elements (Shadow DOM), and layout adapters like Dagre and ELK.

  4. What is Foblex Flow?

    main

    Foblex Flow is a native Angular library designed for building interactive, node-and-connection-based interfaces. It is suitable for creating workflow builders, logic configurators (low-code/no-code), call routing editors, and visual programming UIs (such as AI chains or block logic).

    Key capabilities include:

    • Dynamic Rendering: Render and connect nodes and connections dynamically.
    • Customization: Full control over node templates and visuals.
    • Interactivity: Support for drag-and-drop, zooming, panning, snapping, and grouping.
    • Modern Angular Support: Fully compatible with SSR (Server-Side Rendering), standalone components, Angular Signals, and zoneless Angular.
    • Architecture: Uses an event-driven architecture for managing nodes and links.

  5. Introduction to Foblex Flow

    main

    Foblex Flow is an Angular-native node editor library designed for building interactive node-based editors and diagram UIs. It provides core primitives for rendering flows and handles complex interaction details like hit-testing, pointer edge cases, snapping, and connection behavior, allowing developers to avoid implementing low-level drag logic and SVG path rendering from scratch.

    Core Primitives

    • f-flow: The root component for the flow.
    • f-canvas: The drawing surface for the flow.
    • Nodes: Individual elements within the flow.
    • Connectors: Ports on nodes used for connections.
    • Connections: The lines linking connectors.

    Typical Use Cases

    • Workflow and automation builders.
    • Low-code/no-code logic editors.
    • Visual programming tools and AI pipeline designers.
    • Graph-based back-office tools.

  7. Categorized Foblex Flow examples

    main

    The following categories of examples are available to help you implement specific features in your Angular application:

    • Nodes: Customizing node appearance and behavior.
    • Connectors: Working with the visual lines between nodes.
    • Connections - Editing: Managing how connections are created and modified.
    • Connections - Appearance: Styling the visual representation of connections.
    • Connections - Routing: Controlling the paths that connections take.
    • Viewport: Managing the canvas view, zooming, and panning.
    • Editor Helpers: Utility tools for the flow editor.
    • Layout Engines: Implementing automatic node positioning.
    • Reflow: Handling changes in node positions and connection updates.
    • Editor State: Managing the state of the flow (e.g., undo/redo).
    • Events: Interacting with the flow via lifecycle and user events.
    • Performance: Optimizing the flow for large-scale diagrams.

  8. Foblex Flow building blocks used in Call Center Flow

    main

    The Call Center Flow application demonstrates the following Foblex Flow components and features:

    • Root Editor: f-flow acts as the workflow-editor root.
    • Canvas & Navigation: f-canvas combined with fZoom for panning and scaling.
    • Node Creation: fExternalItem with fCreateNode for dragging nodes from a palette into the editor.
    • Nodes & Connections: fNode and the unified fConnector API for steps; fConnection with segmented routing and fConnectionMarkerArrow for directional links.
    • Connection Creation: fConnectionForCreate for drag-to-connect interactions.
    • State Management: withFlowState() for typed records, automatic gesture updates, undo/redo, and persistence.
    • Layout & Reflow: withReflowOnResize() to automatically move downstream steps when a node's size changes (e.g., when expanding a form).
    • Accessibility: withA11y() for keyboard and pointer interaction.
    • Canvas Tooling: fBackground, fCirclePattern, fLineAlignment, fSelectionArea, and fMinimap for enhanced editor functionality.

  9. Control connector connection sides

    main

    You can control which side of a connector (node) accepts or emits connections to ensure cleaner routing. This allows you to restrict a connector to a single active side at a time.

    There are two primary modes for managing these sides:

    1. Manual mode: Specify a fixed side using one of the following values: LEFT, RIGHT, TOP, or BOTTOM.
    2. Calculated mode: Use the CALCULATE mode when you want the best side to be determined automatically based on the relative positions of the nodes in a dynamic layout.

    Note that each connector can only have one active side at a time; if multiple edges are connected to the same node, they will all share that single active side.

    Precedence Rule: If a connection-side rule is also specified on an individual connection (edge), it takes precedence over the connector-side rule defined on the node.

  10. Identify the Foblex Flow architectural layers

    main

    The library is organized into four primary layers:

    1. Flow (<f-flow>): The root component that coordinates context, events, and canvas state.
    2. Canvas (<f-canvas>): The workspace that holds nodes and connections. It manages zoom, pan, and selections.
    3. Nodes: Implemented as directives that can be attached to any Angular element:
      • fNode: Turns an element into a node.
      • fConnector: Defines a source, target, bidirectional, or outlet connector.
    4. Connections (<f-connection>): An SVG path connecting a source connector to a target connector. Supports various path types (Bezier, straight, segmented, adaptive) and custom markers.

  11. When to use a selection area

    main

    A selection area is recommended when your graph interface includes:

    • Multi-select operations: Moving or deleting several nodes at once.
    • Batch operations: Preparing groups or applying changes to multiple elements.
    • Complex diagrams: Improving keyboard-and-mouse workflows in large, dense canvases where individual clicking is inefficient.

    It is often used in conjunction with grouping, alignment helpers, and undo/redo workflows.

  12. Use unified connectors and interaction architecture

    main

    Starting from v19.0.0, Foblex Flow uses a unified [fConnector] model that replaces the previous input/output split. The interaction architecture via provideFFlow(...) supports:

    • Control schemes: Configurable interaction behaviors.
    • Click-to-connect: Simplified connection workflows.
    • Keyboard accessibility: Opt-in support for keyboard-driven navigation.
    • Runtime controllers: Configurable provider features for managing flow interactions.