Refactor mousePressed and mouseDragged functions in Controls.ts

mc-cloud-town · Sep 21, 2024 · 3887cb7 · 3887cb7
1 parent 962171f
commit 3887cb7
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 53 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -1,71 +1,50 @@
 import './style.css';
 import p5 from 'p5';
+
 import Controls from './utils/Controls';
 import { BLOCK_NAMES } from './utils/Images';
 
 const IMAGE_MAP = new Map();
 
-const canvas = new p5((p5) => {
+new p5((p5: p5) => {
+  let selectedBlock = BLOCK_NAMES[0];
+  const gridContents: {
+    [x: number]: { [y: number]: string | undefined } | undefined;
+  } = {};
+  const controls = new Controls(p5);
+
   p5.setup = () => {
-    let firstIsDraw = false;
-    let nowPressMoveBuffers: { [key: string]: boolean } = {};
-    const gridContents: {
-      [x: number]: { [y: number]: string | undefined } | undefined;
-    } = {};
-    const canvas = p5.createCanvas(400, 400);
+    const size = getWindowSize();
+    const canvas = p5.createCanvas(size.width, size.height);
 
     BLOCK_NAMES.forEach((e) => {
       IMAGE_MAP.set(e, p5.loadImage(`assets/${e}.webp`));
     });
 
-    const getPos = () => {
-      const x = Math.floor(p5.mouseX / 30);
-      const y = Math.floor(p5.mouseY / 30);
-
-      return { x, y, str: `${x}-${y}` };
+    p5.mouseWheel = (e: WheelEvent) => {
+      controls.worldZoom(e);
     };
-
-    // return false: erase, true: draw
-    const setGridImage = (pos?: { x: number; y: number }, clear?: boolean) => {
-      const { x, y } = pos ?? getPos();
-
-      if (clear || gridContents[x]?.[y]) {
-        if (gridContents[x]?.[y]) {
-          delete gridContents[x][y];
-        }
-
-        p5.erase();
-        p5.rect(x * 30, y * 30, 30, 30);
-        p5.noErase();
-        return false;
-      }
-
-      gridContents[x] ??= {};
-      gridContents[x][y] = 'x';
-
-      p5.image(IMAGE_MAP.get('arail'), x * 30, y * 30, 30, 30);
-      return true;
+    p5.mousePressed = (e: MouseEvent) => {
+      e.preventDefault();
+      controls.mousePressed(e);
     };
-
-    p5.mousePressed = ({ button }: MouseEvent) => {
-      if (button !== 0) return; // 0 is left click
-
-      firstIsDraw = setGridImage();
+    p5.mouseDragged = (e: MouseEvent) => controls.mouseDragged(e);
+    p5.mouseReleased = () => {
+      if (!controls.viewPos.isDragged) {
+        setGridImage();
+      }
+      controls.mouseReleased();
     };
-
-    p5.mouseDragged = ({ button }: MouseEvent) => {
-      if (button !== 0) return; // 0 is left click
-
-      const pos = getPos();
-      if (nowPressMoveBuffers[pos.str]) return;
-
-      setGridImage(pos, !firstIsDraw);
-
-      nowPressMoveBuffers[pos.str] = true;
+    p5.windowResized = () => {
+      const size = getWindowSize();
+      p5.resizeCanvas(size.width, size.height);
+      p5.draw();
     };
-
-    p5.mouseReleased = () => {
-      nowPressMoveBuffers = {};
+    p5.draw = () => {
+      p5.clear();
+      p5.translate(controls.view.x, controls.view.y);
+      p5.scale(controls.view.zoom);
+      renderScene();
     };
 
     document.getElementById('save')!.addEventListener('click', () => {
@@ -80,4 +59,55 @@ const canvas = new p5((p5) => {
       });
     });
   };
+
+  const getWindowSize = () => {
+    return {
+      width: p5.windowWidth * 0.8,
+      height: p5.windowHeight * 0.8,
+    };
+  };
+
+  const getPos = () => {
+    const posX = (p5.mouseX - controls.view.x) / controls.view.zoom;
+    const posY = (p5.mouseY - controls.view.y) / controls.view.zoom;
+    const x = Math.floor(posX / 30);
+    const y = Math.floor(posY / 30);
+
+    return { x, y, str: `${x}-${y}` };
+  };
+
+  // return false: erase, true: draw
+  const setGridImage = (pos?: { x: number; y: number }, clear?: boolean) => {
+    const { x, y } = pos ?? getPos();
+
+    if (clear || gridContents[x]?.[y]) {
+      if (gridContents[x]?.[y]) {
+        delete gridContents[x][y];
+      }
+
+      p5.erase();
+      p5.rect(x * 30, y * 30, 30, 30);
+      p5.noErase();
+      return false;
+    }
+
+    gridContents[x] ??= {};
+    gridContents[x][y] = selectedBlock;
+
+    p5.image(IMAGE_MAP.get(selectedBlock), x * 30, y * 30, 30, 30);
+    return true;
+  };
+
+  const renderScene = () => {
+    for (const [x, dY] of Object.entries(gridContents)) {
+      for (const [y, block] of Object.entries(dY ?? {})) {
+        if (!block) continue;
+
+        const image = IMAGE_MAP.get(block);
+        if (!image) continue;
+
+        p5.image(image, +x * 30, +y * 30, 30, 30);
+      }
+    }
+  };
 }, document.getElementById('app')!);
diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,10 @@
+body {
+  padding: 0;
+}
+
 #app {
+  user-select: none;
   background-color: red;
+  width: 90%;
+  height: 90%;
 }
diff --git a/src/utils/Controls.ts b/src/utils/Controls.ts
@@ -5,6 +5,7 @@ export default class Controls {
   viewPos: IViewPos = {
     prevX: null,
     prevY: null,
+    isDragged: false,
     isDragging: false,
   };
 
@@ -17,8 +18,11 @@ export default class Controls {
   }
 
   mouseDragged({ clientX, clientY }: MouseEvent) {
-    const { prevX, prevY, isDragging } = this.viewPos;
+    const { prevX, prevY, isDragging, isDragged } = this.viewPos;
     if (!isDragging) return;
+    if (!isDragged) {
+      this.viewPos.isDragged = true;
+    }
 
     const dx = clientX - (prevX ?? 0);
     const dy = clientY - (prevY ?? 0);
@@ -32,9 +36,10 @@ export default class Controls {
   }
 
   mouseReleased() {
-    this.viewPos.isDragging = false;
     this.viewPos.prevX = null;
     this.viewPos.prevY = null;
+    this.viewPos.isDragged = false;
+    this.viewPos.isDragging = false;
   }
 
   worldZoom({ x, y, deltaY, factor = 0.05 }: IZoomInfo) {
@@ -60,4 +65,5 @@ export interface IViewPos {
   prevX: number | null;
   prevY: number | null;
   isDragging: boolean;
+  isDragged: boolean;
 }