diff --git a/js/index.js b/js/index.js index 7a3e47b..7828b35 100644 --- a/js/index.js +++ b/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; diff --git a/js/lib/toolbar.js b/js/lib/toolbar.js index bcbf3f6..beda095 100644 --- a/js/lib/toolbar.js +++ b/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 { diff --git a/js/lib/ui.js b/js/lib/ui.js index 5751467..485f319 100644 --- a/js/lib/ui.js +++ b/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)); } }); diff --git a/js/ui/tool/colorbrush.js b/js/ui/tool/colorbrush.js index 09630b3..0d1fba0 100644 --- a/js/ui/tool/colorbrush.js +++ b/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; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 5dccd6b..568c7d6 100644 --- a/js/ui/tool/dream.js +++ b/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; } diff --git a/js/ui/tool/maskbrush.js b/js/ui/tool/maskbrush.js index 0f7410f..6e6e8ce 100644 --- a/js/ui/tool/maskbrush.js +++ b/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;