Merge pull request #75 from zero01101/testing

Some general fixes

js/index.js

@@ -264,6 +264,7 @@ async function testHostConnection() {
 				setConnectionStatus("online");
 				// Load data as soon as connection is first stablished
 				if (firstTimeOnline) {
+					getConfig();
 					getStyles();
 					getSamplers();
 					getUpscalers();
@@ -688,6 +689,65 @@ function changeModel() {
 		});
 }
 
+async function getConfig() {
+	var url = document.getElementById("host").value + "/sdapi/v1/options";
+
+	let message =
+		"The following options for the AUTOMATIC1111's webui are not recommended to use with this software:";
+
+	try {
+		const response = await fetch(url);
+
+		const data = await response.json();
+
+		let wrong = false;
+
+		// Check if img2img color correction is disabled and inpainting mask weight is set to one
+		// TODO: API Seems bugged for retrieving inpainting mask weight - returning 0 for all values different than 1.0
+		if (data.img2img_color_correction) {
+			message += "\n - Image to Image Color Correction: false recommended";
+			wrong = true;
+		}
+
+		if (data.inpainting_mask_weight < 1.0) {
+			message += `\n - Inpainting Conditioning Mask Strength: 1.0 recommended`;
+			wrong = true;
+		}
+
+		message += "\n\nShould these values be changed to the recommended ones?";
+
+		if (!wrong) {
+			console.info("[index] WebUI Settings set as recommended.");
+			return;
+		}
+
+		console.info(
+			"[index] WebUI Settings not set as recommended. Prompting for changing settings automatically."
+		);
+
+		if (!confirm(message)) return;
+
+		try {
+			await fetch(url, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					img2img_color_correction: false,
+					inpainting_mask_weight: 1.0,
+				}),
+			});
+		} catch (e) {
+			console.warn("[index] Failed to fetch WebUI Configuration");
+			console.warn(e);
+		}
+	} catch (e) {
+		console.warn("[index] Failed to fetch WebUI Configuration");
+		console.warn(e);
+	}
+}
+
 async function getStyles() {
 	/** @type {HTMLSelectElement} */
 	var styleSelect = document.getElementById("styleSelect");

js/initalize/layers.populate.js

@@ -59,8 +59,14 @@ mouse.registerContext(
 	"world",
 	(evn, ctx) => {
 		// Fix because in chrome layerX and layerY simply doesnt work
-		/** @type {HTMLDivElement} */
+		ctx.coords.prev.x = ctx.coords.pos.x;
-		const target = evn.target;
+		ctx.coords.prev.y = ctx.coords.pos.y;
+
+		if (evn.layerX !== evn.clientX || evn.layerY !== evn.clientY) {
+			ctx.coords.pos.x = evn.layerX;
+			ctx.coords.pos.y = evn.layerY;
+			return;
+		}
 
 		// Get element bounding rect
 		const bb = imageCollection.element.getBoundingClientRect();
@@ -78,10 +84,8 @@ mouse.registerContext(
 		const layerY = ((y - bb.top) / bb.height) * h;
 
 		//
-		ctx.coords.prev.x = ctx.coords.pos.x;
+		ctx.coords.pos.x = Math.round(layerX);
-		ctx.coords.prev.y = ctx.coords.pos.y;
+		ctx.coords.pos.y = Math.round(layerY);
-		ctx.coords.pos.x = layerX;
-		ctx.coords.pos.y = layerY;
 	},
 	{target: imageCollection.inputElement}
 );

js/initalize/ui.populate.js

@@ -1,6 +1,28 @@
-document.querySelectorAll(".floating-window").forEach((w) => {
+document.querySelectorAll(".floating-window").forEach(
+	/**
+	 * Runs for each floating window
+	 *
+	 * @param {HTMLDivElement} w
+	 */
+	(w) => {
 		makeDraggable(w);
-});
+		w.addEventListener(
+			"wheel",
+			(e) => {
+				e.stopPropagation();
+			},
+			{passive: false}
+		);
+
+		w.addEventListener(
+			"click",
+			(e) => {
+				e.stopPropagation();
+			},
+			{passive: false}
+		);
+	}
+);
 
 var coll = document.getElementsByClassName("collapsible");
 for (var i = 0; i < coll.length; i++) {

js/lib/ui.js

@@ -168,14 +168,17 @@ function createSlider(name, wrapper, options = {}) {
 
 	mouse.listen.window.btn.left.ondrag.on((evn) => {
 		if (evn.initialTarget === overEl) {
-			phantomRange.value = Math.max(
+			const newv = Math.max(
 				options.min,
 				Math.min(
 					options.max,
-					(evn.evn.layerX / wrapper.offsetWidth) * (options.max - options.min) +
+					((evn.evn.clientX - evn.initialTarget.getBoundingClientRect().left) /
+						wrapper.offsetWidth) *
+						(options.max - options.min) +
 						options.min
 				)
 			);
+			phantomRange.value = newv;
 			setValue(parseFloat(phantomRange.value));
 		}
 	});

js/lib/util.js

@@ -180,14 +180,15 @@ function getBoundingBox(cx, cy, w, h, gridSnap = null, offset = 0) {
 		offs.x = snap(cx, offset, gridSnap);
 		offs.y = snap(cy, offset, gridSnap);
 	}
-	box.x = offs.x + cx;
+
-	box.y = offs.y + cy;
+	box.x = Math.round(offs.x + cx);
+	box.y = Math.round(offs.y + cy);
 
 	return {
 		x: Math.floor(box.x - w / 2),
 		y: Math.floor(box.y - h / 2),
-		w,
+		w: Math.round(w),
-		h,
+		h: Math.round(h),
 	};
 }
 

js/ui/tool/colorbrush.js

@@ -37,7 +37,7 @@ const _color_brush_erase_callback = (evn, state, ctx) => {
 
 const colorBrushTool = () =>
 	toolbar.registerTool(
-		"res/icons/brush.svg",
+		"/res/icons/brush.svg",
 		"Color Brush",
 		(state, opt) => {
 			// Draw new cursor immediately

js/ui/tool/dream.js

@@ -806,9 +806,13 @@ const _reticle_draw = (evn, state, tool, style = {}) => {
 
 const _dream_onwheel = (evn, state) => {
 	if (!evn.evn.ctrlKey) {
-		const v =
+		// Seems mouse wheel scroll is very different between different browsers.
-			state.cursorSize -
+		// Will use scroll as just an event to go to the next cursor snap position instead.
-			Math.floor(state.config.cursorSizeScrollSpeed * evn.delta);
+		//
+		// TODO: Someone that has a smooth scrolling mouse should verify if this works with them.
+
+		const v = state.cursorSize - 128 * (evn.delta / Math.abs(evn.delta));
+
 		state.cursorSize = state.setCursorSize(v + snap(v, 0, 128));
 		state.mousemovecb(evn);
 	}
@@ -819,7 +823,7 @@ const _dream_onwheel = (evn, state) => {
  */
 const dreamTool = () =>
 	toolbar.registerTool(
-		"res/icons/image-plus.svg",
+		"/res/icons/image-plus.svg",
 		"Dream",
 		(state, opt) => {
 			// Draw new cursor immediately
@@ -940,7 +944,7 @@ const dreamTool = () =>
 						{
 							min: 0,
 							max: 64,
-							step: 5,
+							step: 4,
 							textStep: 1,
 						}
 					).slider;
@@ -959,7 +963,7 @@ const dreamTool = () =>
 
 const img2imgTool = () =>
 	toolbar.registerTool(
-		"res/icons/image.svg",
+		"/res/icons/image.svg",
 		"Img2Img",
 		(state, opt) => {
 			// Draw new cursor immediately

js/ui/tool/interrogate.js

@@ -1,6 +1,6 @@
 const interrogateTool = () =>
 	toolbar.registerTool(
-		"res/icons/microscope.svg",
+		"/res/icons/microscope.svg",
 		"Interrogate",
 		(state, opt) => {
 			// Draw new cursor immediately
@@ -48,8 +48,16 @@ const interrogateTool = () =>
 						reticleStyle: "#AFAF",
 					});
 				};
+
+				state.redraw = () => {
+					state.mousemovecb({
+						x: mouse.coords.world.pos.x,
+						y: mouse.coords.world.pos.y,
+					});
+				};
+
 				state.wheelcb = (evn) => {
-					_interrogate_onwheel(evn, state);
+					_dream_onwheel(evn, state);
 				};
 
 				state.interrogatecb = (evn) => {
@@ -91,20 +99,6 @@ const interrogateTool = () =>
 		}
 	);
 
-/**
- * Generic wheel handler
- */
-
-const _interrogate_onwheel = (evn, state) => {
-	if (!evn.evn.ctrlKey) {
-		const v =
-			state.cursorSize -
-			Math.floor(state.config.cursorSizeScrollSpeed * evn.delta);
-		state.cursorSize = state.setCursorSize(v + snap(v, 0, 128));
-		state.mousemovecb(evn);
-	}
-};
-
 const interrogate_callback = async (evn, state) => {
 	const bb = getBoundingBox(
 		evn.x,

js/ui/tool/maskbrush.js

@@ -61,7 +61,7 @@ const _mask_brush_erase_callback = (evn, state, opacity = 100) => {
 
 const maskBrushTool = () =>
 	toolbar.registerTool(
-		"res/icons/paintbrush.svg",
+		"/res/icons/paintbrush.svg",
 		"Mask Brush",
 		(state, opt) => {
 			// Draw new cursor immediately

js/ui/tool/select.js

@@ -1,6 +1,6 @@
 const selectTransformTool = () =>
 	toolbar.registerTool(
-		"res/icons/box-select.svg",
+		"/res/icons/box-select.svg",
 		"Select Image",
 		(state, opt) => {
 			// Draw new cursor immediately
@@ -101,6 +101,10 @@ const selectTransformTool = () =>
 
 				// Selection bounding box object. Has some witchery to deal with handles.
 				const selectionBB = (x1, y1, x2, y2) => {
+					x1 = Math.round(x1);
+					y1 = Math.round(y1);
+					x2 = Math.round(x2);
+					y2 = Math.round(y2);
 					return {
 						original: {
 							x: Math.min(x1, x2),
@@ -213,8 +217,8 @@ const selectTransformTool = () =>
 
 					// Update position
 					if (state.moving) {
-						state.selected.x = x - state.moving.offset.x;
+						state.selected.x = Math.round(x - state.moving.offset.x);
-						state.selected.y = y - state.moving.offset.y;
+						state.selected.y = Math.round(y - state.moving.offset.y);
 						state.selected.updateOriginal();
 					}
 
@@ -350,11 +354,13 @@ const selectTransformTool = () =>
 							"Image Transform Erase",
 							state.original
 						);
-						commands.runCommand(
+						commands.runCommand("drawImage", "Image Transform Draw", {
-							"drawImage",
+							image: state.selected.image,
-							"Image Transform Draw",
+							x: Math.round(state.selected.x),
-							state.selected
+							y: Math.round(state.selected.y),
-						);
+							w: Math.round(state.selected.w),
+							h: Math.round(state.selected.h),
+						});
 						state.original = null;
 						state.selected = null;
 

js/ui/tool/stamp.js

@@ -1,6 +1,6 @@
 const stampTool = () =>
 	toolbar.registerTool(
-		"res/icons/file-up.svg",
+		"/res/icons/file-up.svg",
 		"Stamp Image",
 		(state, opt) => {
 			state.loaded = true;