https://github.com/foblex/f-scheme-editor
This is an example of using the @foblex/flow library in an Angular project. You can use this example as a starting point for your own project.
https://github.com/foblex/f-scheme-editor
Last synced: 9 months ago
JSON representation
This is an example of using the @foblex/flow library in an Angular project. You can use this example as a starting point for your own project.
- Host: GitHub
- URL: https://github.com/foblex/f-scheme-editor
- Owner: Foblex
- License: mit
- Created: 2024-07-02T11:27:52.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T22:21:31.000Z (about 2 years ago)
- Last Synced: 2025-03-30T06:31:45.643Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://foblex.github.io/f-scheme-editor/
- Size: 2.21 MB
- Stars: 6
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🧩 Visual Scheme Editor Example using @foblex/flow
This project demonstrates how to build an interactive **node-based diagram editor** using the [@foblex/flow](https://github.com/Foblex/f-flow) Angular library.
It includes features such as zooming, drag & drop, node creation, customizable connections, and full control over layout and behavior.
Additionally, this example integrates:
- ✅ Persistent **IndexedDB** state saving
- 🎨 Custom **color picker** (inspired by Figma)
- 🖼️ Custom **image picker** for background or node assets
- 🧱 UI components built using **Angular Material**
[DEMO](https://foblex.github.io/f-scheme-editor)
---
### 🎬 Preview (Video)
You can also watch a short demo video (example.mov) available in the repository:
[LINK](https://youtu.be/G66MoUwrIbo)
## Used library capabilities
- [x] Zoom (with mouse wheel, double click, and buttons)
- [x] Select elements (single selection using the mouse, multiple selection using the Shift key and the mouse)
- [x] Drag and drop
- [x] Create new connections
- [x] Reassign connections
- [x] Connection text
- [x] Change connection markers
- [x] Change connection type
- [x] Change connection behavior
- [x] Change connection style
- [x] Change connection text
- [x] Create new nodes using drag and drop from the palette
- [x] Draggable background
- [x] Change background
- [x] Save/load flow state from localStorage
- [x] Custom image picker (like in Figma)
- [x] Custom color picker
- [x] Angular Material UI components
## Installation
Run `npm install` to install the required packages.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## License
This example is distributed under the MIT License. See the LICENSE file for more information.