fix eyedropper interactions and remove unused code

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

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;

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(

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
-						_layerlogpath,
-						["active"]
 					);
 
 					// Add to indexers
@@ -260,8 +274,7 @@ const layers = {
 					else console.debug(`[layers] Anonymous layer '${lobj.id}' deleted`);
 				},
 			},
-			_logpath,
+			_logpath
-			["active"]
 		);
 
 		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;
 	},
 };

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