Add export to PNG, SVG, and animated GIF#5
Merged
Conversation
- Implemented GIF export feature using gif.js, allowing users to record flowcharts as GIFs. - Added export options for PNG and SVG formats. - Introduced a dropdown menu in the toolbar for export options. - Enhanced Toolbar component to manage export states and handle user interactions. - Updated styles for the export dropdown and options to improve UI/UX. - Added type definitions for gif.js to ensure TypeScript compatibility. - Created utility functions for exporting to PNG, SVG, and GIF formats.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds export functionality to the flowchart editor, enabling users to download the current canvas as PNG, SVG, or an animated GIF (including animated dashed edges) via a new toolbar dropdown.
Changes:
- Introduces
exportUtilswith PNG/SVG export viahtml-to-imageand animated GIF export viagif.js. - Adds an Export dropdown UI to the toolbar, including GIF duration input and progress/encoding indicators.
- Adds
gif.jsworker file topublic/and wires dependencies/types for TypeScript.
Reviewed changes
Copilot reviewed 6 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/exportUtils.ts | Implements PNG/SVG/GIF export helpers and DOM filtering for “UI chrome”. |
| src/types/gif.js.d.ts | Adds TypeScript declarations for gif.js. |
| src/components/Toolbar.tsx | Adds Export dropdown UI, duration input, progress display, and wiring to export helpers. |
| src/components/Toolbar.css | Styles the Export dropdown (light/dark mode). |
| src/App.tsx | Passes reactFlowWrapper ref into the Toolbar so exports can target the correct DOM node. |
| public/gif.worker.js | Adds the gif.js worker script used for GIF encoding. |
| package.json | Adds gif.js and html-to-image dependencies. |
| package-lock.json | Locks new dependencies. |
| .gitignore | Ignores .omc/. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- Changed the development server port in package.json to 3004 for better accessibility. - Refactored gif.worker.js to remove unnecessary comments and improve code readability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
html-to-image, filtering out UI chrome (controls, minimap, background grid)stroke-dashoffsetper frame, encoding withgif.jsat 10fpsDemo
GIF:
SVG:
PNG:
Test plan