Merge pull request #98 from zero01101/i90

i think this should fix issue 90 - optional resolution/reticle sync

index.html

@@ -99,6 +99,13 @@
 					<br />
 					<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()" />
 					<label for="cbxHRFix">Auto txt2img HRfix</label>
+					<br />
+					<input
+						type="checkbox"
+						id="cbxSyncCursorSize"
+						onchange="changeSyncCursorSize()" />
+					<label for="cbxSyncCursorSize">Sync cursor size</label>
+					<br />
 					<div id="resolution"></div>
 					<div id="steps"></div>
 					<div id="cfgScale"></div>

js/index.js

@@ -101,6 +101,7 @@ function startup() {
 	changeSmoothRendering();
 	changeSeed();
 	changeHiResFix();
+	changeSyncCursorSize();
 }
 
 /**
@@ -448,19 +449,20 @@ const upscalerAutoComplete = createAutoComplete(
 	document.getElementById("upscaler-ac-select")
 );
 
-makeSlider(
+const resSlider = makeSlider(
 	"Resolution",
 	document.getElementById("resolution"),
 	"resolution",
-	64,
+	128,
-	1024,
+	2048,
-	64,
+	128,
 	512,
 	2,
 	(v) => {
 		stableDiffusionData.width = stableDiffusionData.height = v;
 		stableDiffusionData.firstphase_width =
 			stableDiffusionData.firstphase_height = v / 2;
+		informCursorSizeSlider();
 	}
 );
 makeSlider(
@@ -522,6 +524,20 @@ function changeHiResFix() {
 	);
 	localStorage.setItem("enable_hr", stableDiffusionData.enable_hr);
 }
+
+function changeSyncCursorSize() {
+	stableDiffusionData.sync_cursor_size = Boolean(
+		document.getElementById("cbxSyncCursorSize").checked
+	); //is this horribly hacky, putting it in SD data instead of making a gross global var?
+	localStorage.setItem(
+		"sync_cursor_size",
+		stableDiffusionData.sync_cursor_size
+	);
+	if (stableDiffusionData.sync_cursor_size) {
+		resSlider.value = stableDiffusionData.width;
+	}
+}
+
 function changeSmoothRendering() {
 	const layers = document.getElementById("layer-render");
 	if (document.getElementById("cbxSmooth").checked) {
@@ -893,17 +909,27 @@ function loadSettings() {
 			? false
 			: localStorage.getItem("enable_hr")
 	);
+	var _sync_cursor_size = Boolean(
+		localStorage.getItem("sync_cursor_size") == (null || "false")
+			? false
+			: localStorage.getItem("sync_cursor_size")
+	);
 
 	// set the values into the UI
 	document.getElementById("maskBlur").value = Number(_mask_blur);
 	document.getElementById("seed").value = Number(_seed);
 	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
+	document.getElementById("cbxSyncCursorSize").checked =
+		Boolean(_sync_cursor_size);
 }
 
 imageCollection.element.addEventListener(
 	"wheel",
 	(evn) => {
 		evn.preventDefault();
+		if (!evn.ctrlKey) {
+			_resolution_onwheel(evn);
+		}
 	},
 	{passive: false}
 );
@@ -921,3 +947,22 @@ function resetToDefaults() {
 		localStorage.clear();
 	}
 }
+
+function informCursorSizeSlider() {
+	if (stableDiffusionData.sync_cursor_size) {
+		if (toolbar._current_tool) {
+			if (!toolbar._current_tool.state.ignorePrevious) {
+				toolbar._current_tool.state.setCursorSize(stableDiffusionData.width);
+			}
+			toolbar._current_tool.state.ignorePrevious = false;
+		}
+	}
+}
+
+const _resolution_onwheel = (evn) => {
+	if (stableDiffusionData.sync_cursor_size) {
+		toolbar._current_tool.state.ignorePrevious = true; //so hacky
+		resSlider.value =
+			stableDiffusionData.width - (128 * evn.deltaY) / Math.abs(evn.deltaY);
+	}
+};

js/ui/tool/dream.js

@@ -935,6 +935,11 @@ const dreamTool = () =>
 
 			// Display Mask
 			setMask(state.invertMask ? "hold" : "clear");
+
+			// update cursor size if matching is enabled
+			if (stableDiffusionData.sync_cursor_size) {
+				state.setCursorSize(stableDiffusionData.width);
+			}
 		},
 		(state, opt) => {
 			// Clear Listeners
@@ -955,7 +960,6 @@ const dreamTool = () =>
 				};
 
 				state.cursorSize = 512;
-
 				state.snapToGrid = true;
 				state.invertMask = false;
 				state.overMaskPx = 0;
@@ -1003,10 +1007,16 @@ const dreamTool = () =>
 						"cursorSize",
 						"Cursor Size",
 						{
-							min: 0,
+							min: 128,
 							max: 2048,
 							step: 128,
 							textStep: 2,
+							cb: () => {
+								if (stableDiffusionData.sync_cursor_size) {
+									state.ignorePrevious = true;
+									resSlider.value = state.cursorSize;
+								}
+							},
 						}
 					);
 
@@ -1074,6 +1084,11 @@ const img2imgTool = () =>
 
 			// Display Mask
 			setMask(state.invertMask ? "hold" : "clear");
+
+			// update cursor size if matching is enabled
+			if (stableDiffusionData.sync_cursor_size) {
+				state.setCursorSize(stableDiffusionData.width);
+			}
 		},
 		(state, opt) => {
 			// Clear Listeners
@@ -1244,10 +1259,16 @@ const img2imgTool = () =>
 						"cursorSize",
 						"Cursor Size",
 						{
-							min: 0,
+							min: 128,
 							max: 2048,
 							step: 128,
 							textStep: 2,
+							cb: () => {
+								if (stableDiffusionData.sync_cursor_size) {
+									state.ignorePrevious = true;
+									resSlider.value = state.cursorSize;
+								}
+							},
 						}
 					);