diff --git a/css/index.css b/css/index.css index acfb655..64b7cc8 100644 --- a/css/index.css +++ b/css/index.css @@ -20,30 +20,6 @@ body { overflow: clip; } -.container { - position: relative; -} - -.backgroundCanvas { - background-color: #ccc; -} - -.mainHSplit { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - grid-column-gap: 5px; - grid-row-gap: 5px; -} - -.uiWrapper { - display: grid; - grid-template-columns: 1fr 15fr; - grid-template-rows: 1fr; - grid-column-gap: 5px; - grid-row-gap: 5px; -} - .collapsible { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); @@ -88,28 +64,6 @@ body { cursor: auto; } -.canvasHolder { - position: relative; - width: 2560px; - height: 1440px; -} - -.mainCanvases { - position: absolute; - top: 0px; - left: 0px; - width: 2560px; - height: 1440px; -} - -.masks { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 0px; - grid-row-gap: 0px; -} - /* Mask colors for mask inversion */ /* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */ .mask-canvas { @@ -135,13 +89,6 @@ body { brightness(103%) contrast(108%); } -.strokeText { - -webkit-text-stroke: 1px #000; - font-size: 150%; - font-weight: 600; - color: #fff; -} - .wideSelect { width: 100%; text-overflow: ellipsis; diff --git a/js/index.js b/js/index.js index da9d063..afdb7ef 100644 --- a/js/index.js +++ b/js/index.js @@ -114,7 +114,6 @@ function startup() { changeSampler(); changeMaskBlur(); changeSeed(); - changeOverMaskPx(); changeHiResFix(); } @@ -340,106 +339,10 @@ function newImage(evt) { }); } -function prevImg(evt) { - if (imageIndex == 0) { - imageIndex = totalImagesReturned; - } - changeImg(false); -} - -function nextImg(evt) { - if (imageIndex == totalImagesReturned - 1) { - imageIndex = -1; - } - changeImg(true); -} - -function changeImg(forward) { - const img = new Image(); - tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height); - img.onload = function () { - tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding? - }; - var tmpIndex = document.getElementById("currentImgIndex"); - if (forward) { - imageIndex++; - } else { - imageIndex--; - } - tmpIndex.innerText = imageIndex + 1; - // load the image data after defining the closure - img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results -} - -function removeChoiceButtons(evt) { - const element = document.getElementById("veryTempDiv"); - element.remove(); - tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height); -} - -function backupAndClearMask(x, y, w, h) { - var clearArea = maskPaintCtx.createImageData(w, h); - backupMaskChunk = maskPaintCtx.getImageData(x, y, w, h); - backupMaskX = x; - backupMaskY = y; - var clearD = clearArea.data; - for (i = 0; i < clearD.length; i += 4) { - clearD[i] = 0; - clearD[i + 1] = 0; - clearD[i + 2] = 0; - clearD[i + 3] = 0; - } - maskPaintCtx.putImageData(clearArea, x, y); -} - -function restoreBackupMask() { - // reapply mask if exists - if (backupMaskChunk != null && backupMaskX != null && backupMaskY != null) { - // backup mask data exists - var iData = new ImageData( - backupMaskChunk.data, - backupMaskChunk.height, - backupMaskChunk.width - ); - maskPaintCtx.putImageData(iData, backupMaskX, backupMaskY); - } -} - -function clearBackupMask() { - // clear backupmask - backupMaskChunk = null; - backupMaskX = null; - backupMaskY = null; -} - -function clearImgMask() { - imgCtx.clearRect(0, 0, imgCanvas.width, imgCanvas.height); -} - function clearPaintedMask() { maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height); } -function placeImage() { - const img = new Image(); - img.onload = function () { - commands.runCommand("drawImage", "Image Dream", { - x: tmpImgXYWH.x, - y: tmpImgXYWH.y, - image: img, - }); - tmpImgXYWH = {}; - returnedImages = null; - }; - // load the image data after defining the closure - img.src = "data:image/png;base64," + returnedImages[imageIndex]; -} - -function sleep(ms) { - // what was this even for, anyway? - return new Promise((resolve) => setTimeout(resolve, ms)); -} - function march(bb) { const expanded = {...bb}; expanded.x--; @@ -563,10 +466,6 @@ makeSlider( makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 5, 30, 1); -function changeSnapMode() { - snapToGrid = document.getElementById("cbxSnap").checked; -} - function changeMaskBlur() { stableDiffusionData.mask_blur = parseInt( document.getElementById("maskBlur").value @@ -579,11 +478,6 @@ function changeSeed() { localStorage.setItem("seed", stableDiffusionData.seed); } -function changeOverMaskPx() { - // overMaskPx = document.getElementById("overMaskPx").value; - // localStorage.setItem("overmask_px", overMaskPx); -} - function changeHiResFix() { stableDiffusionData.enable_hr = Boolean( document.getElementById("cbxHRFix").checked @@ -936,15 +830,6 @@ function loadSettings() { ? false : localStorage.getItem("enable_hr") ); - var _enable_erase = Boolean( - localStorage.getItem("enable_erase") == (null || "false") - ? false - : localStorage.getItem("enable_erase") - ); - var _overmask_px = - localStorage.getItem("overmask_px") == null - ? 0 - : localStorage.getItem("overmask_px"); // set the values into the UI document.getElementById("prompt").value = String(_prompt); @@ -955,7 +840,6 @@ function loadSettings() { document.getElementById("maskBlur").value = Number(_mask_blur); document.getElementById("seed").value = Number(_seed); document.getElementById("cbxHRFix").checked = Boolean(_enable_hr); - // document.getElementById("overMaskPx").value = Number(_overmask_px); } imageCollection.element.addEventListener( diff --git a/js/lib/layers.js b/js/lib/layers.js index cede377..908ae27 100644 --- a/js/lib/layers.js +++ b/js/lib/layers.js @@ -77,8 +77,6 @@ const layers = { size, resolution: options.resolution, - active: null, - /** * Registers a new layer * @@ -87,6 +85,7 @@ const layers = { * @param {string} options.name * @param {?BoundingBox} options.bb * @param {{w: number, h: number}} options.resolution + * @param {?string} options.group * @param {object} options.after * @returns */ @@ -101,9 +100,12 @@ const layers = { // Bounding box for layer bb: {x: 0, y: 0, w: collection.size.w, h: collection.size.h}, - // Bounding box for layer + // Resolution for layer resolution: null, + // Group for the layer ("group/subgroup/subsubgroup") + group: null, + // If set, will insert the layer after the given one after: null, }); @@ -168,6 +170,24 @@ const layers = { canvas, ctx, + /** + * Moves this layer to another level (after given layer) + * + * @param {Layer} layer Will move layer to after this one + */ + moveAfter(layer) { + layer.canvas.after(this.canvas); + }, + + /** + * Moves this layer to another level (before given layer) + * + * @param {Layer} layer Will move layer to before this one + */ + moveBefore(layer) { + layer.canvas.before(this.canvas); + }, + /** * Moves this layer to another location * @@ -204,14 +224,8 @@ const layers = { unhide() { this.canvas.style.display = "block"; }, - - // Activates this layer - activate() { - collection.active = this; - }, }, - _layerlogpath, - ["active"] + _layerlogpath ); // Add to indexers @@ -260,8 +274,7 @@ const layers = { else console.debug(`[layers] Anonymous layer '${lobj.id}' deleted`); }, }, - _logpath, - ["active"] + _logpath ); layers._collections.push(collection); @@ -271,11 +284,6 @@ const layers = { `[layers] Collection '${options.name}' at ${_logpath} registered` ); - // We must create a layer to select - collection - .registerLayer(options.initLayer.key, options.initLayer.options) - .activate(); - return collection; }, }; diff --git a/js/ui/tool/colorbrush.js b/js/ui/tool/colorbrush.js index 27a7366..a14d6e5 100644 --- a/js/ui/tool/colorbrush.js +++ b/js/ui/tool/colorbrush.js @@ -44,7 +44,7 @@ const colorBrushTool = () => resolution: {w: 7, h: 7}, after: maskPaintLayer, }); - state.glassLayer.canvas.style.display = "none"; + state.glassLayer.hide(); state.glassLayer.canvas.style.imageRendering = "pixelated"; state.glassLayer.canvas.style.borderRadius = "50%"; @@ -55,10 +55,11 @@ const colorBrushTool = () => after: imgLayer, }); state.eraseLayer.canvas.style.display = "none"; + state.eraseLayer.hide(); state.eraseBackup = imageCollection.registerLayer(null, { after: imgLayer, }); - state.eraseBackup.canvas.style.display = "none"; + state.eraseBackup.hide(); // Start Listeners mouse.listen.world.onmousemove.on(state.movecb); @@ -131,13 +132,13 @@ const colorBrushTool = () => state.enableDropper = () => { state.eyedropper = true; state.movecb(lastMouseMoveEvn); - state.glassLayer.canvas.style.display = "block"; + state.glassLayer.unhide(); }; state.disableDropper = () => { state.eyedropper = false; state.movecb(lastMouseMoveEvn); - state.glassLayer.canvas.style.display = "none"; + state.glassLayer.hide(); }; let lastMouseMoveEvn = {x: 0, y: 0}; @@ -218,6 +219,13 @@ const colorBrushTool = () => state.setColor( "#" + ((dat[0] << 16) | (dat[1] << 8) | dat[2]).toString(16) ); + state.disableDropper(); + } + }; + + state.rightclickcb = (evn) => { + if (evn.target === imageCollection.inputElement && state.eyedropper) { + state.disableDropper(); } }; @@ -255,6 +263,8 @@ const colorBrushTool = () => }; state.erasestartcb = (evn) => { + if (state.eyedropper) return; + state.erasing = true; if (state.affectMask) _mask_brush_erase_callback(evn, state); // Make a backup of the current image to apply erase later @@ -270,6 +280,7 @@ const colorBrushTool = () => }; state.erasecb = (evn) => { + if (state.eyedropper || !state.erasing) return; if (state.affectMask) _mask_brush_erase_callback(evn, state); imgCtx.globalCompositeOperation = "destination-out"; _color_brush_erase_callback(evn, state, imgCtx); @@ -278,6 +289,9 @@ const colorBrushTool = () => }; state.eraseendcb = (evn) => { + if (!state.erasing) return; + state.erasing = false; + const canvas = state.eraseLayer.canvas; const ctx = state.eraseLayer.ctx; @@ -364,7 +378,8 @@ const colorBrushTool = () => "eyedropper" ); brushColorEyeDropper.addEventListener("click", () => { - state.enableDropper(); + if (state.eyedropper) state.disableDropper(); + else state.enableDropper(); }); brushColorPickerWrapper.appendChild(brushColorPicker);