Refactor code

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";
 

src/index.ts

@@ -1,10 +1,10 @@
 /// <reference path="patch.d.ts" />
-import { Coordinates } from "./coordinates";
-import { Palette } from "./palette";
+import { Coordinates } from "./lib/coordinates";
+import { Palette } from "./lib/palette";
 import { createUI } from "./UI/ui";
-import { waitForDraw } from "./utils";
-import { Storage } from "./storage";
-import { Store  } from "./store";
+import { waitForDraw } from "./lib/utils";
+import { Storage } from "./lib/storage";
+import { Store  } from "./lib/store";
 
 async function main() {
     const palette = new Palette();

src/lib/canvashot.tsx

@@ -1,8 +1,8 @@
 import saveAs from "file-saver";
 import { createCanvas, CHUNK_SIZE, fetchTile } from "./utils";
 import { Coordinates } from "./coordinates";
-import { Rect } from "./interfaces";
-import { Popup } from "./UI/components/Popup";
+import { Rect } from "../interfaces";
+import { Popup } from "../UI/components/Popup";
 import React from "react";
 
 export function getSelectionArea() {

src/lib/coordinates.ts

@@ -1,4 +1,4 @@
-import { Listener, BasicEventEmitter } from "./EventEmitter";
+import { Listener, BasicEventEmitter } from "./eventEmitter";
 import { CHUNK_SIZE, waitForDraw } from "./utils";
 
 export enum CordType {

src/lib/palette.ts

@@ -1,4 +1,4 @@
-import { RGB } from "./interfaces";
+import { RGB } from "../interfaces";
 import { rgbToHex } from "./utils";
 
 export class Palette {

src/lib/store.ts

@@ -1,4 +1,4 @@
-import { BasicEventEmitter, Listener } from "./EventEmitter";
+import { BasicEventEmitter, Listener } from "./eventEmitter";
 import { LoadUnload, Mural, MuralEx, SelectedMural } from "./interfaces";
 import { Palette } from "./palette";
 

src/lib/utils.ts

@@ -1,5 +1,5 @@
 import { clone, isInteger } from "lodash";
-import { Mural, RGB } from "./interfaces";
+import { Mural, RGB } from "../interfaces";
 
 export const CHUNK_SIZE = 512;
 
@@ -356,7 +356,7 @@ export function processNumberEvent(ev: React.ChangeEvent<HTMLInputElement>, cb:
 }
 
 export async function fetchTile(x: number, y: number) {
-    const url = `https://pixelcanvas.io/tile/${toChunkX(x)}/${toChunkX(y)}.png`;
+    const url = `/tile/${toChunkX(x)}/${toChunkX(y)}.png`;
     const result = await fetch(url);
     const blob = await result.blob();
     const src = URL.createObjectURL(blob);