diff --git a/index.html b/index.html index 26d209b..47b3642 100644 --- a/index.html +++ b/index.html @@ -99,6 +99,13 @@
+
+ + +
diff --git a/js/index.js b/js/index.js index 244f18f..f39db49 100644 --- a/js/index.js +++ b/js/index.js @@ -101,6 +101,7 @@ function startup() { changeSmoothRendering(); changeSeed(); changeHiResFix(); + changeSyncCursorSize(); } /** @@ -448,19 +449,20 @@ const upscalerAutoComplete = createAutoComplete( document.getElementById("upscaler-ac-select") ); -makeSlider( +const resSlider = makeSlider( "Resolution", document.getElementById("resolution"), "resolution", - 64, - 1024, - 64, + 128, + 2048, + 128, 512, 2, (v) => { stableDiffusionData.width = stableDiffusionData.height = v; stableDiffusionData.firstphase_width = stableDiffusionData.firstphase_height = v / 2; + informCursorSizeSlider(); } ); makeSlider( @@ -522,6 +524,20 @@ function changeHiResFix() { ); localStorage.setItem("enable_hr", stableDiffusionData.enable_hr); } + +function changeSyncCursorSize() { + stableDiffusionData.sync_cursor_size = Boolean( + document.getElementById("cbxSyncCursorSize").checked + ); //is this horribly hacky, putting it in SD data instead of making a gross global var? + localStorage.setItem( + "sync_cursor_size", + stableDiffusionData.sync_cursor_size + ); + if (stableDiffusionData.sync_cursor_size) { + resSlider.value = stableDiffusionData.width; + } +} + function changeSmoothRendering() { const layers = document.getElementById("layer-render"); if (document.getElementById("cbxSmooth").checked) { @@ -893,17 +909,27 @@ function loadSettings() { ? false : localStorage.getItem("enable_hr") ); + var _sync_cursor_size = Boolean( + localStorage.getItem("sync_cursor_size") == (null || "false") + ? false + : localStorage.getItem("sync_cursor_size") + ); // set the values into the UI document.getElementById("maskBlur").value = Number(_mask_blur); document.getElementById("seed").value = Number(_seed); document.getElementById("cbxHRFix").checked = Boolean(_enable_hr); + document.getElementById("cbxSyncCursorSize").checked = + Boolean(_sync_cursor_size); } imageCollection.element.addEventListener( "wheel", (evn) => { evn.preventDefault(); + if (!evn.ctrlKey) { + _resolution_onwheel(evn); + } }, {passive: false} ); @@ -921,3 +947,22 @@ function resetToDefaults() { localStorage.clear(); } } + +function informCursorSizeSlider() { + if (stableDiffusionData.sync_cursor_size) { + if (toolbar._current_tool) { + if (!toolbar._current_tool.state.ignorePrevious) { + toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); + } + toolbar._current_tool.state.ignorePrevious = false; + } + } +} + +const _resolution_onwheel = (evn) => { + if (stableDiffusionData.sync_cursor_size) { + toolbar._current_tool.state.ignorePrevious = true; //so hacky + resSlider.value = + stableDiffusionData.width - (128 * evn.deltaY) / Math.abs(evn.deltaY); + } +}; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 5bf1baf..3e6baae 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -935,6 +935,11 @@ const dreamTool = () => // Display Mask setMask(state.invertMask ? "hold" : "clear"); + + // update cursor size if matching is enabled + if (stableDiffusionData.sync_cursor_size) { + state.setCursorSize(stableDiffusionData.width); + } }, (state, opt) => { // Clear Listeners @@ -955,7 +960,6 @@ const dreamTool = () => }; state.cursorSize = 512; - state.snapToGrid = true; state.invertMask = false; state.overMaskPx = 0; @@ -1003,10 +1007,16 @@ const dreamTool = () => "cursorSize", "Cursor Size", { - min: 0, + min: 128, max: 2048, step: 128, textStep: 2, + cb: () => { + if (stableDiffusionData.sync_cursor_size) { + state.ignorePrevious = true; + resSlider.value = state.cursorSize; + } + }, } ); @@ -1074,6 +1084,11 @@ const img2imgTool = () => // Display Mask setMask(state.invertMask ? "hold" : "clear"); + + // update cursor size if matching is enabled + if (stableDiffusionData.sync_cursor_size) { + state.setCursorSize(stableDiffusionData.width); + } }, (state, opt) => { // Clear Listeners @@ -1244,10 +1259,16 @@ const img2imgTool = () => "cursorSize", "Cursor Size", { - min: 0, + min: 128, max: 2048, step: 128, textStep: 2, + cb: () => { + if (stableDiffusionData.sync_cursor_size) { + state.ignorePrevious = true; + resSlider.value = state.cursorSize; + } + }, } );