img2img fix and better custom slider rendering

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

Former-commit-id: eb961230a2eeb352dd6097c7010ed0775f1dd3ce
This commit is contained in:
Victor Seiji Hariki 2022-11-24 11:54:30 -03:00
parent 231c7f56d3
commit 76938b535f
2 changed files with 21 additions and 18 deletions

View file

@ -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);
};

View file

@ -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;