-
Notifications
You must be signed in to change notification settings - Fork 27.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
commit b030b67 Author: Gerschel <[email protected]> Date: Wed Feb 8 16:38:56 2023 -0800 styling adjustements commit 80a2acb Author: Gerschel <[email protected]> Date: Wed Feb 8 10:49:47 2023 -0800 badge indicator toggles visibility by selection commit 898922e Merge: 745382a 31bbfa7 Author: Gerschel <[email protected]> Date: Wed Feb 8 08:35:26 2023 -0800 Merge pull request #1 from w-e-w/Rounding-Method Rounding Method commit 31bbfa7 Author: w-e-w <[email protected]> Date: Wed Feb 8 19:41:45 2023 +0900 use switch commit 85dbe51 Author: w-e-w <[email protected]> Date: Wed Feb 8 16:47:52 2023 +0900 Rounding Method commit 745382a Author: Gerschel <[email protected]> Date: Tue Feb 7 21:19:20 2023 -0800 default set to round commit 728579c Author: Gerschel <[email protected]> Date: Tue Feb 7 21:17:03 2023 -0800 cleaned some commented code out; added indicator commit 5b288c2 Author: Gerschel <[email protected]> Date: Tue Feb 7 18:19:00 2023 -0800 needs cleaning; attempt at rounding commit d9f18ae Author: Gerschel <[email protected]> Date: Tue Feb 7 15:46:25 2023 -0800 add rounding option in setting for aspect ratio commit af22106 Author: Gerschel <[email protected]> Date: Tue Feb 7 13:18:45 2023 -0800 added some ratios, sorted ratios by commonality commit 11e2fba Author: Gerschel <[email protected]> Date: Tue Feb 7 10:46:53 2023 -0800 snaps to mulitples of 8 and along ratio commit fa00387 Author: Gerschel <[email protected]> Date: Mon Feb 6 14:54:59 2023 -0800 updated slidercomponentcontroller commit 8059bc1 Author: Gerschel <[email protected]> Date: Mon Feb 6 14:29:11 2023 -0800 added step size adjustment on number field commit 641157b Author: Gerschel <[email protected]> Date: Mon Feb 6 14:12:03 2023 -0800 added return step size to default when ratio is disabled commit 5fb75ad Author: Gerschel <[email protected]> Date: Mon Feb 6 14:09:34 2023 -0800 added step size adjustment commit e335328 Author: Gerschel <[email protected]> Date: Mon Feb 6 11:56:15 2023 -0800 adjusted dropdown size, padding, text-align commit 8193732 Author: Gerschel <[email protected]> Date: Mon Feb 6 11:39:57 2023 -0800 added positioning and styling commit 86eb458 Author: Gerschel <[email protected]> Date: Mon Feb 6 08:54:45 2023 -0800 fix typo in defaults; added preventDefault in event
- Loading branch information
Showing
5 changed files
with
218 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,181 @@ | ||
| class AspectRatioSliderController { | ||
| constructor(widthSlider, heightSlider, ratioSource) { | ||
| constructor(widthSlider, heightSlider, ratioSource, roundingSource, roundingMethod) { | ||
| //References | ||
| 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")); | ||
| this.roundingSource = new CheckboxComponentController(roundingSource); | ||
| this.roundingMethod = new RadioComponentController(roundingMethod); | ||
| this.roundingIndicatorBadge = document.createElement("div"); | ||
| // Badge implementation | ||
| this.roundingIndicatorBadge.innerText = "📐"; | ||
| this.roundingIndicatorBadge.classList.add("rounding-badge"); | ||
| this.ratioSource.element.appendChild(this.roundingIndicatorBadge); | ||
| // Check initial value of ratioSource to set badge visbility | ||
| let initialRatio = this.ratioSource.getVal(); | ||
| if (!initialRatio.includes(":")) { | ||
| this.roundingIndicatorBadge.style.display = "none"; | ||
| } | ||
| //Adjust badge icon if rounding is on | ||
| if (this.roundingSource.getVal()) { | ||
| this.roundingIndicatorBadge.classList.add("active"); | ||
| this.roundingIndicatorBadge.innerText = "⚠️"; | ||
| } | ||
| //Make badge clickable to toggle setting | ||
| this.roundingIndicatorBadge.addEventListener("click", () => { | ||
| this.roundingSource.setVal(!this.roundingSource.getVal()); | ||
| }); | ||
| //Make rounding setting toggle badge text and style if setting changes | ||
| this.roundingSource.child.addEventListener("change", () => { | ||
| if (this.roundingSource.getVal()) { | ||
| this.roundingIndicatorBadge.classList.add("active"); | ||
| this.roundingIndicatorBadge.innerText = "⚠️"; | ||
| } | ||
| else { | ||
| this.roundingIndicatorBadge.classList.remove("active"); | ||
| this.roundingIndicatorBadge.innerText = "📐"; | ||
| } | ||
| this.adjustStepSize(); | ||
| }); | ||
| //Other event listeners | ||
| this.widthSlider.childRangeField.addEventListener("change", (e) => { e.preventDefault(); this.resize("width"); }); | ||
| this.widthSlider.childNumField.addEventListener("change", (e) => { e.preventDefault(); this.resize("width"); }); | ||
| this.heightSlider.childRangeField.addEventListener("change", (e) => { e.preventDefault(); this.resize("height"); }); | ||
| this.heightSlider.childNumField.addEventListener("change", (e) => { e.preventDefault(); this.resize("height"); }); | ||
| this.ratioSource.childSelector.addEventListener("change", (e) => { | ||
| e.preventDefault(); | ||
| //Check and toggle display of badge conditionally on dropdown selection | ||
| if (!this.ratioSource.getVal().includes(":")) { | ||
| this.roundingIndicatorBadge.style.display = 'none'; | ||
| } | ||
| else { | ||
| this.roundingIndicatorBadge.style.display = 'block'; | ||
| } | ||
| this.adjustStepSize(); | ||
| }); | ||
| } | ||
| resize(dimension) { | ||
| //For moving slider or number field | ||
| 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()); | ||
| let newHeight = parseInt(this.widthSlider.getVal()) / ratio; | ||
| if (this.roundingSource.getVal()) { | ||
| switch (this.roundingMethod.getVal()) { | ||
| case 'Round': | ||
| newHeight = Math.round(newHeight / 8) * 8; | ||
| break; | ||
| case 'Ceiling': | ||
| newHeight = Math.ceil(newHeight / 8) * 8; | ||
| break; | ||
| case 'Floor': | ||
| newHeight = Math.floor(newHeight / 8) * 8; | ||
| break; | ||
| } | ||
| } | ||
| this.heightSlider.setVal(newHeight.toString()); | ||
| } | ||
| else if (dimension == "height") { | ||
| this.widthSlider.setVal(Math.round(parseFloat(this.heightSlider.getVal()) * ratio).toString()); | ||
| let newWidth = parseInt(this.heightSlider.getVal()) * ratio; | ||
| if (this.roundingSource.getVal()) { | ||
| switch (this.roundingMethod.getVal()) { | ||
| case 'Round': | ||
| newWidth = Math.round(newWidth / 8) * 8; | ||
| break; | ||
| case 'Ceiling': | ||
| newWidth = Math.ceil(newWidth / 8) * 8; | ||
| break; | ||
| case 'Floor': | ||
| newWidth = Math.floor(newWidth / 8) * 8; | ||
| break; | ||
| } | ||
| } | ||
| this.widthSlider.setVal(newWidth.toString()); | ||
| } | ||
| } | ||
| adjustStepSize() { | ||
| /* Sets scales/precision/rounding steps;*/ | ||
| let val = this.ratioSource.getVal(); | ||
| if (!val.includes(":")) { | ||
| //If ratio unlocked | ||
| this.widthSlider.childRangeField.step = "8"; | ||
| this.widthSlider.childRangeField.min = "64"; | ||
| this.widthSlider.childNumField.step = "8"; | ||
| this.widthSlider.childNumField.min = "64"; | ||
| this.heightSlider.childRangeField.step = "8"; | ||
| this.heightSlider.childRangeField.min = "64"; | ||
| this.heightSlider.childNumField.step = "8"; | ||
| this.heightSlider.childNumField.min = "64"; | ||
| return; | ||
| } | ||
| //Format string and calculate step sizes | ||
| let [width, height] = val.split(":").map(Number); | ||
| let decimalPlaces = (width.toString().split(".")[1] || []).length; | ||
| //keep upto 6 decimal points of precision of ratio | ||
| //euclidean gcd does not support floats, so we scale it up | ||
| decimalPlaces = decimalPlaces > 6 ? 6 : decimalPlaces; | ||
| let gcd = this.gcd(width * 10 ** decimalPlaces, height * 10 ** decimalPlaces) / 10 ** decimalPlaces; | ||
| let stepSize = 8 * height / gcd; | ||
| let stepSizeOther = 8 * width / gcd; | ||
| if (this.roundingSource.getVal()) { | ||
| //If rounding is on set/keep default stepsizes | ||
| this.widthSlider.childRangeField.step = "8"; | ||
| this.widthSlider.childRangeField.min = "64"; | ||
| this.widthSlider.childNumField.step = "8"; | ||
| this.widthSlider.childNumField.min = "64"; | ||
| this.heightSlider.childRangeField.step = "8"; | ||
| this.heightSlider.childRangeField.min = "64"; | ||
| this.heightSlider.childNumField.step = "8"; | ||
| this.heightSlider.childNumField.min = "64"; | ||
| } | ||
| else { | ||
| //if rounding is off, set step sizes so they enforce snapping | ||
| //min is changed, because it offsets snap positions | ||
| this.widthSlider.childRangeField.step = stepSizeOther.toString(); | ||
| this.widthSlider.childRangeField.min = stepSizeOther.toString(); | ||
| this.widthSlider.childNumField.step = stepSizeOther.toString(); | ||
| this.widthSlider.childNumField.min = stepSizeOther.toString(); | ||
| this.heightSlider.childRangeField.step = stepSize.toString(); | ||
| this.heightSlider.childRangeField.min = stepSize.toString(); | ||
| this.heightSlider.childNumField.step = stepSize.toString(); | ||
| this.heightSlider.childNumField.min = stepSize.toString(); | ||
| } | ||
| let currentWidth = parseInt(this.widthSlider.getVal()); | ||
| //Rounding treated kinda like pythons divmod | ||
| let stepsTaken = Math.round(currentWidth / stepSizeOther); | ||
| //this snaps it to closest rule matches (rules being html step points, and ratio) | ||
| let newWidth = stepsTaken * stepSizeOther; | ||
| this.widthSlider.setVal(newWidth.toString()); | ||
| this.heightSlider.setVal(Math.round(newWidth / (width / height)).toString()); | ||
| } | ||
| gcd(a, b) { | ||
| //euclidean gcd | ||
| if (b === 0) { | ||
| return a; | ||
| } | ||
| return this.gcd(b, a % b); | ||
| } | ||
| static observeStartup(widthSliderId, heightSliderId, ratioSourceId) { | ||
| static observeStartup(widthSliderId, heightSliderId, ratioSourceId, roundingSourceId, roundingMethodId) { | ||
| 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) { | ||
| let roundingSource = document.querySelector("gradio-app").shadowRoot.getElementById(roundingSourceId); | ||
| let roundingMethod = document.querySelector("gradio-app").shadowRoot.getElementById(roundingMethodId); | ||
| if (widthSlider && heightSlider && ratioSource && roundingSource && roundingMethod) { | ||
| observer.disconnect(); | ||
| new AspectRatioSliderController(widthSlider, heightSlider, ratioSource); | ||
| new AspectRatioSliderController(widthSlider, heightSlider, ratioSource, roundingSource, roundingMethod); | ||
| } | ||
| }); | ||
| 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"); | ||
| //Register mutation observer for self start-up; | ||
| AspectRatioSliderController.observeStartup("txt2img_width", "txt2img_height", "txt2img_ratio", "setting_aspect_ratios_rounding", "setting_aspect_ratios_rounding_method"); | ||
| AspectRatioSliderController.observeStartup("img2img_width", "img2img_height", "img2img_ratio", "setting_aspect_ratios_rounding", "setting_aspect_ratios_rounding_method"); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters