stash

frontend/src/components/LabelLayoutPreview.vue

@@ -52,7 +52,7 @@
 </style>
 
 <script>
-import {drawFallbackLabel} from "@/label.js";
+import {drawFallbackLabel, preloadQrEncoder} from "@/label.js";
 import {LABEL_TEMPLATES, templateIsAvailable, templateContent} from "@/label-layouts.js";
 
 export default {
@@ -69,6 +69,13 @@ export default {
         value: {
             type: String,
             required: true
+        },
+        // Print.vue's global qr/micro-qr/rmqr choice (see label.js's QR_CODE_TYPES) - passed
+        // straight through to drawFallbackLabel so these thumbnails match whatever symbology the
+        // main preview is actually using.
+        codeType: {
+            type: String,
+            default: "qr"
         }
     },
     model: {
@@ -84,6 +91,9 @@ export default {
     watch: {
         fields() {
             this.redraw();
+        },
+        codeType() {
+            this.redraw();
         }
     },
     methods: {
@@ -116,7 +126,7 @@ export default {
                     continue;
                 }
                 try {
-                    drawFallbackLabel(canvas, content);
+                    drawFallbackLabel(canvas, content, "along", this.codeType);
                 } catch (e) {
                     // A thumbnail that can't render at this content length just stays blank
                     // rather than surfacing an error for every keystroke.
@@ -131,7 +141,10 @@ export default {
         // array rather than the canvas itself. A function ref sidesteps that entirely.
         this.templateCanvases = {};
     },
-    mounted() {
+    async mounted() {
+        // See Print.vue's mounted() - every thumbnail here has a "qrcode" leaf, so there's
+        // nothing worth drawing before this resolves.
+        await preloadQrEncoder();
         this.redraw();
     }
 }