Merge branch 'main' into clear_brush_mask_option

index.html

@@ -318,6 +318,7 @@
 			type="text/javascript"></script>
 
 		<!-- Content -->
+		<script src="js/global.js" type="text/javascript"></script>
 		<script src="js/prompt.js" type="text/javascript"></script>
 		<script src="js/index.js" type="text/javascript"></script>
 

js/global.js

@@ -0,0 +1,22 @@
+/**
+ * Stores global variables without polluting the global namespace.
+ */
+
+const global = {
+	// Connection
+	_connection: "offline",
+	set connection(v) {
+		this._connection = v;
+
+		toolbar &&
+			toolbar.currentTool &&
+			toolbar.currentTool.state.redraw &&
+			toolbar.currentTool.state.redraw();
+	},
+	get connection() {
+		return this._connection;
+	},
+
+	// If there is a selected input
+	hasActiveInput: false,
+};

js/index.js

@@ -188,6 +188,7 @@ function startup() {
 }
 
 function setFixedHost(h, changePromptMessage) {
+	console.info(`[index] Fixed host to '${h}'`);
 	const hostInput = document.getElementById("host");
 	host = h;
 	hostInput.value = h;
@@ -340,7 +341,11 @@ async function testHostConnection() {
 			},
 		};
 
-		statuses[status] && statuses[status]();
+		statuses[status] &&
+			(() => {
+				statuses[status]();
+				global.connection = status;
+			})();
 	};
 
 	setConnectionStatus("before");
@@ -411,7 +416,7 @@ async function testHostConnection() {
 		return status;
 	};
 
