feat : support exporting diagrams to PNG , JPG , SVG and PDF (#97) - #106
Conversation
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughAdds multi-format diagram export (PNG, JPEG, SVG, PDF) to the ChangesDiagram Export Feature
Gitignore Cleanup
Sequence Diagram(s)sequenceDiagram
actor User
participant ExportDropdown
participant handleExport
participant ReactFlow
participant htmlToImage
participant jsPDF
User->>ExportDropdown: selects format & clicks Export
ExportDropdown->>handleExport: handleExport(format)
handleExport->>ReactFlow: getNodes()
ReactFlow-->>handleExport: nodes[]
handleExport->>ReactFlow: getNodesBounds(nodes)
ReactFlow-->>handleExport: bounds {x, y, width, height}
handleExport->>handleExport: locate .react-flow__viewport DOM, derive bgColor
alt format = PNG / JPEG / SVG
handleExport->>htmlToImage: toPng/toJpeg/toSvg(viewport, options)
htmlToImage-->>handleExport: dataUrl
handleExport->>User: trigger anchor download
else format = PDF
handleExport->>htmlToImage: toPng(viewport, options)
htmlToImage-->>handleExport: dataUrl
handleExport->>jsPDF: new jsPDF(), addImage(dataUrl), save()
jsPDF-->>User: PDF download
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/ui/Diagram.tsx (2)
508-510: 💤 Low valueConsider providing user feedback on export failure.
Currently, export errors are only logged to
console.error. Users won't know if their export failed. Consider showing a toast notification or alert.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/Diagram.tsx` around lines 508 - 510, The catch block handling export failures only logs to console without providing user feedback. In the catch handler for the export function where "Failed to export diagram:" is logged, add a user-facing notification mechanism such as a toast notification or alert to inform users when the export operation fails, in addition to the existing console error logging.
597-636: ⚖️ Poor tradeoffDropdown lacks keyboard navigation and focus management.
The dropdown doesn't support
Escapeto close or arrow key navigation between options. Focus also doesn't automatically move into the dropdown when opened. Consider adding anonKeyDownhandler forEscapeand managing focus for improved accessibility.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/Diagram.tsx` around lines 597 - 636, The export dropdown menu controlled by the exportOpen state lacks keyboard accessibility features. Add an onKeyDown handler to the dropdown container div that handles the Escape key to close the menu by calling setExportOpen(false), and implement arrow key navigation (ArrowUp/ArrowDown) to cycle focus between the five export option buttons (PNG Image Opaque, PNG Image Transparent, JPEG Image, SVG Vector File, and PDF Document). Additionally, use a useRef hook to reference the dropdown container and useEffect to automatically focus the first button when exportOpen becomes true, ensuring proper focus management when the dropdown is opened.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@pnpm-workspace.yaml`:
- Line 2: The `core-js` configuration value in pnpm-workspace.yaml is set to a
string literal instead of a boolean. Replace the string value "set this to true
or false" with an actual boolean value: use `true` if core-js build scripts are
needed for polyfill compilation, or `false` if they are not required. This will
ensure the allowBuilds directive receives the expected boolean type and allows
pnpm install to function correctly.
---
Nitpick comments:
In `@src/components/ui/Diagram.tsx`:
- Around line 508-510: The catch block handling export failures only logs to
console without providing user feedback. In the catch handler for the export
function where "Failed to export diagram:" is logged, add a user-facing
notification mechanism such as a toast notification or alert to inform users
when the export operation fails, in addition to the existing console error
logging.
- Around line 597-636: The export dropdown menu controlled by the exportOpen
state lacks keyboard accessibility features. Add an onKeyDown handler to the
dropdown container div that handles the Escape key to close the menu by calling
setExportOpen(false), and implement arrow key navigation (ArrowUp/ArrowDown) to
cycle focus between the five export option buttons (PNG Image Opaque, PNG Image
Transparent, JPEG Image, SVG Vector File, and PDF Document). Additionally, use a
useRef hook to reference the dropdown container and useEffect to automatically
focus the first button when exportOpen becomes true, ensuring proper focus
management when the dropdown is opened.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ce39d1c0-5329-45ad-93e5-2cec142505d6
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
.gitignorepackage.jsonpnpm-workspace.yamlsrc/components/ui/Diagram.tsx
💤 Files with no reviewable changes (1)
- .gitignore
The allowBuilds directive expects true or false, but the current value is a literal string "set this to true or false". This will either fail or produce undefined behavior during pnpm install. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@pnpm-workspace.yaml`:
- Around line 1-7: The pnpm-workspace.yaml file contains a duplicate allowBuilds
key declaration which creates invalid YAML structure. Remove the first
allowBuilds key and all duplicate entries within the block, keeping only a
single allowBuilds declaration with one instance each of the three configuration
entries: core-js, sharp, and unrs-resolver. Ensure the final structure has
allowBuilds declared once at the top level with all three nested entries
appearing exactly once with their false values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| allowBuilds: | ||
| allowBuilds: | ||
| core-js: false | ||
| sharp: false | ||
| unrs-resolver: false | ||
| sharp: false | ||
| unrs-resolver: false |
There was a problem hiding this comment.
Critical: Duplicate allowBuilds key breaks YAML structure.
Lines 1–7 declare the allowBuilds key twice, creating an invalid YAML structure. YAML parsers will fail or behave unpredictably. The old allowBuilds block (lines 1, 6–7) must be removed entirely, leaving a single block with all three entries.
The PR objectives claim the string literal issue was fixed, and line 3 correctly shows core-js: false, but the file structure is broken.
🔧 Proposed fix: Consolidate into a single `allowBuilds` block
allowBuilds:
-allowBuilds:
core-js: false
sharp: false
unrs-resolver: false
- sharp: false
- unrs-resolver: false🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 2-2: duplication of key "allowBuilds" in mapping
(key-duplicates)
[error] 6-6: duplication of key "sharp" in mapping
(key-duplicates)
[error] 7-7: duplication of key "unrs-resolver" in mapping
(key-duplicates)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pnpm-workspace.yaml` around lines 1 - 7, The pnpm-workspace.yaml file
contains a duplicate allowBuilds key declaration which creates invalid YAML
structure. Remove the first allowBuilds key and all duplicate entries within the
block, keeping only a single allowBuilds declaration with one instance each of
the three configuration entries: core-js, sharp, and unrs-resolver. Ensure the
final structure has allowBuilds declared once at the top level with all three
nested entries appearing exactly once with their false values.
|
ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR. |
2 participants
Pull Request: Diagram Export to PNG, JPEG, SVG, and PDF
Description
This PR implements Issue #97 ("Export diagrams to multiple formats (PNG, JPG, PDF, SVG)").
It adds export capabilities to the React Flow interactive diagram container, allowing users to download their generated graphs in multiple formats. The export utility captures the entire graph structure (including nodes scrolled off-screen) at full 100% resolution, dynamically adjusting boundaries and respecting the active dark or light theme background.
Key Changes
1. Context Provider Setup (
src/components/ui/Diagram.tsx)<ReactFlowProvider>context.DiagramFlowto utilize theuseReactFlow()hook internally for node coordinates and bounding calculations, and exported a clean wrapper componentDiagramas the default export.2. Layout & Styling Calculations
getNodesBoundsto find the exact rectangular area enclosing all active graph nodes.html-to-imageduring capture:transform: `translate(${-bounds.x + padding}px, ${-bounds.y + padding}px) scale(1)`3. Theme Alignment & Format Options
#0b0d12in dark mode,#ffffffin light mode).jspdfon request, generating a document matching the aspect ratio and boundary dimensions of the diagram, embedding the opaque PNG cleanly.4. UI Dropdown Panel
🌐 Export ▼) inside the existing diagram legend<Panel>container.Verification & Testing Results
pnpm testpassed successfully (all 46/46 tests green).pnpm typecheckcompleted with 0 errors.pnpm lintcompleted with 0 formatting warnings.pnpm buildcompleted with zero compilation or static generation issues.Summary by CodeRabbit
New Features
Refactor / UI
Chores