Display colors used in 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 renderToCanvas(filename, evt, canvas) {
+function renderToCanvas(filename, evt, canvas, colorView) {
   const fileExtension = filename.toLowerCase().split(".").pop();
   const view = jDataView(evt.target.result, 0, evt.size);
   const pattern = new Pattern();
@@ -10,7 +10,8 @@ function renderToCanvas(filename, evt, canvas) {
   supportedFormats[fileExtension].read(view, pattern);
 
   pattern.moveToPositive();
-  pattern.drawShape(canvas);
+  pattern.drawShapeTo(canvas);
+  pattern.drawColorsTo(colorView);
 }
 
 function renderAbortMessage(errorMessageRef) {
@@ -50,11 +51,13 @@ function renderErrorMessage(errorName, errorMessageRef) {
 export default function renderFileToCanvas(
   fileObject,
   canvas,
-  errorMessageRef
+  errorMessageRef,
+  colorView
 ) {
   const reader = new FileReader();
 
-  reader.onloadend = (evt) => renderToCanvas(fileObject.name, evt, canvas);
+  reader.onloadend = (evt) =>
+    renderToCanvas(fileObject.name, evt, canvas, colorView);
   reader.abort = (/** @type {any} */ _) => renderAbortMessage(errorMessageRef);
   reader.onerror = (evt) =>
     renderErrorMessage(evt.target.error.name, errorMessageRef);

src/file-renderer/pattern.js

@@ -146,7 +146,7 @@ Pattern.prototype.fixColorCount = function () {
   this.colors.splice(maxColorIndex + 1, this.colors.length - maxColorIndex - 1);
 };
 
-Pattern.prototype.drawShape = function (canvas) {
+Pattern.prototype.drawShapeTo = function (canvas) {
   canvas.width = this.right;
   canvas.height = this.bottom;
   if (canvas.getContext) {
@@ -174,4 +174,10 @@ Pattern.prototype.drawShape = function (canvas) {
   }
 };
 
+Pattern.prototype.drawColorsTo = function (colorContainer) {
+  this.colors.forEach((color) => {
+    colorContainer.innerHTML += `<div style='background-color: rgb(${color.r}, ${color.g}, ${color.b}); height: 25px; width: 25px; border: 1px solid #000000;'></div>`;
+  });
+};
+
 export { Pattern, Color, stitchTypes };

src/lib/CardList.svelte

@@ -3,6 +3,7 @@
 
   export let files = [];
   let canvasRefs = [];
+  let colorRefs = [];
   let errorMessageRef;
 </script>
 
@@ -12,9 +13,10 @@
       <div class="canvas-container">
         <canvas bind:this={canvasRefs[i]} class="canvas" />
         <p>{file.name}</p>
+        <div class="colors-container" bind:this={colorRefs[i]} />
       </div>
       {canvasRefs[i] &&
-        renderFileToCanvas(file, canvasRefs[i], errorMessageRef)}
+        renderFileToCanvas(file, canvasRefs[i], errorMessageRef, colorRefs[i])}
     {/each}
     <!-- svelte-ignore a11y-missing-content -->
     <h1 bind:this={errorMessageRef} />
@@ -36,6 +38,7 @@
     justify-content: center;
     align-items: center;
     width: 550px;
+    /* Maybe use height: auto; */
     height: 550px;
     margin-bottom: 15px;
     padding: 10px;
@@ -48,10 +51,17 @@
     object-fit: contain;
   }
 
+  .colors-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    row-gap: 5px;
+  }
+
   @media only screen and (max-device-width: 812px) {
     .canvas-container {
       width: 100%;
-      height: 400px;
+      height: auto;
     }
 
     #container {