diff --git a/src/defaults.ts b/src/defaults.ts index b8770c1..f21a3f2 100644 --- a/src/defaults.ts +++ b/src/defaults.ts @@ -50,3 +50,9 @@ export const OBJECT_DEFAULTS_TEXT = { originY: "center", lineHeight: 1, }; + +/** Scale image to this height when making a label thumbnail */ +export const THUMBNAIL_HEIGHT = 48; + +/** Generate thumbnail in jpeg format with this quality */ +export const THUMBNAIL_QUALITY = 0.7; diff --git a/src/lib/ImageEditor.svelte b/src/lib/ImageEditor.svelte index da7be45..8e96026 100644 --- a/src/lib/ImageEditor.svelte +++ b/src/lib/ImageEditor.svelte @@ -7,7 +7,6 @@ import { iconCodepoints, type MaterialIcon } from "../mdi_icons"; import { connectionState } from "../stores"; import { - ExportedLabelTemplateSchema, type ExportedLabelTemplate, type FabricJson, type LabelProps, @@ -31,9 +30,9 @@ import QrCodeParamsPanel from "./QRCodeParamsControls.svelte"; import TextParamsPanel from "./TextParamsControls.svelte"; import VariableInsertControl from "./VariableInsertControl.svelte"; - import ZplImportButton from "./ZplImportButton.svelte"; import { DEFAULT_LABEL_PROPS, GRID_SIZE } from "../defaults"; import { ImageEditorUtils } from "../utils/image_editor_utils"; + import SavedLabelsMenu from "./SavedLabelsMenu.svelte"; let htmlCanvas: HTMLCanvasElement; let fabricCanvas: fabric.Canvas; @@ -149,59 +148,12 @@ } }; - const onSaveClicked = () => { - if (confirm($tr("editor.warning.save"))) { - try { - LocalStoragePersistence.saveLabel(labelProps, fabricCanvas.toJSON()); - } catch (e) { - Toasts.zodErrors(e, "Canvas save error:"); - } - } + const exportCurrentLabel = (): ExportedLabelTemplate => { + return FileUtils.makeExportedLabel(fabricCanvas, labelProps); }; - const onExportClicked = () => { - try { - FileUtils.saveLabelAsJson(fabricCanvas, labelProps); - } catch (e) { - Toasts.zodErrors(e, "Canvas save error:"); - } - }; - - const onImportClicked = async () => { - const contents = await FileUtils.pickAndReadTextFile("json"); - const rawData = JSON.parse(contents); - - if (!confirm($tr("editor.warning.load"))) { - return; - } - - try { - const data = ExportedLabelTemplateSchema.parse(rawData); - await loadLabelData(data); - undo.push(fabricCanvas, labelProps); - } catch (e) { - Toasts.zodErrors(e, "Canvas load error:"); - } - }; - - const onLoadClicked = async () => { - if (!confirm($tr("editor.warning.load"))) { - return; - } - - try { - const labelData = LocalStoragePersistence.loadLabel(); - - if (labelData === null) { - Toasts.error("No saved label data found, or data is corrupt"); - return; - } - - await loadLabelData(labelData); - undo.push(fabricCanvas, labelProps); - } catch (e) { - Toasts.zodErrors(e, "Canvas load error:"); - } + const onLoadRequested = (label: ExportedLabelTemplate) => { + loadLabelData(label).then(() => undo.push(fabricCanvas, labelProps)); }; const zplImageReady = (img: Blob) => { @@ -393,6 +345,8 @@