Refactor BarcodeParamsControls

niimblue/src/lib/BarcodeParamsControls.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { ChangeEventHandler } from "svelte/elements";
   import { Barcode, type BarcodeCoding } from "../fabric-object/barcode.class";
   import FaIcon from "./FaIcon.svelte";
 
@@ -10,38 +9,34 @@
   let text: string | undefined;
   let printText: boolean | undefined;
 
-  $: {
-    selectedBarcode =
-      selectedObject instanceof Barcode
-        ? (selectedObject as Barcode)
-        : undefined;
+  const init = () => {
     text = selectedBarcode?.text;
     encoding = selectedBarcode?.encoding;
     printText = selectedBarcode?.printText;
   };
 
   const togglePrintText = () => {
-    if (selectedBarcode) {
-      printText = !printText;
-      selectedBarcode.set('printText', printText);
-      valueUpdated();
-    }
+    printText = !printText;
+    selectedBarcode!.set('printText', printText ?? true);
+    valueUpdated();
   }
 
-  const textChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    if (selectedBarcode) {
-      text = e.currentTarget.value;
-      selectedBarcode.set('text', text);
-      valueUpdated();
-    }
+  const textChange = () => {
+    selectedBarcode!.set('text', text ?? "");
+    valueUpdated();
   };
 
-  const encodingChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    if (selectedBarcode) {
-      encoding = e.currentTarget.value as BarcodeCoding;
-      selectedBarcode.set('encoding', encoding);
-      valueUpdated();
-    }
+  const encodingChange = () => {
+    selectedBarcode!.set('encoding', encoding ?? "EAN13");
+    valueUpdated();
+  };
+
+  $: {
+    selectedBarcode =
+      selectedObject instanceof Barcode
+        ? (selectedObject as Barcode)
+        : undefined;
+    init();
   };
 </script>
 
@@ -49,19 +44,32 @@
   <div class="input-group input-group-sm flex-nowrap">
     <span class="input-group-text" title="Encoding"><FaIcon icon="code" /></span
     >
-    <select class="form-select" value={encoding} on:change={encodingChange}>
+    <select class="form-select" bind:value={encoding} on:change={encodingChange}>
       <option value="EAN13">EAN13</option>
       <option value="CODE128B">Code128 B</option>
     </select>
   </div>
-  <button class="btn btn-sm {printText ? 'btn-secondary' : ''}" on:click={togglePrintText}>
+  <button class="btn btn-sm {printText ? 'btn-secondary' : ''}" title="Enable caption" on:click={togglePrintText}>
     <FaIcon icon="font" />
   </button>
+
+  {#if encoding === "EAN13"}
+  <div class="input-group input-group-sm flex-nowrap">
+    <span class="input-group-text" title="Content"><FaIcon icon="barcode" /></span>
+    <input
+      class="barcode-content form-control"
+      maxlength="12"
+      bind:value={text}
+      on:input={textChange}
+      />
+  </div>
+  {:else}
   <textarea
-    class="qrcode-content form-control"
-    value={text}
-    on:change={textChange}
-  />
+    class="barcode-content form-control"
+    bind:value={text}
+    on:input={textChange}
+    />
+  {/if}
 {/if}
 
 <style>
@@ -69,7 +77,7 @@
     width: fit-content;
   }
 
-  .qrcode-content {
+  textarea.barcode-content {
     height: 100px;
   }
 </style>