Refactor code

src/UI/Fileinput.ts

@@ -1,45 +0,0 @@
-export class FileInput {
-    private input = document.createElement("input");
-
-    constructor() {
-        this.input.type = "file";
-    }
-
-    allowMultiple(value: boolean) {
-        this.input.multiple = value;
-    }
-    setAcceptType(extensions?: string[]) {
-        if (extensions) {
-            this.input.accept = extensions.map(e => `.${e}`).join(", ");
-        } else {
-            this.input.accept = "";
-        }
-    }
-    show() {
-        return new Promise<FileList>((resolve, reject) => {
-            const subs: (keyof WindowEventMap)[] = ["mousemove", "touchend"];
-            const onCancel = () => {
-                unCancel();
-                reject(new Error("Not selected"));
-            };
-            const unCancel = () => {
-                subs.forEach(s => window.removeEventListener(s, onCancel));
-            };
-            const frame = setTimeout(() => {
-                subs.forEach(s => window.addEventListener(s, () => onCancel));
-            }, 100);
-
-            this.input.addEventListener("change", () => {
-                clearTimeout(frame);
-                unCancel();
-                if (this.input.files) {
-                    resolve(this.input.files);
-                } else {
-                    reject(new Error("Missing file"));
-                }
-            });
-
-            this.input.click();
-        });
-    }
-}

src/UI/components/main.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { OverlayReturn, Store, StoreEvents } from "../../store";
-import { Storage } from "../../storage";
-import { Coordinates } from "../../coordinates";
-import { Palette } from "../../palette";
+import { OverlayReturn, Store, StoreEvents } from "../../lib/store";
+import { Storage } from "../../lib/storage";
+import { Coordinates } from "../../lib/coordinates";
+import { Palette } from "../../lib/palette";
 import { Menu } from "./menu";
 import { MovableWindow } from "./movableWindow";
 import { SelectedMural } from "../../interfaces";

src/UI/components/menu.tsx

@@ -3,14 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
 import { Btn, Flex } from "../styles";
-import { Store } from "../../store";
+import { Store } from "../../lib/store";
 import { MuralList } from "./muralList";
-import { Coordinates, CordType } from "../../coordinates";
-import { Palette } from "../../palette";
+import { Coordinates, CordType } from "../../lib/coordinates";
+import { Palette } from "../../lib/palette";
 import { importArtWork } from "../importMural";
 import { Popup } from "./Popup";
-import { Storage } from "../../storage";
-import { takeCanvasShot } from "../../canvashot";
+import { Storage } from "../../lib/storage";
+import { takeCanvasShot } from "../../lib/canvashot";
 
 const Container = styled.div`
 

src/UI/components/minimap.tsx

@@ -1,15 +1,15 @@
-import { Coordinates, CordType } from "../../coordinates";
+import { Coordinates, CordType } from "../../lib/coordinates";
 import { SelectedMural } from "../../interfaces";
 import React from "react";
 import { Btn, SELECTED_COLOR } from "../styles";
 import { faCrosshairs, faMagnifyingGlassMinus, faMagnifyingGlassPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled from "styled-components";
-import { createCanvas, drawPixelsOntoCanvas } from "../../utils";
-import { Palette } from "../../palette";
+import { createCanvas, drawPixelsOntoCanvas } from "../../lib/utils";
+import { Palette } from "../../lib/palette";
 import { clamp} from "lodash";
-import { Store } from "../../store";
-import { Storage } from "../../storage";
+import { Store } from "../../lib/store";
+import { Storage } from "../../lib/storage";
 
 const Flex = styled.div`
     display: flex;

src/UI/components/movableWindow.tsx

@@ -2,7 +2,7 @@ import React, { createRef } from "react";
 import styled from "styled-components";
 import { Point } from "../../interfaces";
 import { clamp, debounce } from "lodash";
-import { Storage } from "../../storage";
+import { Storage } from "../../lib/storage";
 
 const Movable = styled.div`
     position: fixed;

src/UI/components/muralEditor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Border, Btn, Flex, Input } from "../styles";
-import { processNumberEvent } from "../../utils";
+import { processNumberEvent } from "../../lib/utils";
 
 interface Props {
     name: string;

src/UI/components/muralList.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { MuralEx, SelectedMural } from "../../interfaces";
-import { Store, StoreEvents } from "../../store";
+import { Store, StoreEvents } from "../../lib/store";
 import { MuralView } from "./muralView";
 import styled from "styled-components";
-import { Coordinates } from "../../coordinates";
+import { Coordinates } from "../../lib/coordinates";
 
 const ScrollContainer = styled.div`
     overflow: auto;

