holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Resize slider for the advanced image popup (#1490)

Browse Source
This commit is contained in:
JeLuF 2023-08-14 14:56:33 +02:00 committed by GitHub
parent ec43aa2f18
commit 84c5a759d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/index.html
View File

@ -301,12 +301,22 @@
<input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
&times;
<input id="custom-height" name="custom-height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)"><br>
<small>Resize:</small><br>
<input id="resize-slider" name="resize-slider" class="editor-slider" value="1" type="range" min="0.4" max="2" step="0.005" style="width:100%;"><br>
<div id="enlarge-buttons"><button data-factor="0.5" class="tertiaryButton smallButton">×0.5</button>&nbsp;<button data-factor="1.2" class="tertiaryButton smallButton">×1.2</button>&nbsp;<button data-factor="1.5" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button data-factor="2" class="tertiaryButton smallButton">×2</button>&nbsp;<button data-factor="3" class="tertiaryButton smallButton">×3</button></div>
<small>Enlarge:</small><br>
<div id="enlarge-buttons"><button id="enlarge15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="enlarge2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
<div class="two-column">
<div class="left-column">
<small>Recently&nbsp;used:</small><br>
<div id="recent-resolution-list">
</div>
</div>
<div class="right-column">
<small>Common&nbsp;sizes:</small><br>
<div id="common-resolution-list">
</div>
</div>
<small>Recently&nbsp;used:</small><br>
<div id="recent-resolution-list">
</div>
</div>
</div>

27
ui/media/css/main.css
View File

@ -1779,6 +1779,10 @@ div#recent-resolutions-popup small {
opacity: 0.7;
}
div#common-resolution-list button {
background: var(--background-color1);
}
td#image-size-options small {
margin-right: 0px !important;
}
@ -1795,6 +1799,27 @@ div#enlarge-buttons {
text-align: center;
}
.two-column { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0.5em;
grid-auto-flow: row;
grid-template-areas:
"left-column right-column";
}
.left-column {
justify-self: center;
align-self: center;
grid-area: left-column;
}
.right-column {
justify-self: center;
align-self: center;
grid-area: right-column;
}
.clickable {
cursor: pointer;
}
@ -1832,4 +1857,4 @@ div#enlarge-buttons {
/* hack for fixing Image Modifier Improvements plugin */
#imageTagPopupContainer {
position: absolute;
}
}

72
ui/media/js/main.js
View File

@ -83,9 +83,9 @@ let customHeightField = document.querySelector("#custom-height")
let recentResolutionsButton = document.querySelector("#recent-resolutions-button")
let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup")
let recentResolutionList = document.querySelector("#recent-resolution-list")
let enlarge15Button = document.querySelector("#enlarge15")
let enlarge2Button = document.querySelector("#enlarge2")
let enlarge3Button = document.querySelector("#enlarge3")
let commonResolutionList = document.querySelector("#common-resolution-list")
let resizeSlider = document.querySelector("#resize-slider")
let enlargeButtons = document.querySelector("#enlarge-buttons")
let swapWidthHeightButton = document.querySelector("#swap-width-height")
let smallImageWarning = document.querySelector("#small_image_warning")
let initImageSelector = document.querySelector("#init_image")
@ -2792,38 +2792,25 @@ let recentResolutionsValues = []
;(function() {
///// Init resolutions dropdown
function makeResolutionButtons() {
recentResolutionList.innerHTML = ""
recentResolutionsValues.forEach((el) => {
let button = document.createElement("button")
button.classList.add("tertiaryButton")
button.style.width = "8em"
button.innerHTML = `${el.w}&times;${el.h}`
function makeResolutionButtons(listElement, resolutionList) {
listElement.innerHTML = ""
resolutionList.forEach((el) => {
let button = createElement("button", {style: "width: 8em;"}, "tertiaryButton", `${el.w}×${el.h}`)
button.addEventListener("click", () => {
customWidthField.value = el.w
customHeightField.value = el.h
hidePopup()
})
recentResolutionList.appendChild(button)
recentResolutionList.appendChild(document.createElement("br"))
listElement.appendChild(button)
listElement.appendChild(document.createElement("br"))
})
localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
}
enlarge15Button.addEventListener("click", () => {
enlargeImageSize(1.5)
enlargeButtons.querySelectorAll("button").forEach( button => button.addEventListener("click", e => {
enlargeImageSize(parseFloat(button.dataset["factor"]))
hidePopup()
})
enlarge2Button.addEventListener("click", () => {
enlargeImageSize(2)
hidePopup()
})
enlarge3Button.addEventListener("click", () => {
enlargeImageSize(3)
hidePopup()
})
}))
customWidthField.addEventListener("change", () => {
let w = customWidthField.value
@ -2850,25 +2837,29 @@ let recentResolutionsValues = []
recentResolutionsValues = recentResolutionsValues.slice(0, 8)
localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
makeResolutionButtons()
makeResolutionButtons(recentResolutionList, recentResolutionsValues)
})
let _jsonstring = localStorage.recentResolutionsValues
if (_jsonstring == undefined) {
recentResolutionsValues = [
const defaultResolutionsValues = [
{ w: 512, h: 512 },
{ w: 640, h: 448 },
{ w: 448, h: 640 },
{ w: 512, h: 768 },
{ w: 768, h: 512 },
{ w: 1024, h: 768 },
{ w: 768, h: 1024 },
{ w: 1024, h: 1024 },
{ w: 1920, h: 1080 },
]
let _jsonstring = localStorage.recentResolutionsValues
if (_jsonstring == undefined) {
recentResolutionsValues = defaultResolutionsValues;
localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
} else {
recentResolutionsValues = JSON.parse(localStorage.recentResolutionsValues)
}
makeResolutionButtons()
makeResolutionButtons(recentResolutionList, recentResolutionsValues)
makeResolutionButtons(commonResolutionList, defaultResolutionsValues)
recentResolutionsValues.forEach((val) => {
addImageSizeOption(val.w)
@ -2885,6 +2876,9 @@ let recentResolutionsValues = []
customWidthField.value = widthField.value
customHeightField.value = heightField.value
recentResolutionsPopup.classList.remove("displayNone")
resizeSlider.value = 1
resizeSlider.dataset["w"] = widthField.value
resizeSlider.dataset["h"] = heightField.value
document.addEventListener("click", processClick)
}
@ -2903,6 +2897,20 @@ let recentResolutionsValues = []
}
})
resizeSlider.addEventListener("input", e => {
let w = parseInt(resizeSlider.dataset["w"])
let h = parseInt(resizeSlider.dataset["h"])
let factor = parseFloat(resizeSlider.value)
let step = customWidthField.step
customWidthField.value = roundToMultiple(w*factor*factor, step)
customHeightField.value = roundToMultiple(h*factor*factor, step)
})
resizeSlider.addEventListener("change", e => {
hidePopup()
})
swapWidthHeightButton.addEventListener("click", (event) => {
let temp = widthField.value
widthField.value = heightField.value