{"id":21515483,"url":"https://github.com/foblex/f-scheme-editor","last_synced_at":"2025-10-30T14:41:28.317Z","repository":{"id":248602410,"uuid":"823075378","full_name":"Foblex/f-scheme-editor","owner":"Foblex","description":"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.","archived":false,"fork":false,"pushed_at":"2024-07-15T22:21:31.000Z","size":2316,"stargazers_count":6,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T06:31:45.643Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://foblex.github.io/f-scheme-editor/","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":null,"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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["foblex"]}},"created_at":"2024-07-02T11:27:52.000Z","updated_at":"2024-10-13T15:52:07.000Z","dependencies_parsed_at":"2024-07-16T02:34:00.763Z","dependency_job_id":"225a82b5-942c-4a0e-9697-5ed32dd31bb8","html_url":"https://github.com/Foblex/f-scheme-editor","commit_stats":null,"previous_names":["foblex/f-scheme-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-scheme-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-scheme-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-scheme-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Ff-scheme-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foblex","download_url":"https://codeload.github.com/Foblex/f-scheme-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250553993,"owners_count":21449515,"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":[],"created_at":"2024-11-23T23:55:29.722Z","updated_at":"2025-10-30T14:41:28.312Z","avatar_url":"https://github.com/Foblex.png","language":"TypeScript","funding_links":["https://github.com/sponsors/foblex"],"categories":[],"sub_categories":[],"readme":"# 🧩 Visual Scheme Editor Example using @foblex/flow\n\nThis project demonstrates how to build an interactive **node-based diagram editor** using the [@foblex/flow](https://github.com/Foblex/f-flow) Angular library.\n\nIt includes features such as zooming, drag \u0026 drop, node creation, customizable connections, and full control over layout and behavior.\n\nAdditionally, this example integrates:\n- ✅ Persistent **IndexedDB** state saving\n- 🎨 Custom **color picker** (inspired by Figma)\n- 🖼️ Custom **image picker** for background or node assets\n- 🧱 UI components built using **Angular Material**\n\n[DEMO](https://foblex.github.io/f-scheme-editor)\n\n\u003cp \u003e\n  \u003cimg src=\"example.png\" width=\"600\" alt=\"Foblex Flow Example Screenshot\" /\u003e\n\u003c/p\u003e\n\n\u003c!-- Video available in the repository --\u003e\n\n---\n\n### 🎬 Preview (Video)\n\nYou can also watch a short demo video (example.mov) available in the repository:\n\n[LINK](https://youtu.be/G66MoUwrIbo)\n\n## Used library capabilities\n\n- [x] Zoom (with mouse wheel, double click, and buttons)\n- [x] Select elements (single selection using the mouse, multiple selection using the Shift key and the mouse)\n- [x] Drag and drop\n- [x] Create new connections\n- [x] Reassign connections\n- [x] Connection text\n- [x] Change connection markers\n- [x] Change connection type\n- [x] Change connection behavior\n- [x] Change connection style\n- [x] Change connection text\n- [x] Create new nodes using drag and drop from the palette\n- [x] Draggable background\n- [x] Change background\n- [x] Save/load flow state from localStorage\n- [x] Custom image picker (like in Figma)\n- [x] Custom color picker\n- [x] Angular Material UI components\n\n## Installation\n\nRun `npm install` to install the required packages.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## License\n\nThis example is distributed under the MIT License. See the LICENSE file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoblex%2Ff-scheme-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoblex%2Ff-scheme-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoblex%2Ff-scheme-editor/lists"}