Fix zooming in Firefox and Edge

by avoiding the non-standard CSS zoom property

TODO.md

@@ -57,16 +57,14 @@
 	* If you open an image it resets the zoom but if you're on the magnification tool it doesn't update the options
 	* If you zoom in with the magnifier without previously changing the magnification on the toolbar,
 	  then switch back to the magnifier, the toolbar doesn't show any magnification highlighted
-	* Selections
-		* Completely broken in Firefox
-		* Broken in Edge when zoomed in
-		* https://github.com/1j01/jspaint/issues/3
+	* https://github.com/1j01/jspaint/issues/3
+	* Canvas area doesn't handle overflow properly in Edge or Firefox when zoomed in
 	* Middle-click scrolling is prevented
 	* Firefox
 		* It lags unusably when using tools
 			* For some tools it only happens while dragging the mouse on the canvas
 		* Tool options flicker... *and lag*, when they're redrawn in quick succession
-	* The TextBox scrollbars have extra buttons
+	* The TextBox `-webkit-scrollbar`s get extra buttons
 	* The TextBox contents move down and right when rasterizing
 	* Free-form select twice and the first selection is destroyed
 	  (there is a feature to implement that would probably fix this)

src/$Handles.js

@@ -97,18 +97,18 @@ function $Handles($container, element, options){
 			var rect = el.getBoundingClientRect();
 			var hs = $h.width();
 			if(x_axis === "middle"){
-				$h.css({ left: offset + (magnification * rect.width - hs) / 2 });
+				$h.css({ left: offset + (rect.width - hs) / 2 });
 			}else if(x_axis === "left"){
 				$h.css({ left: offset - outset });
 			}else if(x_axis === "right"){
-				$h.css({ left: offset + (magnification * rect.width - hs/2) });
+				$h.css({ left: offset + (rect.width - hs/2) });
 			}
 			if(y_axis === "middle"){
-				$h.css({ top: offset + (magnification * rect.height - hs) / 2 });
+				$h.css({ top: offset + (rect.height - hs) / 2 });
 			}else if(y_axis === "top"){
 				$h.css({ top: offset - outset });
 			}else if(y_axis === "bottom"){
-				$h.css({ top: offset + (magnification * rect.height - hs/2) });
+				$h.css({ top: offset + (rect.height - hs/2) });
 			}
 		};
 		

src/app.js

@@ -103,7 +103,7 @@ $canvas.on("user-resized", function(e, _x, _y, width, height){
 			ctx.drawImage(previous_canvas, 0, 0);
 		}
 		
-		$canvas.trigger("update"); // update handles
+		$canvas_area.trigger("resize");
 		
 		storage.set({
 			width: canvas.width,
@@ -114,6 +114,10 @@ $canvas.on("user-resized", function(e, _x, _y, width, height){
 	});
 });
 
+$canvas_area.on("resize", function(){
+	update_magnified_canvas_size();
+});
+
 storage.get({
 	width: default_canvas_width,
 	height: default_canvas_height,
@@ -373,8 +377,8 @@ var pointer, pointer_start, pointer_previous;
 var reverse, ctrl, button;
 function e2c(e){
 	var rect = canvas.getBoundingClientRect();
-	var cx = e.clientX / magnification - rect.left;
-	var cy = e.clientY / magnification - rect.top;
+	var cx = e.clientX - rect.left;
+	var cy = e.clientY - rect.top;
 	return {
 		x: ~~(cx / rect.width * canvas.width),
 		y: ~~(cy / rect.height * canvas.height),

src/functions.js

@@ -1,7 +1,12 @@
 
+function update_magnified_canvas_size(){
+	$canvas.css("width", canvas.width * magnification);
+	$canvas.css("height", canvas.height * magnification);
+}
+
 function set_magnification(scale){
 	magnification = scale;
-	$canvas.css("zoom", scale);
+	update_magnified_canvas_size();
 	$G.triggerHandler("resize");
 }