From 1d754f485283b3472c1cf7a086de37b7d46bcfeb Mon Sep 17 00:00:00 2001
From: Nicola <nicpal2000@gmail.com>
Date: Tue, 25 Oct 2022 13:40:34 +0200
Subject: [PATCH] Added back zooming with wheel, implemented zooming with + and
 -

---
 css/_general.scss    |  2 ++
 js/Input.js          | 15 ++++++++++++---
 js/tools/ZoomTool.js | 33 +++++++++++++++++++++++++++++----
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/css/_general.scss b/css/_general.scss
index 6dc5fe1..1cc6047 100644
--- a/css/_general.scss
+++ b/css/_general.scss
@@ -2,6 +2,7 @@
 body {
 	background: darken($basecolor, 6%);
 	font-family: 'Roboto', sans-serif;
+
 	margin: 0;
 	padding: 0;
 	color: #fff;
@@ -9,6 +10,7 @@ body {
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
+	user-select:none;
 	-moz-user-select: none;
 	/* Firefox */
 	-ms-user-select: none;
diff --git a/js/Input.js b/js/Input.js
index 954a766..9a60ad5 100644
--- a/js/Input.js
+++ b/js/Input.js
@@ -39,8 +39,10 @@ const Input = (() => {
     }
 
     function getCursorPosition(e) {
-        var x;
-        var y;
+        if (!currFile.currentLayer)
+            return [-1,-1];
+        let x;
+        let y;
         
         if (e.pageX != undefined && e.pageY != undefined) {
             x = e.pageX;
@@ -82,8 +84,15 @@ const Input = (() => {
         }
         else if (!Dialogue.isOpen()){
             switch (keyboardEvent.keyCode) {
+                // + and -
+                case 43, 187:
+                    Events.emit("zoomin", undefined, 'in');
+                    break;
+                case 45, 189:
+                    Events.emit("zoomout", undefined, 'out');
+                    break;
                 //pencil tool - 1, b
-                case 49: case 66:
+                case 98: case 66:
                     Events.emit("tool-shortcut", "brush");
                     break;
                 // copy tool c
diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js
index 74ea571..8ee7c2e 100644
--- a/js/tools/ZoomTool.js
+++ b/js/tools/ZoomTool.js
@@ -1,3 +1,5 @@
+// TODO: make this similar to the rect, press once to zoom in, press twice to zoomout
+
 class ZoomTool extends ResizableTool {
     constructor (name, options, switchFunc) {
         super(name, options, switchFunc);
@@ -5,14 +7,32 @@ class ZoomTool extends ResizableTool {
         Events.on('click', this.mainButton, switchFunc, this);
         Events.on('click', this.biggerButton, this.setZoomIn.bind(this));
         Events.on('click', this.smallerButton, this.setZoomOut.bind(this));
+        Events.on('mousemove', window, this.setMousePos.bind(this));
+
+        Events.onCustom('zoomin', this.zoom.bind(this));
+        Events.onCustom('zoomout', this.zoom.bind(this));
 
         this.mode = 'in';
+        this.currMousePos = [-1, -1];
     }
 
     onStart(mousePos, target) {
         if (target.className != 'drawingCanvas')
             return;
         
+        this.zoom(mousePos, this.mode);
+    }
+
+    onMouseWheel(mousePos, mode) {
+        this.zoom(mousePos, mode);
+    }
+
+    zoom(mousePos, mode) {
+        if (mousePos[0] == undefined) {
+            mode = mousePos[1];
+            mousePos = this.currMousePos;
+        }
+        
         // Computing current width and height
         let oldWidth = currFile.canvasSize[0] * currFile.zoom;
         let oldHeight = currFile.canvasSize[1] * currFile.zoom;
@@ -21,12 +41,12 @@ class ZoomTool extends ResizableTool {
 
         //change zoom level
         //if you want to zoom out, and the zoom isnt already at the smallest level
-        if (this.mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
+        if (mode == 'out' && currFile.zoom > MIN_ZOOM_LEVEL) {
             zoomed = true;
             this.zoomOut(oldWidth, oldHeight, mousePos);
         }
         //if you want to zoom in
-        else if (this.mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
+        else if (mode == 'in' && currFile.zoom + Math.ceil(currFile.zoom/10) < window.innerHeight/4) {
             zoomed = true;
             this.zoomIn(oldWidth, oldHeight, mousePos);
         }
@@ -40,11 +60,11 @@ class ZoomTool extends ResizableTool {
         if (zoomed) {
             if (currFile.zoom <= 7)
                 currFile.pixelGrid.disablePixelGrid();
-            else if (currFile.zoom >= 20 && this.mode == 'in') {
+            else if (currFile.zoom >= 20 && mode == 'in') {
                 currFile.pixelGrid.enablePixelGrid();
                 currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
             }
-            else if (prevZoom >= 20 && this.mode == 'out') {
+            else if (prevZoom >= 20 && mode == 'out') {
                 currFile.pixelGrid.enablePixelGrid();
                 currFile.pixelGrid.repaintPixelGrid((currFile.zoom - prevZoom) * 0.6);
             }
@@ -109,4 +129,9 @@ class ZoomTool extends ResizableTool {
     setZoomOut() {
         this.mode = 'out';
     }
+
+    setMousePos(event) {
+        if (this && this.currMousePos)
+            this.currMousePos = Input.getCursorPosition(event);
+    }
 }
\ No newline at end of file