Display size values for each card

src/file-renderer/index.js

@@ -2,7 +2,7 @@ import { jDataView } from "./jdataview";
 import { supportedFormats } from "../format-readers";
 import { Pattern } from "./pattern";
 
-function renderFile(filename, evt, canvas, colorView, stitchesView) {
+function renderFile(filename, evt, canvas, colorView, stitchesView, sizeView) {
   const fileExtension = filename.toLowerCase().split(".").pop();
   const view = jDataView(evt.target.result, 0, evt.size);
   const pattern = new Pattern();
@@ -13,6 +13,7 @@ function renderFile(filename, evt, canvas, colorView, stitchesView) {
   pattern.drawShapeTo(canvas);
   pattern.drawColorsTo(colorView);
   pattern.drawStitchesCountTo(stitchesView);
+  pattern.drawSizeValuesTo(stitchesView);
 }
 
 function renderAbortMessage(errorMessageRef) {
@@ -54,12 +55,13 @@ export default function renderFileToCanvas(
   canvas,
   errorMessageRef,
   colorView,
-  stitchesView
+  stitchesView,
+  sizeView
 ) {
   const reader = new FileReader();
 
   reader.onloadend = (evt) =>
-    renderFile(fileObject.name, evt, canvas, colorView, stitchesView);
+    renderFile(fileObject.name, evt, canvas, colorView, stitchesView, sizeView);
   reader.abort = (/** @type {any} */ _) => renderAbortMessage(errorMessageRef);
   reader.onerror = (evt) =>
     renderErrorMessage(evt.target.error.name, errorMessageRef);

src/file-renderer/pattern.js

@@ -184,4 +184,10 @@ Pattern.prototype.drawStitchesCountTo = function (stitchesContainer) {
   stitchesContainer.innerHTML += `<div><strong>Stitches:</strong> ${this.stitches.length} </div>`;
 };
 
+Pattern.prototype.drawSizeValuesTo = function (sizeContainer) {
+  sizeContainer.innerHTML += `<div><strong>Size (x, y):</strong> ${Math.round(
+    this.right / 10
+  )}mm x ${Math.round(this.bottom / 10)}mm </div>`;
+};
+
 export { Pattern, Color, stitchTypes };

src/lib/CardList.svelte

@@ -5,6 +5,7 @@
   let canvasRefs = [];
   let colorRefs = [];
   let stitchesRefs = [];
+  let sizeRefs = [];
   let errorMessageRef;
 </script>
 
@@ -13,8 +14,9 @@
     {#each Array.from(files) as file, i}
       <div class="canvas-container">
         <canvas bind:this={canvasRefs[i]} class="canvas" />
-        <p>{file.name}</p>
+        <p><strong>{file.name}</strong></p>
         <div class="stitches-container" bind:this={stitchesRefs[i]} />
+        <div class="size-container" bind:this={sizeRefs[i]} />
         <div class="colors-container" bind:this={colorRefs[i]} />
       </div>
       {canvasRefs[i] &&
@@ -23,7 +25,8 @@
           canvasRefs[i],
           errorMessageRef,
           colorRefs[i],
-          stitchesRefs[i]
+          stitchesRefs[i],
+          sizeRefs[i]
         )}
     {/each}
     <!-- svelte-ignore a11y-missing-content -->