From 7a5a77c098d751e4e2887c262193d86f23417c31 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sun, 1 Mar 2026 00:05:19 +0300 Subject: [PATCH] Render export preview at panel-appropriate resolution Scale preview to fit 480px width (covers retina panels) instead of fixed 0.5x which was far too blurry. --- components.d.ts | 1 + src/components/properties/ExportSection.vue | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components.d.ts b/components.d.ts index e174cd2a5..4ebb50bce 100644 --- a/components.d.ts +++ b/components.d.ts @@ -16,6 +16,7 @@ declare module 'vue' { ColorPicker: typeof import('./src/components/ColorPicker.vue')['default'] EditorCanvas: typeof import('./src/components/EditorCanvas.vue')['default'] EffectsSection: typeof import('./src/components/properties/EffectsSection.vue')['default'] + ExportSection: typeof import('./src/components/properties/ExportSection.vue')['default'] FillPicker: typeof import('./src/components/FillPicker.vue')['default'] FillSection: typeof import('./src/components/properties/FillSection.vue')['default'] IconLucideALargeSmall: typeof import('~icons/lucide/a-large-small')['default'] diff --git a/src/components/properties/ExportSection.vue b/src/components/properties/ExportSection.vue index 98e34438a..6e59c6693 100644 --- a/src/components/properties/ExportSection.vue +++ b/src/components/properties/ExportSection.vue @@ -50,6 +50,8 @@ async function doExport() { } } +const PREVIEW_WIDTH = 480 + function updatePreview() { if (!showPreview.value) return if (previewUrl.value) { @@ -58,7 +60,15 @@ function updatePreview() { } const ids = [...store.state.selectedIds] if (ids.length === 0) return - const data = store.renderExportImage(ids, 0.5, 'PNG') + + let maxW = 0 + for (const id of ids) { + const node = store.graph.getNode(id) + if (node) maxW = Math.max(maxW, node.width) + } + const scale = maxW > 0 ? Math.min(PREVIEW_WIDTH / maxW, 2) : 1 + + const data = store.renderExportImage(ids, scale, 'PNG') if (data) { previewUrl.value = URL.createObjectURL(new Blob([data], { type: 'image/png' })) }