Merge branch 'main' into manual-scripts
# Conflicts: # index.html
This commit is contained in:
parent
610f82174f
commit
769182508f
8 changed files with 85 additions and 15 deletions
14
index.html
14
index.html
|
@ -438,7 +438,7 @@
|
|||
<script src="js/lib/layers.js?v=26b7436" type="text/javascript"></script>
|
||||
<script src="js/lib/commands.js?v=ad60afc" type="text/javascript"></script>
|
||||
|
||||
<script src="js/lib/toolbar.js?v=fb3f261" type="text/javascript"></script>
|
||||
<script src="js/lib/toolbar.js?v=4fcf718" type="text/javascript"></script>
|
||||
<script src="js/lib/ui.js?v=17014b3" type="text/javascript"></script>
|
||||
|
||||
<script
|
||||
|
@ -465,19 +465,19 @@
|
|||
src="js/ui/tool/generic.js?v=3e678e0"
|
||||
type="text/javascript"></script>
|
||||
|
||||
<script src="js/ui/tool/dream.js?v=1ed1e84" type="text/javascript"></script>
|
||||
<script src="js/ui/tool/dream.js?v=00fdfe4" type="text/javascript"></script>
|
||||
<script
|
||||
src="js/ui/tool/maskbrush.js?v=d88810f"
|
||||
src="js/ui/tool/maskbrush.js?v=e9bd0eb"
|
||||
type="text/javascript"></script>
|
||||
<script
|
||||
src="js/ui/tool/colorbrush.js?v=46011ee"
|
||||
src="js/ui/tool/colorbrush.js?v=20bc06d"
|
||||
type="text/javascript"></script>
|
||||
<script
|
||||
src="js/ui/tool/select.js?v=c05e65a"
|
||||
src="js/ui/tool/select.js?v=b84bf02"
|
||||
type="text/javascript"></script>
|
||||
<script src="js/ui/tool/stamp.js?v=0fc2d68" type="text/javascript"></script>
|
||||
<script src="js/ui/tool/stamp.js?v=75341ec" type="text/javascript"></script>
|
||||
<script
|
||||
src="js/ui/tool/interrogate.js?v=e579ff1"
|
||||
src="js/ui/tool/interrogate.js?v=a9f8585"
|
||||
type="text/javascript"></script>
|
||||
|
||||
<!-- Initialize -->
|
||||
|
|
|
@ -151,18 +151,24 @@ const toolbar = {
|
|||
* Premade inputs for populating the context menus
|
||||
*/
|
||||
const _toolbar_input = {
|
||||
checkbox: (state, dataKey, text, classes, cb = null) => {
|
||||
checkbox: (state, lsKey, dataKey, text, classes, cb = null) => {
|
||||
if (state[dataKey] === undefined) state[dataKey] = false;
|
||||
|
||||
const savedValueStr = lsKey && localStorage.getItem(lsKey);
|
||||
const savedValue = savedValueStr && JSON.parse(savedValueStr);
|
||||
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.classList.add("oo-checkbox", "ui", "inline-icon");
|
||||
|
||||
if (savedValue !== null) state[dataKey] = checkbox.checked = savedValue;
|
||||
|
||||
if (typeof classes === "string") classes = [classes];
|
||||
|
||||
if (classes) checkbox.classList.add(...classes);
|
||||
checkbox.checked = state[dataKey];
|
||||
checkbox.onchange = () => {
|
||||
if (lsKey) localStorage.setItem(lsKey, JSON.stringify(checkbox.checked));
|
||||
state[dataKey] = checkbox.checked;
|
||||
cb && cb();
|
||||
};
|
||||
|
@ -185,15 +191,19 @@ const _toolbar_input = {
|
|||
};
|
||||
},
|
||||
|
||||
slider: (state, dataKey, text, options = {}) => {
|
||||
slider: (state, lsKey, dataKey, text, options = {}) => {
|
||||
defaultOpt(options, {min: 0, max: 1, step: 0.1, textStep: null, cb: null});
|
||||
const slider = document.createElement("div");
|
||||
|
||||
const savedValueStr = lsKey && localStorage.getItem(lsKey);
|
||||
const savedValue = savedValueStr && JSON.parse(savedValueStr);
|
||||
|
||||
const value = createSlider(text, slider, {
|
||||
min: options.min,
|
||||
max: options.max,
|
||||
step: options.step,
|
||||
valuecb: (v) => {
|
||||
if (lsKey) localStorage.setItem(lsKey, JSON.stringify(v));
|
||||
state[dataKey] = v;
|
||||
options.cb && options.cb(v);
|
||||
},
|
||||
|
@ -201,6 +211,8 @@ const _toolbar_input = {
|
|||
textStep: options.textStep,
|
||||
});
|
||||
|
||||
if (savedValue !== null) value.value = savedValue;
|
||||
|
||||
return {
|
||||
slider,
|
||||
rawSlider: value,
|
||||
|
@ -213,12 +225,16 @@ const _toolbar_input = {
|
|||
|
||||
selectlist: (
|
||||
state,
|
||||
lsKey,
|
||||
dataKey,
|
||||
text,
|
||||
options = {value, text},
|
||||
defaultOptionValue,
|
||||
cb = null
|
||||
) => {
|
||||
const savedValueStr = lsKey && localStorage.getItem(lsKey);
|
||||
const savedValue = savedValueStr && JSON.parse(savedValueStr);
|
||||
|
||||
const selectlist = document.createElement("select");
|
||||
selectlist.classList.add("bareselector");
|
||||
Object.entries(options).forEach((opt) => {
|
||||
|
@ -228,7 +244,13 @@ const _toolbar_input = {
|
|||
selectlist.options.add(option);
|
||||
});
|
||||
selectlist.selectedIndex = defaultOptionValue;
|
||||
|
||||
if (savedValue !== null)
|
||||
state[dataKey] = selectlist.selectedIndex = savedValue;
|
||||
|
||||
selectlist.onchange = () => {
|
||||
if (lsKey)
|
||||
localStorage.setItem(lsKey, JSON.stringify(selectlist.selectedIndex));
|
||||
state[dataKey] = selectlist.selectedIndex;
|
||||
cb && cb();
|
||||
};
|
||||
|
|
|
@ -373,6 +373,7 @@ const colorBrushTool = () =>
|
|||
const array = document.createElement("div");
|
||||
const affectMaskCheckbox = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/colorbrush-affectmask",
|
||||
"affectMask",
|
||||
"Affect Mask",
|
||||
"icon-venetian-mask"
|
||||
|
@ -384,6 +385,7 @@ const colorBrushTool = () =>
|
|||
// Brush size slider
|
||||
const brushSizeSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/colorbrush-brushsize",
|
||||
"brushSize",
|
||||
"Brush Size",
|
||||
{
|
||||
|
@ -399,6 +401,7 @@ const colorBrushTool = () =>
|
|||
// Brush opacity slider
|
||||
const brushOpacitySlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/colorbrush-brushopacity",
|
||||
"brushOpacity",
|
||||
"Brush Opacity",
|
||||
{
|
||||
|
@ -413,6 +416,7 @@ const colorBrushTool = () =>
|
|||
// Brush blur slider
|
||||
const brushBlurSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/colorbrush-brushblur",
|
||||
"brushBlur",
|
||||
"Brush Blur",
|
||||
{
|
||||
|
|
|
@ -1649,6 +1649,7 @@ const dreamTool = () =>
|
|||
// Cursor Size Slider
|
||||
const cursorSizeSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-cursorsize",
|
||||
"cursorSize",
|
||||
"Cursor Size",
|
||||
{
|
||||
|
@ -1681,6 +1682,7 @@ const dreamTool = () =>
|
|||
// Snap to Grid Checkbox
|
||||
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/dream-snaptogrid",
|
||||
"snapToGrid",
|
||||
"Snap To Grid",
|
||||
"icon-grid"
|
||||
|
@ -1689,6 +1691,7 @@ const dreamTool = () =>
|
|||
// Invert Mask Checkbox
|
||||
state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/dream-invertmask",
|
||||
"invertMask",
|
||||
"Invert Mask",
|
||||
["icon-venetian-mask", "invert-mask-checkbox"],
|
||||
|
@ -1700,6 +1703,7 @@ const dreamTool = () =>
|
|||
// Keep Masked Content Checkbox
|
||||
state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/dream-keepunmasked",
|
||||
"keepUnmasked",
|
||||
"Keep Unmasked",
|
||||
"icon-pin",
|
||||
|
@ -1723,6 +1727,7 @@ const dreamTool = () =>
|
|||
// Keep Masked Content Blur Slider
|
||||
state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-keepunmaskedblur",
|
||||
"keepUnmaskedBlur",
|
||||
"Keep Unmasked Blur",
|
||||
{
|
||||
|
@ -1742,6 +1747,7 @@ const dreamTool = () =>
|
|||
// outpaint fill type select list
|
||||
state.ctxmenu.outpaintTypeSelect = _toolbar_input.selectlist(
|
||||
state,
|
||||
"openoutpaint/dream-outpainttype",
|
||||
"outpainting_fill",
|
||||
"Outpaint Type",
|
||||
{
|
||||
|
@ -1759,6 +1765,7 @@ const dreamTool = () =>
|
|||
// Preserve Brushed Masks Checkbox
|
||||
state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/dream-preservemasks",
|
||||
"preserveMasks",
|
||||
"Preserve Brushed Masks",
|
||||
"icon-paintbrush"
|
||||
|
@ -1767,6 +1774,7 @@ const dreamTool = () =>
|
|||
// Remove Identical/Background Pixels Checkbox
|
||||
state.ctxmenu.removeBackgroundLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/dream-removebg",
|
||||
"removeBackground",
|
||||
"Remove Identical/BG Pixels",
|
||||
"icon-slice",
|
||||
|
@ -1784,6 +1792,7 @@ const dreamTool = () =>
|
|||
// Overmasking Slider
|
||||
state.ctxmenu.overMaskPxLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-overmaskpx",
|
||||
"overMaskPx",
|
||||
"Overmask px",
|
||||
{
|
||||
|
@ -1797,6 +1806,7 @@ const dreamTool = () =>
|
|||
// Eager generation Slider
|
||||
state.ctxmenu.eagerGenerateCountLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-eagergeneratecount",
|
||||
"eagerGenerateCount",
|
||||
"Generate-ahead count",
|
||||
{
|
||||
|
@ -1809,6 +1819,7 @@ const dreamTool = () =>
|
|||
// bg carve blur
|
||||
state.ctxmenu.carveBlurLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-carveblur",
|
||||
"carve_blur",
|
||||
"BG Remove Blur",
|
||||
{
|
||||
|
@ -1822,6 +1833,7 @@ const dreamTool = () =>
|
|||
// bg carve threshold
|
||||
state.ctxmenu.carveThresholdLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/dream-carvethreshold",
|
||||
"carve_threshold",
|
||||
"BG Remove Threshold",
|
||||
{
|
||||
|
@ -2246,6 +2258,7 @@ const img2imgTool = () =>
|
|||
// Cursor Size Slider
|
||||
const cursorSizeSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-cursorsize",
|
||||
"cursorSize",
|
||||
"Cursor Size",
|
||||
{
|
||||
|
@ -2275,6 +2288,7 @@ const img2imgTool = () =>
|
|||
// Snap To Grid Checkbox
|
||||
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-snaptogrid",
|
||||
"snapToGrid",
|
||||
"Snap To Grid",
|
||||
"icon-grid"
|
||||
|
@ -2283,6 +2297,7 @@ const img2imgTool = () =>
|
|||
// Invert Mask Checkbox
|
||||
state.ctxmenu.invertMaskLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-invertmask",
|
||||
"invertMask",
|
||||
"Invert Mask",
|
||||
["icon-venetian-mask", "invert-mask-checkbox"],
|
||||
|
@ -2294,6 +2309,7 @@ const img2imgTool = () =>
|
|||
// Keep Masked Content Checkbox
|
||||
state.ctxmenu.keepUnmaskedLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-keepunmasked",
|
||||
"keepUnmasked",
|
||||
"Keep Unmasked",
|
||||
"icon-pin",
|
||||
|
@ -2317,6 +2333,7 @@ const img2imgTool = () =>
|
|||
// Keep Masked Content Blur Slider
|
||||
state.ctxmenu.keepUnmaskedBlurSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-unmaskedblur",
|
||||
"keepUnmaskedBlur",
|
||||
"Keep Unmasked Blur",
|
||||
{
|
||||
|
@ -2336,6 +2353,7 @@ const img2imgTool = () =>
|
|||
// Preserve Brushed Masks Checkbox
|
||||
state.ctxmenu.preserveMasksLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-preservemasks",
|
||||
"preserveMasks",
|
||||
"Preserve Brushed Masks",
|
||||
"icon-paintbrush"
|
||||
|
@ -2344,6 +2362,7 @@ const img2imgTool = () =>
|
|||
// Inpaint Full Resolution Checkbox
|
||||
state.ctxmenu.fullResolutionLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-fullresolution",
|
||||
"fullResolution",
|
||||
"Inpaint Full Resolution",
|
||||
"icon-expand"
|
||||
|
@ -2352,6 +2371,7 @@ const img2imgTool = () =>
|
|||
// Denoising Strength Slider
|
||||
state.ctxmenu.denoisingStrengthSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-denoisingstrength",
|
||||
"denoisingStrength",
|
||||
"Denoising Strength",
|
||||
{
|
||||
|
@ -2365,6 +2385,7 @@ const img2imgTool = () =>
|
|||
// Border Mask Gradient Checkbox
|
||||
state.ctxmenu.borderMaskGradientCheckbox = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-gradient",
|
||||
"gradient",
|
||||
"Border Mask Gradient",
|
||||
"icon-box-select"
|
||||
|
@ -2373,6 +2394,7 @@ const img2imgTool = () =>
|
|||
// Remove Identical/Background Pixels Checkbox
|
||||
state.ctxmenu.removeBackgroundLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/img2img-removebg",
|
||||
"removeBackground",
|
||||
"Remove Identical/BG Pixels",
|
||||
"icon-slice",
|
||||
|
@ -2390,6 +2412,7 @@ const img2imgTool = () =>
|
|||
// Border Mask Size Slider
|
||||
state.ctxmenu.borderMaskSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-keepbordersize",
|
||||
"keepBorderSize",
|
||||
"Keep Border Size",
|
||||
{
|
||||
|
@ -2403,6 +2426,7 @@ const img2imgTool = () =>
|
|||
// inpaint fill type select list
|
||||
state.ctxmenu.inpaintTypeSelect = _toolbar_input.selectlist(
|
||||
state,
|
||||
"openoutpaint/img2img-inpaintingtype",
|
||||
"inpainting_fill",
|
||||
"Inpaint Type",
|
||||
{
|
||||
|
@ -2420,6 +2444,7 @@ const img2imgTool = () =>
|
|||
// Eager generation Slider
|
||||
state.ctxmenu.eagerGenerateCountLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-eagergeneratecount",
|
||||
"eagerGenerateCount",
|
||||
"Generate-ahead count",
|
||||
{
|
||||
|
@ -2433,6 +2458,7 @@ const img2imgTool = () =>
|
|||
// img cfg scale slider for instruct-pix2pix
|
||||
state.ctxmenu.instructPix2PixImgCfgLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-ip2pcfg",
|
||||
"image_cfg_scale",
|
||||
"iP2P Image CFG Scale",
|
||||
{
|
||||
|
@ -2449,6 +2475,7 @@ const img2imgTool = () =>
|
|||
// bg carve blur
|
||||
state.ctxmenu.carveBlurLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-carveblur",
|
||||
"carve_blur",
|
||||
"BG Remove Blur",
|
||||
{
|
||||
|
@ -2463,6 +2490,7 @@ const img2imgTool = () =>
|
|||
// bg carve threshold
|
||||
state.ctxmenu.carveThresholdLabel = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/img2img-carvethreshold",
|
||||
"carve_threshold",
|
||||
"BG Remove Threshold",
|
||||
{
|
||||
|
|
|
@ -80,6 +80,7 @@ const interrogateTool = () =>
|
|||
// Cursor Size Slider
|
||||
const cursorSizeSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/interrogate-cursorsize",
|
||||
"cursorSize",
|
||||
"Cursor Size",
|
||||
{
|
||||
|
@ -96,6 +97,7 @@ const interrogateTool = () =>
|
|||
// Snap to Grid Checkbox
|
||||
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/interrogate-snaptogrid",
|
||||
"snapToGrid",
|
||||
"Snap To Grid",
|
||||
"icon-grid"
|
||||
|
|
|
@ -186,6 +186,7 @@ const maskBrushTool = () =>
|
|||
// Brush size slider
|
||||
const brushSizeSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/maskbrush-brushsize",
|
||||
"brushSize",
|
||||
"Brush Size",
|
||||
{
|
||||
|
@ -206,6 +207,7 @@ const maskBrushTool = () =>
|
|||
// Brush opacity slider
|
||||
const brushOpacitySlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/maskbrush-brushopacity",
|
||||
"brushOpacity",
|
||||
"Brush Opacity",
|
||||
{
|
||||
|
@ -220,6 +222,7 @@ const maskBrushTool = () =>
|
|||
// Brush blur slider
|
||||
const brushBlurSlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/maskbrush-brushblur",
|
||||
"brushBlur",
|
||||
"Brush Blur",
|
||||
{
|
||||
|
|
|
@ -652,6 +652,7 @@ const selectTransformTool = () =>
|
|||
// Snap To Grid Checkbox
|
||||
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/select-snaptogrid",
|
||||
"snapToGrid",
|
||||
"Snap To Grid",
|
||||
"icon-grid"
|
||||
|
@ -660,6 +661,7 @@ const selectTransformTool = () =>
|
|||
// Keep Aspect Ratio
|
||||
state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/select-keepaspectratio",
|
||||
"keepAspectRatio",
|
||||
"Keep Aspect Ratio",
|
||||
"icon-maximize"
|
||||
|
@ -668,6 +670,7 @@ const selectTransformTool = () =>
|
|||
// Use Clipboard
|
||||
const clipboardCheckbox = _toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/select-useclipboard",
|
||||
"useClipboard",
|
||||
"Use clipboard",
|
||||
"icon-clipboard-list"
|
||||
|
@ -679,6 +682,7 @@ const selectTransformTool = () =>
|
|||
// Selection Peek Opacity
|
||||
state.ctxmenu.selectionPeekOpacitySlider = _toolbar_input.slider(
|
||||
state,
|
||||
"openoutpaint/select-peekopacity",
|
||||
"selectionPeekOpacity",
|
||||
"Peek Opacity",
|
||||
{
|
||||
|
|
|
@ -508,6 +508,7 @@ const stampTool = () =>
|
|||
array.appendChild(
|
||||
_toolbar_input.checkbox(
|
||||
state,
|
||||
"openoutpaint/stamp-snaptogrid",
|
||||
"snapToGrid",
|
||||
"Snap To Grid",
|
||||
"icon-grid"
|
||||
|
@ -539,12 +540,18 @@ const stampTool = () =>
|
|||
state.ctxmenu.buttonArray = array;
|
||||
|
||||
// Scale Slider
|
||||
const scaleSlider = _toolbar_input.slider(state, "scale", "Scale", {
|
||||
const scaleSlider = _toolbar_input.slider(
|
||||
state,
|
||||
null,
|
||||
"scale",
|
||||
"Scale",
|
||||
{
|
||||
min: 0.01,
|
||||
max: 10,
|
||||
step: 0.1,
|
||||
textStep: 0.001,
|
||||
});
|
||||
}
|
||||
);
|
||||
state.ctxmenu.scaleSlider = scaleSlider.slider;
|
||||
state.setScale = scaleSlider.setValue;
|
||||
|
||||
|
|
Loading…
Reference in a new issue