Keybinds to drag globally to change num slider

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);
@@ -1311,16 +1312,20 @@
 	}
 	#overlay_message_box > div {
 		margin-top: 64px;
-		width: 400px;
+		width: 460px;
 		margin-left: auto;
 		margin-right: auto;
 	}
+	#overlay_message_box > div > div {
+		margin-bottom: 15px;
+		margin-top: 32px;
+	}
 	#overlay_message_box > div > p {
 		margin-bottom: 20px;
 	}
 	#overlay_message_box h3 i {
-		vertical-align: sub;
-		margin: 8px;
+		vertical-align: bottom;
+		margin: 3px 10px;
 		font-size: 1.2em;
 	}
 

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;
 	}

index.html

@@ -70,16 +70,6 @@
 
 	<div style="display: none;"></div>
 
-	<div id="overlay_message_box" style="display: none;">
-		<div>
-			<h3><i class="material-icons icon">keyboard</i><span class="tl">keybindings.recording</span></h3>
-			<p class="tl">keybindings.press</p>
-			<button class="tl" onclick="Keybinds.recording.stopRecording()">dialog.cancel</button>
-			<button class="tl" onclick="Keybinds.recording.clear().stopRecording()">keybindings.clear</button>
-			<div id="keybind_input_box" contenteditable="true" style="font-size: 0"></div>
-		</div>
-	</div>
-
 	<div id="dialog_wrapper"></div>
 
 	<header>

js/interface/actions.js

