Pen Tablet Support

css/dialogs.css

@@ -19,6 +19,7 @@
 		position: relative;
 		cursor: pointer;
 		overflow: hidden;
+		touch-action: none;
 		padding-left: 8px;
 		padding-top: 2px;
 		background: var(--color-elevated);

css/panels.css

@@ -2309,6 +2309,7 @@ span.controller_state_section_info {
 		position: relative;
 		overflow: hidden;
 		scrollbar-color: var(--color-selected) var(--color-background);
+		touch-action: none;
 	}
 	#uv_frame {
 		height: 320px;
@@ -2318,6 +2319,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);
@@ -2338,6 +2340,7 @@ span.controller_state_section_info {
 	#uv_frame.overlay_mode .uv_face,
 	#uv_frame.overlay_mode .uv_face * {
 		pointer-events: none;
+		touch-action: none;
 	}
 
 	body[mode=paint] #uv_frame,
@@ -2402,6 +2405,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;
 	}
@@ -2415,6 +2419,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;
 	}

js/interface/dialog.ts

@@ -1,8 +1,9 @@
 import { Blockbench } from "../api"
 import { Prop } from "../misc"
-import { FormElementOptions, FormResultValue, InputForm, InputFormConfig } from "./form"
+import { FormResultValue, InputForm, InputFormConfig } from "./form"
 import { Vue } from './../lib/libs'
 import { getStringWidth } from "../util/util"
+import { dragHelper } from "../util/drag_helper"
 
 interface ActionInterface {
 	name: string
@@ -94,6 +95,34 @@ function buildToolbars(dialog: Dialog) {
 		dialog_content.append(toolbar.node);
 	}
 }
