fix interrogate for new layer system

interrogate now uses visible data, and add green marching ants to show
something is happening

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

js/index.js

@@ -345,7 +345,13 @@ function clearPaintedMask() {
 	maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height);
 }
 
-function march(bb) {
+function march(bb, options = {}) {
+	defaultOpt(options, {
+		style: "#FFFF",
+		width: "2px",
+		filter: null,
+	});
+
 	const expanded = {...bb};
 	expanded.x--;
 	expanded.y--;
@@ -360,7 +366,7 @@ function march(bb) {
 	let offset = 0;
 
 	const interval = setInterval(() => {
-		drawMarchingAnts(layer.ctx, bb, offset++);
+		drawMarchingAnts(layer.ctx, bb, offset++, options);
 		offset %= 12;
 	}, 20);
 
@@ -370,13 +376,18 @@ function march(bb) {
 	};
 }
 
-function drawMarchingAnts(ctx, bb, offset) {
+function drawMarchingAnts(ctx, bb, offset, options) {
+	ctx.save();
+
 	ctx.clearRect(0, 0, bb.w + 2, bb.h + 2);
-	ctx.strokeStyle = "#FFFFFFFF"; //"#55000077";
+	ctx.strokeStyle = options.style;
-	ctx.strokeWidth = "2px";
+	ctx.strokeWidth = options.width;
+	ctx.filter = options.filter;
 	ctx.setLineDash([4, 2]);
 	ctx.lineDashOffset = -offset;
 	ctx.strokeRect(1, 1, bb.w, bb.h);
+
+	ctx.restore();
 }
 
 function changeSampler() {

js/ui/floating/layers.js

@@ -31,6 +31,13 @@ const uil = {
 		return this.layer && this.active.layer.ctx;
 	},
 
+	get w() {
+		return imageCollection.size.w;
+	},
+	get h() {
+		return imageCollection.size.h;
+	},
+
 	/**
 	 * Synchronizes layer array to DOM
 	 */

js/ui/tool/interrogate.js

@@ -22,6 +22,8 @@ const interrogateTool = () =>
 
 			// Hide Mask
 			setMask("none");
+
+			uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
 		},
 		{
 			init: (state) => {
@@ -98,7 +100,7 @@ const _interrogate_onwheel = (evn, state) => {
 	}
 };
 
-const interrogate_callback = (evn, state) => {
+const interrogate_callback = async (evn, state) => {
 	const bb = getBoundingBox(
 		evn.x,
 		evn.y,
@@ -107,7 +109,9 @@ const interrogate_callback = (evn, state) => {
 		state.snapToGrid && basePixelCount
 	);
 	// Do nothing if no image exists
-	if (isCanvasBlank(bb.x, bb.y, bb.w, bb.h, imgCanvas)) return;
+	const sectionCanvas = uil.getVisible({x: bb.x, y: bb.y, w: bb.w, h: bb.h});
+
+	if (isCanvasBlank(0, 0, bb.w, bb.h, sectionCanvas)) return;
 
 	// Build request to the API
 	const request = {};
@@ -122,16 +126,25 @@ const interrogate_callback = (evn, state) => {
 
 	// Get init image
 	auxCtx.fillRect(0, 0, bb.w, bb.h);
-	auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
+	auxCtx.drawImage(sectionCanvas, 0, 0);
 	request.image = auxCanvas.toDataURL();
 
 	request.model = "clip"; //TODO maybe make a selectable option once A1111 supports the new openclip thingy?
-	const interrogation = _interrogate(request).then(function (result) {
+	const stopMarching = march(bb, {style: "#AFAF"});
-		if (confirm(result + "\n\nDo you want to replace your prompt with this?")) {
+	try {
-			document.getElementById("prompt").value = result;
+		const result = await _interrogate(request);
+		const text = prompt(
+			result +
+				"\n\nDo you want to replace your prompt with this? You can change it down below:",
+			result
+		);
+		if (text) {
+			document.getElementById("prompt").value = text;
 			tools.dream.enable();
 		}
-	});
+	} finally {
+		stopMarching();
+	}
 };
 
 /**