From 82e943b12d68f1db604000c6e43a58a8659cbe4d Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 16:25:49 -0600 Subject: [PATCH 1/6] option to sync resolution and reticle size (issue 90) --- js/index.js | 12 ++++++++-- js/ui/tool/dream.js | 53 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/js/index.js b/js/index.js index 63340c1..82981b0 100644 --- a/js/index.js +++ b/js/index.js @@ -468,12 +468,12 @@ const upscalerAutoComplete = createAutoComplete( document.getElementById("upscaler-ac-select") ); -makeSlider( +const resSlider = makeSlider( "Resolution", document.getElementById("resolution"), "resolution", 64, - 1024, + 2048, 64, 512, 2, @@ -971,6 +971,7 @@ imageCollection.element.addEventListener( "wheel", (evn) => { evn.preventDefault(); + _resolution_onwheel(evn); }, {passive: false} ); @@ -988,3 +989,10 @@ function resetToDefaults() { localStorage.clear(); } } + +const _resolution_onwheel = (evn) => { + if (toolbar._current_tool.state.matchResolution) { + resSlider.value = + stableDiffusionData.width - (64 * evn.deltaY) / Math.abs(evn.deltaY); + } +}; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 37d88a2..db1c3e5 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -884,9 +884,9 @@ const _dream_onwheel = (evn, state) => { // // TODO: Someone that has a smooth scrolling mouse should verify if this works with them. - const v = state.cursorSize - 128 * (evn.delta / Math.abs(evn.delta)); + const v = state.cursorSize - 64 * (evn.delta / Math.abs(evn.delta)); - state.cursorSize = state.setCursorSize(v + snap(v, 0, 128)); + state.cursorSize = state.setCursorSize(v + snap(v, 0, 64)); state.mousemovecb(evn); } }; @@ -914,6 +914,11 @@ const dreamTool = () => // Display Mask setMask(state.invertMask ? "hold" : "clear"); + + // update cursor size if matching is enabled + if (state.matchResolution) { + state.setCursorSize(stableDiffusionData.width); + } }, (state, opt) => { // Clear Listeners @@ -934,7 +939,7 @@ const dreamTool = () => }; state.cursorSize = 512; - + state.matchResolution = true; state.snapToGrid = true; state.invertMask = false; state.overMaskPx = 0; @@ -982,9 +987,9 @@ const dreamTool = () => "cursorSize", "Cursor Size", { - min: 0, + min: 64, max: 2048, - step: 128, + step: 64, textStep: 2, } ); @@ -992,6 +997,18 @@ const dreamTool = () => state.setCursorSize = cursorSizeSlider.setValue; state.ctxmenu.cursorSizeSlider = cursorSizeSlider.slider; + // Match Resolution Checkbox + state.ctxmenu.matchResolutionLabel = _toolbar_input.checkbox( + state, + "matchResolution", + "Match Resolution", + () => { + if (state.matchResolution) { + resSlider.value = state.cursorSize; + } + } + ).label; + // Snap to Grid Checkbox state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox( state, @@ -1024,6 +1041,8 @@ const dreamTool = () => } menu.appendChild(state.ctxmenu.cursorSizeSlider); + menu.appendChild(state.ctxmenu.matchResolutionLabel); + menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.snapToGridLabel); menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.invertMaskLabel); @@ -1053,6 +1072,11 @@ const img2imgTool = () => // Display Mask setMask(state.invertMask ? "hold" : "clear"); + + // update cursor size if matching is enabled + if (state.matchResolution) { + state.setCursorSize(stableDiffusionData.width); + } }, (state, opt) => { // Clear Listeners @@ -1072,6 +1096,7 @@ const img2imgTool = () => }; state.cursorSize = 512; + state.matchResolution = true; state.snapToGrid = true; state.invertMask = true; state.fullResolution = false; @@ -1223,9 +1248,9 @@ const img2imgTool = () => "cursorSize", "Cursor Size", { - min: 0, + min: 64, max: 2048, - step: 128, + step: 64, textStep: 2, } ); @@ -1233,6 +1258,18 @@ const img2imgTool = () => state.setCursorSize = cursorSizeSlider.setValue; state.ctxmenu.cursorSizeSlider = cursorSizeSlider.slider; + // Match Resolution Checkbox + state.ctxmenu.matchResolutionLabel = _toolbar_input.checkbox( + state, + "matchResolution", + "Match Resolution", + () => { + if (state.matchResolution) { + resSlider.value = state.cursorSize; + } + } + ).label; + // Snap To Grid Checkbox state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox( state, @@ -1292,6 +1329,8 @@ const img2imgTool = () => } menu.appendChild(state.ctxmenu.cursorSizeSlider); + menu.appendChild(state.ctxmenu.matchResolutionLabel); + menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.snapToGridLabel); menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.invertMaskLabel); From 228bd3d9a09ddcbd47ac6072beddb5511d3d7041 Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 17:09:27 -0600 Subject: [PATCH 2/6] updates reticle size upon manually entered resolution --- js/index.js | 19 +++++++++++++++---- js/ui/tool/dream.js | 12 ++++++------ 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/js/index.js b/js/index.js index 82981b0..2aede1c 100644 --- a/js/index.js +++ b/js/index.js @@ -472,15 +472,16 @@ const resSlider = makeSlider( "Resolution", document.getElementById("resolution"), "resolution", - 64, + 128, 2048, - 64, + 128, 512, 2, (v) => { stableDiffusionData.width = stableDiffusionData.height = v; stableDiffusionData.firstphase_width = stableDiffusionData.firstphase_height = v / 2; + informSliders(); } ); makeSlider( @@ -990,9 +991,19 @@ function resetToDefaults() { } } +function informSliders() { + if (toolbar._current_tool && toolbar._current_tool.state.matchResolution) { + if (!toolbar._current_tool.state.ignorePrevious) { + toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); + } + toolbar._current_tool.state.ignorePrevious = false; + } +} + const _resolution_onwheel = (evn) => { - if (toolbar._current_tool.state.matchResolution) { + if (toolbar._current_tool && toolbar._current_tool.state.matchResolution) { + toolbar._current_tool.state.ignorePrevious = true; //so hacky resSlider.value = - stableDiffusionData.width - (64 * evn.deltaY) / Math.abs(evn.deltaY); + stableDiffusionData.width - (128 * evn.deltaY) / Math.abs(evn.deltaY); } }; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index db1c3e5..3c939a5 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -884,9 +884,9 @@ const _dream_onwheel = (evn, state) => { // // TODO: Someone that has a smooth scrolling mouse should verify if this works with them. - const v = state.cursorSize - 64 * (evn.delta / Math.abs(evn.delta)); + const v = state.cursorSize - 128 * (evn.delta / Math.abs(evn.delta)); - state.cursorSize = state.setCursorSize(v + snap(v, 0, 64)); + state.cursorSize = state.setCursorSize(v + snap(v, 0, 128)); state.mousemovecb(evn); } }; @@ -987,9 +987,9 @@ const dreamTool = () => "cursorSize", "Cursor Size", { - min: 64, + min: 128, max: 2048, - step: 64, + step: 128, textStep: 2, } ); @@ -1248,9 +1248,9 @@ const img2imgTool = () => "cursorSize", "Cursor Size", { - min: 64, + min: 128, max: 2048, - step: 64, + step: 128, textStep: 2, } ); From 8e5d48f97ba6982bce533e3f838fd6de89ce8f9d Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 18:25:02 -0600 Subject: [PATCH 3/6] think it makes more sense here --- index.html | 7 +++++++ js/index.js | 23 +++++++++++++++++++++-- js/ui/tool/dream.js | 34 ++-------------------------------- 3 files changed, 30 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 77f031d..17e49d5 100644 --- a/index.html +++ b/index.html @@ -87,6 +87,13 @@
+
+ + +
diff --git a/js/index.js b/js/index.js index 2aede1c..2821b27 100644 --- a/js/index.js +++ b/js/index.js @@ -115,6 +115,7 @@ function startup() { changeSmoothRendering(); changeSeed(); changeHiResFix(); + changeSyncCursorSize(); } /** @@ -543,6 +544,17 @@ 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 + ); +} + function changeSmoothRendering() { const layers = document.getElementById("layer-render"); if (document.getElementById("cbxSmooth").checked) { @@ -957,6 +969,11 @@ 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("prompt").value = String(_prompt); @@ -966,6 +983,8 @@ function loadSettings() { 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( @@ -992,7 +1011,7 @@ function resetToDefaults() { } function informSliders() { - if (toolbar._current_tool && toolbar._current_tool.state.matchResolution) { + if (stableDiffusionData.sync_cursor_size) { if (!toolbar._current_tool.state.ignorePrevious) { toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); } @@ -1001,7 +1020,7 @@ function informSliders() { } const _resolution_onwheel = (evn) => { - if (toolbar._current_tool && toolbar._current_tool.state.matchResolution) { + 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 3c939a5..fe5e0f5 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -916,7 +916,7 @@ const dreamTool = () => setMask(state.invertMask ? "hold" : "clear"); // update cursor size if matching is enabled - if (state.matchResolution) { + if (stableDiffusionData.sync_cursor_size) { state.setCursorSize(stableDiffusionData.width); } }, @@ -939,7 +939,6 @@ const dreamTool = () => }; state.cursorSize = 512; - state.matchResolution = true; state.snapToGrid = true; state.invertMask = false; state.overMaskPx = 0; @@ -997,18 +996,6 @@ const dreamTool = () => state.setCursorSize = cursorSizeSlider.setValue; state.ctxmenu.cursorSizeSlider = cursorSizeSlider.slider; - // Match Resolution Checkbox - state.ctxmenu.matchResolutionLabel = _toolbar_input.checkbox( - state, - "matchResolution", - "Match Resolution", - () => { - if (state.matchResolution) { - resSlider.value = state.cursorSize; - } - } - ).label; - // Snap to Grid Checkbox state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox( state, @@ -1041,8 +1028,6 @@ const dreamTool = () => } menu.appendChild(state.ctxmenu.cursorSizeSlider); - menu.appendChild(state.ctxmenu.matchResolutionLabel); - menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.snapToGridLabel); menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.invertMaskLabel); @@ -1074,7 +1059,7 @@ const img2imgTool = () => setMask(state.invertMask ? "hold" : "clear"); // update cursor size if matching is enabled - if (state.matchResolution) { + if (stableDiffusionData.sync_cursor_size) { state.setCursorSize(stableDiffusionData.width); } }, @@ -1096,7 +1081,6 @@ const img2imgTool = () => }; state.cursorSize = 512; - state.matchResolution = true; state.snapToGrid = true; state.invertMask = true; state.fullResolution = false; @@ -1258,18 +1242,6 @@ const img2imgTool = () => state.setCursorSize = cursorSizeSlider.setValue; state.ctxmenu.cursorSizeSlider = cursorSizeSlider.slider; - // Match Resolution Checkbox - state.ctxmenu.matchResolutionLabel = _toolbar_input.checkbox( - state, - "matchResolution", - "Match Resolution", - () => { - if (state.matchResolution) { - resSlider.value = state.cursorSize; - } - } - ).label; - // Snap To Grid Checkbox state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox( state, @@ -1329,8 +1301,6 @@ const img2imgTool = () => } menu.appendChild(state.ctxmenu.cursorSizeSlider); - menu.appendChild(state.ctxmenu.matchResolutionLabel); - menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.snapToGridLabel); menu.appendChild(document.createElement("br")); menu.appendChild(state.ctxmenu.invertMaskLabel); From 4241cbd4f9bb5b1b284dd19a2a924e2f4aac1201 Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 19:30:28 -0600 Subject: [PATCH 4/6] why does the callback work fine on dream but breaks img2img --- js/index.js | 11 ++++++++--- js/ui/tool/dream.js | 12 ++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/js/index.js b/js/index.js index 2821b27..a47c49e 100644 --- a/js/index.js +++ b/js/index.js @@ -482,7 +482,7 @@ const resSlider = makeSlider( stableDiffusionData.width = stableDiffusionData.height = v; stableDiffusionData.firstphase_width = stableDiffusionData.firstphase_height = v / 2; - informSliders(); + informCursorSizeSlider(); } ); makeSlider( @@ -553,6 +553,9 @@ function changeSyncCursorSize() { "sync_cursor_size", stableDiffusionData.sync_cursor_size ); + if (stableDiffusionData.sync_cursor_size) { + resSlider.value = stableDiffusionData.width; + } } function changeSmoothRendering() { @@ -991,7 +994,9 @@ imageCollection.element.addEventListener( "wheel", (evn) => { evn.preventDefault(); - _resolution_onwheel(evn); + if (!evn.ctrlKey) { + _resolution_onwheel(evn); + } }, {passive: false} ); @@ -1010,7 +1015,7 @@ function resetToDefaults() { } } -function informSliders() { +function informCursorSizeSlider() { if (stableDiffusionData.sync_cursor_size) { if (!toolbar._current_tool.state.ignorePrevious) { toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index fe5e0f5..efcf38c 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -990,6 +990,12 @@ const dreamTool = () => max: 2048, step: 128, textStep: 2, + cb: () => { + if (stableDiffusionData.sync_cursor_size) { + state.ignorePrevious = true; + resSlider.value = state.cursorSize; + } + }, } ); @@ -1236,6 +1242,12 @@ const img2imgTool = () => max: 2048, step: 128, textStep: 2, + // cb: () => { + // if (stableDiffusionData.sync_cursor_size) { + // state.ignorePrevious = true; + // resSlider.value = state.cursorSize; + // } + // }, } ); From 55e361b6e3e84e9307f9b35e215587c2997d9b27 Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 19:52:14 -0600 Subject: [PATCH 5/6] i am not smart enough for this lol --- js/index.js | 8 +++++--- js/ui/tool/dream.js | 24 ++++++++++++------------ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/js/index.js b/js/index.js index a47c49e..00d0129 100644 --- a/js/index.js +++ b/js/index.js @@ -1017,10 +1017,12 @@ function resetToDefaults() { function informCursorSizeSlider() { if (stableDiffusionData.sync_cursor_size) { - if (!toolbar._current_tool.state.ignorePrevious) { - toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); + if (toolbar._current_tool) { + if (!toolbar._current_tool.state.ignorePrevious) { + toolbar._current_tool.state.setCursorSize(stableDiffusionData.width); + } + toolbar._current_tool.state.ignorePrevious = false; } - toolbar._current_tool.state.ignorePrevious = false; } } diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index efcf38c..7e4e9a5 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -990,12 +990,12 @@ const dreamTool = () => max: 2048, step: 128, textStep: 2, - cb: () => { - if (stableDiffusionData.sync_cursor_size) { - state.ignorePrevious = true; - resSlider.value = state.cursorSize; - } - }, + // cb: () => { + // if (stableDiffusionData.sync_cursor_size) { + // state.ignorePrevious = true; + // resSlider.value = state.cursorSize; + // } + // }, } ); @@ -1242,12 +1242,12 @@ const img2imgTool = () => max: 2048, step: 128, textStep: 2, - // cb: () => { - // if (stableDiffusionData.sync_cursor_size) { - // state.ignorePrevious = true; - // resSlider.value = state.cursorSize; - // } - // }, + cb: () => { + if (stableDiffusionData.sync_cursor_size) { + state.ignorePrevious = true; + resSlider.value = state.cursorSize; + } + }, } ); From 41e57d28cf4e700519c7a03b24fcf5cd075f686d Mon Sep 17 00:00:00 2001 From: tim h Date: Mon, 12 Dec 2022 21:05:04 -0600 Subject: [PATCH 6/6] whoops --- js/ui/tool/dream.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index b613284..3e6baae 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -1011,12 +1011,12 @@ const dreamTool = () => max: 2048, step: 128, textStep: 2, - // cb: () => { - // if (stableDiffusionData.sync_cursor_size) { - // state.ignorePrevious = true; - // resSlider.value = state.cursorSize; - // } - // }, + cb: () => { + if (stableDiffusionData.sync_cursor_size) { + state.ignorePrevious = true; + resSlider.value = state.cursorSize; + } + }, } );