-	await checkConnection(true);
+	await checkConnection(!urlParams.has("noprompt"));
 
 	// On click, attempt to refresh
 	connectionIndicator.onclick = async () => {
@@ -457,6 +462,8 @@ function clearPaintedMask() {
 
 function march(bb, options = {}) {
 	defaultOpt(options, {
+		title: null,
+		titleStyle: "#FFF5",
 		style: "#FFFF",
 		width: "2px",
 		filter: null,
@@ -471,6 +478,7 @@ function march(bb, options = {}) {
 	// Get temporary layer to draw marching ants
 	const layer = imageCollection.registerLayer(null, {
 		bb: expanded,
+		category: "display",
 	});
 	layer.canvas.style.imageRendering = "pixelated";
 	let offset = 0;
@@ -490,6 +498,16 @@ function drawMarchingAnts(ctx, bb, offset, options) {
 	ctx.save();
 
 	ctx.clearRect(0, 0, bb.w + 2, bb.h + 2);
+
+	// Draw Tool Name
+	if (bb.h > 40 && options.title) {
+		ctx.font = `bold 20px Open Sans`;
+
+		ctx.textAlign = "left";
+		ctx.fillStyle = options.titleStyle;
+		ctx.fillText(options.title, 10, 30, bb.w);
+	}
+
 	ctx.strokeStyle = options.style;
 	ctx.strokeWidth = options.width;
 	ctx.filter = options.filter;
@@ -920,6 +938,12 @@ async function getSamplers() {
 	try {
 		const response = await fetch(url);
 		const data = await response.json();
+
+		samplerAutoComplete.onchange.on(({value}) => {
+			stableDiffusionData.sampler_index = value;
+			localStorage.setItem("openoutpaint/sampler", value);
+		});
+
 		samplerAutoComplete.options = data.map((sampler) => ({
 			name: sampler.name,
 			value: sampler.name,
@@ -932,11 +956,7 @@ async function getSamplers() {
 			samplerAutoComplete.value = data[0].name;
 			localStorage.setItem("openoutpaint/sampler", samplerAutoComplete.value);
 		}
-
-		samplerAutoComplete.onchange.on(({value}) => {
-			stableDiffusionData.sampler_index = value;
-			localStorage.setItem("openoutpaint/sampler", value);
-		});
+		stableDiffusionData.sampler_index = samplerAutoComplete.value;
 	} catch (e) {
 		console.warn("[index] Failed to fetch samplers");
 		console.warn(e);

js/initalize/layers.populate.js

@@ -20,20 +20,25 @@ const imageCollection = layers.registerCollection(
 
 const bgLayer = imageCollection.registerLayer("bg", {
 	name: "Background",
+	category: "background",
 });
 const imgLayer = imageCollection.registerLayer("image", {
 	name: "Image",
+	category: "image",
 	ctxOptions: {desynchronized: true},
 });
 const maskPaintLayer = imageCollection.registerLayer("mask", {
 	name: "Mask Paint",
+	category: "mask",
 	ctxOptions: {desynchronized: true},
 });
 const ovLayer = imageCollection.registerLayer("overlay", {
 	name: "Overlay",
+	category: "display",
 });
 const debugLayer = imageCollection.registerLayer("debug", {
 	name: "Debug Layer",
+	category: "display",
 });
 
 const imgCanvas = imgLayer.canvas; // where dreams go
@@ -237,9 +242,28 @@ mouse.registerContext(
 		ctx.coords.pos.x = Math.round(layerCoords.x);
 		ctx.coords.pos.y = Math.round(layerCoords.y);
 	},
-	{target: imageCollection.inputElement}
+	{
+		target: imageCollection.inputElement,
+		validate: (evn) => {
+			if (!global.hasActiveInput || evn.type === "mousemove") return true;
+			return false;
+		},
+	}
 );
 
+// Redraw on active input state change
+(() => {
+	mouse.listen.window.onany.on((evn) => {
+		const activeInput = DOM.hasActiveInput();
+		if (global.hasActiveInput !== activeInput) {
+			global.hasActiveInput = activeInput;
+			toolbar.currentTool &&
+				toolbar.currentTool.state.redraw &&
+				toolbar.currentTool.state.redraw();
+		}
+	});
+})();
+
 mouse.listen.window.onwheel.on((evn) => {
 	if (evn.evn.ctrlKey) {
 		evn.evn.preventDefault();

js/lib/input.d.js

@@ -42,6 +42,7 @@
  * An object for mouse event listeners
  *
  * @typedef MouseListenerContext
+ * @property {Observer} onany A listener for any mouse events
  * @property {Observer} onmousemove A mouse move handler
  * @property {Observer} onwheel A mouse wheel handler
  * @property {Record<string, MouseListenerBtnContext>} btn Button handlers
@@ -67,6 +68,7 @@
  * @property {ContextMoveTransformer} onmove The coordinate transform callback
  * @property {(evn) => void} onany A function to be run on any event
  * @property {?HTMLElement} target The target
+ * @property {(evn) => boolean} validate A function to be check if we will process an event
  * @property {MouseCoordContext} coords Coordinates object
  * @property {MouseListenerContext} listen Listeners object
  */

js/lib/input.js

@@ -63,16 +63,16 @@ const mouse = {
 	 * @param {ContextMoveTransformer} onmove The function to perform coordinate transform
 	 * @param {object} options Extra options
 	 * @param {HTMLElement} [options.target=null] Target filtering
+	 * @param {(evn: any) => boolean} [options.validate] Checks if we will process this event or not
 	 * @param {Record<number, string>} [options.buttons={0: "left", 1: "middle", 2: "right"}] Custom button mapping
-	 * @param {(evn) => void} [options.genericcb=null] Function that will be run for all events (useful for preventDefault)
 	 * @returns {MouseContext}
 	 */
 	registerContext: (name, onmove, options = {}) => {
 		// Options
 		defaultOpt(options, {
 			target: null,
+			validate: () => true,
 			buttons: {0: "left", 1: "middle", 2: "right"},
-			genericcb: null,
 		});
 
 		// Context information
@@ -81,8 +81,8 @@ const mouse = {
 			id: guid(),
 			name,
 			onmove,
-			onany: options.genericcb,
 			target: options.target,
+			validate: options.validate,
 			buttons: options.buttons,
 		};
 
@@ -102,19 +102,76 @@ const mouse = {
 		};
 
 		// Listeners
+		const onany = new Observer();
+
 		mouse.listen[name] = {
+			onany,
 			onwheel: new Observer(),
 			onmousemove: new Observer(),
 			btn: {},
 		};
 
+		// Always process onany events first
+		mouse.listen[name].onwheel.on(
+			async (evn, state) => await onany.emit(evn, state),
+			Infinity,
+			true
+		);
+		mouse.listen[name].onmousemove.on(
+			async (evn, state) => await onany.emit(evn, state),
+			Infinity,
+			true
+		);
+
 		// Button specific items
 		Object.keys(options.buttons).forEach((index) => {
 			const button = options.buttons[index];
 			mouse.coords[name].dragging[button] = null;
 			mouse.listen[name].btn[button] = _mouse_observers(
 				`mouse.listen[${name}].btn[${button}]`
 			);
+
+			// Always process onany events first
+			mouse.listen[name].btn[button].onclick.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].ondclick.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].ondragstart.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].ondrag.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].ondragend.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].onpaintstart.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].onpaint.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
+			mouse.listen[name].btn[button].onpaintend.on(
+				async (evn, state) => await onany.emit(evn, state),
+				Infinity,
+				true
+			);
 		});
 
 		// Add to context
@@ -183,11 +240,13 @@ window.addEventListener(
 
 		mouse.buttons[evn.button] = time;
 
-		mouse._contexts.forEach(({target, name, buttons, onany}) => {
+		mouse._contexts.forEach(({target, name, buttons, validate}) => {
 			const key = buttons[evn.button];
-			if ((!target || target === evn.target) && key) {
-				onany && onany();
-
+			if (
+				(!target || target === evn.target) &&
+				key &&
+				(!validate || validate(evn))
+			) {
 				mouse.coords[name].dragging[key] = {};
 				mouse.coords[name].dragging[key].target = evn.target;
 				Object.assign(mouse.coords[name].dragging[key], mouse.coords[name].pos);
@@ -214,14 +273,14 @@ window.addEventListener(
 	(evn) => {
 		const time = performance.now();
 
-		mouse._contexts.forEach(({target, name, buttons, onany}) => {
+		mouse._contexts.forEach(({target, name, buttons, validate}) => {
 			const key = buttons[evn.button];
 			if (
 				(!target || target === evn.target) &&
 				key &&
-				mouse.coords[name].dragging[key]
+				mouse.coords[name].dragging[key] &&
+				(!validate || validate(evn))
 			) {
-				onany && onany();
 				const start = {
 					x: mouse.coords[name].dragging[key].x,
 					y: mouse.coords[name].dragging[key].y,
@@ -292,7 +351,10 @@ window.addEventListener(
 			const target = context.target;
 			const name = context.name;
 
-			if (!target || target === evn.target) {
+			if (
+				!target ||
+				(target === evn.target && (!context.validate || context.validate(evn)))
+			) {
 				context.onmove(evn, context);
 
 				mouse.listen[name].onmousemove.emit({
@@ -378,19 +440,21 @@ window.addEventListener(
 window.addEventListener(
 	"wheel",
 	(evn) => {
-		mouse._contexts.forEach(({name}) => {
-			mouse.listen[name].onwheel.emit({
-				target: evn.target,
-				delta: evn.deltaY,
-				deltaX: evn.deltaX,
-				deltaY: evn.deltaY,
-				deltaZ: evn.deltaZ,
-				mode: evn.deltaMode,
-				x: mouse.coords[name].pos.x,
-				y: mouse.coords[name].pos.y,
-				evn,
-				timestamp: performance.now(),
-			});
+		mouse._contexts.forEach(({name, target, validate}) => {
+			if (!target || (target === evn.target && (!validate || validate(evn)))) {
+				mouse.listen[name].onwheel.emit({
+					target: evn.target,
+					delta: evn.deltaY,
+					deltaX: evn.deltaX,
+					deltaY: evn.deltaY,
+					deltaZ: evn.deltaZ,
+					mode: evn.deltaMode,
+					x: mouse.coords[name].pos.x,
+					y: mouse.coords[name].pos.y,
+					evn,
+					timestamp: performance.now(),
+				});
+			}
 		});
 	},
 	{passive: false}