{"id":17617351,"url":"https://github.com/foblex/f-flow","last_synced_at":"2025-04-07T08:19:17.766Z","repository":{"id":227757617,"uuid":"770521316","full_name":"Foblex/f-flow","owner":"Foblex","description":"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.","archived":false,"fork":false,"pushed_at":"2024-10-25T09:40:45.000Z","size":69205,"stargazers_count":79,"open_issues_count":3,"forks_count":15,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-29T20:23:56.724Z","etag":null,"topics":["angular","drag-and-drop","drag-nodes","dynamic-flow","dynamic-graph","flow","flowchart","graph","javascript","node-based-ui","typescript"],"latest_commit_sha":null,"homepage":"https://flow.foblex.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Foblex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["foblex"]}},"created_at":"2024-03-11T17:37:14.000Z","updated_at":"2024-10-29T12:11:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"0b2be4ef-66eb-4cbf-8409-eeba74ecc021","html_url":"https://github.com/Foblex/f-flow","commit_stats":{"total_commits":211,"total_committers":2,"mean_commits":105.5,"dds":0.004739336492891044,"last_synced_commit":"a26ed429ae089c569298b7d75749b76344705fa7"},"previous_names":["foblex/flow"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foblex","download_url":"https://codeload.github.com/Foblex/f-flow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615385,"owners_count":20967184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","drag-and-drop","drag-nodes","dynamic-flow","dynamic-graph","flow","flowchart","graph","javascript","node-based-ui","typescript"],"created_at":"2024-10-22T19:12:47.837Z","updated_at":"2025-04-07T08:19:17.725Z","avatar_url":"https://github.com/Foblex.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://flow.foblex.com/\"\u003e\n    \u003cimg style=\"margin: auto\" src=\"https://github.com/user-attachments/assets/ee1d39f6-0a89-4cb9-8dee-1652aba82e69\" alt=\"Foblex Flow Logo\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@foblex/flow\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@foblex/flow.svg?logo=npm\u0026logoColor=fff\u0026label=Release\u0026color=limegreen\" alt=\"NPM Release\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/foblex/f-flow/actions/workflows/tests-ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/foblex/f-flow/actions/workflows/tests-ci.yml/badge.svg\" alt=\"Build Status\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Welcome to Foblex Flow\n\nFoblex Flow is an [Angular](https://angular.dev/) library built to simplify the creation and management of dynamic, interactive flows. \nWhether 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.\n\n### Architecture\n\n```mermaid\nflowchart TD\n subgraph FlowComponentProviders[\"Flow Component Providers\"]\n        FComponentsStorage[\"FComponentsStorage\"]\n        FMediator[\"FMediator\"]\n end\n subgraph FlowComponentContent[\"Flow Component Content\"]\n        FBackgroundComponent[\"f-background\"]\n        FLineAlignmentComponent[\"f-line-alignment\"]\n        FCanvasComponent[\"f-canvas\"]\n        FSelectionAreaComponent[\"f-selection-area\"]\n        FMinimapComponent[\"f-minimap\"]\n end\n subgraph CanvasComponentContent[\"Canvas Component Content\"]\n        FConnectionComponent[\"f-connections\"]\n        FNodeComponent[\"f-nodes\"]\n end\n subgraph DraggableDirectiveMethods[\"Draggable Directive Methods\"]\n        onPointerDown[\"onPointerDown\"]\n        prepareDragSequence[\"prepareDragSequence\"]\n        onPointerMove[\"onPointerMove\"]\n        endDragSequence[\"endDragSequence\"]\n end\n    FoblexFlow --\u003e FlowComponent[\"Flow Component\"]\n    FlowComponent --\u003e FlowComponentContent \u0026 FDraggableDirective \u0026 FlowComponentProviders\n    FCanvasComponent --\u003e CanvasComponentContent\n    FBackgroundComponent --\u003e Features[\"Features For Each Component Registered\"]\n    FLineAlignmentComponent --\u003e Features\n    FSelectionAreaComponent --\u003e Features\n    FMinimapComponent --\u003e Features\n    CanvasComponentContent --\u003e Features\n    FMediator \u003c--\u003e InjectFeature[\"Inject Feature\"]\n    Features --\u003e InjectFeature\n    onPointerDown --\u003e InjectFeature\n    prepareDragSequence --\u003e InjectFeature\n    onPointerMove --\u003e InjectFeature\n    endDragSequence --\u003e InjectFeature\n    InjectFeature --\u003e Redraw\n    FDraggableDirective --\u003e DraggableDirectiveMethods\n```\n\n### Examples\n\nExplore practical use cases to see Foblex Flow in action:\n\n- [Call Center](https://github.com/Foblex/f-flow-example) - A streamlined flow example simulating a call flow.\n\n- [Scheme Editor](https://github.com/Foblex/f-scheme-editor) - A more advanced example of a fully interactive scheme editor.\n\n- [Visual Programming](https://flow.foblex.com/examples/f-visual-programming-flow/) - An example of a visual programming flow.\n\n- [DB Management](https://flow.foblex.com/examples/f-db-management-flow/) - An example of a database management flow.\n\n### Features\n\n1. **Node and Connection Creation:** Dynamically generate and manipulate nodes and their connections.\n2. **Event-Driven Architecture:** Built-in events for nodes and connections to allow seamless interaction handling.\n3. **Reassign Connections:** Easily reassign connections between nodes, allowing for flexible flow adjustments.\n4. **Custom Templates:** Fully customizable node and connection templates for tailored visual representation.\n5. **Drag-and-Drop:** Simplified drag-and-drop functionality for intuitive flow manipulation.\n6. **Zoom and Pan Support:** Explore large flows with smooth zooming and panning controls.\n\n### Roadmap\n\nWe have a detailed roadmap for the development of Foblex Flow. Check out the [Roadmap](./ROADMAP.md) to see the upcoming features and milestones.\n\n### Getting Started and Documentation\n\nFor 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).\n\n### Installation\n\nTo add Foblex Flow to your project, use the following npm command:\n\n```bash\nnpm install @foblex/flow\n```\n\n### Usage Example\n\nHere’s a simple example of how you can use Foblex Flow to create draggable nodes and connections:\n\n```html\n\n\u003cf-flow fDraggable\u003e\n  \u003cf-canvas\u003e\n    \u003cf-connection fOutputId=\"output1\" fInputId=\"input1\"\u003e\u003c/f-connection\u003e\n    \u003cdiv fNode fDragHandle [fNodePosition]=\"{ x: 24, y: 24 }\" fNodeOutput fOutputId=\"output1\" fOutputConnectableSide=\"right\"\u003e Drag me\u003c/div\u003e\n    \u003cdiv fNode fDragHandle [fNodePosition]=\"{ x: 244, y: 24 }\" fNodeInput fInputId=\"input1\" fInputConnectableSide=\"left\"\u003e Drag me\u003c/div\u003e\n  \u003c/f-canvas\u003e\n\u003c/f-flow\u003e\n```\n\n### Community and Support\n\nFor questions, feedback, and support, visit the [Foblex Portal](https://flow.foblex.com/) to connect with the community and the development team.\nYou 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).\n\n### License\n\nThis library is available for use under the [MIT License](./LICENSE).\n\nFor more information please contact our [support](mailto:support@foblex.com).\n\n","funding_links":["https://github.com/sponsors/foblex"],"categories":["Javascript Libraries"],"sub_categories":["Renderers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoblex%2Ff-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoblex%2Ff-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoblex%2Ff-flow/lists"}