From 9209ae028be4d5b0f002cae403a0cbbf994def5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Sat, 7 Jan 2023 15:56:57 -0300
Subject: [PATCH 1/2] Add stitches count

---
 src/file-renderer/index.js   |  8 +++++---
 src/file-renderer/pattern.js |  4 ++++
 src/lib/CardList.svelte      | 18 +++++++++++++++---
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/file-renderer/index.js b/src/file-renderer/index.js
index 0df395c..43d826f 100644
--- a/src/file-renderer/index.js
+++ b/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) {
+function renderFile(filename, evt, canvas, colorView, stitchesView) {
   const fileExtension = filename.toLowerCase().split(".").pop();
   const view = jDataView(evt.target.result, 0, evt.size);
   const pattern = new Pattern();
@@ -12,6 +12,7 @@ function renderFile(filename, evt, canvas, colorView) {
   pattern.moveToPositive();
   pattern.drawShapeTo(canvas);
   pattern.drawColorsTo(colorView);
+  pattern.drawStitchesCountTo(stitchesView);
 }
 
 function renderAbortMessage(errorMessageRef) {
@@ -52,12 +53,13 @@ export default function renderFileToCanvas(
   fileObject,
   canvas,
   errorMessageRef,
-  colorView
+  colorView,
+  stitchesView
 ) {
   const reader = new FileReader();
 
   reader.onloadend = (evt) =>
-    renderFile(fileObject.name, evt, canvas, colorView);
+    renderFile(fileObject.name, evt, canvas, colorView, stitchesView);
   reader.abort = (/** @type {any} */ _) => renderAbortMessage(errorMessageRef);
   reader.onerror = (evt) =>
     renderErrorMessage(evt.target.error.name, errorMessageRef);
diff --git a/src/file-renderer/pattern.js b/src/file-renderer/pattern.js
index c2c2f62..73a9802 100644
--- a/src/file-renderer/pattern.js
+++ b/src/file-renderer/pattern.js
@@ -180,4 +180,8 @@ Pattern.prototype.drawColorsTo = function (colorContainer) {
   });
 };
 
+Pattern.prototype.drawStitchesCountTo = function (stitchesContainer) {
+  stitchesContainer.innerHTML += `<div><strong>Stitches:</strong> ${this.stitches.length} </div>`;
+};
+
 export { Pattern, Color, stitchTypes };
diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte
index 6ddd0a9..bf76066 100644
--- a/src/lib/CardList.svelte
+++ b/src/lib/CardList.svelte
@@ -4,6 +4,7 @@
   export let files = [];
   let canvasRefs = [];
   let colorRefs = [];
+  let stitchesRefs = [];
   let errorMessageRef;
 </script>
 
@@ -13,10 +14,17 @@
       <div class="canvas-container">
         <canvas bind:this={canvasRefs[i]} class="canvas" />
         <p>{file.name}</p>
+        <div class="stitches-container" bind:this={stitchesRefs[i]} />
         <div class="colors-container" bind:this={colorRefs[i]} />
       </div>
       {canvasRefs[i] &&
-        renderFileToCanvas(file, canvasRefs[i], errorMessageRef, colorRefs[i])}
+        renderFileToCanvas(
+          file,
+          canvasRefs[i],
+          errorMessageRef,
+          colorRefs[i],
+          stitchesRefs[i]
+        )}
     {/each}
     <!-- svelte-ignore a11y-missing-content -->
     <h1 bind:this={errorMessageRef} />
@@ -38,8 +46,7 @@
     justify-content: center;
     align-items: center;
     width: 550px;
-    /* Maybe use height: auto; */
-    height: 550px;
+    max-height: 1000px;
     margin-bottom: 15px;
     padding: 10px;
     border: 2px solid black;
@@ -53,11 +60,16 @@
 
   .colors-container {
     display: flex;
+    justify-content: center;
     flex-wrap: wrap;
     gap: 5px;
     row-gap: 5px;
   }
 
+  .stitches-container {
+    padding: 10px 0;
+  }
+
   @media only screen and (max-device-width: 812px) {
     .canvas-container {
       width: 100%;

From bfa9f3155ec5a602abd9be09c54c14b48ec762ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Sat, 7 Jan 2023 16:19:22 -0300
Subject: [PATCH 2/2] Display size values for each card

---
 src/file-renderer/index.js   | 8 +++++---
 src/file-renderer/pattern.js | 6 ++++++
 src/lib/CardList.svelte      | 7 +++++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/file-renderer/index.js b/src/file-renderer/index.js
index 43d826f..4f2a409 100644
--- a/src/file-renderer/index.js
+++ b/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);
diff --git a/src/file-renderer/pattern.js b/src/file-renderer/pattern.js
index 73a9802..59ebe24 100644
--- a/src/file-renderer/pattern.js
+++ b/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 };
diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte
index bf76066..2f5c4d5 100644
--- a/src/lib/CardList.svelte
+++ b/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 -->