Merge branch 'main' into testing

# Conflicts:
#	index.html

css/ui/generic.css

@@ -449,3 +449,8 @@ select > option:checked::after {
 	-webkit-mask-image: url("../../res/icons/download.svg");
 	mask-image: url("../../res/icons/download.svg");
 }
+
+.list .actions > .upscale-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/scaling.svg");
+	mask-image: url("../../res/icons/scaling.svg");
+}

index.html

@@ -10,7 +10,7 @@
 		<link href="css/index.css?v=cf6b502" rel="stylesheet" />
 		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=ed024fe" rel="stylesheet" />
 
 		<link href="css/ui/notifications.css?v=7b152de" rel="stylesheet" />
 		<link href="css/ui/workspace.css?v=2a9fdf7" rel="stylesheet" />
@@ -294,8 +294,11 @@
 					<label>Choose upscaler</label>
 					<div id="upscaler-ac-select"></div>
 					<div id="upscaleX"></div>
-					<button onclick="upscaleAndDownload()">
+					<button onclick="upscaleAndDownload(true,false)">
-						Upscale (might take a sec)
+						Upscale (and download)
+					</button>
+					<button onclick="upscaleAndDownload(false,true)">
+						Upscale (to resource)
 					</button>
 					<br />
 
@@ -334,8 +337,7 @@
 					<br />
 					<span id="version">
 						<a href="https://github.com/zero01101/openOutpaint" target="_blank">
-							<s>Alpha release v0.0.16.6</s>
+							v20240127.001
-							v2023xxxx.001 //TODO update
 						</a>
 						<br />
 						<a
@@ -558,7 +560,7 @@
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=425e27d" type="text/javascript"></script>
+		<script src="js/index.js?v=70af18f" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=4f29db4"
@@ -572,7 +574,7 @@
 			src="js/ui/tool/generic.js?v=3e678e0"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=aa8c906" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=be5099a" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=e9bd0eb"
 			type="text/javascript"></script>
@@ -580,9 +582,9 @@
 			src="js/ui/tool/colorbrush.js?v=84ff9fa"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=dfacef5"
+			src="js/ui/tool/select.js?v=76df58e"
 			type="text/javascript"></script>
-		<script src="js/ui/tool/stamp.js?v=4494df6" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=fdca5bc" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/interrogate.js?v=dd45b4a"
 			type="text/javascript"></script>

js/index.js

@@ -1186,7 +1186,11 @@ async function getUpscalers() {
 		return {name: u, value: u};
 	});
 
-	upscalerAutoComplete.value = upscalers[0];
+	upscalerAutoComplete.value =
+		localStorage.getItem("openoutpaint/upscaler") === null
+			? upscalers[0]
+			: localStorage.getItem("openoutpaint/upscaler");
+
 	hrFixUpscalerAutoComplete.value =
 		localStorage.getItem("openoutpaint/hr_upscaler") === null
 			? "None"
@@ -1430,7 +1434,11 @@ async function getSamplers() {
 	}
 }
 
