From 1bb3c0187c845fd9174b430c80e32d72c28ddf1f Mon Sep 17 00:00:00 2001 From: Terncode Date: Thu, 6 Feb 2025 22:43:21 +0100 Subject: [PATCH] Refactor --- src/UI/components/main.tsx | 27 +++++++++++++++++++++++---- src/UI/components/minimap.tsx | 20 +++++++++++++++----- src/UI/components/movableWindow.tsx | 9 +++++++-- src/UI/components/muralEditor.tsx | 16 ++++++++++++---- src/UI/components/muralList.tsx | 4 +++- src/UI/components/muralView.tsx | 13 ++++++++++--- src/UI/components/overlay.tsx | 3 ++- src/UI/importMural.tsx | 19 ++++++++++++++----- src/UI/ui.tsx | 4 +++- src/index.ts | 10 ++++++++-- src/lib/store.ts | 4 +++- src/lib/utils.ts | 14 ++++++++++---- 12 files changed, 110 insertions(+), 33 deletions(-) diff --git a/src/UI/components/main.tsx b/src/UI/components/main.tsx index 3b5f0ae..ad7c53e 100644 --- a/src/UI/components/main.tsx +++ b/src/UI/components/main.tsx @@ -64,7 +64,7 @@ export class Main extends React.Component { } componentWillUnmount() { this.destroyed = true; - this.actualSave({collapsed: this.state.collapsed, opacity: this.state .opacity}); + this.actualSave({collapsed: this.state.collapsed, opacity: this.state.opacity}); } actualSave(settings: StoreSettings) { return this.props.storage.setItem(this.STORAGE_KEY, settings); @@ -122,9 +122,28 @@ export class Main extends React.Component { /> {this.renderMap()} - {this.state.overlays.map((o, i) => )} - {this.props.store.murals[this.state.phantomOverlay] ? : null } - {this.state.overlayModify ? { + {this.state.overlays.map((o, i) => )} + {this.props.store.murals[this.state.phantomOverlay] ? : null } + {this.state.overlayModify ? { this.state.overlayModify!.cb(name, x, y, confirm); }} /> : null} ; diff --git a/src/UI/components/minimap.tsx b/src/UI/components/minimap.tsx index 6d42c3a..1250c87 100644 --- a/src/UI/components/minimap.tsx +++ b/src/UI/components/minimap.tsx @@ -2,7 +2,9 @@ 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 { + faCrosshairs, faMagnifyingGlassMinus, faMagnifyingGlassPlus +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styled from "styled-components"; import { createCanvas, drawPixelsOntoCanvas } from "../../lib/utils"; @@ -123,7 +125,10 @@ export class Minimap extends React.Component { onCords = (x: number, y: number) => { const store = this.props.store; - if (store.selected && store.selected.m.x < x && store.selected.m.y < y && store.selected.w + store.selected.m.x > x && store.selected.h + store.selected.m.y > y) { + if ( + store.selected && store.selected.m.x < x && store.selected.m.y < y && + store.selected.w + store.selected.m.x > x && + store.selected.h + store.selected.m.y > y) { const xx = x - store.selected.m.x; const yy = y - store.selected.m.y; const colorIndex = store.selected.m.pixels[yy][xx]; @@ -246,11 +251,16 @@ export class Minimap extends React.Component { render() { return
- + {this.state.size} - + - this.toggleColorAssistant()}>Assist + this.toggleColorAssistant()}>Assist {this.renderColor()} diff --git a/src/UI/components/movableWindow.tsx b/src/UI/components/movableWindow.tsx index 85e51dd..5b93658 100644 --- a/src/UI/components/movableWindow.tsx +++ b/src/UI/components/movableWindow.tsx @@ -155,7 +155,9 @@ export class MovableWindow extends React.Component { } } onMouseDown = (event: React.MouseEvent) => { - this.setMoving(event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY); + this.setMoving( + event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY + ); this.setState({moving: true}); }; onTouchStart = (event: React.TouchEvent) => { @@ -173,7 +175,10 @@ export class MovableWindow extends React.Component { } render() { return -

{this.props.title}

 +

{this.props.title}

 {this.props.children} diff --git a/src/UI/components/muralEditor.tsx b/src/UI/components/muralEditor.tsx index 9700651..9fc5d89 100644 --- a/src/UI/components/muralEditor.tsx +++ b/src/UI/components/muralEditor.tsx @@ -18,16 +18,24 @@ export class MuralEditor extends React.Component { render() { return
- Name this.props.onName(e.target.value)} /> + Name this.props.onName(e.target.value)} />
- X processNumberEvent(e, this.props.onX)}/> + X processNumberEvent(e, this.props.onX)}/>
- Y processNumberEvent(e, this.props.onY)} /> + Y processNumberEvent(e, this.props.onY)} />
- this.props.onConfirm()} style={{flex: 1}}>Confirm this.props.onCancel()} style={{flex: 1}}>Cancel + this.props.onConfirm()} + style={{flex: 1}}>Confirm this.props.onCancel()} style={{flex: 1}}>Cancel Overlay does not work on scale -1. To fix that zoom in. ; diff --git a/src/UI/components/muralList.tsx b/src/UI/components/muralList.tsx index 09c2d80..0e7cf94 100644 --- a/src/UI/components/muralList.tsx +++ b/src/UI/components/muralList.tsx @@ -63,7 +63,9 @@ export class MuralList extends React.Component { }; render() { return {this.state.murals.map((m,i) => { - return ; + return ; })}; } } diff --git a/src/UI/components/muralView.tsx b/src/UI/components/muralView.tsx index 50d7fc3..e07dc8b 100644 --- a/src/UI/components/muralView.tsx +++ b/src/UI/components/muralView.tsx @@ -5,7 +5,9 @@ import styled from "styled-components"; import { Border, Btn, Flex, SELECTED_COLOR } from "../styles"; import { CanvasToCanvasJSX } from "./canvasToCanvasJSX"; import { formatNumber, getMuralHeight, getMuralWidth, getPixelStatusMural } from "../../lib/utils"; -import { IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { + IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faRefresh, faTrash +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Coordinates } from "../../lib/coordinates"; import { TEXT_FORMATS } from "../importMural"; @@ -129,7 +131,8 @@ export class MuralView extends React.Component { } btn(context: string, icon: IconDefinition, onClick: () => void, selected?: boolean) { - return onClick()}>{context} ; + return onClick()}>{context} ; } get s() { return this.props.store; @@ -263,7 +266,11 @@ export class MuralView extends React.Component { } render() { - return + return diff --git a/src/UI/components/overlay.tsx b/src/UI/components/overlay.tsx index 8935668..33ab626 100644 --- a/src/UI/components/overlay.tsx +++ b/src/UI/components/overlay.tsx @@ -146,7 +146,8 @@ export class Overlay extends React.Component { renderModifyWindow() { if (this.props.onChange) { const copy = {...this.state}; - return + return { +export async function getImageSettingFromUser( + image: HTMLImageElement +): Promise { let width = image.width; let height = image.height; let useQuantizer: DitherSetting = "show-all"; @@ -307,7 +309,9 @@ export async function getImageSettingFromUser(image: HTMLImageElement): Promise< } -export async function imageToQuantized(image: HTMLImageElement, options: ImageToMuralOptions, palette: Palette) { +export async function imageToQuantized( + image: HTMLImageElement, options: ImageToMuralOptions, palette: Palette +) { if (!options.noShrinking) { image = await resize(image, options.width, options.height); } @@ -347,7 +351,9 @@ export function quantizeAll(canvas: HTMLCanvasElement, palette: Palette) { } -export function quantizeOne(canvas: HTMLCanvasElement, kernel: DitheringKernelEx, palette: Palette): QuantResult { +export function quantizeOne( + canvas: HTMLCanvasElement, kernel: DitheringKernelEx, palette: Palette +): QuantResult { if (kernel === "Flat") { const imageData = canvasToImageData(canvas); flatQuantizeImageData(imageData, palette); @@ -389,7 +395,9 @@ export function ditheringKernelToName(kernel: string) { return stringBuilder; } -function quantizeImage(canvas: HTMLCanvasElement, rgbQuant: RgbQuant, ditheringKernel: DitheringKernel) { +function quantizeImage( + canvas: HTMLCanvasElement, rgbQuant: RgbQuant, ditheringKernel: DitheringKernel +) { // create canvas; const drawCanvas = document.createElement("canvas"); drawCanvas.width = canvas.width; @@ -469,7 +477,8 @@ async function importFile() { const content = await readAsString(fileData); const mural = JSON.parse(content) as Mural; if (!mural.name) { - mural.name = await Popup.prompt("Missing name for this mural. Please enter it manually", name) || ""; + mural.name = await Popup + .prompt("Missing name for this mural. Please enter it manually", name) || ""; } validateMural(mural); return { diff --git a/src/UI/ui.tsx b/src/UI/ui.tsx index 5990a4c..353f20a 100644 --- a/src/UI/ui.tsx +++ b/src/UI/ui.tsx @@ -8,7 +8,9 @@ import { createRoot } from "react-dom/client"; import { PixelPlaced } from "../lib/pixelPlaced"; import { PixelCount } from "./components/pixelCount"; -export function createUI(store: Store, storage: Storage, cords: Coordinates, palette: Palette, pixels: PixelPlaced) { +export function createUI( + store: Store, storage: Storage, cords: Coordinates, palette: Palette, pixels: PixelPlaced +) { const unmounts = [ appendWindow(), appendWindow(
), diff --git a/src/index.ts b/src/index.ts index c44a193..16eb5c7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,8 +19,14 @@ async function main() { createUI(store,storage, coordinates, palette, pixelPlaced); - console.log("%cOverlay by 0xa663", "color: red; font-size: 15px; font-weight: bold; text-shadow: 2px 2px 4px #000000;"); - console.log("%cTerncode's fork", `color: #4a94cc; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000;`); + console.log( + "%cOverlay by 0xa663", + "color: red; font-size: 15px; font-weight: bold; text-shadow: 2px 2px 4px #000000;" + ); + console.log( + "%cTerncode's fork", + `color: #4a94cc; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000;` + ); } if (document.readyState === "complete") { diff --git a/src/lib/store.ts b/src/lib/store.ts index 0e470ab..4524eee 100644 --- a/src/lib/store.ts +++ b/src/lib/store.ts @@ -119,7 +119,9 @@ export class Store implements LoadUnload { } async save() { - await this.storage.setItem(this.STORAGE_KEY_MURAL, this._murals.map(m => ({ name: m.name, pixels: m.pixels, x: m.x, y: m.y } as Mural))); + await this.storage + .setItem(this.STORAGE_KEY_MURAL, this._murals + .map(m => ({ name: m.name, pixels: m.pixels, x: m.x, y: m.y } as Mural))); const selected = this._selected?.m ? this._murals.indexOf(this._selected?.m!) : -1; await this.storage.setItem(this.STORAGE_KEY_SELECTED, selected); } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index b70239e..1834264 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -179,8 +179,10 @@ export function validateMural(mural: Mural) { throw new Error(`mural.pixels[${y}] is null`); } for (let x = 0; x < yArray.length; x++) { - if (typeof yArray[x] !== "number") throw new Error(`pixels[${y}][${x}] is not a number`); - if (!isInteger(yArray[x])) throw new Error(`pixels[${y}][${x}] is not am integer`); + if (typeof yArray[x] !== "number") + throw new Error(`pixels[${y}][${x}] is not a number`); + if (!isInteger(yArray[x])) + throw new Error(`pixels[${y}][${x}] is not am integer`); const colorId = yArray[x]; if (colorId == null) throw new Error("colorId is null"); } @@ -300,7 +302,9 @@ export function imageToCanvas(image: HTMLImageElement) { return canvas; } -export function drawPixelsOntoCanvas(canvas: HTMLCanvasElement, pixelsData: number[][], palette: string[], pixelSize = 1) { +export function drawPixelsOntoCanvas( + canvas: HTMLCanvasElement, pixelsData: number[][], palette: string[], pixelSize = 1 +) { const ctx = canvas.getContext("2d")!; if (!ctx) return 0; const data = pixelsData; @@ -374,7 +378,9 @@ export function formatNumber(number: number) { return numberFormatter ? numberFormatter.format(number) : number.toString(); } -export function processNumberEvent(ev: React.ChangeEvent, cb: (n: number) => void) { +export function processNumberEvent( + ev: React.ChangeEvent, cb: (n: number) => void +) { ev.preventDefault(); ev.stopPropagation(); if(ev.target.value === "") {