finer sliders

Now sliders can have a better precision when editing text than when
dragging.

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

js/index.js

@@ -494,6 +494,7 @@ const makeSlider = (
 	max,
 	step,
 	defaultValue,
+	textStep = null,
 	valuecb = null
 ) => {
 	const local = localStorage.getItem(lsKey);
@@ -509,6 +510,7 @@ const makeSlider = (
 		max,
 		step,
 		defaultValue: def,
+		textStep,
 	});
 };
 
@@ -519,7 +521,8 @@ makeSlider(
 	-1,
 	25,
 	0.5,
-	7.0
+	7.0,
+	0.1
 );
 makeSlider(
 	"Batch Size",
@@ -547,12 +550,13 @@ makeSlider(
 	16,
 	1,
 	8,
+	null,
 	(v) => {
 		scaleFactor = v;
 	}
 );
 
-makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 1, 30);
+makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 5, 30, 1);
 
 function changeSnapMode() {
 	snapToGrid = document.getElementById("cbxSnap").checked;

js/lib/toolbar.js

@@ -150,18 +150,20 @@ const _toolbar_input = {
 		return {checkbox, label};
 	},
 
-	slider: (state, dataKey, text, min = 0, max = 1, step = 0.1, cb = null) => {
+	slider: (state, dataKey, text, options = {}) => {
+		defaultOpt(options, {min: 0, max: 1, step: 0.1, textStep: null, cb: null});
 		const slider = document.createElement("div");
 
 		const value = createSlider(text, slider, {
-			min,
-			max,
-			step,
+			min: options.min,
+			max: options.max,
+			step: options.step,
 			valuecb: (v) => {
 				state[dataKey] = v;
-				cb && cb(v);
+				options.cb && options.cb(v);
 			},
 			defaultValue: state[dataKey],
+			textStep: options.textStep,
 		});
 
 		return {

js/lib/ui.js

@@ -72,6 +72,8 @@ function makeDraggable(element) {
  * @param {number} options.max The maximum value of the slider
  * @param {number} options.step The step size for the slider
  * @param {number} option.defaultValue The default value of the slider
+ * @param {number} [options.textStep=step] The step size for the slider text and setvalue \
+ * (usually finer, and an integer divisor of step size)
  * @returns {{value: number}} A reference to the value of the slider
  */
 function createSlider(name, wrapper, options = {}) {
@@ -81,6 +83,7 @@ function createSlider(name, wrapper, options = {}) {
 		max: 1,
 		step: 0.1,
 		defaultValue: 0.7,
+		textStep: null,
 	});
 
 	let value = options.defaultValue;
@@ -92,6 +95,15 @@ function createSlider(name, wrapper, options = {}) {
 	phantomRange.max = options.max;
 	phantomRange.step = options.step;
 
+	let phantomTextRange = phantomRange;
+	if (options.textStep) {
+		phantomTextRange = document.createElement("input");
+		phantomTextRange.type = "range";
+		phantomTextRange.min = options.min;
+		phantomTextRange.max = options.max;
+		phantomTextRange.step = options.textStep;
+	}
+
 	// Build slider element
 	const underEl = document.createElement("div");
 	underEl.classList.add("under");
@@ -114,8 +126,8 @@ function createSlider(name, wrapper, options = {}) {
 
 	// Set value
 	const setValue = (val) => {
-		phantomRange.value = val;
-		value = parseFloat(phantomRange.value);
+		phantomTextRange.value = val;
+		value = parseFloat(phantomTextRange.value);
 		bar.style.width = `${
 			100 * ((value - options.min) / (options.max - options.min))
 		}%`;
@@ -156,17 +168,15 @@ function createSlider(name, wrapper, options = {}) {
 
 	mouse.listen.window.btn.left.ondrag.on((evn) => {
 		if (evn.initialTarget === overEl) {
-			setValue(
-				Math.max(
-					options.min,
-					Math.min(
-						options.max,
-						(evn.evn.layerX / wrapper.offsetWidth) *
-							(options.max - options.min) +
-							options.min
-					)
+			phantomRange.value = Math.max(
+				options.min,
+				Math.min(
+					options.max,
+					(evn.evn.layerX / wrapper.offsetWidth) * (options.max - options.min) +
+						options.min
 				)
 			);
+			setValue(parseFloat(phantomRange.value));
 		}
 	});
 

js/ui/tool/colorbrush.js

@@ -207,9 +207,12 @@ const colorBrushTool = () =>
 						state,
 						"brushSize",
 						"Brush Size",
-						state.config.minBrushSize,
-						state.config.maxBrushSize,
-						1
+						{
+							min: state.config.minBrushSize,
+							max: state.config.maxBrushSize,
+							step: 5,
+							textStep: 1,
+						}
 					);
 					state.ctxmenu.brushSizeSlider = brushSizeSlider.slider;
 					state.setBrushSize = brushSizeSlider.setValue;
@@ -219,9 +222,11 @@ const colorBrushTool = () =>
 						state,
 						"brushBlur",
 						"Brush Blur",
-						state.config.minBlur,
-						state.config.maxBlur,
-						1
+						{
+							min: state.config.minBlur,
+							max: state.config.maxBlur,
+							step: 1,
+						}
 					);
 					state.ctxmenu.brushBlurSlider = brushBlurSlider.slider;
 

js/ui/tool/dream.js

@@ -641,9 +641,11 @@ const dreamTool = () =>
 						state,
 						"overMaskPx",
 						"Overmask px",
-						0,
-						128,
-						1
+						{
+							min: 0,
+							max: 128,
+							step: 1,
+						}
 					).slider;
 				}
 
@@ -771,9 +773,12 @@ const img2imgTool = () =>
 						state,
 						"denoisingStrength",
 						"Denoising Strength",
-						0,
-						1,
-						0.05
+						{
+							min: 0,
+							max: 1,
+							step: 0.05,
+							textStep: 0.01,
+						}
 					).slider;
 
 					// Border Mask Size Slider
@@ -781,9 +786,12 @@ const img2imgTool = () =>
 						state,
 						"keepBorderSize",
 						"Keep Border Size",
-						0,
-						128,
-						1
+						{
+							min: 0,
+							max: 128,
+							step: 8,
+							textStep: 1,
+						}
 					).slider;
 				}
 

js/ui/tool/maskbrush.js

@@ -182,12 +182,15 @@ const maskBrushTool = () =>
 						state,
 						"brushSize",
 						"Brush Size",
-						state.config.minBrushSize,
-						state.config.maxBrushSize,
-						1,
-						(v) => {
-							if (!state.cursorLayer) return;
-							_paint_mb_cursor(state);
+						{
+							min: state.config.minBrushSize,
+							max: state.config.maxBrushSize,
+							step: 5,
+							textStep: 1,
+							cb: (v) => {
+								if (!state.cursorLayer) return;
+								_paint_mb_cursor(state);
+							},
 						}
 					);
 					state.ctxmenu.brushSizeSlider = brushSizeSlider.slider;