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.
This commit is contained in:
Danila Poyarkov 2026-03-01 00:05:19 +03:00
parent 55b0b37789
commit 7a5a77c098
2 changed files with 12 additions and 1 deletions

1
components.d.ts vendored
View file

@ -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']

View file

@ -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' }))
}