src/UI/components/muralView.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Store } from "../../store";
+import { Store } from "../../lib/store";
 import { Mural, MuralEx } from "../../interfaces";
 import styled from "styled-components";
 import { Border, Btn, Flex, SELECTED_COLOR } from "../styles";
 import { CanvasToCanvasJSX } from "./canvasToCanvasJSX";
-import { formatNumber, getMuralHeight, getMuralWidth } from "../../utils";
+import { formatNumber, getMuralHeight, getMuralWidth } from "../../lib/utils";
 import { IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Coordinates } from "../../coordinates";
+import { Coordinates } from "../../lib/coordinates";
 import { TEXT_FORMATS } from "../importMural";
 import saveAs from "file-saver";
 import { Popup } from "./Popup";

src/UI/components/overlay.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 import { Mural, MuralEx } from "../../interfaces";
-import { canvasFromMural, get2DArrHeight, get2DArrWidth } from "../../utils";
-import { Coordinates, CordType } from "../../coordinates";
-import { Palette } from "../../palette";
+import { canvasFromMural, get2DArrHeight, get2DArrWidth } from "../../lib/utils";
+import { Coordinates, CordType } from "../../lib/coordinates";
+import { Palette } from "../../lib/palette";
 import { MovableWindow } from "./movableWindow";
-import { Storage } from "../../storage";
+import { Storage } from "../../lib/storage";
 import { MuralEditor } from "./muralEditor";
 
 const Canvas = styled.canvas`

src/UI/importMural.tsx

@@ -1,16 +1,18 @@
 
 import React from "react";
 import { Mural, RGB } from "../interfaces";
-import { canvasToImageData, get2DArrHeight, get2DArrWidth, getColorScore, getExtension, imageDataToPaletteIndices, imageToCanvas, loadImageSource, processNumberEvent, readAsDataUrl, readAsString, resize, rgb, validateMural } from "../utils";
+import { canvasToImageData, get2DArrHeight, get2DArrWidth, getColorScore, getExtension,
+    imageDataToPaletteIndices, imageToCanvas, loadImageSource, processNumberEvent,
+    readAsDataUrl, readAsString, resize, rgb, validateMural } from "../lib/utils";
 import styled from "styled-components";
 import { Popup } from "./components/Popup";
 import RgbQuant, { DitheringKernel, RGBQuantOptions } from "rgbquant";
 import { Border, Btn, Input } from "./styles";
 import { CanvasToCanvasJSX } from "./components/canvasToCanvasJSX";
-import { Palette } from "../palette";
-import { FileInput } from "./Fileinput";
-import { Store } from "../store";
-import { Coordinates } from "../coordinates";
+import { Palette } from "../lib/palette";
+import { FileInput } from "../lib/fileinput";
+import { Store } from "../lib/store";
+import { Coordinates } from "../lib/coordinates";
 
 export const TEXT_FORMATS = ["muraljson", "json"];
 

src/UI/ui.tsx

@@ -1,13 +1,13 @@
 import { Mural } from "../interfaces";
 import { canvasToImageData, createCanvas, flatQuantizeImageData,
     getExtension, getMuralHeight, getMuralWidth, imageDataToPaletteIndices,
-    imageToCanvas, loadImageSource, readAsDataUrl, readAsString, resize, validateMural } from "../utils";
-import { FileInput } from "./Fileinput";
-import { Palette } from "../palette";
-import { Store } from "../store";
+    imageToCanvas, loadImageSource, readAsDataUrl, readAsString, resize, validateMural } from "../lib/utils";
+import { FileInput } from "../lib/fileinput";
+import { Palette } from "../lib/palette";
+import { Store } from "../lib/store";
 import React from "react";
-import { Coordinates } from "../coordinates";
-import { Storage } from "../storage";
+import { Coordinates } from "../lib/coordinates";
+import { Storage } from "../lib/storage";
 import { Main } from "./components/main";
 import { createRoot } from "react-dom/client";