diff --git a/css/index.css b/css/index.css index 679771f..13bc49a 100644 --- a/css/index.css +++ b/css/index.css @@ -30,52 +30,6 @@ body { 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 { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); @@ -157,6 +111,10 @@ body { filter: invert(100%); } +.maskPaintCanvas.display.opaque { + opacity: 100%; +} + .maskPaintCanvas.display.clear { filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg) brightness(106%) contrast(100%); @@ -260,3 +218,51 @@ div.prompt-wrapper > textarea { div.prompt-wrapper > textarea:focus { 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); +} diff --git a/js/ui/tool/maskbrush.js b/js/ui/tool/maskbrush.js index 169f502..90ef9bb 100644 --- a/js/ui/tool/maskbrush.js +++ b/js/ui/tool/maskbrush.js @@ -93,6 +93,8 @@ const maskBrushTool = () => // Hide Mask setMask("none"); + state.ctxmenu.previewMaskButton.remove("active"); + maskPaintCanvas.classList.remove("opaque"); }, { init: (state) => { @@ -146,9 +148,46 @@ const maskBrushTool = () => ); state.ctxmenu.brushSizeSlider = brushSizeSlider.slider; 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.actionArray); }, shortcut: "M", }