From ca3533c9e4910189167bdef361ca900098c2347a Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Fri, 25 Nov 2022 20:27:44 -0300 Subject: [PATCH] some more fixes and things fixed scrolling on basically everything but the canvas, prompt fields now automatically expand when focused, prompt, host and negprompt now are stored on localstorage. on hover prompt and negprompt fields now show full text in tooltips Signed-off-by: Victor Seiji Hariki --- css/index.css | 32 ++++++++++++++++++++++++++++++-- index.html | 15 ++++++--------- js/index.js | 44 +++++++++++++++++++++++++++++++++++++++++++- js/input.js | 1 - js/settingsbar.js | 23 +++++++++++++++++++++-- 5 files changed, 100 insertions(+), 15 deletions(-) diff --git a/css/index.css b/css/index.css index 20766f3..069c7e2 100644 --- a/css/index.css +++ b/css/index.css @@ -97,8 +97,9 @@ body { .content { max-height: 0; - overflow: hidden; - transition: max-height 0.2s ease-out; + overflow-y: clip; + overflow-x: visible; + transition: max-height 0.2s ease-out, height 0s ease-out; } .menu-container { @@ -155,3 +156,30 @@ body { font-weight: 600; color: #fff; } + +#models { + width: 100%; + text-overflow: ellipsis; +} + +/* Prompt Fields */ + +div.prompt-wrapper { + overflow: visible; +} + +div.prompt-wrapper > textarea { + margin: 0; + padding: 0; + + top: 0px; + bottom: 0px; + left: 0px; + right: 0; + + resize: vertical; +} + +div.prompt-wrapper > textarea:focus { + width: 700px; +} diff --git a/index.html b/index.html index dc5de94..d96db2b 100644 --- a/index.html +++ b/index.html @@ -37,16 +37,13 @@

- -
+
+ +
-
- -
+
+ +
diff --git a/js/index.js b/js/index.js index eb85116..acbc5ac 100644 --- a/js/index.js +++ b/js/index.js @@ -113,8 +113,29 @@ const bgCanvas = document.getElementById("backgroundCanvas"); // gray bg grid const bgCtx = bgCanvas.getContext("2d"); function startup() { - checkIfWebuiIsRunning(); loadSettings(); + + const hostEl = document.getElementById("host"); + hostEl.oninput = () => { + host = hostEl.value; + localStorage.setItem("host", host); + }; + + const promptEl = document.getElementById("prompt"); + promptEl.oninput = () => { + stableDiffusionData.prompt = promptEl.value; + promptEl.title = promptEl.value; + localStorage.setItem("prompt", stableDiffusionData.prompt); + }; + + const negPromptEl = document.getElementById("negPrompt"); + negPromptEl.oninput = () => { + stableDiffusionData.negative_prompt = negPromptEl.value; + negPromptEl.title = negPromptEl.value; + localStorage.setItem("neg_prompt", stableDiffusionData.negative_prompt); + }; + + checkIfWebuiIsRunning(); getSamplers(); getUpscalers(); getModels(); @@ -859,6 +880,18 @@ async function upscaleAndDownload() { function loadSettings() { // set default values if not set + var _host = + localStorage.getItem("host") == null + ? "http://127.0.0.1:7860" + : localStorage.getItem("host"); + var _prompt = + localStorage.getItem("prompt") == null + ? "oceanographic study, underwater wildlife, award winning" + : localStorage.getItem("prompt"); + var _negprompt = + localStorage.getItem("neg_prompt") == null + ? "people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry" + : localStorage.getItem("neg_prompt"); var _sampler = localStorage.getItem("sampler") == null ? "DDIM" @@ -885,9 +918,18 @@ function loadSettings() { : localStorage.getItem("overmask_px"); // set the values into the UI + document.getElementById("host").value = String(_host); + document.getElementById("prompt").value = String(_prompt); + document.getElementById("prompt").title = String(_prompt); + document.getElementById("negPrompt").value = String(_negprompt); + document.getElementById("negPrompt").title = String(_negprompt); document.getElementById("samplerSelect").value = String(_sampler); document.getElementById("maskBlur").value = Number(_mask_blur); document.getElementById("seed").value = Number(_seed); document.getElementById("cbxHRFix").checked = Boolean(_enable_hr); // document.getElementById("overMaskPx").value = Number(_overmask_px); } + +document.getElementById("mainHSplit").addEventListener("wheel", (evn) => { + evn.preventDefault(); +}); diff --git a/js/input.js b/js/input.js index 2141b73..5abed16 100644 --- a/js/input.js +++ b/js/input.js @@ -323,7 +323,6 @@ window.onmousemove = (evn) => { window.addEventListener( "wheel", (evn) => { - evn.preventDefault(); mouse.contexts.forEach(({name}) => { mouse.listen[name].onwheel.emit({ target: evn.target, diff --git a/js/settingsbar.js b/js/settingsbar.js index e327bda..a041c0a 100644 --- a/js/settingsbar.js +++ b/js/settingsbar.js @@ -36,13 +36,32 @@ document.querySelectorAll(".floating-window").forEach((w) => { var coll = document.getElementsByClassName("collapsible"); for (var i = 0; i < coll.length; i++) { + let active = false; coll[i].addEventListener("click", function () { - this.classList.toggle("active"); var content = this.nextElementSibling; - if (content.style.maxHeight) { + + if (!active) { + this.classList.add("active"); + content.classList.add("active"); + } else { + this.classList.remove("active"); + content.classList.remove("active"); + } + + const observer = new ResizeObserver(() => { + if (active) content.style.maxHeight = content.scrollHeight + "px"; + }); + + Array.from(content.children).forEach((child) => { + observer.observe(child); + }); + + if (active) { content.style.maxHeight = null; + active = false; } else { content.style.maxHeight = content.scrollHeight + "px"; + active = true; } }); }