GUI fixes for mobile (based on test on real mobile android device)

index.html

@@ -6,7 +6,7 @@
 	<title>miniPaint - image editor</title>
 	<meta name="description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />
 	<meta name="keywords" content="photo, image, picture, transparent, layers, free, edit, html5, canvas, javascript, online, photoshop, gimp, effects, sharpen, blur, magic eraser tool, clone tool, rotate, resize, photoshop online, online tools, tilt shift, sprites, keypoints" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
 	<link rel="shortcut icon" href="images/favicon.png?v2" />
 	<!-- Google -->
 	<meta itemprop="name" content="miniPaint" />

src/css/layout.css

@@ -1,9 +1,13 @@
 .wrapper{
 	display: -ms-grid;
 	display: grid;
-	height: calc(100vh - 30px);
 	margin: 0;
-	position: relative;
+	position: fixed; /* dont change it, vh does not work on mobiles with bottom footer */
+	top: 30px;
+	right: 0;
+	left: 0;
+	bottom: 5px;
+	height: auto;
 	overflow: hidden;
 
 	-ms-grid-rows: auto 1fr;
@@ -624,6 +628,9 @@ canvas{
 	body{
 		padding-top:50px;
 	}
+	.wrapper{
+		top: 50px;
+	}
 }
 @media screen and (max-width:550px){
 	.canvas_wrapper{

src/css/popup.css

@@ -161,6 +161,9 @@
 }
 
 @media screen and (max-width:500px){
+	#popup {
+		max-height: calc(80vh - 20px); /* mobile phones has bottom menu */
+	}
 	#popup tr{
 		display: block;
 		margin-bottom: 10px;

src/css/reset.css

@@ -1,7 +1,3 @@
-*{
-	box-sizing: border-box;
-	background-repeat: no-repeat;
-}
 :root {
 	/* original - default */
 	--background: radial-gradient(circle, #aaa 0%, #4d5355 100%);
@@ -41,9 +37,6 @@
 	--scrollbar-thumb-color: #2f3739;
 	--mobile-menu-toggle-filter: invert(1);
 }
-html {
-	font-size: 10px; /* Base is 10px for easy REM calculation */
-}
 body.theme-light{
 	/* light */
 	--background: #f9f9fa;
@@ -112,6 +105,14 @@ body.theme-green{
 	--scrollbar-thumb-color: #80937d;
 	--mobile-menu-toggle-filter: invert(1);
 }
+
+*{
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+}
+html {
+	font-size: 10px; /* Base is 10px for easy REM calculation */
+}
 body{
 	margin: 0px;
 	padding: 0px;

src/js/core/base-gui.js

@@ -270,11 +270,8 @@ class Base_gui_class {
 
 			if (auto_size == false) {
 				//screen size is smaller then 400x300
-				config.WIDTH = parseInt(page_w) - 5;
+				config.WIDTH = parseInt(page_w) - 15;
 				config.HEIGHT = parseInt(page_h) - 10;
-				if (page_w < 585) {
-					config.HEIGHT = config.HEIGHT - 15;
-				}
 			}
 		}
 	}

src/js/core/base-tools.js

@@ -139,7 +139,7 @@ class Base_tools_class {
 
 		if (event.changedTouches) {
 			//using touch events
-			event = event.changedTouches[0];	//@todo - also use others?
+			event = event.changedTouches[0];
 		}
 
 		var mouse_x = event.pageX - this.Base_gui.canvas_offset.x;

src/js/core/gui/gui-preview.js

@@ -40,6 +40,8 @@ class GUI_preview_class {
 		// preview mini window size on right sidebar
 		this.PREVIEW_SIZE = {w: 176, h: 100};
 
+		this.canvas_offset = {x: 0, y: 0};
+
 		this.zoom_data = {
 			x: 0,
 			y: 0,
@@ -65,6 +67,7 @@ class GUI_preview_class {
 
 	set_events() {
 		var _this = this;
+		var is_touch = false;
 
 		document.addEventListener('mousedown', function (e) {
 			_this.mouse_pressed = true;
@@ -72,6 +75,12 @@ class GUI_preview_class {
 		document.addEventListener('mouseup', function (e) {
 			_this.mouse_pressed = false;
 		}, false);
+		document.addEventListener('touchstart', function (e) {
+			_this.mouse_pressed = true;
+		}, false);
+		document.addEventListener('touchend', function (e) {
+			_this.mouse_pressed = false;
+		}, false);
 		document.getElementById('zoom_range').addEventListener('input', function (e) {
 			_this.set_center_zoom();
 			_this.zoom(this.value);
@@ -113,15 +122,36 @@ class GUI_preview_class {
 			config.need_render = true;
 		}, false);
 		document.getElementById("canvas_preview").addEventListener('mousedown', function (e) {
-			//change zoom offset
+			if(is_touch)
+				return;
 			_this.set_zoom_position(e);
 		}, false);
 		document.getElementById("canvas_preview").addEventListener('mousemove', function (e) {
-			//change zoom offset
+			if(is_touch)
+				return;
 			if (_this.mouse_pressed == false)
 				return;
 			_this.set_zoom_position(e);
 		}, false);
+
+		document.getElementById("canvas_preview").addEventListener('touchstart', function (e) {
+			is_touch = true;
+
+			//calc canvas position offset
+			var bodyRect = document.body.getBoundingClientRect();
+			var canvas_el = document.getElementById("canvas_preview").getBoundingClientRect();
+			_this.canvas_offset.x = canvas_el.left - bodyRect.left;
+			_this.canvas_offset.y = canvas_el.top - bodyRect.top;
+
+			//change zoom offset
+			_this.set_zoom_position(e);
+		});
+		document.getElementById("canvas_preview").addEventListener('touchmove', function (e) {
+			//change zoom offset
+			if (_this.mouse_pressed == false)
+				return;
+			_this.set_zoom_position(e);
+		});
 	}
 
 	prepare_canvas() {
@@ -271,14 +301,24 @@ class GUI_preview_class {
 		this.zoom_data.y = config.visible_height / 2;
 	}
 
-	set_zoom_position(e) {
+	set_zoom_position(event) {
+		var mouse_x = event.offsetX;
+		var mouse_y = event.offsetY;
+		if (event.changedTouches) {
+			//touch events
+			event = event.changedTouches[0];
+
+			mouse_x = event.pageX - this.canvas_offset.x;
+			mouse_y = event.pageY - this.canvas_offset.y;
+		}
+
 		var visible_w = config.visible_width / config.ZOOM;
 		var visible_h = config.visible_height / config.ZOOM;
 		var mini_w = this.PREVIEW_SIZE.w * visible_w / config.WIDTH;
 		var mini_h = this.PREVIEW_SIZE.h * visible_h / config.HEIGHT;
 
-		var change_x = (e.offsetX - mini_w / 2) / this.PREVIEW_SIZE.w * config.WIDTH;
-		var change_y = (e.offsetY - mini_h / 2) / this.PREVIEW_SIZE.h * config.HEIGHT;
+		var change_x = (mouse_x - mini_w / 2) / this.PREVIEW_SIZE.w * config.WIDTH;
+		var change_y = (mouse_y - mini_h / 2) / this.PREVIEW_SIZE.h * config.HEIGHT;
 
 		var zoom_data = this.zoom_data;
 		zoom_data.move_pos = {};

src/js/libs/popup.js

@@ -169,7 +169,7 @@ class Dialog_class {
 				return;
 			event.preventDefault();
 			_this.resize_clicked.x = event.pageX;
-			_this.resize_clicked.y = event.pageY;s
+			_this.resize_clicked.y = event.pageY;
 
 			var target = document.querySelector('#popup');
 			_this.element_offset.x = target.offsetTop;