Merge pull request #175 from patrickas/InfiniteCanvas

Dreaming outside the box
zero01101 · Jan 19, 2023 · f27c561 · f27c561
2 parents 643f79f + f42e6a2
commit f27c561
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 95 deletions.
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
@@ -65,101 +65,6 @@ uiCanvas.width = uiCanvas.clientWidth;
 uiCanvas.height = uiCanvas.clientHeight;
 const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
 
-/**
- * Here we setup canvas dynamic scaling
- */
-(() => {
-	let expandSize = localStorage.getItem("openoutpaint/expand-size") || 1024;
-	expandSize = parseInt(expandSize, 10);
-
-	const askSize = (e) => {
-		if (e.ctrlKey) return expandSize;
-		const by = prompt("How much do you want to expand by?", expandSize);
-
-		if (!by) return null;
-		else {
-			const len = parseInt(by, 10);
-			localStorage.setItem("openoutpaint/expand-size", len);
-			expandSize = len;
-			return len;
-		}
-	};
-
-	const leftButton = makeElement("button", -64, 0);
-	leftButton.classList.add("expand-button", "left");
-	leftButton.style.width = "64px";
-	leftButton.style.height = `${imageCollection.size.h}px`;
-	leftButton.addEventListener("click", (e) => {
-		let size = null;
-		if ((size = askSize(e))) {
-			imageCollection.expand(size, 0, 0, 0);
-			bgLayer.canvas.style.backgroundPosition = `${-snap(
-				imageCollection.origin.x,
-				0,
-				config.gridSize * 2
-			)}px ${-snap(imageCollection.origin.y, 0, config.gridSize * 2)}px`;
-			const newLeft = -imageCollection.inputOffset.x - imageCollection.origin.x;
-			leftButton.style.left = newLeft - 64 + "px";
-			topButton.style.left = newLeft + "px";
-			bottomButton.style.left = newLeft + "px";
-			topButton.style.width = imageCollection.size.w + "px";
-			bottomButton.style.width = imageCollection.size.w + "px";
-		}
-	});
-
-	const rightButton = makeElement("button", imageCollection.size.w, 0);
-	rightButton.classList.add("expand-button", "right");
-	rightButton.style.width = "64px";
-	rightButton.style.height = `${imageCollection.size.h}px`;
-	rightButton.addEventListener("click", (e) => {
-		let size = null;
-		if ((size = askSize(e))) {
-			imageCollection.expand(0, 0, size, 0);
-			rightButton.style.left =
-				parseInt(rightButton.style.left, 10) + size + "px";
-			topButton.style.width = imageCollection.size.w + "px";
-			bottomButton.style.width = imageCollection.size.w + "px";
-		}
-	});
-
-	const topButton = makeElement("button", 0, -64);
-	topButton.classList.add("expand-button", "top");
-	topButton.style.height = "64px";
-	topButton.style.width = `${imageCollection.size.w}px`;
-	topButton.addEventListener("click", (e) => {
-		let size = null;
-		if ((size = askSize(e))) {
-			imageCollection.expand(0, size, 0, 0);
-			bgLayer.canvas.style.backgroundPosition = `${-snap(
-				imageCollection.origin.x,
-				0,
-				config.gridSize * 2
-			)}px ${-snap(imageCollection.origin.y, 0, config.gridSize * 2)}px`;
-			const newTop = -imageCollection.inputOffset.y - imageCollection.origin.y;
-			topButton.style.top = newTop - 64 + "px";
-			leftButton.style.top = newTop + "px";
-			rightButton.style.top = newTop + "px";
-			leftButton.style.height = imageCollection.size.h + "px";
-			rightButton.style.height = imageCollection.size.h + "px";
-		}
-	});
-
-	const bottomButton = makeElement("button", 0, imageCollection.size.h);
-	bottomButton.classList.add("expand-button", "bottom");
-	bottomButton.style.height = "64px";
-	bottomButton.style.width = `${imageCollection.size.w}px`;
-	bottomButton.addEventListener("click", (e) => {
-		let size = null;
-		if ((size = askSize(e))) {
-			imageCollection.expand(0, 0, 0, size);
-			bottomButton.style.top =
-				parseInt(bottomButton.style.top, 10) + size + "px";
-			leftButton.style.height = imageCollection.size.h + "px";
-			rightButton.style.height = imageCollection.size.h + "px";
-		}
-	});
-})();
-
 debugLayer.hide(); // Hidden by default
 
 // Where CSS and javascript magic happens to make the canvas viewport work

diff --git a/js/lib/layers.js b/js/lib/layers.js
@@ -327,6 +327,32 @@ const layers = {
 					}
 				},
 
+				/**
+				 * Auto-expands the collection and its full layers to make sure it fits the box we pass
+				 *
+				 * @param {?BoundingBox} box
+				 */
+				auto_expand_to_fit(box) {
+					var expand_by = [0,0,0,0];
+					if ( box.x < this.bb.x ) { 
+						expand_by[0] = this.bb.x - box.x; 
+					}
+					if ( box.y < this.bb.y ) { 
+						expand_by[1] = this.bb.y - box.y; 
+					}
+					if ( box.x + box.w > this.bb.x + this.bb.w ) { 
+						expand_by[2] = (box.x + box.w) - (this.bb.x + this.bb.w); 
+					}
+					if ( box.y + box.h > this.bb.y + this.bb.h ) { 
+						expand_by[3] = (box.y + box.h) - (this.bb.y + this.bb.h); 
+					}
+
+					if ( JSON.stringify(expand_by) !== JSON.stringify([0,0,0,0]) ) {
+						this.expand(...expand_by);
+						drawBackground();
+					}
+				},
+
 				size,
 				resolution: options.resolution,
 

diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
@@ -1515,6 +1515,7 @@ const dreamTool = () =>
 					};
 
 					if (global.connection === "online") {
+						imageCollection.auto_expand_to_fit(bb);
 						dream_generate_callback(bb, resolution, state);
 					} else {
 						const stop = march(bb, {