sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add some mask actions for mask brush

Browse source 
Add clear to clear all mask, add preview to show mask in full opacity

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-11-26 23:00:41 -03:00
parent fe2ebec569
commit bd98b8dbb1
2 changed files with 91 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
css/index.css
View file

@ -30,52 +30,6 @@ body {
grid-row-gap: 5px; grid-row-gap: 5px;
} }
.button-array {
display: flex;
justify-content: stretch;
}
.button-array > .button.tool {
flex: 1;
border-radius: 0;
}
.button-array > .button.tool:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.button-array > .button.tool:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.button.tool {
background-color: rgb(0, 0, 50);
color: rgb(255, 255, 255);
border-radius: 5px;
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button.tool:disabled {
background-color: #666 !important;
cursor: default;
}
.button.tool:hover {
background-color: rgb(30, 30, 80);
}
.button.tool:active {
background-color: rgb(60, 60, 130);
}
.collapsible { .collapsible {
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -157,6 +111,10 @@ body {
filter: invert(100%); filter: invert(100%);
} }
.maskPaintCanvas.display.opaque {
opacity: 100%;
}
.maskPaintCanvas.display.clear { .maskPaintCanvas.display.clear {
filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg) filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg)
brightness(106%) contrast(100%); brightness(106%) contrast(100%);
@ -260,3 +218,51 @@ div.prompt-wrapper > textarea {
div.prompt-wrapper > textarea:focus { div.prompt-wrapper > textarea:focus {
width: 700px; width: 700px;
} }
/* Tool buttons */
.button-array {
display: flex;
justify-content: stretch;
}
.button-array > .button.tool {
flex: 1;
border-radius: 0;
}
.button-array > .button.tool:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.button-array > .button.tool:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.button-array > .button.tool {
background-color: rgb(0, 0, 50);
color: rgb(255, 255, 255);
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button-array > .button.tool:disabled {
background-color: #666 !important;
cursor: default;
}
.button-array > .button.tool:hover {
background-color: rgb(30, 30, 80);
}
.button-array > .button.tool:active,
.button.tool.active {
background-color: rgb(60, 60, 130);
}

39
js/ui/tool/maskbrush.js
View file

@ -93,6 +93,8 @@ const maskBrushTool = () =>
// Hide Mask // Hide Mask
setMask("none"); setMask("none");
state.ctxmenu.previewMaskButton.remove("active");
maskPaintCanvas.classList.remove("opaque");
}, },
{ {
init: (state) => { init: (state) => {
@ -146,9 +148,46 @@ const maskBrushTool = () =>
); );
state.ctxmenu.brushSizeSlider = brushSizeSlider.slider; state.ctxmenu.brushSizeSlider = brushSizeSlider.slider;
state.setBrushSize = brushSizeSlider.setValue; state.setBrushSize = brushSizeSlider.setValue;
// Some mask-related action buttons
const actionArray = document.createElement("div");
actionArray.classList.add("button-array");
const clearMaskButton = document.createElement("button");
clearMaskButton.classList.add("button", "tool");
clearMaskButton.textContent = "Clear";
clearMaskButton.title = "Clears Painted Mask";
clearMaskButton.onclick = () => {
maskPaintCtx.clearRect(
0,
0,
maskPaintCanvas.width,
maskPaintCanvas.height
);
};
const previewMaskButton = document.createElement("button");
previewMaskButton.classList.add("button", "tool");
previewMaskButton.textContent = "Preview";
previewMaskButton.title = "Displays Mask with Full Opacity";
previewMaskButton.onclick = () => {
if (previewMaskButton.classList.contains("active")) {
maskPaintCanvas.classList.remove("opaque");
} else {
maskPaintCanvas.classList.add("opaque");
}
previewMaskButton.classList.toggle("active");
};
actionArray.appendChild(clearMaskButton);
actionArray.appendChild(previewMaskButton);
state.ctxmenu.previewMaskButton = previewMaskButton;
state.ctxmenu.actionArray = actionArray;
} }
menu.appendChild(state.ctxmenu.brushSizeSlider); menu.appendChild(state.ctxmenu.brushSizeSlider);
menu.appendChild(state.ctxmenu.actionArray);
}, },
shortcut: "M", shortcut: "M",
} }