From fb838a766f26ced6b4580d51621ba3f4e05c3ddb Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Thu, 4 Feb 2021 17:20:01 +0100
Subject: [PATCH] Improve gimbal controls

---
 css/window.css           | 17 ++++++++---------
 js/interface/settings.js |  4 ++--
 js/preview/preview.js    | 13 +++++++++----
 js/util.js               |  2 +-
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/css/window.css b/css/window.css
index af085b8f..47c6bab6 100644
--- a/css/window.css
+++ b/css/window.css
@@ -678,7 +678,7 @@
 		height: 80px;
 		bottom: 0;
 		right: 0;
-		opacity: 0.5;
+		opacity: 0.6;
 		overflow: hidden;
 	}
 	.gimbal_controls:hover, .gimbal_controls.mouse_active {
@@ -689,14 +689,13 @@
 		width: 100%;
 		height: 100%;
 		display: block;
+		pointer-events: none;
+		filter: brightness(0.7);
 	}
 	.gimbal_controls > svg path {
 		stroke-width: 2px;
 		fill: none;
 	}
-	.gimbal_controls > svg path {
-		stroke: ;
-	}
 	.gimbal_controls_side {
 		color: var(--color-accent_text);
 		position: absolute;
@@ -705,10 +704,10 @@
 		margin: -8px;
 		border-radius: 50%;
 		z-index: 1;
-		font-size: 12px;
-		font-weight: bold;
-		font-family: var(--font-code);
 		text-align: center;
+		font-size: 12px;
+		line-height: 16px;
+		font-family: var(--font-code);
 	}
 	.gimbal_controls.mouse_active .gimbal_controls_side {
 		pointer-events: none;
@@ -727,9 +726,9 @@
 	}
 	.gimbal_controls_side.background {
 		z-index: 0;
-		opacity: 0.6;
+		filter: brightness(0.7);
 	}
 	.gimbal_controls_side:hover {
 		background-color: var(--color-bright_ui) !important;
-		opacity: 1;
+		filter: brightness(1);
 	}
\ No newline at end of file
diff --git a/js/interface/settings.js b/js/interface/settings.js
index fa688d6b..47ef0873 100644
--- a/js/interface/settings.js
+++ b/js/interface/settings.js
@@ -100,10 +100,10 @@ const Settings = {
 		}});
 		new Setting('seethrough_outline', 	{category: 'interface', value: false});
 		new Setting('outliner_colors', 		{category: 'interface', value: false});
-		new Setting('preview_checkerboard',	{category: 'interface', value: false, onChange() {
+		new Setting('preview_checkerboard',	{category: 'interface', value: true, onChange() {
 			$('#center').toggleClass('checkerboard', settings.preview_checkerboard.value);
 		}});
-		new Setting('uv_checkerboard', 		{category: 'interface', value: false, onChange() {
+		new Setting('uv_checkerboard', 		{category: 'interface', value: true, onChange() {
 			$('.UVEditor').toggleClass('checkerboard_trigger', settings.uv_checkerboard.value);
 		}});
 		
diff --git a/js/preview/preview.js b/js/preview/preview.js
index 9e8dcc8f..23d4b0ad 100644
--- a/js/preview/preview.js
+++ b/js/preview/preview.js
@@ -1265,18 +1265,23 @@ class GimbalControls {
 
 		// Interact
 		addEventListeners(this.node, 'mousedown touchstart', e1 => {
-			if (!scope.preview.controls.enableRotate) return;
+			if (!scope.preview.controls.enableRotate && scope.preview.angle == null) return;
 			convertTouchEvent(e1);
 			let last_event = e1;
 
 			function move(e2) {
-				scope.node.classList.add('mouse_active');
 				convertTouchEvent(e2);
-				scope.preview.controls.rotateLeft((e2.clientX - last_event.clientX) / 24);
-				scope.preview.controls.rotateUp((e2.clientY - last_event.clientY) / 24);
+				scope.node.classList.add('mouse_active');
+				if (!e1.touches && last_event == e1) scope.node.requestPointerLock();
+				if (scope.preview.angle != null) {
+					scope.preview.setProjectionMode(false);
+				}
+				scope.preview.controls.rotateLeft((e1.touches ? (e2.clientX - last_event.clientX) : Math.clamp(e2.movementX, -5, 5)) / 40);
+				scope.preview.controls.rotateUp((e1.touches ? (e2.clientY - last_event.clientY) : Math.clamp(e2.movementY, -5, 5)) / 40);
 				last_event = e2;
 			}
 			function off(e2) {
+				document.exitPointerLock()
 				removeEventListeners(document, 'mousemove touchmove', move);
 				removeEventListeners(document, 'mouseup touchend', off);
 				scope.node.classList.remove('mouse_active');
diff --git a/js/util.js b/js/util.js
index a844e75f..95b96c1a 100644
--- a/js/util.js
+++ b/js/util.js
@@ -82,7 +82,7 @@ Object.defineProperty($.Event.prototype, 'ctrlOrCmd', {
 
 function convertTouchEvent(event) {
 	if (event && event.changedTouches && event.changedTouches.length && event.offsetX == undefined) {
-		event.preventDefault();
+		//event.preventDefault();
 		event.clientX = event.changedTouches[0].clientX;
 		event.clientY = event.changedTouches[0].clientY;
 		event.offsetX = event.changedTouches[0].clientX;