https://github.com/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.
https://github.com/foblex/f-flow
angular drag-and-drop drag-nodes dynamic-flow dynamic-graph flow flowchart graph javascript node-based-ui typescript
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/foblex/f-flow
- Owner: Foblex
- License: mit
- Created: 2024-03-11T17:37:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-25T09:40:45.000Z (8 months ago)
- Last Synced: 2024-10-29T20:23:56.724Z (8 months ago)
- Topics: angular, drag-and-drop, drag-nodes, dynamic-flow, dynamic-graph, flow, flowchart, graph, javascript, node-based-ui, typescript
- Language: TypeScript
- Homepage: https://flow.foblex.com/
- Size: 66 MB
- Stars: 79
- Watchers: 5
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-node-based-uis - Foblex Flow - Angular library for rendering node-based UIs (Javascript Libraries / Renderers)
README
## Welcome to Foblex Flow
Foblex Flow is an [Angular](https://angular.dev/) 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
```mermaid
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
```
### Examples
Explore practical use cases to see Foblex Flow in action:
- [Call Center](https://github.com/Foblex/f-flow-example) - A streamlined flow example simulating a call flow.
- [Scheme Editor](https://github.com/Foblex/f-scheme-editor) - A more advanced example of a fully interactive scheme editor.
- [Visual Programming](https://flow.foblex.com/examples/f-visual-programming-flow/) - An example of a visual programming flow.
- [DB Management](https://flow.foblex.com/examples/f-db-management-flow/) - 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.
### Roadmap
We have a detailed roadmap for the development of Foblex Flow. Check out the [Roadmap](./ROADMAP.md) to see the upcoming features and milestones.
### Getting Started and Documentation
For a comprehensive guide on how to install, configure, and use Foblex Flow in your Angular project, visit our [Documentation](https://flow.foblex.com/docs/get-started).
### Installation
To add Foblex Flow to your project, use the following npm command:
```bash
npm install @foblex/flow
```
### Usage Example
Here’s a simple example of how you can use Foblex Flow to create draggable nodes and connections:
```html
Drag me
Drag me
```
### Community and Support
For questions, feedback, and support, visit the [Foblex Portal](https://flow.foblex.com/) to connect with the community and the development team.
You can also report [issues](https://github.com/Foblex/flow/issues) and request [features](https://github.com/Foblex/flow/discussions) on the [GitHub repository](https://github.com/Foblex/flow).
### License
This library is available for use under the [MIT License](./LICENSE).
For more information please contact our [support](mailto:[email protected]).