Better graphics table support for paint tools

Fix pressure and angle sensitivity
Closes #1286

css/panels.css

@@ -1774,6 +1774,7 @@ span.controller_state_section_info {
 		margin: auto;
 		position: relative;
 		overflow: hidden;
+		touch-action: none;
 	}
 	#uv_frame {
 		height: 320px;
@@ -1783,6 +1784,7 @@ span.controller_state_section_info {
 		border: 4px solid var(--color-frame);
 		box-shadow: 0 0 0 1800px var(--color-background);
     	box-sizing: content-box;
+		touch-action: none;
 		--color-uv-unselected: var(--color-grid);
 		--color-uv-selected: white;
 		--color-uv-hover: var(--color-accent);
@@ -1802,6 +1804,7 @@ span.controller_state_section_info {
 	}
 	#uv_frame.overlay_mode * {
 		pointer-events: none;
+		touch-action: none;
 	}
 
 	body[mode=paint] #uv_frame {
@@ -1843,6 +1846,7 @@ span.controller_state_section_info {
 		margin: calc(var(--radius) * -1px);
 		position: absolute;
 		pointer-events: none;
+		touch-action: none;
 		mix-blend-mode: difference;
 		z-index: 1;
 	}
@@ -1856,6 +1860,7 @@ span.controller_state_section_info {
 		margin: calc(var(--radius) * -1px);
 		position: absolute;
 		pointer-events: none;
+		touch-action: none;
 		mix-blend-mode: difference;
 		z-index: 1;
 	}

css/setup.css

@@ -4,6 +4,7 @@
 		margin: 0;
 		padding: 0;
 		user-select: none;
+		-webkit-user-select: none;
 		outline: none;
 		outline-color: rgba(0, 0, 0, 0);
 	}

js/preview/preview.js

