From 3c0eed68ce913ed4cc5aa065b73ad1a6a83d4b02 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 13:31:15 -0300 Subject: [PATCH 1/9] fix slider strange behavior when mouse left also added / to all res references Signed-off-by: Victor Seiji Hariki --- js/lib/ui.js | 7 +++++-- js/ui/tool/colorbrush.js | 2 +- js/ui/tool/dream.js | 6 +++--- js/ui/tool/interrogate.js | 2 +- js/ui/tool/maskbrush.js | 2 +- js/ui/tool/select.js | 2 +- js/ui/tool/stamp.js | 2 +- 7 files changed, 13 insertions(+), 10 deletions(-) diff --git a/js/lib/ui.js b/js/lib/ui.js index 485f319..0fb0373 100644 --- a/js/lib/ui.js +++ b/js/lib/ui.js @@ -168,14 +168,17 @@ function createSlider(name, wrapper, options = {}) { mouse.listen.window.btn.left.ondrag.on((evn) => { if (evn.initialTarget === overEl) { - phantomRange.value = Math.max( + const newv = Math.max( options.min, Math.min( options.max, - (evn.evn.layerX / wrapper.offsetWidth) * (options.max - options.min) + + ((evn.evn.clientX - evn.initialTarget.getBoundingClientRect().left) / + wrapper.offsetWidth) * + (options.max - options.min) + options.min ) ); + phantomRange.value = newv; setValue(parseFloat(phantomRange.value)); } }); diff --git a/js/ui/tool/colorbrush.js b/js/ui/tool/colorbrush.js index 2cbdfd7..dfaa640 100644 --- a/js/ui/tool/colorbrush.js +++ b/js/ui/tool/colorbrush.js @@ -37,7 +37,7 @@ const _color_brush_erase_callback = (evn, state, ctx) => { const colorBrushTool = () => toolbar.registerTool( - "res/icons/brush.svg", + "/res/icons/brush.svg", "Color Brush", (state, opt) => { // Draw new cursor immediately diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index e19fecd..5bdb277 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -819,7 +819,7 @@ const _dream_onwheel = (evn, state) => { */ const dreamTool = () => toolbar.registerTool( - "res/icons/image-plus.svg", + "/res/icons/image-plus.svg", "Dream", (state, opt) => { // Draw new cursor immediately @@ -940,7 +940,7 @@ const dreamTool = () => { min: 0, max: 64, - step: 5, + step: 4, textStep: 1, } ).slider; @@ -959,7 +959,7 @@ const dreamTool = () => const img2imgTool = () => toolbar.registerTool( - "res/icons/image.svg", + "/res/icons/image.svg", "Img2Img", (state, opt) => { // Draw new cursor immediately diff --git a/js/ui/tool/interrogate.js b/js/ui/tool/interrogate.js index 10c8e98..8425ac9 100644 --- a/js/ui/tool/interrogate.js +++ b/js/ui/tool/interrogate.js @@ -1,6 +1,6 @@ const interrogateTool = () => toolbar.registerTool( - "res/icons/microscope.svg", + "/res/icons/microscope.svg", "Interrogate", (state, opt) => { // Draw new cursor immediately diff --git a/js/ui/tool/maskbrush.js b/js/ui/tool/maskbrush.js index 90dad73..bf71cfa 100644 --- a/js/ui/tool/maskbrush.js +++ b/js/ui/tool/maskbrush.js @@ -61,7 +61,7 @@ const _mask_brush_erase_callback = (evn, state, opacity = 100) => { const maskBrushTool = () => toolbar.registerTool( - "res/icons/paintbrush.svg", + "/res/icons/paintbrush.svg", "Mask Brush", (state, opt) => { // Draw new cursor immediately diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index 1ad41fd..e25cdf3 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -1,6 +1,6 @@ const selectTransformTool = () => toolbar.registerTool( - "res/icons/box-select.svg", + "/res/icons/box-select.svg", "Select Image", (state, opt) => { // Draw new cursor immediately diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index faf0611..8cf3bc7 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -1,6 +1,6 @@ const stampTool = () => toolbar.registerTool( - "res/icons/file-up.svg", + "/res/icons/file-up.svg", "Stamp Image", (state, opt) => { state.loaded = true; From 3373d2964e72985cc520ae5d445f89168ed3dc87 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 18:25:59 -0300 Subject: [PATCH 2/9] fix selection box when not grid-aligned Signed-off-by: Victor Seiji Hariki --- js/ui/tool/select.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index e25cdf3..e2a2c7b 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -101,6 +101,10 @@ const selectTransformTool = () => // Selection bounding box object. Has some witchery to deal with handles. const selectionBB = (x1, y1, x2, y2) => { + x1 = Math.round(x1); + y1 = Math.round(y1); + x2 = Math.round(x2); + y2 = Math.round(y2); return { original: { x: Math.min(x1, x2), From 9a08408456de2e9bf48a6971d50d85e410d21558 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 18:38:23 -0300 Subject: [PATCH 3/9] this might fix some of our pixel-alignment issues Signed-off-by: Victor Seiji Hariki --- js/initalize/layers.populate.js | 4 ++-- js/lib/util.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index 9263dfe..2eb35a0 100644 --- a/js/initalize/layers.populate.js +++ b/js/initalize/layers.populate.js @@ -80,8 +80,8 @@ mouse.registerContext( // ctx.coords.prev.x = ctx.coords.pos.x; ctx.coords.prev.y = ctx.coords.pos.y; - ctx.coords.pos.x = layerX; - ctx.coords.pos.y = layerY; + ctx.coords.pos.x = Math.round(layerX); + ctx.coords.pos.y = Math.round(layerY); }, {target: imageCollection.inputElement} ); diff --git a/js/lib/util.js b/js/lib/util.js index bdd0a63..0f80380 100644 --- a/js/lib/util.js +++ b/js/lib/util.js @@ -180,14 +180,15 @@ function getBoundingBox(cx, cy, w, h, gridSnap = null, offset = 0) { offs.x = snap(cx, offset, gridSnap); offs.y = snap(cy, offset, gridSnap); } - box.x = offs.x + cx; - box.y = offs.y + cy; + + box.x = Math.round(offs.x + cx); + box.y = Math.round(offs.y + cy); return { x: Math.floor(box.x - w / 2), y: Math.floor(box.y - h / 2), - w, - h, + w: Math.round(w), + h: Math.round(h), }; } From 361efc76f227510eefc821379807f9655b6f1251 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 18:45:51 -0300 Subject: [PATCH 4/9] bypass for browser that calculate layer* Bypasses the kinda slow getBoundingClientRect for browsers that actually support CSS transforms for cursors Signed-off-by: Victor Seiji Hariki --- js/initalize/layers.populate.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index 2eb35a0..b867f0f 100644 --- a/js/initalize/layers.populate.js +++ b/js/initalize/layers.populate.js @@ -59,8 +59,14 @@ mouse.registerContext( "world", (evn, ctx) => { // Fix because in chrome layerX and layerY simply doesnt work - /** @type {HTMLDivElement} */ - const target = evn.target; + ctx.coords.prev.x = ctx.coords.pos.x; + ctx.coords.prev.y = ctx.coords.pos.y; + + if (evn.layerX !== evn.clientX || evn.layerY !== evn.clientY) { + ctx.coords.pos.x = evn.layerX; + ctx.coords.pos.y = evn.layerY; + return; + } // Get element bounding rect const bb = imageCollection.element.getBoundingClientRect(); @@ -78,8 +84,6 @@ mouse.registerContext( const layerY = ((y - bb.top) / bb.height) * h; // - ctx.coords.prev.x = ctx.coords.pos.x; - ctx.coords.prev.y = ctx.coords.pos.y; ctx.coords.pos.x = Math.round(layerX); ctx.coords.pos.y = Math.round(layerY); }, From aee812b70a7cb51c3415147031eb64faab77bfc4 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 18:51:33 -0300 Subject: [PATCH 5/9] fix mouse for chrome (for now) Seems scroll delta is inconsistent between browsers, so for my chromium installation it was simply not working at all due to snapping. Made it so every event is a cursor size change for now. probably bad for smooth mouse wheels, but for a complete fix we would have to keep track of pixels scrolled and probably add a mouse wheel sensitivity setting somewhere. Signed-off-by: Victor Seiji Hariki --- js/ui/tool/dream.js | 10 +++++++--- js/ui/tool/interrogate.js | 24 +++++++++--------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 5bdb277..b466e33 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -806,9 +806,13 @@ const _reticle_draw = (evn, state, tool, style = {}) => { const _dream_onwheel = (evn, state) => { if (!evn.evn.ctrlKey) { - const v = - state.cursorSize - - Math.floor(state.config.cursorSizeScrollSpeed * evn.delta); + // Seems mouse wheel scroll is very different between different browsers. + // Will use scroll as just an event to go to the next cursor snap position instead. + // + // 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)); + state.cursorSize = state.setCursorSize(v + snap(v, 0, 128)); state.mousemovecb(evn); } diff --git a/js/ui/tool/interrogate.js b/js/ui/tool/interrogate.js index 8425ac9..5e97375 100644 --- a/js/ui/tool/interrogate.js +++ b/js/ui/tool/interrogate.js @@ -48,8 +48,16 @@ const interrogateTool = () => reticleStyle: "#AFAF", }); }; + + state.redraw = () => { + state.mousemovecb({ + x: mouse.coords.world.pos.x, + y: mouse.coords.world.pos.y, + }); + }; + state.wheelcb = (evn) => { - _interrogate_onwheel(evn, state); + _dream_onwheel(evn, state); }; state.interrogatecb = (evn) => { @@ -91,20 +99,6 @@ const interrogateTool = () => } ); -/** - * Generic wheel handler - */ - -const _interrogate_onwheel = (evn, state) => { - if (!evn.evn.ctrlKey) { - const v = - state.cursorSize - - Math.floor(state.config.cursorSizeScrollSpeed * evn.delta); - state.cursorSize = state.setCursorSize(v + snap(v, 0, 128)); - state.mousemovecb(evn); - } -}; - const interrogate_callback = async (evn, state) => { const bb = getBoundingBox( evn.x, From c51c71915e6f68ee77b60db3a8a9b57a57ffce22 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 18:55:41 -0300 Subject: [PATCH 6/9] add test for recommended configs also adds option to change to recommended automatically Signed-off-by: Victor Seiji Hariki --- js/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/js/index.js b/js/index.js index 8144408..480caa8 100644 --- a/js/index.js +++ b/js/index.js @@ -264,6 +264,7 @@ async function testHostConnection() { setConnectionStatus("online"); // Load data as soon as connection is first stablished if (firstTimeOnline) { + getConfig(); getStyles(); getSamplers(); getUpscalers(); @@ -678,6 +679,65 @@ function changeModel() { }); } +async function getConfig() { + var url = document.getElementById("host").value + "/sdapi/v1/options"; + + let message = + "The following options for the AUTOMATIC1111's webui are not recommended to use with this software:"; + + try { + const response = await fetch(url); + + const data = await response.json(); + + let wrong = false; + + // Check if img2img color correction is disabled and inpainting mask weight is set to one + // TODO: API Seems bugged for retrieving inpainting mask weight - returning 0 for all values different than 1.0 + if (data.img2img_color_correction) { + message += "\n - Image to Image Color Correction: false recommended"; + wrong = true; + } + + if (data.inpainting_mask_weight < 1.0) { + message += `\n - Inpainting Conditioning Mask Strength: 1.0 recommended`; + wrong = true; + } + + message += "\n\nShould these values be changed to the recommended ones?"; + + if (!wrong) { + console.info("[index] WebUI Settings set as recommended."); + return; + } + + console.info( + "[index] WebUI Settings not set as recommended. Prompting for changing settings automatically." + ); + + if (!confirm(message)) return; + + try { + await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + img2img_color_correction: false, + inpainting_mask_weight: 1.0, + }), + }); + } catch (e) { + console.warn("[index] Failed to fetch WebUI Configuration"); + console.warn(e); + } + } catch (e) { + console.warn("[index] Failed to fetch WebUI Configuration"); + console.warn(e); + } +} + async function getStyles() { /** @type {HTMLSelectElement} */ var styleSelect = document.getElementById("styleSelect"); From 548aa05001fa6ea0c55ad3abb1c2426a7d795b6f Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 19:22:25 -0300 Subject: [PATCH 7/9] windows now stop wheel event propagation no more of the "mouse cursor size change while scrolling" issue Signed-off-by: Victor Seiji Hariki --- js/initalize/ui.populate.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/js/initalize/ui.populate.js b/js/initalize/ui.populate.js index eed8070..ba8b43c 100644 --- a/js/initalize/ui.populate.js +++ b/js/initalize/ui.populate.js @@ -1,6 +1,28 @@ -document.querySelectorAll(".floating-window").forEach((w) => { - makeDraggable(w); -}); +document.querySelectorAll(".floating-window").forEach( + /** + * Runs for each floating window + * + * @param {HTMLDivElement} w + */ + (w) => { + makeDraggable(w); + w.addEventListener( + "wheel", + (e) => { + e.stopPropagation(); + }, + {passive: false} + ); + + w.addEventListener( + "click", + (e) => { + e.stopPropagation(); + }, + {passive: false} + ); + } +); var coll = document.getElementsByClassName("collapsible"); for (var i = 0; i < coll.length; i++) { From 3701eb110b1f073bb761a2ce6959c6ba0b774778 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 23:09:41 -0300 Subject: [PATCH 8/9] fix some more issues in selectjs pixel alignment Signed-off-by: Victor Seiji Hariki --- js/ui/tool/select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index e2a2c7b..cb7aed4 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -217,8 +217,8 @@ const selectTransformTool = () => // Update position if (state.moving) { - state.selected.x = x - state.moving.offset.x; - state.selected.y = y - state.moving.offset.y; + state.selected.x = Math.round(x - state.moving.offset.x); + state.selected.y = Math.round(y - state.moving.offset.y); state.selected.updateOriginal(); } From 458df53facf19da53dcb0f574e053d6f92093a6f Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Wed, 7 Dec 2022 23:17:46 -0300 Subject: [PATCH 9/9] fix pixel alingment on select for scaling Signed-off-by: Victor Seiji Hariki --- js/ui/tool/select.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index cb7aed4..97dd684 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -354,11 +354,13 @@ const selectTransformTool = () => "Image Transform Erase", state.original ); - commands.runCommand( - "drawImage", - "Image Transform Draw", - state.selected - ); + commands.runCommand("drawImage", "Image Transform Draw", { + image: state.selected.image, + x: Math.round(state.selected.x), + y: Math.round(state.selected.y), + w: Math.round(state.selected.w), + h: Math.round(state.selected.h), + }); state.original = null; state.selected = null;