Fix bugs

build.js

@@ -89,7 +89,7 @@ main(dev);
 
 if (dev) {
     const fn = debounce(() => {
-        main();
+        main(dev);
         console.log("Built");
     }, 1000); 
     

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelcanvas-overlay",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Pixel canvas overlay",
   "main": "index.js",
   "scripts": {

src/UI/components/minimap.tsx

@@ -21,7 +21,8 @@ const ColorBox = styled.div`
     height: 25px;
     padding: 2px;
     margin: 2px;
-    border: 1px solid black;
+    border: 2px solid black;
+    border-radius: 12px;
     text-align: center;
     font-weight: bolder;
 `;

src/UI/components/muralView.tsx

@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Coordinates } from "../../coordinates";
 import { TEXT_FORMATS } from "../importMural";
 import saveAs from "file-saver";
+import { Popup } from "./Popup";
 
 const Margin = styled.div`
     margin: 2px;
@@ -166,8 +167,10 @@ export class MuralView extends React.Component<Props, State> {
         const blob = new Blob([JSON.stringify(rawMural)], { type: "application/json;charset=utf-8" });
         saveAs(blob, `${rawMural.name}.${TEXT_FORMATS[0]}`);
     };
-    onDelete = () => {
+    onDelete = async () => {
+        if (await Popup.confirm(`Are you sure you want to remove "${this.props.mural.name}"`)) {
             this.s.remove(this.props.mural);
+        }
     };
     onEnter = () => {
         this.props.store.addPhantomOverlay(this.props.mural);

src/UI/importMural.tsx

@@ -84,13 +84,13 @@ export async function importArtWork(store: Store, cords: Coordinates, palette: P
         } else {
             const img = file.data as HTMLImageElement;
             const pixels = await imageToMural(img, palette);
-            return new Promise<Mural>((resolve, reject)=> {
+            const mural = await new Promise<Mural>((resolve, reject)=> {
                 store.setOverlayModify({
                     pixels,
                     muralObj: {
                         name: img.alt,
-                        x: cords.ux - (get2DArrWidth(pixels) / 2),
+                        x: Math.floor(cords.ux - (get2DArrWidth(pixels) / 2)),
-                        y: cords.uy - (get2DArrHeight(pixels) / 2),
+                        y: Math.floor(cords.uy - (get2DArrHeight(pixels) / 2)),
                     },
                     cb: (name, x, y, confirm) => {
                         if (confirm) {
@@ -101,6 +101,8 @@ export async function importArtWork(store: Store, cords: Coordinates, palette: P
                     }
                 });
             });
+            validateMural(mural);
+            return mural;
         }
     }
 }
@@ -394,7 +396,7 @@ function quantizeImage(canvas: HTMLCanvasElement, rgbQuant: RgbQuant, ditheringK
 
     const imageData = canvasToImageData(canvas);
 
-    const data = rgbQuant.reduce(canvas, RetrieveType.Uint8Array, ditheringKernel);
+    const data = rgbQuant.reduce(canvas, RetrieveType.Uint8Array, ditheringKernel)!;
     if (imageData.data.length !== data.length) {
         throw new Error("Got unexpected data from regQuant");
     }

src/store.ts

@@ -60,7 +60,13 @@ export class Store implements LoadUnload {
         this.save();
     }
 
-    remove(mural: Mural) {
+    remove(mural: MuralEx) {
+        this._overlayIndices = [];
+        this._overlayModify = undefined;
+        this._phantomOverlay = -1; 
+        if (this._selected && this._selected?.m === mural) {
+            this._selected = undefined;
+        }
         removeItem(this._murals, mural);
         this.emit(StoreEvents.MuralRemoved);
         this.save();

src/utils.ts

@@ -152,10 +152,10 @@ export function validateMural(mural: Mural) {
         if (Array.isArray(muralClone)) {
             throw new Error("Should not be an array");
         } else {
-            if (typeof muralClone.x !== "number") throw new Error("X is not a number");
+            if (typeof muralClone.x !== "number") throw new Error("x is not a number");
-            if (typeof muralClone.y !== "number") throw new Error("Y is not a number");
+            if (typeof muralClone.y !== "number") throw new Error("y is not a number");
-            if (!isInteger(muralClone.x)) throw new Error("X is not an integer");
+            if (!isInteger(muralClone.x)) throw new Error("x is not an integer");
-            if (!isInteger(muralClone.y)) throw new Error("Y is not an integer");
+            if (!isInteger(muralClone.y)) throw new Error("y is not an integer");
             if (typeof muralClone.name !== "string") throw new Error("Missing name");
             if (muralClone.name.length <= 1) throw new Error("Name to short");
             if (muralClone.name.length >= 64) throw new Error("Name to long");
@@ -344,5 +344,14 @@ export function formatNumber(number: number) {
 }
 
 export function processNumberEvent(ev: React.ChangeEvent<HTMLInputElement>, cb: (n: number) => void) {
+    console.error(ev, ev.target.value);
+    ev.preventDefault();
+    ev.stopPropagation();
+    if(ev.target.value === "") {
+        cb(0);
+    } else if (ev.target.value === "-") {
+        cb(-1);
+    } else {
         cb(parseInt(ev.target.value, 10));
+    }
 }