-
-
Notifications
You must be signed in to change notification settings - Fork 428
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
commit b030b67ad005bfe29bcda692238a00042dcae816 Author: Gerschel <[email protected]> Date: Wed Feb 8 16:38:56 2023 -0800 styling adjustements commit 80a2acb0230dd77489b0eb466f2efe827a053f6d Author: Gerschel <[email protected]> Date: Wed Feb 8 10:49:47 2023 -0800 badge indicator toggles visibility by selection commit 898922e025a6422ac947fb45c1fa4f1109882f0a Merge: 745382a0 31bbfa72 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 31bbfa729a15ef35fa1f905345d3ba2b17b26ab9 Author: w-e-w <[email protected]> Date: Wed Feb 8 19:41:45 2023 +0900 use switch commit 85dbe511c33521d3ac62224bf0e0f3a48194ce63 Author: w-e-w <[email protected]> Date: Wed Feb 8 16:47:52 2023 +0900 Rounding Method commit 745382a0f4b8d16241545a3460d5206915959255 Author: Gerschel <[email protected]> Date: Tue Feb 7 21:19:20 2023 -0800 default set to round commit 728579c618af30ec98a5af0991bd3f28bdaca399 Author: Gerschel <[email protected]> Date: Tue Feb 7 21:17:03 2023 -0800 cleaned some commented code out; added indicator commit 5b288c24a1edd8a5c2f35214b9634316d05b8dae Author: Gerschel <[email protected]> Date: Tue Feb 7 18:19:00 2023 -0800 needs cleaning; attempt at rounding commit d9f18ae92b929576b0b8c5f1ef8b3b38e441e381 Author: Gerschel <[email protected]> Date: Tue Feb 7 15:46:25 2023 -0800 add rounding option in setting for aspect ratio commit af22106802c9e42205649e4c71c23fcf5b8c62f6 Author: Gerschel <[email protected]> Date: Tue Feb 7 13:18:45 2023 -0800 added some ratios, sorted ratios by commonality commit 11e2fba73cffe8cdbf4cd0860641b94428ca0e74 Author: Gerschel <[email protected]> Date: Tue Feb 7 10:46:53 2023 -0800 snaps to mulitples of 8 and along ratio commit fa00387e07460b10ee82671a1bfa8687e00ee60b Author: Gerschel <[email protected]> Date: Mon Feb 6 14:54:59 2023 -0800 updated slidercomponentcontroller commit 8059bc111c3e2d1edb3314e05ab21b65120fa1dd Author: Gerschel <[email protected]> Date: Mon Feb 6 14:29:11 2023 -0800 added step size adjustment on number field commit 641157b9f27a874a24ee7b0a854a092e9eac3eec Author: Gerschel <[email protected]> Date: Mon Feb 6 14:12:03 2023 -0800 added return step size to default when ratio is disabled commit 5fb75ad28f2476f36100ec93922a8199adbd2a68 Author: Gerschel <[email protected]> Date: Mon Feb 6 14:09:34 2023 -0800 added step size adjustment commit e33532883bc4709cd41c3775cbb646d1d5ab0584 Author: Gerschel <[email protected]> Date: Mon Feb 6 11:56:15 2023 -0800 adjusted dropdown size, padding, text-align commit 81937329cee77f466c5a5b23c268d0c810128f84 Author: Gerschel <[email protected]> Date: Mon Feb 6 11:39:57 2023 -0800 added positioning and styling commit 86eb4583782d92880a9a113a54ffbac9d92f3753 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