Add linked ratio toggle for vector form inputs

#2521

js/interface/dialog.js

@@ -248,15 +248,45 @@ function buildForm(dialog) {
 				case 'vector':
 					let group = $(`<div class="dialog_vector_group half"></div>`)
 					bar.append(group)
+					let vector_inputs = [];
+					let initial_value = data.value instanceof Array ? data.value.slice() : [1, 1, 1];
 					for (let i = 0; i < (data.dimensions || 3); i++) {
 						let numeric_input = new Interface.CustomElements.NumericInput(form_id + '_' + i, {
 							value: data.value ? data.value[i] : 0,
 							min: data.min, max: data.max, step: data.step,
 							onChange() {
-								dialog.updateFormValues()
+								if (data.linked_ratio) {
+									let i2 = -1;
+									for (let vector_input_2 of vector_inputs) {
+										i2++;
+										if (vector_input_2 == numeric_input) continue;
+										let new_value = initial_value[i2] * (numeric_input.value / initial_value[i]);
+										new_value = Math.clamp(new_value, data.min, data.max)
+										if (data.force_step && data.step) {
+											new_value = Math.round(new_value / data.step) * data.step;
+										}
+										vector_input_2.value = new_value;
+									}
+								}
+								dialog.updateFormValues();
 							}
 						});
 						group.append(numeric_input.node)
+						vector_inputs.push(numeric_input);
+					}
+					if (typeof data.linked_ratio == 'boolean') {
+						let icon = Blockbench.getIconNode('link');
+						let linked_ratio_toggle = Interface.createElement('div', {class: 'tool linked_ratio_toggle'}, icon);
+						linked_ratio_toggle.addEventListener('click', event => {
+							data.linked_ratio = !data.linked_ratio;
+							updateState();
+						})
+						function updateState() {
+							icon.textContent = data.linked_ratio ? 'link' : 'link_off';
+							linked_ratio_toggle.classList.toggle('enabled', data.linked_ratio);
+						}
+						updateState();
+						group.append(linked_ratio_toggle)
 					}
 					break;
 

js/io/project.js

@@ -1018,6 +1018,7 @@ BARS.defineActions(function() {
 				label: 'dialog.project.texture_size',
 				type: 'vector',
 				dimensions: 2,
+				linked_ratio: false,
 				value: [Project.texture_width, Project.texture_height],
 				min: 1
 			};

js/preview/reference_images.js

@@ -659,7 +659,7 @@ class ReferenceImage {
 					global: 'reference_image.scope.global',
 				}},
 				position: {type: 'vector', label: 'reference_image.position', dimensions: 2, value: this.position},
-				size: {type: 'vector', label: 'reference_image.size', dimensions: 2, value: this.size},
+				size: {type: 'vector', label: 'reference_image.size', dimensions: 2, linked_ratio: true, value: this.size},
 				rotation: {type: 'number', label: 'reference_image.rotation', value: this.rotation},
 				opacity: {type: 'range', label: 'reference_image.opacity', editable_range_label: true, value: this.opacity * 100, min: 0, max: 100, step: 1},
 				visibility: {type: 'checkbox', label: 'reference_image.visibility', value: this.visibility},

js/preview/screenshot.js

@@ -193,7 +193,7 @@ const Screencam = {
 			}},
 			length: 	{label: 'dialog.create_gif.length', type: 'number', value: 5, min: 0.1, step: 0.25, condition: (form) => ['seconds', 'frames'].includes(form.length_mode)},
 			fps: 		{label: 'dialog.create_gif.fps', type: 'number', value: 20, min: 0.5, max: 120},
-			resolution: {type: 'vector', label: 'dialog.advanced_screenshot.resolution', dimensions: 2, value: [500, 500], toggle_enabled: true, toggle_default: false},
+			resolution: {type: 'vector', label: 'dialog.advanced_screenshot.resolution', dimensions: 2, linked_ratio: false, value: [500, 500], toggle_enabled: true, toggle_default: false},
 			zoom: 		{type: 'number', label: 'dialog.advanced_screenshot.zoom', value: 42, toggle_enabled: true, toggle_default: false},
 			'_2': '_',
 			pixelate:	{label: 'dialog.create_gif.pixelate', type: 'range', value: 1, min: 1, max: 8, step: 1},
@@ -230,7 +230,7 @@ const Screencam = {
 				})
 				return options;
 			}},
-			resolution: 	{type: 'vector', label: 'dialog.advanced_screenshot.resolution', dimensions: 2, value: [1920, 1080]},
+			resolution: 	{type: 'vector', label: 'dialog.advanced_screenshot.resolution', dimensions: 2, value: [1920, 1080], linked_ratio: false},
 			//zoom_to_fit: 	{type: 'checkbox', label: 'dialog.advanced_screenshot.zoom_to_fit', value: false},
 			zoom: 			{type: 'number', label: 'dialog.advanced_screenshot.zoom', value: 42, condition: form => !form.zoom_to_fit, toggle_enabled: true, toggle_default: false},
 			anti_aliasing: 	{type: 'select', label: 'dialog.advanced_screenshot.anti_aliasing', value: 'ssaa', options: {

js/texturing/textures.js

@@ -1155,7 +1155,7 @@ class Texture {
 			});
 		}
 		if (Format.per_texture_uv_size) {
-			form.uv_size = {type: 'vector', label: 'dialog.texture.uv_size', value: [this.uv_width, this.uv_height], dimensions: 2, step: 1, min: 1};
+			form.uv_size = {type: 'vector', label: 'dialog.texture.uv_size', value: [this.uv_width, this.uv_height], dimensions: 2, step: 1, min: 1, linked_ratio: false};
 		}
 		if (Format.texture_mcmeta) {
 			Object.assign(form, {
@@ -1250,7 +1250,9 @@ class Texture {
 					label: 'dialog.project.texture_size',
 					type: 'vector',
 					dimensions: 2,
+					linked_ratio: false,
 					value: [this.width, this.display_height],
+					step: 1, force_step: true,
 					min: 1
 				},
 				frames: {