From b9153998f1373a050999bc8d056083d5f8c79dd5 Mon Sep 17 00:00:00 2001
From: Logan <logan@gatlintc.com>
Date: Wed, 6 Nov 2024 23:28:38 -0600
Subject: [PATCH] Restricted camera in canvas

---
 static/canvas.html |  4 ++--
 static/canvas.js   | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/static/canvas.html b/static/canvas.html
index 4d3135f..fcf2931 100644
--- a/static/canvas.html
+++ b/static/canvas.html
@@ -21,7 +21,7 @@
       </div>
       <!--note to self: below IS the canvas-->
       <!--<div class="canvasCont">-->
-        <canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
+        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
         <div id="toolbar" class="d-flex align-items-center toolbar">
           <div class="toolbarItems">
             <button id="zoomOut">-</button>
@@ -39,4 +39,4 @@
     </div>
     <script src="./canvas.js"></script>   
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/canvas.js b/static/canvas.js
index ab521a2..8babd4b 100644
--- a/static/canvas.js
+++ b/static/canvas.js
@@ -20,6 +20,7 @@ window.addEventListener("load", async (e) => {
     for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) {
         image.data[x] = 255;
     }
+    ctx.imageSmoothingEnabled = false;
     // Create drawable image, update it every half second
     await redraw();
     setInterval(redraw, 500);
@@ -41,9 +42,8 @@ function setPixel(data, x, y, color) {
 
 function draw() {
     ctx.fillStyle = "rgb(0 0 0 255)";
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
     let drawScale = CANVAS_SIZE / DATA_SIZE * scale;
-    ctx.imageSmoothingEnabled = false;
     ctx.scale(drawScale, drawScale);
     ctx.drawImage(bitmap, offx, offy);
     ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -57,20 +57,24 @@ function mousePosition(e) {
     return {x: cx, y: cy};
 }
 
+function moveOffset(x, y) {
+    offx = Math.min(Math.max(x, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
+    offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
+}
+
 canvas.addEventListener("wheel", async (e) => {
     let mouse = mousePosition(e);
-    console.log(mouse);
     let oldScale = scale;
     if (e.deltaY < 0) {
         scale += 0.1;
     } else if (e.deltaY > 0) {
         scale -= 0.1;
     }
+    scale = Math.min(Math.max(scale, 0.5), 10);
     let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale);
     let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
     let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
-    offx += diff * ratiox;
-    offy += diff * ratioy;
+    moveOffset(diff * ratiox, diff*  ratioy);
     draw(image);
 });
 
@@ -111,6 +115,10 @@ canvas.addEventListener("mousemove", async (e) => {
     if (e.buttons & 1) {
         offx += e.movementX * (1.0 / scale) * 0.45;
         offy += e.movementY * (1.0 / scale) * 0.45;
+        moveOffset(
+            offx + e.movementX * (1.0 / scale) * 0.45,
+            offy + e.movementY * (1.0 / scale) * 0.45
+        );
         draw(image);
     } 
 });