f-flow

f-flow copied to clipboard

Welcome to Foblex Flow

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

Examples

• Call Center - A simple example of a call center flow.

• Scheme Editor - A more complex example of a scheme editor.

Features

1. Node and Connection creation and manipulation.
2. Connection and Node events.
3. Reassigning Nodes and Connections.
4. Customizable Node and Connection templates.
5. Drag-and-drop support.
6. Zoom and pan support.

Getting Started and Documentation

Visit our Documentation to learn how to install and use the library in your Angular project.

Installation

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

npm install @foblex/flow

Usage

Example:

<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>

Support and Community

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.