Welcome to Foblex Flow

Foblex Flow is an Angular library built to simplify the creation and management of dynamic, interactive flows. Whether you're developing complex systems or lightweight visualizations, Foblex Flow provides a robust set of tools to help automate node manipulation and inter-node connections with ease. It's fully compatible with Angular 12+, Server-Side Rendering (SSR), and the Composition API.

Architecture

flowchart TD
 subgraph FlowComponentProviders["Flow Component Providers"]
        FComponentsStorage["FComponentsStorage"]
        FMediator["FMediator"]
 end
 subgraph FlowComponentContent["Flow Component Content"]
        FBackgroundComponent["f-background"]
        FLineAlignmentComponent["f-line-alignment"]
        FCanvasComponent["f-canvas"]
        FSelectionAreaComponent["f-selection-area"]
        FMinimapComponent["f-minimap"]
 end
 subgraph CanvasComponentContent["Canvas Component Content"]
        FConnectionComponent["f-connections"]
        FNodeComponent["f-nodes"]
 end
 subgraph DraggableDirectiveMethods["Draggable Directive Methods"]
        onPointerDown["onPointerDown"]
        prepareDragSequence["prepareDragSequence"]
        onPointerMove["onPointerMove"]
        endDragSequence["endDragSequence"]
 end
    FoblexFlow --> FlowComponent["Flow Component"]
    FlowComponent --> FlowComponentContent & FDraggableDirective & FlowComponentProviders
    FCanvasComponent --> CanvasComponentContent
    FBackgroundComponent --> Features["Features For Each Component Registered"]
    FLineAlignmentComponent --> Features
    FSelectionAreaComponent --> Features
    FMinimapComponent --> Features
    CanvasComponentContent --> Features
    FMediator <--> InjectFeature["Inject Feature"]
    Features --> InjectFeature
    onPointerDown --> InjectFeature
    prepareDragSequence --> InjectFeature
    onPointerMove --> InjectFeature
    endDragSequence --> InjectFeature
    InjectFeature --> Redraw
    FDraggableDirective --> DraggableDirectiveMethods

Loading

Examples

Explore practical use cases to see Foblex Flow in action:

• Call Center - A streamlined flow example simulating a call flow.

• Scheme Editor - A more advanced example of a fully interactive scheme editor.

• Visual Programming - An example of a visual programming flow.

• DB Management - An example of a database management flow.

Features

1. Node and Connection Creation: Dynamically generate and manipulate nodes and their connections.
2. Event-Driven Architecture: Built-in events for nodes and connections to allow seamless interaction handling.
3. Reassign Connections: Easily reassign connections between nodes, allowing for flexible flow adjustments.
4. Custom Templates: Fully customizable node and connection templates for tailored visual representation.
5. Drag-and-Drop: Simplified drag-and-drop functionality for intuitive flow manipulation.
6. Zoom and Pan Support: Explore large flows with smooth zooming and panning controls.

Getting Started and Documentation

For a comprehensive guide on how to install, configure, and use Foblex Flow in your Angular project, visit our Documentation.

Installation

To add Foblex Flow to your project, use the following npm command:

npm install @foblex/flow

Usage Example

Here’s a simple example of how you can use Foblex Flow to create draggable nodes and connections:

<f-flow fDraggable>
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1"></f-connection>
    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right"> Drag me</div>
    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left"> Drag me</div>
  </f-canvas>
</f-flow>

Community and Support

For questions, feedback, and support, visit the Foblex Portal to connect with the community and the development team. You can also report issues and request features on the GitHub repository.

License

This library is available for use under the MIT License.

For more information please contact our support.