@@ -298,7 +298,7 @@ class Preview {
 
 		this.raycaster = new THREE.Raycaster();
 		this.mouse = new THREE.Vector2();
-		addEventListeners(this.canvas, 'mousedown touchstart', 	event => { this.click(event)}, { passive: false })
+		addEventListeners(this.canvas, 'pointerdown',			event => { this.click(event)}, { passive: false })
 		addEventListeners(this.canvas, 'mousemove touchmove', 	event => {
 			if (!this.static_rclick) return;
 			convertTouchEvent(event);
@@ -707,7 +707,7 @@ class Preview {
 	}
 	//Controls
 	click(event) {
-		event.preventDefault();
+		//event.preventDefault();
 		$(':focus').blur();
 		if (open_menu) open_menu.hide();
 		unselectInterface(event);

js/texturing/painter.js

@@ -155,8 +155,8 @@ const Painter = {
 		Painter.startPaintTool(texture, x, y, data.element.faces[data.face].uv, e, data)
 
 		if (Toolbox.selected.id !== 'color_picker') {
-			addEventListeners(document, 'mousemove touchmove', Painter.movePaintToolCanvas, false );
-			addEventListeners(document, 'mouseup touchend', Painter.stopPaintToolCanvas, false );
+			addEventListeners(document, 'pointermove', Painter.movePaintToolCanvas, false );
+			addEventListeners(document, 'pointerup', Painter.stopPaintToolCanvas, false );
 		}
 	},
 	movePaintToolCanvas(event, data) {
@@ -240,8 +240,8 @@ const Painter = {
 		}
 	},
 	stopPaintToolCanvas() {
-		removeEventListeners(document, 'mousemove touchmove', Painter.movePaintToolCanvas, false );
-		removeEventListeners(document, 'mouseup touchend', Painter.stopPaintToolCanvas, false );
+		removeEventListeners(document, 'pointermove', Painter.movePaintToolCanvas, false );
+		removeEventListeners(document, 'pointerup', Painter.stopPaintToolCanvas, false );
 		Painter.stopPaintTool();
 	},
 	// Paint Tool Main
@@ -473,22 +473,32 @@ const Painter = {
 				}
 			}
 		}
+		let pressure;
+		let angle;
 		if (event.touches && event.touches[0] && event.touches[0].touchType == 'stylus' && event.touches[0].force !== undefined) {
 			// Stylus
 			var touch = event.touches[0];
+			pressure = touch.force;
+			angle = touch.altitudeAngle;
 
-			if (settings.brush_opacity_modifier.value == 'pressure' && touch.force !== undefined) {
-				b_opacity = Math.clamp(b_opacity * Math.clamp(touch.force*1.25, 0, 1), 0, 100);
+		} else if (event.pressure >= 0 && event.pressure <= 1 && event.pressure !== 0.5) {
+			pressure = event.pressure;
+			angle = event.altitudeAngle;
+		}
 
-			} else if (settings.brush_opacity_modifier.value == 'tilt' && touch.altitudeAngle !== undefined) {
-				var modifier = Math.clamp(0.5 / (touch.altitudeAngle + 0.3), 0, 1);
+		if (pressure !== undefined) {
+			if (settings.brush_opacity_modifier.value == 'pressure' && pressure !== undefined) {
+				b_opacity = Math.clamp(b_opacity * Math.clamp(pressure*1.25, 0, 1), 0, 100);
+
+			} else if (settings.brush_opacity_modifier.value == 'tilt' && angle !== undefined) {
+				var modifier = Math.clamp(0.5 / (angle + 0.3), 0, 1);
 				b_opacity = Math.clamp(b_opacity * modifier, 0, 100);
 			}
-			if (settings.brush_size_modifier.value == 'pressure' && touch.force !== undefined) {
-				size = Math.clamp(touch.force * size * 2, 1, 20);
+			if (settings.brush_size_modifier.value == 'pressure' && pressure !== undefined) {
+				size = Math.clamp(pressure * size * 2, 1, 20);
 
-			} else if (settings.brush_size_modifier.value == 'tilt' && touch.altitudeAngle !== undefined) {
-				size *= Math.clamp(1.5 / (touch.altitudeAngle + 0.3), 1, 4);
+			} else if (settings.brush_size_modifier.value == 'tilt' && angle !== undefined) {
+				size *= Math.clamp(1.5 / (angle + 0.3), 1, 4);
 			}
 		}
 

js/texturing/uv.js

@@ -72,15 +72,19 @@ const UVEditor = {
 			}
 		}
 		if (Toolbox.selected.id !== 'color_picker' && Toolbox.selected.id !== 'copy_paste_tool' && texture) {
-			addEventListeners(this.vue.$refs.frame, 'mousemove touchmove', UVEditor.movePaintTool, false );
-			addEventListeners(document, 'mouseup touchend', UVEditor.stopBrush, false );
+			addEventListeners(UVEditor.vue.$refs.frame, 'pointermove', UVEditor.movePaintTool, false );
+			addEventListeners(document, 'pointerup', UVEditor.stopBrush, false );
 		}
 	},
 	movePaintTool(event) {
+		if (event.pointerType === 'pen' && event.pressure === 0) {
+			UVEditor.stopBrush(event);
+			return;
+		}
 		var texture = UVEditor.getTexture()
 		if (!texture) {
 			Blockbench.showQuickMessage('message.untextured')
-		} else if (event.which === 1 || (event.touches && event.touches.length == 1)) {
+		} else if (event.which <= 1 || event.pointerType === 'pen' || (event.touches && event.touches.length == 1)) {
 			var new_face;
 			var {x, y} = UVEditor.getBrushCoordinates(event, texture);
 			if (texture.img.naturalWidth + texture.img.naturalHeight == 0) return;
@@ -88,6 +92,8 @@ const UVEditor = {
 			if (x === Painter.current.x && y === Painter.current.y) {
 				return
 			}
+			UVEditor.vue.mouse_coords.x = x;
+			UVEditor.vue.mouse_coords.y = y;
 			if (Painter.current.face !== UVEditor.selected_faces[0]) {
 				Painter.current.x = x
 				Painter.current.y = y
@@ -103,8 +109,8 @@ const UVEditor = {
 		}
 	},
 	stopBrush(event) {
-		removeEventListeners( UVEditor.vue.$refs.frame, 'mousemove touchmove', UVEditor.movePaintTool, false );
-		removeEventListeners( document, 'mouseup touchend', UVEditor.stopBrush, false );
+		removeEventListeners( UVEditor.vue.$refs.frame, 'pointermove', UVEditor.movePaintTool, false );
+		removeEventListeners( document, 'pointerup', UVEditor.stopBrush, false );
 		if (Toolbox.selected.id !== 'copy_paste_tool') {
 			Painter.stopPaintTool()
 		} else {
@@ -1313,6 +1319,7 @@ const UVEditor = {
 			}})
 		}},
 		'focus_on_selection',
+		'painting_grid',
 		'uv_checkerboard',
 		'paint_mode_uv_overlay',
 		'_',
@@ -1938,6 +1945,7 @@ Interface.definePanels(function() {
 				uv_overlay: false,
 				texture: 0,
 				mouse_coords: {x: -1, y: -1},
+				is_touch: Blockbench.isTouch,
 				copy_brush_source: null,
 				helper_lines: {x: -1, y: -1},
 				brush_type: BarItems.brush_shape.value,
@@ -2245,23 +2253,23 @@ Interface.definePanels(function() {
 														&& (viewport.scrollTop == margin[1] || viewport.scrollTop == margin_center[1]);
 						}
 						function dragMouseWheelStop(e) {
-							removeEventListeners(document, 'mousemove touchmove', dragMouseWheel);
-							removeEventListeners(document, 'mouseup touchend', dragMouseWheelStop);
+							removeEventListeners(document, 'pointermove', dragMouseWheel);
+							removeEventListeners(document, 'pointerup', dragMouseWheelStop);
 						}
-						addEventListeners(document, 'mousemove touchmove', dragMouseWheel);
-						addEventListeners(document, 'mouseup touchend', dragMouseWheelStop);
+						addEventListeners(document, 'pointermove', dragMouseWheel);
+						addEventListeners(document, 'pointerup', dragMouseWheelStop);
 						event.preventDefault();
 						$(getFocusedTextInput()).trigger('blur');
 						return false;
 
-					} else if (this.mode == 'paint' && Toolbox.selected.paintTool && (event.which === 1 || (event.touches && event.touches.length == 1))) {
+					} else if (this.mode == 'paint' && Toolbox.selected.paintTool && (event.which === 1 || event.pointerType === 'pen' || (Blockbench.isTouch && event.touches && event.touches.length == 1))) {
 						// Paint
 						if (event.target && event.target.id === 'uv_viewport') return;
 						UVEditor.startPaintTool(event);
 						event.preventDefault();
 						return false;
 
-					} else if (this.mode == 'uv' && event.target.id == 'uv_frame' && (event.which === 1 || (event.touches && event.touches.length == 1))) {
+					} else if (this.mode == 'uv' && event.target.id == 'uv_frame' && (event.which === 1 || event.pointerType === 'pen' || (event.touches && event.touches.length == 1))) {
 
 						if (event.altKey || Pressing.overrides.alt) {
 							return this.dragFace(null, event);
@@ -2360,8 +2368,8 @@ Interface.definePanels(function() {
 							UVEditor.displayTools();
 						}
 						function stop(e2) {
-							removeEventListeners(document, 'mousemove touchmove', drag);
-							removeEventListeners(document, 'mouseup touchend', stop);
+							removeEventListeners(document, 'pointermove', drag);
+							removeEventListeners(document, 'pointerup', stop);
 
 							if (Math.pow(event.clientX - e2.clientX, 2) + Math.pow(event.clientY - e2.clientY, 2) < 10) {
 								scope.selected_faces.empty();
@@ -2371,8 +2379,8 @@ Interface.definePanels(function() {
 								selection_rect.active = false;
 							}, 1)
 						}
-						addEventListeners(document, 'mousemove touchmove', drag, false);
-						addEventListeners(document, 'mouseup touchend', stop, false);
+						addEventListeners(document, 'pointermove', drag, false);
+						addEventListeners(document, 'pointerup', stop, false);
 					}
 				},
 				onMouseLeave(event) {
@@ -3309,8 +3317,8 @@ Interface.definePanels(function() {
 
 					<div id="uv_viewport"
 						@contextmenu="contextMenu($event)"
-						@mousedown="onMouseDown($event)"
-						@touchstart="onMouseDown($event)"
+						@pointerdown="onMouseDown($event)"
+						
 						@mousewheel="onMouseWheel($event)"
 						class="checkerboard_target"
 						ref="viewport"