From 5d483bf307c766aee97caec857d414946fad47db Mon Sep 17 00:00:00 2001
From: Gerschel <Gerschel_Payne@hotmail.com>
Date: Mon, 6 Feb 2023 08:18:04 -0800
Subject: aspect ratio for dim's; sliders adjust by ratio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Default choices added to settings in user interface section
Choices are editable by user

User selects from dropdown.
When you move one slider, the other adjusts according to the ratio
chosen.
Vice versa for the other slider.

Number fields for changes work as well.

For disabling ratio, an unlock pad "🔓" is available as a default.
This string can be changed to anything to serve as a disable,
as long as there is no colon ":".

Ratios are entered in this format, floats or ints with a colon "1:1".
The string is split at the colon, parses left and right as floats to
perform the math.
---
 javascript/aspectRatioSliders.js | 41 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 javascript/aspectRatioSliders.js

(limited to 'javascript/aspectRatioSliders.js')

diff --git a/javascript/aspectRatioSliders.js b/javascript/aspectRatioSliders.js
new file mode 100644
index 00000000..f577750a
--- /dev/null
+++ b/javascript/aspectRatioSliders.js
@@ -0,0 +1,41 @@
+class AspectRatioSliderController {
+    constructor(widthSlider, heightSlider, ratioSource) {
+        this.widthSlider = new SliderComponentController(widthSlider);
+        this.heightSlider = new SliderComponentController(heightSlider);
+        this.ratioSource = new DropdownComponentController(ratioSource);
+        this.widthSlider.childRangeField.addEventListener("change", () => this.resize("width"));
+        this.widthSlider.childNumField.addEventListener("change", () => this.resize("width"));
+        this.heightSlider.childRangeField.addEventListener("change", () => this.resize("height"));
+        this.heightSlider.childNumField.addEventListener("change", () => this.resize("height"));
+    }
+    resize(dimension) {
+        let val = this.ratioSource.getVal();
+        if (!val.includes(":")) {
+            return;
+        }
+        let [width, height] = val.split(":").map(Number);
+        let ratio = width / height;
+        if (dimension == 'width') {
+            this.heightSlider.setVal(Math.round(parseFloat(this.widthSlider.getVal()) / ratio).toString());
+        }
+        else if (dimension == "height") {
+            this.widthSlider.setVal(Math.round(parseFloat(this.heightSlider.getVal()) * ratio).toString());
+        }
+    }
+    static observeStartup(widthSliderId, heightSliderId, ratioSourceId) {
+        let observer = new MutationObserver(() => {
+            let widthSlider = document.querySelector("gradio-app").shadowRoot.getElementById(widthSliderId);
+            let heightSlider = document.querySelector("gradio-app").shadowRoot.getElementById(heightSliderId);
+            let ratioSource = document.querySelector("gradio-app").shadowRoot.getElementById(ratioSourceId);
+            if (widthSlider && heightSlider && ratioSource) {
+                observer.disconnect();
+                new AspectRatioSliderController(widthSlider, heightSlider, ratioSource);
+            }
+        });
+        observer.observe(gradioApp(), { childList: true, subtree: true });
+    }
+}
+document.addEventListener("DOMContentLoaded", () => {
+    AspectRatioSliderController.observeStartup("txt2img_width", "txt2img_height", "txt2img_ratio");
+    AspectRatioSliderController.observeStartup("img2img_width", "img2img_height", "img2img_ratio");
+});
-- 
cgit v1.2.3