+function makeDraggable(dialog: Dialog | MessageBox, handle: HTMLElement) {
+	dialog.object.classList.add('draggable');
+	dialog.object.style.position = 'absolute';
+
+	let style = dialog.object.style;
+	let wrapper = Interface.page_wrapper;
+	let bounds = [
+		wrapper.offsetLeft+2,
+		wrapper.offsetTop+2,
+		wrapper.clientWidth + wrapper.offsetLeft+2,
+		wrapper.clientHeight + wrapper.offsetTop+2,
+	]
+	handle.addEventListener('pointerdown', (e1) => {
+		let start_x: number, start_y: number;
+		dragHelper(e1, {
+			onStart() {
+				start_x = dialog.object.offsetLeft;
+				start_y = dialog.object.offsetTop;
+			},
+			onMove(context) {
+				let x = Math.clamp(start_x + context.delta.x, bounds[0], bounds[2] - dialog.object.clientWidth);
+				let y = Math.clamp(start_y + context.delta.y, bounds[1], bounds[3] - dialog.object.clientHeight);
+				style.left = x + 'px';
+				style.top = y + 'px';
+			}
+		})
+	});
+}
 
 const toggle_sidebar = window.innerWidth < 640;
 interface DialogSidebarOptions {
@@ -597,13 +626,7 @@ export class Dialog {
 		})
 		//Draggable
 		if (this.draggable !== false) {
-			jq_dialog.addClass('draggable')
-			// @ts-ignore Draggable library doesn't have types
-			jq_dialog.draggable({
-				handle: ".dialog_handle",
-				containment: '#page_wrapper'
-			})
-			jq_dialog.css('position', 'absolute')
+			makeDraggable(this, handle);
 		}
 		if (this.resizable) {
 			this.object.classList.add('resizable')
@@ -921,9 +944,11 @@ export class MessageBox extends Dialog {
 			if (!options.message) options.message = tl('message.'+options.translateKey+'.message')
 		}
 		let content = Interface.createElement('div', {class: 'dialog_content'});
+		let handle = Interface.createElement('div', {class: 'dialog_handle'}, Interface.createElement('div', {class: 'dialog_title'}, tl(options.title)));
+		let close_button = Interface.createElement('div', {class: 'dialog_close_button', onclick: 'Dialog.open.cancel()'}, Blockbench.getIconNode('clear'))
 		this.object = Interface.createElement('dialog', {class: 'dialog', style: 'width: auto;', id: 'message_box'}, [
-			Interface.createElement('div', {class: 'dialog_handle'}, Interface.createElement('div', {class: 'dialog_title'}, tl(options.title))),
-			Interface.createElement('div', {class: 'dialog_close_button', onclick: 'Dialog.open.cancel()'}, Blockbench.getIconNode('clear')),
+			handle,
+			close_button,
 			content
 		]);
 		let jq_dialog = $(this.object);
@@ -1017,13 +1042,7 @@ export class MessageBox extends Dialog {
 
 		//Draggable
 		if (this.draggable !== false) {
-			jq_dialog.addClass('draggable')
-			// @ts-ignore
-			jq_dialog.draggable({
-				handle: ".dialog_handle",
-				containment: '#page_wrapper'
-			})
-			this.object.style.position = 'absolute';
+			makeDraggable(this, handle);
 		}
 
 		let x = (window.innerWidth-540)/2

js/preview/canvas.js

@@ -245,13 +245,12 @@ export const Canvas = {
 		var side_grid = new THREE.Object3D()
 
 		if (settings.full_grid.value === true) {
-			//Grid
 			let size = settings.large_grid_size.value*block_size;
 			var grid = new THREE.GridHelper(size, size/canvasGridSize(), Canvas.gridMaterial);
 			if (Format.centered_grid) {
 				grid.position.set(0,0,0)
 			} else { 
-				grid.position.set(8,0,8)
+				grid.position.set(block_size/2,0,block_size/2)
 			}
 			grid.name = 'grid'
 			three_grid.add(grid)
@@ -264,7 +263,7 @@ export const Canvas = {
 			if (Format.centered_grid) {
 				north_mark.position.set(0,0, -3 - size/2)
 			} else {
-				north_mark.position.set(8, 0, 5 - size/2)
+				north_mark.position.set(block_size/2, 0, 5 - size/2)
 			}
 			north_mark.rotation.x = Math.PI / -2
 			three_grid.add(north_mark)
@@ -277,7 +276,7 @@ export const Canvas = {
 				if (Format.centered_grid) {
 					grid.position.set(0,0,0)
 				} else { 
-					grid.position.set(8,0,8)
+					grid.position.set(block_size/2,0,block_size/2)
 				}
 				grid.name = 'grid'
 				three_grid.add(grid)
@@ -291,7 +290,7 @@ export const Canvas = {
 				if (Format.centered_grid) {
 					grid.position.set(0,0,0)
 				} else { 
-					grid.position.set(8,0,8)
+					grid.position.set(block_size/2,0,block_size/2)
 				}
 				grid.name = 'grid'
 				three_grid.add(grid)
@@ -304,7 +303,7 @@ export const Canvas = {
 				if (Format.centered_grid) {
 					north_mark.position.set(0,0,-0.6*north_size - block_size/2);
 				} else {
-					north_mark.position.set(8,0,-0.6*north_size);
+					north_mark.position.set(block_size/2,0,-0.6*north_size);
 				}
 				north_mark.rotation.x = Math.PI / -2
 				three_grid.add(north_mark)
@@ -336,7 +335,7 @@ export const Canvas = {
 		Canvas.side_grids.x.name = 'side_grid_x'
 		Canvas.side_grids.x.visible = !Modes.display;
 		Canvas.side_grids.x.rotation.z = Math.PI/2;
-		Canvas.side_grids.x.position.y = Format.centered_grid ? 8 : 0;
+		Canvas.side_grids.x.position.y = Format.centered_grid ? block_size/2 : 0;
 		Canvas.side_grids.z.position.z = 0
 		Canvas.side_grids.x.children.forEach(el => {
 			el.layers.set(1)
@@ -347,7 +346,7 @@ export const Canvas = {
 		Canvas.side_grids.z.visible = !Modes.display;
 		Canvas.side_grids.z.rotation.z = Math.PI/2;
 		Canvas.side_grids.z.rotation.y = Math.PI/2
-		Canvas.side_grids.z.position.y = Format.centered_grid ? 8 : 0;
+		Canvas.side_grids.z.position.y = Format.centered_grid ? block_size/2 : 0;
 		Canvas.side_grids.z.position.z = 0
 		Canvas.side_grids.z.children.forEach(el => {
 			el.layers.set(3)

js/preview/preview.js

@@ -340,7 +340,7 @@ export 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);
@@ -830,7 +830,7 @@ export class Preview {
 	}
 	//Controls
 	click(event) {
-		event.preventDefault();
+		//event.preventDefault();
 		$(':focus').blur();
 		if (open_menu) open_menu.hide();
 		unselectInterface(event);
@@ -847,7 +847,7 @@ export class Preview {
 			Transformer.dispatchPointerHover(event);
 		}
 		if (Transformer.hoverAxis !== null) return;
-		let is_canvas_click = Keybinds.extra.preview_select.keybind.key == event.which || event.which === 0 || (Modes.paint && Keybinds.extra.paint_secondary_color.keybind.isTriggered(event));
+		let is_canvas_click = Keybinds.extra.preview_select.keybind.key == event.which || event.button === 0 || (Modes.paint && Keybinds.extra.paint_secondary_color.keybind.isTriggered(event));
 
 		var data = is_canvas_click && this.raycast(event);
 		if (data) {

js/texturing/painter.js

@@ -119,8 +119,8 @@ export 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) {
@@ -168,8 +168,8 @@ export 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();
 	},
 	getMeshUVIsland(fkey, face) {
@@ -184,7 +184,7 @@ export const Painter = {
 		//Called directly by startPaintToolCanvas and startBrushUV
 
 		delete Painter.paint_stroke_canceled;
-		if (settings.paint_with_stylus_only.value && !(event.touches && event.touches[0] && event.touches[0].touchType == 'stylus')) {
+		if (settings.paint_with_stylus_only.value && !(event.pointerType == 'pen' || event.touches?.[0]?.touchType == 'stylus')) {
 			Painter.paint_stroke_canceled = true;
 			return;
 		}
@@ -208,6 +208,7 @@ export const Painter = {
 			undo_aspects.textures = [texture];
 		}
 		Undo.initEdit(undo_aspects);
+		Painter.current.start_event = event;
 		Painter.brushChanges = false;
 		Painter.painting = true;
 
@@ -320,6 +321,7 @@ export const Painter = {
 		delete Painter.current.textures;
 		delete Painter.current.uv_rects;
 		delete Painter.current.uv_islands;
+		delete Painter.current.dynamic_brush_size;
 		Painter.painting = false;
 		Painter.currentPixel = [-1, -1];
 	},
@@ -429,10 +431,12 @@ export const Painter = {
 	},
 	useBrush(texture, ctx, x, y, event) {
 
-		var color = tinycolor(ColorPanel.get(Keybinds.extra.paint_secondary_color.keybind.isTriggered(event))).toRgb();
+		let use_2nd_color = Keybinds.extra.paint_secondary_color.keybind.isTriggered(Painter.current.start_event ?? event);
+		var color = tinycolor(ColorPanel.get(use_2nd_color)).toRgb();
 		var size = BarItems.slider_brush_size.get();
 		let softness = BarItems.slider_brush_softness.get()/100;
-		let b_opacity = BarItems.slider_brush_opacity.get()/255;
+		let max_opacity = BarItems.slider_brush_opacity.get()/255;
+		let b_opacity = max_opacity;
 		let tool = Toolbox.selected;
 		let matrix_id = Painter.current.element
 					  ? (Painter.current.element.uuid + Painter.current.face)
@@ -454,23 +458,34 @@ export 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;
+
+		} else if (event.pressure >= 0 && event.pressure <= 1 && (event.pressure < 1 || event.pointerType != 'touch') && event.pressure !== 0.5) {
+			pressure = event.pressure;
+			angle = event.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);
+		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' && touch.altitudeAngle !== undefined) {
-				var modifier = Math.clamp(0.5 / (touch.altitudeAngle + 0.3), 0, 1);
+			} 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);
 			}
+			Painter.current.dynamic_brush_size = size;
 		}
 
 		if (tool.brush.draw) {
@@ -485,7 +500,7 @@ export const Painter = {
 						return pxcolor;
 					}
 				}
-				return tool.brush.changePixel(px, py, pxcolor, local_opacity, {color, opacity: b_opacity, ctx, x, y, size, softness, texture, event});
+				return tool.brush.changePixel(px, py, pxcolor, local_opacity, {color, opacity: b_opacity, max_opacity, ctx, x, y, size, softness, texture, event});
 			}
 			let shape = BarItems.brush_shape.value;
 			if (shape == 'square') {
@@ -2367,7 +2382,7 @@ BARS.defineActions(function() {
 			pixel_perfect: true,
 			floor_coordinates: () => BarItems.slider_brush_softness.get() == 0,
 			get interval() {
-				let size = BarItems.slider_brush_size.get();
+				let size = Painter.current.dynamic_brush_size ?? BarItems.slider_brush_size.get();
 				if (size > 40) {
 					return size / 12;
 				} else {
@@ -2409,7 +2424,7 @@ BARS.defineActions(function() {
 
 							let target = Math.lerp(before, opacity??1, local_opacity);
 							if (target > before) Painter.setAlphaMatrix(texture, px, py, target);
-							a = target;
+							a = Math.max(target, before);
 						}
 					}
 					let result_color;
@@ -2634,7 +2649,8 @@ BARS.defineActions(function() {
 			offset_even_radius: true,
 			floor_coordinates: () => BarItems.slider_brush_softness.get() == 0,
 			get interval() {
-				return 1 + BarItems.slider_brush_size.get() * BarItems.slider_brush_softness.get() / 1500;
+				let size = Painter.current.dynamic_brush_size ?? BarItems.slider_brush_size.get();
+				return 1 + size * BarItems.slider_brush_softness.get() / 1500;
 			},
 			changePixel(px, py, pxcolor, local_opacity, {opacity, ctx, x, y, size, softness, texture, event}) {
 				if (Painter.lock_alpha) return pxcolor;