Home

Welcome to the @foblex/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.

Features

1. Node and connection components.
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.

Installation

To add @foblex/flow to your project, run the following command:

npm install @foblex/flow 

Usage

Example:

<f-flow>
    <f-canvas>
        <f-connection fOutputId="1" fInputId="2"></f-connection>
        <div fNode [fNodePosition]="{ x:100, y:100 }">
            Node content
            <div fNodeOutput fOutputId="1">Connector</div>
        </div>
        <div fNode [fNodePosition]="{ x:300, y:100 }">
            Node content
            <div fNodeInput fInputId="2">Connector</div>
        </div>
    </f-canvas>
</f-flow>

License and Access to Source Code

This library is available for use under the MIT License, allowing free use, modification, and distribution of the minified version of the library in your projects.

If you are interested in accessing the full source code of the library for purposes of study, modification, or deeper integration with your projects, we offer separate licenses for the source code. Purchasing such a license will grant you the right to use, modify, and distribute the source code according to the terms set forth in the licensing agreement.

For more information and to purchase a source code license, please contact us at Foblex.