From 6aebac4578fc8f42bae5e9f7c5df9baad1c28d92 Mon Sep 17 00:00:00 2001 From: Terncode Date: Sat, 27 Jul 2024 11:52:38 +0200 Subject: [PATCH] Refactor code --- dist/user-script.user.js | 18 +++++++++--------- src/UI/components/main.tsx | 8 ++++---- src/UI/components/menu.tsx | 10 +++++----- src/UI/components/minimap.tsx | 10 +++++----- src/UI/components/movableWindow.tsx | 2 +- src/UI/components/muralEditor.tsx | 2 +- src/UI/components/muralList.tsx | 4 ++-- src/UI/components/muralView.tsx | 6 +++--- src/UI/components/overlay.tsx | 8 ++++---- src/UI/importMural.tsx | 12 +++++++----- src/UI/ui.tsx | 12 ++++++------ src/index.ts | 10 +++++----- src/{ => lib}/2DArray.ts | 0 src/{ => lib}/canvashot.tsx | 4 ++-- src/{ => lib}/coordinates.ts | 2 +- src/{EventEmitter.ts => lib/eventEmitter.ts} | 0 src/{UI/Fileinput.ts => lib/fileinput.ts} | 0 src/{ => lib}/palette.ts | 2 +- src/{ => lib}/storage.ts | 0 src/{ => lib}/store.ts | 2 +- src/{ => lib}/utils.ts | 4 ++-- 21 files changed, 59 insertions(+), 57 deletions(-) rename src/{ => lib}/2DArray.ts (100%) rename src/{ => lib}/canvashot.tsx (98%) rename src/{ => lib}/coordinates.ts (99%) rename src/{EventEmitter.ts => lib/eventEmitter.ts} (100%) rename src/{UI/Fileinput.ts => lib/fileinput.ts} (100%) rename src/{ => lib}/palette.ts (97%) rename src/{ => lib}/storage.ts (100%) rename src/{ => lib}/store.ts (98%) rename src/{ => lib}/utils.ts (99%) diff --git a/dist/user-script.user.js b/dist/user-script.user.js index a58564a..d688f76 100644 --- a/dist/user-script.user.js +++ b/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; diff --git a/src/UI/components/main.tsx b/src/UI/components/main.tsx index 03808f8..04eea8f 100644 --- a/src/UI/components/main.tsx +++ b/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"; diff --git a/src/UI/components/menu.tsx b/src/UI/components/menu.tsx index 4a7a83e..3b1dbdf 100644 --- a/src/UI/components/menu.tsx +++ b/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` diff --git a/src/UI/components/minimap.tsx b/src/UI/components/minimap.tsx index 80aa661..6d42c3a 100644 --- a/src/UI/components/minimap.tsx +++ b/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; diff --git a/src/UI/components/movableWindow.tsx b/src/UI/components/movableWindow.tsx index c35e1f9..85e51dd 100644 --- a/src/UI/components/movableWindow.tsx +++ b/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; diff --git a/src/UI/components/muralEditor.tsx b/src/UI/components/muralEditor.tsx index 69102f6..9700651 100644 --- a/src/UI/components/muralEditor.tsx +++ b/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; diff --git a/src/UI/components/muralList.tsx b/src/UI/components/muralList.tsx index c5e47be..3b3a92d 100644 --- a/src/UI/components/muralList.tsx +++ b/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; diff --git a/src/UI/components/muralView.tsx b/src/UI/components/muralView.tsx index 6bea7f2..eac9de3 100644 --- a/src/UI/components/muralView.tsx +++ b/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"; diff --git a/src/UI/components/overlay.tsx b/src/UI/components/overlay.tsx index 8236b55..8935668 100644 --- a/src/UI/components/overlay.tsx +++ b/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` diff --git a/src/UI/importMural.tsx b/src/UI/importMural.tsx index 7291939..9cb861e 100644 --- a/src/UI/importMural.tsx +++ b/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"]; diff --git a/src/UI/ui.tsx b/src/UI/ui.tsx index 87223be..962e853 100644 --- a/src/UI/ui.tsx +++ b/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"; diff --git a/src/index.ts b/src/index.ts index c9de019..3192476 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,10 +1,10 @@ /// -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(); diff --git a/src/2DArray.ts b/src/lib/2DArray.ts similarity index 100% rename from src/2DArray.ts rename to src/lib/2DArray.ts diff --git a/src/canvashot.tsx b/src/lib/canvashot.tsx similarity index 98% rename from src/canvashot.tsx rename to src/lib/canvashot.tsx index bf4e2d5..d5ab74e 100644 --- a/src/canvashot.tsx +++ b/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() { diff --git a/src/coordinates.ts b/src/lib/coordinates.ts similarity index 99% rename from src/coordinates.ts rename to src/lib/coordinates.ts index b1fc564..1e4be52 100644 --- a/src/coordinates.ts +++ b/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 { diff --git a/src/EventEmitter.ts b/src/lib/eventEmitter.ts similarity index 100% rename from src/EventEmitter.ts rename to src/lib/eventEmitter.ts diff --git a/src/UI/Fileinput.ts b/src/lib/fileinput.ts similarity index 100% rename from src/UI/Fileinput.ts rename to src/lib/fileinput.ts diff --git a/src/palette.ts b/src/lib/palette.ts similarity index 97% rename from src/palette.ts rename to src/lib/palette.ts index 8fc99b7..4112eac 100644 --- a/src/palette.ts +++ b/src/lib/palette.ts @@ -1,4 +1,4 @@ -import { RGB } from "./interfaces"; +import { RGB } from "../interfaces"; import { rgbToHex } from "./utils"; export class Palette { diff --git a/src/storage.ts b/src/lib/storage.ts similarity index 100% rename from src/storage.ts rename to src/lib/storage.ts diff --git a/src/store.ts b/src/lib/store.ts similarity index 98% rename from src/store.ts rename to src/lib/store.ts index 91cc66b..c3040bf 100644 --- a/src/store.ts +++ b/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"; diff --git a/src/utils.ts b/src/lib/utils.ts similarity index 99% rename from src/utils.ts rename to src/lib/utils.ts index a69406e..835930f 100644 --- a/src/utils.ts +++ b/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, 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);