From 47dcc7e0c91e01d9707735179cd99e005b6c201e Mon Sep 17 00:00:00 2001 From: MultiMote Date: Wed, 30 Oct 2024 22:31:31 +0300 Subject: [PATCH] New save/load menu (#39) --- src/defaults.ts | 6 + src/lib/ImageEditor.svelte | 99 ++------------- src/lib/LabelPresetsBrowser.svelte | 2 +- src/lib/LabelPropsEditor.svelte | 7 +- src/lib/ObjectPicker.svelte | 7 +- src/lib/SavedLabelsBrowser.svelte | 133 ++++++++++++++++++++ src/lib/SavedLabelsMenu.svelte | 188 +++++++++++++++++++++++++++++ src/lib/ZplImportButton.svelte | 2 +- src/locale/en.ts | 27 ++++- src/locale/ru.ts | 17 ++- src/locale/zh_cn.ts | 12 +- src/types.ts | 3 + src/utils/file_utils.ts | 31 +++-- src/utils/persistence.ts | 70 ++++++++--- 14 files changed, 469 insertions(+), 135 deletions(-) create mode 100644 src/lib/SavedLabelsBrowser.svelte create mode 100644 src/lib/SavedLabelsMenu.svelte 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 @@
+ + -
-
- - -
-
-
- -
- -
-
- - - -
-
-
- - +
-
{$tr("params.label.dialog_title")}
+
{$tr("params.label.menu_title")}
-
+
{$tr("params.label.current")} {labelProps.size.width}x{labelProps.size.height} @@ -186,8 +186,7 @@ class="mb-1" presets={labelPresets} onItemSelected={onLabelPresetSelected} - onItemDelete={onLabelPresetDelete} - onItemAdd={onLabelPresetAdd} /> + onItemDelete={onLabelPresetDelete} />
{$tr("params.label.size")} diff --git a/src/lib/ObjectPicker.svelte b/src/lib/ObjectPicker.svelte index 68749d0..fe16768 100644 --- a/src/lib/ObjectPicker.svelte +++ b/src/lib/ObjectPicker.svelte @@ -1,9 +1,12 @@
@@ -44,6 +47,8 @@ {$tr("editor.objectpicker.barcode")} + +
diff --git a/src/lib/SavedLabelsBrowser.svelte b/src/lib/SavedLabelsBrowser.svelte new file mode 100644 index 0000000..844bfbe --- /dev/null +++ b/src/lib/SavedLabelsBrowser.svelte @@ -0,0 +1,133 @@ + + +
+ {#each labels as item, idx} + + + {#if deleteIndex === idx} + + + {:else} + + {/if} +
+ + {#if item.thumbnailBase64} + thumbnail + {/if} + + {#if item.title} + + {item.title} + + {/if} +
+ + {/each} +
+ + diff --git a/src/lib/SavedLabelsMenu.svelte b/src/lib/SavedLabelsMenu.svelte new file mode 100644 index 0000000..fcb1665 --- /dev/null +++ b/src/lib/SavedLabelsMenu.svelte @@ -0,0 +1,188 @@ + + +
+ +
+
{$tr("params.saved_labels.menu_title")}
+ +
+
+ + +
+ + + +
+ {$tr("params.saved_labels.label_title")} + +
+ +
+ + + {#if selectedIndex !== -1} + + + + {/if} +
+
+
+
+ + diff --git a/src/lib/ZplImportButton.svelte b/src/lib/ZplImportButton.svelte index 26f1e0a..6fe3450 100644 --- a/src/lib/ZplImportButton.svelte +++ b/src/lib/ZplImportButton.svelte @@ -45,7 +45,7 @@ }; -