@@ -651,7 +651,7 @@ export class NumSlider extends Widget {
 			this.interval = data.getInterval;
 		}
 		if (this.keybind) {
-			this.keybind.shift = null;
+			//this.keybind.shift = null;
 			this.keybind.label = this.keybind.getText();
 		}
 		this.addSubKeybind('increase',

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/interface/keyboard.js

@@ -1,6 +1,8 @@
 import blender from '../../keymaps/blender.bbkeymap';
 import cinema4d from '../../keymaps/cinema4d.bbkeymap';
 import maya from '../../keymaps/maya.bbkeymap';
+import { dragHelper } from '../util/drag_helper';
+import { PointerTarget } from './pointer_target';
 import { BARS } from './toolbars';
 
 window.KeymapPresets = {
@@ -211,6 +213,10 @@ export class Keybind {
 			case  44: return 'printscreen';
 			case  19: return 'pause';
 			case 1001: return 'mousewheel';
+			case 1010: return 'slide_lmb_horizontal';
+			case 1011: return 'slide_lmb_vertical';
+			case 1012: return 'slide_rmb_horizontal';
+			case 1013: return 'slide_rmb_vertical';
 
 			case 106: return tl('keys.numpad', ['*']);
 			case 107: return tl('keys.numpad', ['+']);
@@ -251,20 +257,25 @@ export class Keybind {
 		}
 		return this;
 	}
-	isTriggered(event) {
+	isTriggered(event, input_type) {
 		let modifiers_used = new Set();
 		if (this.variations) {
 			for (let option in this.variations) {
 				modifiers_used.add(this.variations[option].replace('unless_', ''));
 			}
 		}
-		return (
-			(this.key 	=== event.which	|| (this.key == 1001 && event instanceof MouseEvent)) &&
-			(this.ctrl 	=== (event.ctrlKey 	|| Pressing.overrides.ctrl) || this.ctrl === null	|| modifiers_used.has('ctrl') 	) &&
-			(this.shift === (event.shiftKey || Pressing.overrides.shift)|| this.shift === null	|| modifiers_used.has('shift')	) &&
-			(this.alt 	=== (event.altKey 	|| Pressing.overrides.alt) 	|| this.alt === null	|| modifiers_used.has('alt') 	) &&
-			(this.meta 	=== event.metaKey								|| this.meta === null	|| modifiers_used.has('ctrl') 	)
-		)
+		if ( !(this.ctrl 	=== (event.ctrlKey 	|| Pressing.overrides.ctrl) || this.ctrl === null	|| modifiers_used.has('ctrl') 	) ) return false;
+		if ( !(this.shift	=== (event.shiftKey || Pressing.overrides.shift)|| this.shift === null	|| modifiers_used.has('shift')	) ) return false;
+		if ( !(this.alt		=== (event.altKey 	|| Pressing.overrides.alt) 	|| this.alt === null	|| modifiers_used.has('alt') 	) ) return false;
+		if ( !(this.meta	===  event.metaKey								|| this.meta === null	|| modifiers_used.has('ctrl') 	) ) return false;
+
+		if (this.key == event.which) return true;
+		if (this.key == 1001 && event instanceof MouseEvent) return true;
+		if (this.key >= 1010 && this.key < 1018 && input_type == 'pointer_slide') {
+			if ((this.key == 1010 || this.key == 1011) && event.which == 1) return true;
+			if ((this.key == 1012 || this.key == 1013) && event.which == 3) return true;
+		}
+		return false;
 	}
 	additionalModifierTriggered(event, variation) {
 		if (!this.variations) return;
@@ -286,20 +297,80 @@ export class Keybind {
 		}
 	}
 	record() {
-		var scope = this;
+		let scope = this;
 		Keybinds.recording = this;
-		var overlay = $('#overlay_message_box').show()
-		var top = limitNumber(window.innerHeight/2 - 200, 30, 800)
-		overlay.find('> div').css('margin-top', top+'px')
 
-		function onActivate(event) {
-			if (event.originalEvent) event = event.originalEvent;
+		let button_cancel = Interface.createElement('button', { '@click'() {
+			scope.stopRecording();
+		}}, tl('dialog.cancel'));
+		let button_empty = Interface.createElement('button', {'@click'() {
+			scope.clear().stopRecording();
+		}}, tl('keybindings.clear'));
+
+		let ui = Interface.createElement('div', {id: 'overlay_message_box'}, [
+			Interface.createElement('div', {}, [
+				Interface.createElement('h3', {}, [
+					Blockbench.getIconNode('keyboard'), tl('keybindings.recording')
+				]),
+				Interface.createElement('p', {}, tl('keybindings.press')),
+				button_cancel, ' ', button_empty,
+			])
+		]);
+
+		if (BarItems[this.action] instanceof NumSlider) {
+			let slide_options = {
+				'slide_lmb_horizontal': 1010,
+				'slide_lmb_vertical': 1011,
+				'slide_rmb_horizontal': 1012,
+				'slide_rmb_vertical': 1013,
+			};
+			let list = Interface.createElement('div');
+			button_cancel.parentElement.insertBefore(list, button_cancel);
+
+			for (let key in slide_options) {
+				let button = Interface.createElement('button', { class: 'minor', '@click'(event) {
+
+					clearListeners();
+
+					scope.key = slide_options[key];
+					scope.ctrl 	= event.ctrlKey;
+					scope.shift = event.shiftKey;
+					scope.alt 	= event.altKey;
+					scope.meta 	= event.metaKey;
+
+					scope.label = scope.getText();
+					scope.save(true);
+					Blockbench.showQuickMessage(scope.label);
+
+					scope.stopRecording();
+
+				}}, [
+					Blockbench.getIconNode(key.endsWith('horizontal') ? 'arrow_range' : 'height'),
+					tl('keys.' + key)
+				]);
+				list.append(button);
+			}
+		}
+
+		document.getElementById('dialog_wrapper').append(ui);
+		var overlay = $(ui);
+		var top = limitNumber(window.innerHeight/2 - 200, 30, 800)
+		overlay.find('> div').css('margin-top', top+'px');
 
+		function clearListeners() {
+
 			document.removeEventListener('keyup', onActivate)
 			document.removeEventListener('keydown', onActivateDown)
 			overlay.off('mousedown', onActivate)
 			overlay.off('wheel', onActivate)
 			overlay.off('keydown keypress keyup click click dblclick mouseup mousewheel', preventDefault)
+		}
+
+		function onActivate(event) {
+			if (event.originalEvent) event = event.originalEvent;
+
+			clearListeners();
+
 			if (event instanceof KeyboardEvent == false && event.target && event.target.tagName === 'BUTTON') return;
 
 			if (event instanceof WheelEvent) {
@@ -336,9 +407,8 @@ export class Keybind {
 		return this;
 	}
 	stopRecording() {
-		Keybinds.recording = false
-		$('#overlay_message_box').hide().off('mousedown mousewheel')
-		$('#keybind_input_box').off('keyup keydown')
+		Keybinds.recording = false;
+		document.getElementById('overlay_message_box')?.remove();
 		return this;
 	}
 	toString() {
@@ -610,7 +680,7 @@ addEventListeners(document, 'keydown mousedown', function(e) {
 			alt.select()
 			Toolbox.original = orig
 		}
-	} else if (Keybinds.extra.cancel.keybind.isTriggered(e) && (Transformer.dragging)) {
+	} else if (Keybinds.extra.cancel.keybind.isTriggered(e) && PointerTarget.active == PointerTarget.types.gizmo_transform) {
 		Transformer.cancelMovement(e, false);
 		updateSelection();
 	} else if (KnifeToolContext.current) {
@@ -766,6 +836,44 @@ $(document).keyup(function(e) {
 	}
 })
 
+document.addEventListener('pointerdown', (e1) => {
+
+	let slider = Keybinds.actions.find(slider => {
+		if (slider instanceof NumSlider == false) return false;
+		if (!Condition(slider.condition)) return false;
+		return slider.keybind.isTriggered(e1, 'pointer_slide');
+	});
+	if (slider) {
+		let success = PointerTarget.requestTarget(PointerTarget.types.global_drag_slider);
+		if (!success) return;
+		dragHelper(e1, {
+
+			onStart(context) {
+				if (typeof slider.onBefore === 'function') {
+					slider.onBefore();
+				}
+				slider.sliding = true;
+				slider.pre = 0;
+				slider.sliding_start_pos = 0;
+			},
+			onMove(context) {
+				let distance = Math.abs(context.delta.x) > Math.abs(context.delta.y)
+					? context.delta.x
+					: context.delta.y;
+				slider.slide(distance, context.event);
+				Preview.selected.mousemove(e1);
+			},
+			onEnd(context) {
+				Blockbench.setStatusBarText();
+				delete slider.sliding;
+				if (typeof slider.onAfter === 'function') {
+					slider.onAfter(slider.value - slider.last_value)
+				}
+			}
+		})
+	}
+}, {capture: true})
+
 
 Object.assign(window, {
 	Keybind,