Canvas clear button

Author: MultiMote

src/lib/ImageEditor.svelte

@@ -245,6 +245,14 @@
     }
   };
 
+  const clearCanvas = () => {
+    if (!confirm($tr("editor.clear.confirm"))) {
+      return;
+    }
+    undo.push(fabricCanvas, labelProps);
+    fabricCanvas.clear();
+  };
+
   onMount(() => {
     const csvSaved = LocalStoragePersistence.loadCsv();
     csvData = csvSaved.data;
@@ -376,6 +384,13 @@
       <div class="toolbar d-flex flex-wrap gap-1 justify-content-center align-items-center">
         <LabelPropsEditor {labelProps} onChange={onUpdateLabelProps} />
 
+        <button
+          class="btn btn-sm btn-secondary"
+          on:click={clearCanvas}
+          title={$tr("editor.clear")}>
+          <MdIcon icon="delete" />
+        </button>
+
         <SavedLabelsMenu canvas={fabricCanvas} onRequestLabelTemplate={exportCurrentLabel} {onLoadRequested} />
 
         <button

src/locale/dicts/en.json

@@ -5,6 +5,8 @@
     "connector.bluetooth": "Bluetooth",
     "connector.disconnect.heartbeat": "Disconnected (printer does not respond)",
     "connector.serial": "Serial (USB)",
+    "editor.clear": "Clear canvas",
+    "editor.clear.confirm": "Clear canvas contents?",
     "editor.clone": "Clone",
     "editor.default_text": "Text",
     "editor.delete": "Delete",

src/locale/dicts/ru.json

@@ -5,6 +5,8 @@
     "connector.bluetooth": "Bluetooth",
     "connector.disconnect.heartbeat": "Отключено (принтер не отвечает)",
     "connector.serial": "Посл. порт (USB)",
+    "editor.clear": "Очистить холст",
+    "editor.clear.confirm": "Очистить содержимое холста?",
     "editor.clone": "Клонировать",
     "editor.default_text": "Текст",
     "editor.delete": "Удалить",