Foblex/f-flow

Foblex Flow - is an Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.

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.

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.