Conversation
added 15 commits
May 5, 2026 15:19
- Add preset?: boolean field to Provider type - Auto-inject OpenRouter preset with 5 free models on first launch - Protect preset providers from deletion (toast + disabled button) - Show preset badge and API key setup guide in ProviderSettingsPage - Add error guidance in ChatPage and MindMapPanel for free model failures - Add 3 tests for preset provider protection and deletion control
…r preset template Revert preset provider auto-injection, protection, and error guidance. Keep OpenRouter in PRESETS array so users can select it as a template when configuring a provider manually.
- Inject OpenRouter with model openrouter/free on first launch (store empty) - No preset flag or protection — user can edit/delete freely - Bump provider-store persist version to 3
- Install html-to-image for canvas-based DOM export
- Add export-png.ts (1x/2x/3x pixel ratio support)
- Add export-svg.ts (vector SVG export)
- Replace single export button with dropdown (PNG 1x/2x/3x, SVG, Markdown)
- Export filename format: {标题}_{日期}.{png|svg}
html-to-image has issues rendering SVG elements (React Flow edges). dom-to-image-more handles SVG via foreignObject correctly. Also capture .react-flow container instead of .react-flow__viewport.
html-to-image's toPng fails to render nested SVG elements (React Flow edges). Switch to toSvg (which handles SVG natively) then draw SVG onto canvas at target pixel ratio for PNG output.
…official approach) - Use html-to-image@1.11.11 (locked per React Flow docs - newer versions broken) - Single file export-mindmap.ts with exportMindmapAsPng() and exportMindmapAsSvg() - Capture .react-flow container (includes both nodes and SVG edges) - Export dropdown in MindMapPanel: PNG 1x/2x/3x, SVG, Markdown
Edge SVG path elements lose CSS class-based styling in html-to-image's foreignObject rendering. Switch to inline style with concrete rgba color so edges render correctly in exported PNG/SVG.
Store React Flow fitView/getViewport/setViewport on window via onInit. Export functions call fitView before capture and restore original viewport after, so exported image always shows the complete mindmap regardless of current zoom level or pan position.
Follow React Flow official Download Image example: calculate node bounds, compute optimal viewport transform, and pass it as style option to html-to-image. This overrides only the cloned node's CSS, leaving the live viewport untouched. No more fitView/restoreViewport dance.
Update design.md: add decisions for html-to-image version locking, getNodesBounds/getViewportForBounds strategy, React Flow instance access, SVG edge rendering fix, and PNG background color. Update tasks.md: fix garbled test task lines, mark all complete. Update spec scenarios: remove expand-collapse workflow, reflect actual style-override approach.
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
1 participant
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
将
opencode分支上近期的核心功能合并到main，主要包括思维导图导出、OpenRouter 零配置上手，以及富文本节点内容的前期设计。Changes
✨ 思维导图导出（PNG / SVG）
src/lib/export-mindmap.ts，基于html-to-image实现导出✨ OpenRouter 零配置上手
providerStore、ProviderSettingsPage📝 富文本节点内容（前期设计）
openspec/changes/rich-node-content/中完成方案设计、规格定义和任务分解🧹 杂项
.opencode/rules.md工作分支策略openspec/specs/mindmap-panel-layout/spec.md（同步导出区域边距）Type of Change
Checklist
npx tsc --noEmit)npx eslint .)npm test)