From e12821f92469aeaf04a962a1339307fd505262f0 Mon Sep 17 00:00:00 2001
From: adanrsantos <adanrsantos2016@gmail.com>
Date: Tue, 29 Oct 2024 21:32:06 -0500
Subject: [PATCH] working on the zooming in

---
 static/canvas.html |  9 ++++----
 static/canvas.js   | 55 +++++++++++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/static/canvas.html b/static/canvas.html
index 5a36a46..3296512 100644
--- a/static/canvas.html
+++ b/static/canvas.html
@@ -18,16 +18,15 @@
       <div class="canvasCont">
         <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
         <div id="toolbar" class="toolbar">
+          <div class="toolbarItems">
+            <button id="zoomOut">-</button>
+          </div>
           <div class="toolbarItems">
             <label for="stroke">Strokes</label>
             <input id="stroke" name="stroke" type="color" class="strokePicker">
           </div>
           <div class="toolbarItems">
-            <label for="lineWidth">Line Width</label>
-            <input id="lineWidth" name="lineWidth" type="number" value="5" min="1" max="10">
-          </div>
-          <div class="toolbarItems">
-            <button id="clear">Clear</button>
+            <button onclick="zoomIn"id="zoomIn">+</button>
           </div>
         </div>
       </div>  
diff --git a/static/canvas.js b/static/canvas.js
index 706bb94..19a5807 100644
--- a/static/canvas.js
+++ b/static/canvas.js
@@ -3,12 +3,18 @@ const ctx = canvas.getContext("2d");
 
 const canvasSize = 500;
 const dataSize = 1000;
-const gridCount = 10;
 let zoom = 1.0;
-const centerPixel = getPixelSize() / 2;
+
+function getGridCount() {
+    return canvasSize / zoom;
+}
+
+function getCenterPixel() {
+    return getPixelSize() / 2;
+}
 
 function getPixelSize() {
-    return canvasSize / gridCount * zoom;
+    return canvasSize / getGridCount() * zoom;
 }
 
 canvas.width = canvasSize;
@@ -20,18 +26,16 @@ function drawGrid() {
     }
     ctx.strokeStyle = '#000'; // Set grid line color
     ctx.lineWidth = 1; // Set grid line width
-
     // Draw horizontal lines
-    for (let i = 0; i <= gridCount; i++) {
+    for (let i = 0; i <= getGridCount(); i++) {
         let y = i * getPixelSize();
         ctx.beginPath();
         ctx.moveTo(0, y); // Start the line at the left edge (x = 0)
         ctx.lineTo(canvasSize, y); // Draw to the right edge (x = canvasSize)
         ctx.stroke();
     }
-
     // Draw vertical lines
-    for (let i = 0; i <= gridCount; i++) {
+    for (let i = 0; i <= getGridCount(); i++) {
         let x = i * getPixelSize();
         ctx.beginPath();
         ctx.moveTo(x, 0); // Start the line at the top edge (y = 0)
@@ -51,15 +55,15 @@ class Point {
     // Convert canvas position to data position
     canvasToData() {
         return new Point(
-            Math.round(this.x / canvasSize * gridCount),
-            Math.round(this.y / canvasSize * gridCount)
+            Math.round(this.x / canvasSize * getGridCount()),
+            Math.round(this.y / canvasSize * getGridCount())
         );
     }
     // Convert data position to canvas position
     dataToCanvas() {
         return new Point(
-            this.x / gridCount * canvasSize,
-            this.y / gridCount * canvasSize
+            this.x / getGridCount() * canvasSize,
+            this.y / getGridCount() * canvasSize
         );
     }
     // Convert to array index
@@ -87,14 +91,35 @@ class Point {
     }
 }
 
-function draw(point) {
+function draw(point, color) {
     point = point.canvasToData().dataToCanvas()
+    console.log(point.x + " " + point.y);
+    ctx.fillStyle = color;
     ctx.fillRect(point.x, point.y, getPixelSize(), getPixelSize());
 }
 
 canvas.addEventListener("mousedown", (e) => {
-    let x = e.clientX - canvas.getBoundingClientRect().left - centerPixel;
-    let y = e.clientY - canvas.getBoundingClientRect().top - centerPixel;
+    let x = e.clientX - canvas.getBoundingClientRect().left - getCenterPixel();
+    let y = e.clientY - canvas.getBoundingClientRect().top - getCenterPixel();
+    let color = document.getElementById("stroke").value;
     let point = new Point(x, y)
-    draw(point);
+    draw(point, color);
+});
+
+document.getElementById("zoomIn").addEventListener("click", () => {
+    if (zoom < 100.0){
+        zoom += 1.0;
+    }
+    console.log(zoom);
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    drawGrid(); // Redraw the grid with updated zoom
+});
+
+document.getElementById("zoomOut").addEventListener("click", () => {
+    if (zoom > 1.0){
+        zoom -= 1.0;
+    }
+    console.log(zoom);
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    drawGrid(); // Redraw the grid with updated zoom
 });