Add stitches count

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);

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 };

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; */
+    max-height: 1000px;
-    height: 550px;
     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%;