Separate render and read logic to different folders

src/file-renderer/index.js

@@ -1,6 +1,6 @@
-import { jDataView } from "../utils/jdataview";
-import { pesRead } from "../utils/pesformat";
-import { Pattern } from "../utils/pattern";
+import { jDataView } from "./jdataview";
+import { pesRead } from "../format-readers/pes";
+import { Pattern } from "./pattern";
 
 String.prototype.endsWith = function (suffix) {
   return this.indexOf(suffix, this.length - suffix.length) !== -1;
@@ -49,7 +49,7 @@ function handleFileReadError(evt) {
   }
 }
 
-export function startFileRead(fileObject, canvas) {
+export default function renderFileToCanvas(fileObject, canvas) {
   const reader = new FileReader();
 
   reader.onloadend = function (x) {

src/format-readers/pes.js

@@ -1,4 +1,4 @@
-import { Color, stitchTypes } from "./pattern";
+import { Color, stitchTypes } from "../file-renderer/pattern";
 
 const namedColors = [
   new Color(0, 0, 0, "Unknown"),

src/lib/CardList.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { startFileRead } from "../utils/main";
+  import renderFileToCanvas from "../file-renderer";
 
   export let files = [];
   let canvasRefs = [];
@@ -12,7 +12,7 @@
         <canvas bind:this={canvasRefs[i]} class="canvas" />
         <p>{file.name}</p>
       </div>
-      {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
+      {canvasRefs[i] && renderFileToCanvas(file, canvasRefs[i])}
     {/each}
   </div>
 {/if}