feat(export): social-media aspect presets with live preview#15
Merged
Conversation
Add fixed-canvas export presets (Square 1:1, Portrait 4:5, Story/Reel 9:16, Wide 16:9, Link/OG 1.91:1) so a diagram exports ready for a platform without resizing afterwards. Default stays "Auto" (content-sized), so the usual flow is untouched. - svg.ts: optional `frame` fits the cropped diagram into a fixed canvas, centered with padding, filling the frame with the theme background. Threads through PNG/SVG/PDF/HTML. - New aspect-presets.ts with platform sizes and a padding helper. - Export tab: a "Canvas" row of preset chips (each shows its shape), a live mini-preview of how the diagram lands in the frame, and the exact output size. Presets export at exact pixels (raster scale hidden); Auto keeps the scale selector. Filenames get the preset suffix (al-hello-world-square.png). Verified exact dimensions (1080×1080, 1080×1920, 1200×630) and Auto unchanged; covered framing by unit tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Follow-up on the aspect presets so a preset actually uses the shape:
- The style background and decorative frame now cover the whole card (the
fix for "yellow Bauhaus diagram floating in a white square").
- The diagram fills the card: scale to fill the width, and redistribute the
vertical spacing between line rows to fill the height. Connectors follow
(they are derived from token boxes). Growth is capped (2.5× row height) so
an extreme mismatch (2 lines into a 9:16 story) enlarges and centers rather
than stretching to the edges; content taller than the frame falls back to
fit-by-height. No non-uniform distortion.
refitLayoutToFill is a pure function with unit tests; verified exported PNGs
(Bauhaus + classic across square/story/wide) fill the card on the style
background. Copy updated ("fills the card"). Auto is unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Member
Author
|
Update: reworked the framing so a preset fills the card instead of fit-and-centering (per feedback that a diagram was floating in a white square).
|
- Replace the row of canvas chips with a single dropdown selector. Each option keeps its proportional rectangle glyph (Auto shows a dashed square), so the shape stays legible at a glance. - Show the live mini-preview for Auto too (the content-sized diagram), not only for presets. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
On a tall preset the diagram is centered with empty space around it, so the "Created with…" line floated in the middle. For presets the credit is now pinned near the card's bottom edge (inside any frame border) instead of riding under the diagram; a small band is reserved so the filled diagram never overlaps it. Auto exports are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Implements the "Экспорт — форматы под соцсети" task (BLD-45).
What it does
Adds fixed-canvas export presets so a diagram comes out ready for a platform, without resizing afterwards:
Default is Auto (content-sized, exactly as before), so the usual export flow is untouched. Picking a preset is an optional, discoverable step.
UX
In the Export tab, a compact Canvas row of preset chips (each chip shows its aspect shape at a glance). Selecting a preset reveals a live mini-preview of how the diagram lands in that frame, plus the exact output size and platform note. The diagram is centered and scaled to fit with a safe margin; the frame fills with the theme background. For presets the raster-scale selector is hidden (output is exact pixels); Auto keeps it.
Implementation
svg.ts: optionalframeparam fits the cropped diagram into a fixed canvas via an outer<svg>+ centered<g transform>; threads through PNG/SVG/PDF/HTML unchanged otherwise.aspect-presets.ts: platform sizes + padding helper.al-hello-world-square.png.Checks
Verified exact exported dimensions in-browser (PNG 1080×1080, 1080×1920; 1200×630; SVG matches) and that Auto stays content-sized with no suffix; light + dark previews correct.
npm run check(0 errors), ESLint + Prettier clean, 139 tests passing (3 new for framing).Notes / possible follow-ups
🤖 Generated with Claude Code