zoom in, zoom out

src/main.js

@@ -51,7 +51,6 @@ let redoStack = [];
 
 let layoutElements = []
 
-let appVersion = "0.6.1-alpha"
 let minFileVersion = "1.0"
 let maxFileVersion = "2.0"
 
@@ -61,6 +60,8 @@ let fileWidth = 1500
 let fileHeight = 1000
 let fileFps = 12
 
+let zoomLevel = 1
+
 let playing = false
 
 let clipboard = []
@@ -148,6 +149,8 @@ let config = {
     paste: "v",
     delete: "Backspace",
     group: "g",
+    zoomIn: "+",
+    zoomOut: "-",
   }
 }
 
@@ -1091,7 +1094,6 @@ class BaseShape {
       ctx.fill()
     }
     if (this.stroked) {
-      console.log(this.curves)
       for (let curve of this.curves) {
         ctx.strokeStyle = curve.color
         ctx.beginPath()
@@ -1856,6 +1858,10 @@ window.addEventListener("keydown", (e) => {
     delete_action()
   } else if (e.key == config.shortcuts.group && mod == true) {
     actions.group.create()
+  } else if (e.key == config.shortcuts.zoomIn && mod == true) {
+    zoomIn()
+  } else if (e.key == config.shortcuts.zoomOut && mod == true) {
+    zoomOut()
   }
   else if (e.key == "ArrowRight") {
     if (mod == true) {
@@ -2199,6 +2205,26 @@ async function render() {
   document.querySelector("body").style.cursor = "default"
 }
 
+function zoomIn() {
+  if (zoomLevel < 8) {
+    zoomLevel *= 2
+    updateUI()
+    updateMenu()
+  }
+}
+function zoomOut() {
+  if (zoomLevel > 1/8) {
+    zoomLevel /= 2
+    updateUI()
+    updateMenu()
+  }
+}
+function resetZoom() {
+  zoomLevel = 1;
+  updateUI()
+  updateMenu()
+}
+
 function stage() {
   let stage = document.createElement("canvas")
   let scroller = document.createElement("div")
@@ -2915,11 +2941,16 @@ function updateLayout(element) {
 
 function updateUI() {
   for (let canvas of canvases) {
+    canvas.width = fileWidth * zoomLevel
+    canvas.height = fileHeight * zoomLevel
+    canvas.style.width = `${fileWidth * zoomLevel}px`
+    canvas.style.height = `${fileHeight * zoomLevel}px`
     let ctx = canvas.getContext("2d")
     ctx.resetTransform();
+    ctx.scale(zoomLevel, zoomLevel)
     ctx.beginPath()
     ctx.fillStyle = "white"
-    ctx.fillRect(0,0,canvas.width,canvas.height)
+    ctx.fillRect(0,0,fileWidth,fileHeight)
 
     context.ctx = ctx;
     root.draw(context)
@@ -3245,13 +3276,18 @@ async function updateMenu() {
     items: [
       {
         text: "Zoom In",
-        enabled: false,
+        enabled: true,
-        action: () => {}
+        action: zoomIn
       },
       {
         text: "Zoom Out",
-        enabled: false,
+        enabled: true,
-        action: () => {}
+        action: zoomOut
+      },
+      {
+        text: "Reset Zoom",
+        enabled: zoomLevel != 1,
+        action: resetZoom
       },
     ]
   });