-async function upscaleAndDownload() {
+async function upscaleAndDownload(
+	download = false,
+	add_resource = false,
+	aCanvas = null
+) {
 	// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount
 
 	// get cropped canvas, send it to upscaler, download result
@@ -1438,18 +1446,30 @@ async function upscaleAndDownload() {
 		? localStorage.getItem("openoutpaint/upscale_x")
 		: 2;
 	var upscaler = upscalerAutoComplete.value;
-	var croppedCanvas = cropCanvas(
+	var croppedCanvas = null;
-		uil.getVisible({
+	var imgdata = null;
-			x: 0,
+	localStorage.setItem("openoutpaint/upscaler", upscaler);
-			y: 0,
+
-			w: imageCollection.size.w,
+	if (aCanvas == null) {
-			h: imageCollection.size.h,
+		console.log("Upscaling main canvas.");
-		})
+		croppedCanvas = cropCanvas(
-	);
+			uil.getVisible({
-	if (croppedCanvas != null) {
+				x: 0,
+				y: 0,
+				w: imageCollection.size.w,
+				h: imageCollection.size.h,
+			})
+		);
+		imgdata = croppedCanvas.canvas.toDataURL("image/png");
+	} else {
+		console.log("Upscaling resource canvas.");
+		imgdata = aCanvas.toDataURL("image/png");
+	}
+
+	if (imgdata != null) {
 		var url =
 			document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
-		var imgdata = croppedCanvas.canvas.toDataURL("image/png");
+
 		var data = {
 			"resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
 			upscaling_resize: upscale_factor,
@@ -1481,7 +1501,17 @@ async function upscaleAndDownload() {
 					upscale_factor +
 					".png";
 				link.href = "data:image/png;base64," + data["image"];
-				link.click();
+
+				if (add_resource == true) {
+					console.log("Add upscaled to resource");
+					const img = new Image();
+					img.src = link.href;
+					tools.stamp.state.addResource(guid() + " (upscaled)", img);
+				}
+				if (download == true) {
+					console.log("Download upscaled");
+					link.click();
+				}
 			});
 	}
 }

js/ui/tool/dream.js

@@ -62,9 +62,12 @@ const _monitorProgress = (bb, oncheck = null) => {
 		}
 
 		const timeSpent = performance.now() - init;
-		setTimeout(() => {
+		setTimeout(
-			if (running) _checkProgress();
+			() => {
-		}, Math.max(0, minDelay - timeSpent));
+				if (running) _checkProgress();
+			},
+			Math.max(0, minDelay - timeSpent)
+		);
 	};
 
 	_checkProgress();
@@ -1838,8 +1841,8 @@ const dreamTool = () =>
 							state.cursorSize > stableDiffusionData.width
 								? "#FBB5"
 								: state.cursorSize < stableDiffusionData.width
-								? "#BFB5"
+									? "#BFB5"
-								: "#FFF5";
+									: "#FFF5";
 
 						state.erasePrevReticle = _tool._reticle_draw(
 							bb,
@@ -1866,8 +1869,8 @@ const dreamTool = () =>
 						state.cursorSize > stableDiffusionData.width
 							? "#FBB5"
 							: state.cursorSize < stableDiffusionData.width
-							? "#BFB5"
+								? "#BFB5"
-							: "#FFF5";
+								: "#FFF5";
 					state.erasePrevReticle = _tool._reticle_draw(
 						getBoundingBox(
 							evn.x,
@@ -2012,12 +2015,12 @@ const dreamTool = () =>
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.remove(
 									"invisible"
 								);
-								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
+								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove(
 									"invisible"
 								);
 							} else {
 								state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
-								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.remove(
+								state.ctxmenu.keepUnmaskedBlurSliderLinebreak.classList.add(
 									"invisible"
 								);
 							}
@@ -2181,6 +2184,20 @@ const dreamTool = () =>
 				menu.appendChild(state.ctxmenu.outpaintTypeSelect);
 				menu.appendChild(state.ctxmenu.overMaskPxLabel);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
+
+				if (localStorage.getItem("openoutpaint/dream-keepunmasked") == "true") {
+					state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible");
+				} else {
+					state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
+				}
+
+				if (localStorage.getItem("openoutpaint/dream-removebg") == "true") {
+					state.ctxmenu.carveBlurSlider.classList.remove("invisible");
+					state.ctxmenu.carveThresholdSlider.classList.remove("invisible");
+				} else {
+					state.ctxmenu.carveBlurSlider.classList.add("invisible");
+					state.ctxmenu.carveThresholdSlider.classList.add("invisible");
+				}
 			},
 			shortcut: "D",
 		}
@@ -2368,8 +2385,8 @@ const img2imgTool = () =>
 							state.cursorSize > stableDiffusionData.width
 								? "#FBB5"
 								: state.cursorSize < stableDiffusionData.width
-								? "#BFB5"
+									? "#BFB5"
-								: "#FFF5";
+									: "#FFF5";
 						state.erasePrevReticle = _tool._reticle_draw(
 							bb,
 							"Img2Img",
@@ -2406,8 +2423,8 @@ const img2imgTool = () =>
 							state.cursorSize > stableDiffusionData.width
 								? "#FBB5"
 								: state.cursorSize < stableDiffusionData.width
-								? "#BFB5"
+									? "#BFB5"
-								: "#FFF5";
+									: "#FFF5";
 						state.erasePrevReticle = _tool._reticle_draw(
 							bb,
 							"Img2Img",
@@ -2845,6 +2862,22 @@ const img2imgTool = () =>
 				menu.appendChild(btnArray2);
 				menu.appendChild(state.ctxmenu.borderMaskSlider);
 				menu.appendChild(state.ctxmenu.eagerGenerateCountLabel);
+
+				if (
+					localStorage.getItem("openoutpaint/img2img-keepunmasked") == "true"
+				) {
+					state.ctxmenu.keepUnmaskedBlurSlider.classList.remove("invisible");
+				} else {
+					state.ctxmenu.keepUnmaskedBlurSlider.classList.add("invisible");
+				}
+
+				if (localStorage.getItem("openoutpaint/img2img-removebg") == "true") {
+					state.ctxmenu.carveBlurSlider.classList.remove("invisible");
+					state.ctxmenu.carveThresholdSlider.classList.remove("invisible");
+				} else {
+					state.ctxmenu.carveBlurSlider.classList.add("invisible");
+					state.ctxmenu.carveThresholdSlider.classList.add("invisible");
+				}
 			},
 			shortcut: "I",
 		}

js/ui/tool/select.js

@@ -420,7 +420,7 @@ const selectTransformTool = () =>
 						const lscursor = m.transformPoint({x: sx, y: sy});
 
 						const xs = lscursor.x / scaling.handle.x;
-						const xy = lscursor.y / scaling.handle.y;
+						const ys = lscursor.y / scaling.handle.y;
 
 						let xscale = 1;
 						let yscale = 1;
@@ -429,7 +429,7 @@ const selectTransformTool = () =>
 							xscale = xs;
 							yscale = ys;
 						} else {
-							xscale = yscale = Math.max(xs, xy);
+							xscale = yscale = Math.max(xs, ys);
 						}
 
 						state.selected.scale = {x: xscale, y: yscale};

js/ui/tool/stamp.js

@@ -284,6 +284,32 @@ const stampTool = () =>
 							saveButton.appendChild(document.createElement("div"));
 							saveButton.classList.add("download-btn");
 
+							const upscaleButton = document.createElement("button");
+							upscaleButton.addEventListener(
+								"click",
+								(evn) => {
+									evn.stopPropagation();
+									const canvas = document.createElement("canvas");
+									canvas.width = resource.image.width;
+									canvas.height = resource.image.height;
+									canvas.getContext("2d").drawImage(resource.image, 0, 0);
+									console.log("[Stamp]", canvas);
+									upscaleAndDownload(false, true, canvas);
+
+									/*
+									downloadCanvas({
+										canvas,
+										filename: `openOutpaint - resource '${resource.name}'.png`,
+								
+									});
+									*/
+								},
+								{passive: false}
+							);
+							upscaleButton.title = "Upscale Resource";
+							upscaleButton.appendChild(document.createElement("div"));
+							upscaleButton.classList.add("upscale-btn");
+
 							const trashButton = document.createElement("button");
 							trashButton.addEventListener(
 								"click",
@@ -300,6 +326,7 @@ const stampTool = () =>
 
 							actionArray.appendChild(saveButton);
 							actionArray.appendChild(trashButton);
+							actionArray.appendChild(upscaleButton);
 							resourceWrapper.appendChild(actionArray);
 							state.ctxmenu.resourceList.appendChild(resourceWrapper);
 							resource.dom = {wrapper: resourceWrapper};

pages/configuration.html

@@ -10,7 +10,7 @@
 		<link href="../css/index.css?v=cf6b502" rel="stylesheet" />
 		<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=30837f8" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=ed024fe" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
@@ -258,7 +258,8 @@
 					? true
 					: localStorage.getItem(
 							"openoutpaint/settings.update-prompt-on-more-button"
-					  ) === "true";
+						) === "true";
+			updatePromptOnMoreButton.checked = _enable_update_prompt_on_more_button;
 
 			let _enable_jump_to_1st_new_on_more_button =
 				localStorage.getItem(
@@ -267,7 +268,8 @@
 					? true
 					: localStorage.getItem(
 							"openoutpaint/settings.jump-to-1st-new-on-more-button"
-					  ) === "true";
+						) === "true";
+			jumpTo1stNewOnMoreButton.checked = _enable_jump_to_1st_new_on_more_button;
 
 			writeToLocalStorage();