diff --git a/css/dialogs.css b/css/dialogs.css index 72a6d60ac..1f64fed61 100644 --- 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,6 +121,8 @@ position: fixed; z-index: 21; top: 30px; + max-width: 100vw; + max-height: calc(100vh - 30px); } .dialog:not(.draggable) { left: 0; @@ -111,7 +130,7 @@ 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 index c5cb7cf0a..0f3d5912c 100644 --- 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 index 028ee86f6..53c2ad985 100644 --- 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 index ca1df67ac..74f370415 100644 --- 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'],