diff --git a/src/file-renderer/index.js b/src/file-renderer/index.js index 0df395c..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) { +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(); @@ -12,6 +12,8 @@ function renderFile(filename, evt, canvas, colorView) { pattern.moveToPositive(); pattern.drawShapeTo(canvas); pattern.drawColorsTo(colorView); + pattern.drawStitchesCountTo(stitchesView); + pattern.drawSizeValuesTo(stitchesView); } function renderAbortMessage(errorMessageRef) { @@ -52,12 +54,14 @@ export default function renderFileToCanvas( fileObject, canvas, errorMessageRef, - colorView + colorView, + stitchesView, + sizeView ) { const reader = new FileReader(); reader.onloadend = (evt) => - renderFile(fileObject.name, evt, canvas, colorView); + 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 c2c2f62..59ebe24 100644 --- a/src/file-renderer/pattern.js +++ b/src/file-renderer/pattern.js @@ -180,4 +180,14 @@ Pattern.prototype.drawColorsTo = function (colorContainer) { }); }; +Pattern.prototype.drawStitchesCountTo = function (stitchesContainer) { + stitchesContainer.innerHTML += `
Stitches: ${this.stitches.length}
`; +}; + +Pattern.prototype.drawSizeValuesTo = function (sizeContainer) { + sizeContainer.innerHTML += `
Size (x, y): ${Math.round( + this.right / 10 + )}mm x ${Math.round(this.bottom / 10)}mm
`; +}; + export { Pattern, Color, stitchTypes }; diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte index 6ddd0a9..2f5c4d5 100644 --- a/src/lib/CardList.svelte +++ b/src/lib/CardList.svelte @@ -4,6 +4,8 @@ export let files = []; let canvasRefs = []; let colorRefs = []; + let stitchesRefs = []; + let sizeRefs = []; let errorMessageRef; @@ -12,11 +14,20 @@ {#each Array.from(files) as file, i}
-

{file.name}

+

{file.name}

+
+
{canvasRefs[i] && - renderFileToCanvas(file, canvasRefs[i], errorMessageRef, colorRefs[i])} + renderFileToCanvas( + file, + canvasRefs[i], + errorMessageRef, + colorRefs[i], + stitchesRefs[i], + sizeRefs[i] + )} {/each}

@@ -38,8 +49,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 +63,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%;