Refactor code

dist/user-script.user.js

@@ -30541,7 +30541,7 @@
     }
   });
 
-  // src/utils.ts
+  // src/lib/utils.ts
   var import_lodash = __toESM(require_lodash());
   var CHUNK_SIZE = 512;
   function pushUnique(items, item) {
@@ -30838,7 +30838,7 @@
     }
   }
   async function fetchTile(x2, y2) {
-    const url = `https://pixelcanvas.io/tile/${toChunkX(x2)}/${toChunkX(y2)}.png`;
+    const url = `/tile/${toChunkX(x2)}/${toChunkX(y2)}.png`;
     const result = await fetch(url);
     const blob = await result.blob();
     const src = URL.createObjectURL(blob);
@@ -30856,7 +30856,7 @@
     });
   }
 
-  // src/EventEmitter.ts
+  // src/lib/eventEmitter.ts
   var BasicEventEmitter = class {
     listeners = /* @__PURE__ */ new Map();
     on(type, listener3) {
@@ -30898,7 +30898,7 @@
     }
   };
 
-  // src/coordinates.ts
+  // src/lib/coordinates.ts
   var Coordinates = class {
     cords;
     emitter = new BasicEventEmitter();
@@ -31058,7 +31058,7 @@
     }
   };
 
-  // src/palette.ts
+  // src/lib/palette.ts
   var Palette = class {
     buttons = [];
     palette = [];
@@ -31103,7 +31103,7 @@
     }
   };
 
-  // src/UI/Fileinput.ts
+  // src/lib/fileinput.ts
   var FileInput = class {
     input = document.createElement("input");
     constructor() {
@@ -31152,7 +31152,7 @@
   // src/UI/components/main.tsx
   var import_react15 = __toESM(require_react());
 
-  // src/store.ts
+  // src/lib/store.ts
   var Store = class {
     constructor(storage, palette) {
       this.storage = storage;
@@ -36341,7 +36341,7 @@
     }
   };
 
-  // src/canvashot.tsx
+  // src/lib/canvashot.tsx
   var import_file_saver2 = __toESM(require_FileSaver_min());
   var import_react9 = __toESM(require_react());
   function getSelectionArea() {
@@ -37212,7 +37212,7 @@
     };
   }
 
-  // src/storage.ts
+  // src/lib/storage.ts
   var Storage = class {
     constructor(chrome2) {
       this.chrome = chrome2;

src/UI/components/main.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { OverlayReturn, Store, StoreEvents } from "../../store";
+import { OverlayReturn, Store, StoreEvents } from "../../lib/store";
-import { Storage } from "../../storage";
+import { Storage } from "../../lib/storage";
-import { Coordinates } from "../../coordinates";
+import { Coordinates } from "../../lib/coordinates";
-import { Palette } from "../../palette";
+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 { Coordinates, CordType } from "../../lib/coordinates";
-import { Palette } from "../../palette";
+import { Palette } from "../../lib/palette";
 import { importArtWork } from "../importMural";
 import { Popup } from "./Popup";
-import { Storage } from "../../storage";
+import { Storage } from "../../lib/storage";
-import { takeCanvasShot } from "../../canvashot";
+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 { createCanvas, drawPixelsOntoCanvas } from "../../lib/utils";
-import { Palette } from "../../palette";
+import { Palette } from "../../lib/palette";
 import { clamp} from "lodash";
-import { Store } from "../../store";
+import { Store } from "../../lib/store";
-import { Storage } from "../../storage";
+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 { canvasFromMural, get2DArrHeight, get2DArrWidth } from "../../lib/utils";
-import { Coordinates, CordType } from "../../coordinates";
+import { Coordinates, CordType } from "../../lib/coordinates";
-import { Palette } from "../../palette";
+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 { Palette } from "../lib/palette";
-import { FileInput } from "./Fileinput";
+import { FileInput } from "../lib/fileinput";
-import { Store } from "../store";
+import { Store } from "../lib/store";
-import { Coordinates } from "../coordinates";
+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";
+    imageToCanvas, loadImageSource, readAsDataUrl, readAsString, resize, validateMural } from "../lib/utils";
-import { FileInput } from "./Fileinput";
+import { FileInput } from "../lib/fileinput";
-import { Palette } from "../palette";
+import { Palette } from "../lib/palette";
-import { Store } from "../store";
+import { Store } from "../lib/store";
 import React from "react";
-import { Coordinates } from "../coordinates";
+import { Coordinates } from "../lib/coordinates";
-import { Storage } from "../storage";
+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 { Coordinates } from "./lib/coordinates";
-import { Palette } from "./palette";
+import { Palette } from "./lib/palette";
 import { createUI } from "./UI/ui";
-import { waitForDraw } from "./utils";
+import { waitForDraw } from "./lib/utils";
-import { Storage } from "./storage";
+import { Storage } from "./lib/storage";
-import { Store  } from "./store";
+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 { Rect } from "../interfaces";
-import { Popup } from "./UI/components/Popup";
+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);