Add resizable dialogs

Closes #1665
JannisX11 · Apr 5, 2024 · 2a7ec4a · 2a7ec4a
1 parent 680a158
commit 2a7ec4a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 2 deletions.
diff --git a/css/dialogs.css b/css/dialogs.css
@@ -40,6 +40,23 @@
 		color: var(--color-accent_text);
 		background-color: var(--color-close);
 	}
+	.dialog_resize_handle {
+		--size: 7px;
+		position: absolute;
+		width: var(--size);
+		height: var(--size);
+		bottom: 0;
+		right: 0;
+		border-width: var(--size);
+		border-style: solid;
+		border-color: var(--color-button);
+		border-top-color: transparent !important;
+		border-left-color: transparent !important;
+		cursor: se-resize;
+	}
+	.dialog_resize_handle:hover, .dialog_resize_handle.dragging {
+		border-color: var(--color-accent);
+	}
 	.dialog_sidebar_menu_button {
 		height: 100%;
 		width: 34px;
@@ -104,14 +121,16 @@
 		position: fixed;
 		z-index: 21;
 		top: 30px;
+		max-width: 100vw;
+		max-height: calc(100vh - 30px);
 	}
 	.dialog:not(.draggable) {
 		left: 0;
 		right: 0;
 		margin-right: auto;
 		margin-left: auto;
 	}
-	.dialog:not(.ui-resizable) {
+	.dialog:not(.resizable) {
 		min-width: min(400px, 100%);
 		max-width: min(960px, 100%);
 	}

diff --git a/js/animations/animation.js b/js/animations/animation.js
@@ -680,6 +680,7 @@ class Animation extends AnimationItem {
 			id: 'animation_properties',
 			title: this.name,
 			width: 660,
+			resizable: 'x',
 			part_order: ['form', 'component'],
 			form: {
 				name: {label: 'generic.name', value: this.name},

diff --git a/js/interface/dialog.js b/js/interface/dialog.js
@@ -551,6 +551,7 @@ window.Dialog = class Dialog {
 
 		this.width = options.width
 		this.draggable = options.draggable
+		this.resizable = options.resizable === true ? 'xy' : options.resizable;
 		this.darken = options.darken !== false
 		this.cancel_on_click_outside = options.cancel_on_click_outside !== false
 		this.singleButton = options.singleButton
@@ -837,6 +838,52 @@ window.Dialog = class Dialog {
 			})
 			jq_dialog.css('position', 'absolute')
 		}
+		if (this.resizable) {
+			this.object.classList.add('resizable')
+			let resize_handle = Interface.createElement('div', {class: 'dialog_resize_handle'});
+			jq_dialog.append(resize_handle);
+			if (this.resizable == 'x') {
+				resize_handle.style.cursor = 'e-resize';
+			} else if (this.resizable == 'y') {
+				resize_handle.style.cursor = 's-resize';
+			}
+			addEventListeners(resize_handle, 'mousedown touchstart', e1 => {
+				convertTouchEvent(e1);
+				resize_handle.classList.add('dragging');
+
+				let start_position = [e1.clientX, e1.clientY];
+				if (!this.width) this.width = this.object.clientWidth;
+				let original_width = this.width;
+				let original_left = parseFloat(this.object.style.left);
+				let original_height = parseFloat(this.object.style.height) || this.object.clientHeight;
+
+
+				let move = e2 => {
+					convertTouchEvent(e2);
+
+					if (this.resizable.includes('x')) {
+						let x_offset = (e2.clientX - start_position[0]);
+						this.width = original_width + x_offset * 2;
+						this.object.style.width = this.width+'px';
+						if (this.draggable !== false) {
+							this.object.style.left = Math.clamp(original_left - (this.object.clientWidth - original_width) / 2, 0, window.innerWidth) + 'px';
+						}
+					}
+					if (this.resizable.includes('y')) {
+						let y_offset = (e2.clientY - start_position[1]);
+						let height = Math.clamp(original_height + y_offset, 80, window.innerHeight);
+						this.object.style.height = height+'px';
+					}
+				}
+				let stop = e2 => {
+					removeEventListeners(document, 'mousemove touchmove', move);
+					removeEventListeners(document, 'mouseup touchend', stop);
+					resize_handle.classList.remove('dragging');
+				}
+				addEventListeners(document, 'mousemove touchmove', move);
+				addEventListeners(document, 'mouseup touchend', stop);
+			})
+		}
 		let sanitizePosition = () => {
 			if (this.object.clientHeight + this.object.offsetTop - 26 > Interface.page_wrapper.clientHeight) {
 				this.object.style.top = Math.max(Interface.page_wrapper.clientHeight - this.object.clientHeight + 26, 26) + 'px';

diff --git a/js/texturing/texture_flipbook.js b/js/texturing/texture_flipbook.js
@@ -216,7 +216,7 @@ BARS.defineActions(function() {
 
 				new Dialog('animated_texture_editor_code', {
 					title: 'dialog.animated_texture_editor.code_reference',
-					resizable: true,
+					resizable: 'x',
 					width: 720,
 					singleButton: true,
 					part_order: ['form', 'component'],