Actual infinity

css/layers.css

@@ -28,12 +28,18 @@
 	transform-origin: 0px 0px;
 }
 
-.layer-render-target .collection > .collection-input-overlay {
+.layer-render-target .collection > .collection-div {
 	position: absolute;
 
 	top: 0;
 	left: 0;
+}
+
+.layer-render-target .collection > .collection-underlay {
+	z-index: -10;
+}
 
+.layer-render-target .collection > .collection-overlay {
 	z-index: 10;
 }
 

css/ui/layers.css

@@ -144,7 +144,7 @@
 	padding: 0;
 	border: 0;
 
-	background-color: transparent;
+	background-color: #4667;
 
 	cursor: pointer;
 
@@ -154,6 +154,10 @@
 	border: 2px solid #293d3d30;
 }
 
+.expand-button:hover {
+	background-color: #293d3d77;
+}
+
 .expand-button::after {
 	content: "";
 
@@ -200,7 +204,3 @@
 	border-bottom-right-radius: 10px;
 	border-bottom-left-radius: 10px;
 }
-
-.expand-button:hover {
-	background-color: #293d3d77;
-}

index.html

@@ -8,12 +8,12 @@
 		<link href="css/icons.css?v=9ae0466" rel="stylesheet" />
 
 		<link href="css/index.css?v=882f400" rel="stylesheet" />
-		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
+		<link href="css/layers.css?v=858829a" rel="stylesheet" />
 
 		<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
-		<link href="css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
+		<link href="css/ui/layers.css?v=b6b859c" rel="stylesheet" />
 		<link href="css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
 
 		<!-- Tool Specific CSS -->
@@ -340,34 +340,34 @@
 				<div class="ui separator"></div>
 				<iframe
 					id="page-overlay"
-					src="pages/configuration.html?v=7fca00b"></iframe>
+					src="pages/configuration.html?v=e4d660f"></iframe>
 			</div>
 		</div>
 
 		<!-- Basics -->
 		<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
 
 		<!-- Base Libs -->
-		<script src="js/lib/util.js?v=e82dd04" type="text/javascript"></script>
+		<script src="js/lib/util.js?v=6bb5f69" type="text/javascript"></script>
 		<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
 		<script src="js/lib/input.js?v=aa14afc" type="text/javascript"></script>
-		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
+		<script src="js/lib/layers.js?v=a0bd5c3" type="text/javascript"></script>
 		<script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script>
 
 		<script src="js/lib/toolbar.js?v=306d637" type="text/javascript"></script>
 		<script src="js/lib/ui.js?v=fe9b702" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=8bc8815"
+			src="js/initalize/layers.populate.js?v=511fee2"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
 		<script src="js/config.js?v=e0345e0" type="text/javascript"></script>
-		<script src="js/theme.js?v=435cc1b" type="text/javascript"></script>
+		<script src="js/theme.js?v=d0d179a" type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
-		<script src="js/index.js?v=6944460" type="text/javascript"></script>
+		<script src="js/index.js?v=2ac8ebc" type="text/javascript"></script>
 
 		<script
 			src="js/ui/floating/history.js?v=fc92d14"
@@ -381,7 +381,7 @@
 			src="js/ui/tool/generic.js?v=3e678e0"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=eb98dc9" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=2f71d2b" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>

js/index.js

@@ -821,6 +821,19 @@ function isCanvasBlank(x, y, w, h, canvas) {
 		.data.some((channel) => channel !== 0);
 }
 
+function recalculateBg() {
+	bgLayer.canvas.style.backgroundPosition = `${-snap(
+		imageCollection.origin.x,
+		0,
+		config.gridSize * 2
+	)}px ${-snap(imageCollection.origin.y, 0, config.gridSize * 2)}px`;
+	imageCollection.bgElement.style.backgroundPosition = `${-snap(
+		-imageCollection.divOffset.x,
+		0,
+		config.gridSize * 2
+	)}px ${-snap(-imageCollection.divOffset.y, 0, config.gridSize * 2)}px`;
+}
+
 function drawBackground() {
 	{
 		// Existing Canvas BG
@@ -842,10 +855,33 @@ function drawBackground() {
 
 		canvas.toBlob((blob) => {
 			const url = window.URL.createObjectURL(blob);
-			console.debug(url);
 			bgLayer.canvas.style.backgroundImage = `url(${url})`;
 		});
 	}
+
+	{
+		// External Canvas BG
+		const canvas = document.createElement("canvas");
+		canvas.width = config.gridSize * 2;
+		canvas.height = config.gridSize * 2;
+
+		const ctx = canvas.getContext("2d");
+		ctx.fillStyle = theme.grid.extDark;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = theme.grid.extLight;
+		ctx.fillRect(0, 0, config.gridSize, config.gridSize);
+		ctx.fillRect(
+			config.gridSize,
+			config.gridSize,
+			config.gridSize,
+			config.gridSize
+		);
+
+		canvas.toBlob((blob) => {
+			const url = window.URL.createObjectURL(blob);
+			imageCollection.bgElement.style.backgroundImage = `url(${url})`;
+		});
+	}
 	return;
 
 	// Checkerboard

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

js/lib/layers.d.js

@@ -35,7 +35,7 @@
  * @property {string} name The display name of the collection
  * @property {HTMLDivElement} element The base element of the collection
  * @property {HTMLDivElement} inputElement The element used for input handling for the collection
- * @property {Point} inputOffset The offset for calculating layer coordinates from input element input information
+ * @property {Point} divOffset The offset for calculating layer coordinates from input element input information
  * @property {Point} origin The location of the origin ((0, 0) point) of the collection (If canvas goes from -64, -32 to 128, 512, it's (64, 32))
  * @property {BoundingBox} bb The current bounding box of the collection, in layer coordinates
  * @property {{[key: string]: Layer}} layers An object for quick access to named layers of the collection