diff --git a/src/file-renderer/index.js b/src/file-renderer/index.js index 594a918..0df395c 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 renderToCanvas(filename, evt, canvas) { +function renderFile(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) => + renderFile(fileObject.name, evt, canvas, colorView); 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 d81b7e4..c2c2f62 100644 --- a/src/file-renderer/pattern.js +++ b/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 += `
`; + }); +}; + export { Pattern, Color, stitchTypes }; diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte index a2b7fc1..6ddd0a9 100644 --- a/src/lib/CardList.svelte +++ b/src/lib/CardList.svelte @@ -3,6 +3,7 @@ export let files = []; let canvasRefs = []; + let colorRefs = []; let errorMessageRef; @@ -12,9 +13,10 @@{file.name}
+