From 76938b535f135f14e983d3ee06851784118c1f50 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 24 Nov 2022 11:54:30 -0300
Subject: [PATCH] img2img fix and better custom slider rendering

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

Former-commit-id: eb961230a2eeb352dd6097c7010ed0775f1dd3ce
---
 js/settingsbar.js |  5 ++---
 js/ui/toolbar.js  | 34 +++++++++++++++++++---------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/js/settingsbar.js b/js/settingsbar.js
index 895eaae..6258425 100644
--- a/js/settingsbar.js
+++ b/js/settingsbar.js
@@ -93,9 +93,8 @@ function createSlider(name, wrapper, options = {}) {
 		phantomRange.value = val;
 		value = parseFloat(phantomRange.value);
 		bar.style.width = `${
-			wrapper.offsetWidth *
-			((value - options.min) / (options.max - options.min))
-		}px`;
+			100 * ((value - options.min) / (options.max - options.min))
+		}%`;
 		textEl.value = `${name}: ${value}`;
 		options.valuecb && options.valuecb(value);
 	};
diff --git a/js/ui/toolbar.js b/js/ui/toolbar.js
index a45d186..91fba77 100644
--- a/js/ui/toolbar.js
+++ b/js/ui/toolbar.js
@@ -134,7 +134,15 @@ const _toolbar_input = {
 		return {checkbox, label};
 	},
 
-	slider: (state, dataKey, text, min = 0, max = 1, step = 0.1) => {
+	slider: (
+		state,
+		dataKey,
+		text,
+		min = 0,
+		max = 1,
+		step = 0.1,
+		defaultValue = 0.3
+	) => {
 		const slider = document.createElement("div");
 
 		const value = createSlider(text, slider, {
@@ -144,6 +152,7 @@ const _toolbar_input = {
 			valuecb: (v) => {
 				state[dataKey] = v;
 			},
+			defaultValue,
 		});
 
 		return {
@@ -226,7 +235,8 @@ tools.dream = toolbar.registerTool(
 					"Overmask px",
 					0,
 					128,
-					1
+					1,
+					64
 				).slider;
 			}
 
@@ -329,32 +339,25 @@ tools.img2img = toolbar.registerTool(
 					"Denoising Strength",
 					0,
 					1,
-					0.05
+					0.05,
+					0.7
 				).slider;
 
-				// Use Border Mask Checkbox
-				state.ctxmenu.useBorderMaskSlider = _toolbar_input.checkbox(
-					state,
-					"useBorderMask",
-					"Use Border Mask"
-				).label;
 				// Border Mask Size Slider
-				state.ctxmenu.borderMaskSize = _toolbar_input.slider(
+				state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
 					state,
 					"borderMaskSize",
 					"Border Mask Size",
 					0,
 					128,
-					1
+					1,
+					64
 				).slider;
 			}
 
 			menu.appendChild(state.ctxmenu.snapToGridLabel);
 			menu.appendChild(document.createElement("br"));
 			menu.appendChild(state.ctxmenu.denoisingStrengthSlider);
-			menu.appendChild(document.createElement("br"));
-			menu.appendChild(state.ctxmenu.useBorderMaskLabel);
-			menu.appendChild(document.createElement("br"));
 			menu.appendChild(state.ctxmenu.borderMaskSlider);
 		},
 		shortcut: "I",
@@ -438,7 +441,8 @@ tools.maskbrush = toolbar.registerTool(
 					"Brush Size",
 					state.config.minBrushSize,
 					state.config.maxBrushSize,
-					1
+					1,
+					64
 				);
 				state.ctxmenu.brushSizeSlider = brushSizeSlider.slider;
 				state.setBrushSize = brushSizeSlider.setValue;