pixel things seem to have been fixed

At least temporarily, still want to check what causes smaller canvases
to break pixel perfection

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

js/infinity.js

@@ -1,112 +0,0 @@
-const infinity = {
-	_init() {
-		console.info("[infinity] Loading infinity lib");
-		infinity._canvas_update_size();
-
-		// Add event handlers
-		window.onresize = infinity._canvas_update_size;
-
-		// Add draw loop
-		infinity._draw();
-	},
-	_canvas_update_size() {
-		// TEMPORARY
-		// TODO: Remove this for dynamic canvas sizing
-		Array.from(document.getElementsByClassName("content-canvas")).forEach(
-			(canvas) => {
-				canvas.width = 2560;
-				canvas.height = 1440;
-			}
-		);
-
-		// Update canvas size
-		Array.from(document.getElementsByClassName("display-canvas")).forEach(
-			(canvas) => {
-				canvas.width = window.innerWidth;
-				canvas.height = window.innerHeight;
-			}
-		);
-	},
-
-	// Content Canvas Information
-
-	// Viewport information
-	viewports: [],
-
-	registerViewport: (el, options = {}) => {
-		defaultOpt(options, {
-			x: 0,
-			y: 0,
-			zoom: 1,
-			input: true,
-		});
-
-		// Registers a canvas as a viewport
-		const viewport = {
-			id: guid(),
-			canvas: el,
-			ctx: el.getContext("2d"),
-			x: options.x,
-			y: options.y,
-			zoom: options.zoom,
-		};
-
-		viewport.getBoundingBox = () => {
-			const w = viewport.canvas.width * viewport.zoom;
-			const h = viewport.canvas.height * viewport.zoom;
-
-			return {
-				x: viewport.x - w / 2,
-				y: viewport.y - h / 2,
-				w,
-				h,
-			};
-		};
-
-		infinity.viewports.push(viewport);
-
-		// Register mouse input
-		const offset = {x: 0, y: 0};
-		const oviewport = {x: 0, y: 0};
-		mouse.listen.world.middle.onpaintstart = (evn) => {
-			offset.x = evn.x;
-			offset.y = evn.y;
-			oviewport.x = viewport.x;
-			oviewport.y = viewport.y;
-		};
-		mouse.listen.world.middle.onpaint = (evn) => {
-			viewport.x = oviewport.x - (evn.x - offset.x);
-			viewport.y = oviewport.y - (evn.y - offset.y);
-		};
-
-		return viewport;
-	},
-
-	// Draw loop
-	_draw: () => {
-		infinity.viewports.forEach((viewport) => {
-			try {
-				const bb = viewport.getBoundingBox();
-
-				viewport.ctx.drawImage(
-					bgCanvas,
-					bb.x,
-					bb.y,
-					bb.w,
-					bb.h,
-					0,
-					0,
-					bb.w,
-					bb.h
-				);
-			} catch (e) {}
-		});
-
-		requestAnimationFrame(infinity._draw);
-	},
-};
-
-//infinity._init();
-Array.from(document.getElementsByClassName("display-canvas")).forEach(
-	(canvas) => infinity.registerViewport(canvas)
-);

js/initalize/layers.populate.js

@@ -1,7 +1,7 @@
 // Layering
 const imageCollection = layers.registerCollection(
 	"image",
-	{w: 2560, h: 1472},
+	{w: 1536, h: 1536},
 	{
 		name: "Image Layers",
 	}
@@ -132,6 +132,7 @@ viewport.transform(imageCollection.element);
 
 mouse.listen.window.onwheel.on((evn) => {
 	if (evn.evn.ctrlKey) {
+		evn.evn.preventDefault();
 		const pcx = viewport.cx;
 		const pcy = viewport.cy;
 		if (evn.delta < 0) {

js/ui/tool/dream.js

@@ -117,8 +117,7 @@ const _generate = async (endpoint, request, bb) => {
 
 	// Layer for the images
 	const layer = imageCollection.registerLayer(null, {
-		bb,
-		after: imgLayer,
+		after: maskPaintLayer,
 	});
 
 	const redraw = () => {
@@ -126,7 +125,7 @@ const _generate = async (endpoint, request, bb) => {
 		image.src = "data:image/png;base64," + images[at];
 		image.addEventListener("load", () => {
 			layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
-			if (images[at]) layer.ctx.drawImage(image, 0, 0);
+			if (images[at]) layer.ctx.drawImage(image, bb.x, bb.y);
 		});
 	};
 
@@ -211,12 +210,17 @@ const _generate = async (endpoint, request, bb) => {
 	acceptbtn.textContent = "Y";
 	acceptbtn.title = "Apply Current";
 	acceptbtn.addEventListener("click", async () => {
-		commands.runCommand("drawImage", "Image Dream", {
-			x: bb.x,
-			y: bb.y,
-			image: layer.canvas,
+		const img = new Image();
+		// load the image data after defining the closure
+		img.src = "data:image/png;base64," + images[at];
+		img.addEventListener("load", () => {
+			commands.runCommand("drawImage", "Image Dream", {
+				x: bb.x,
+				y: bb.y,
+				image: img,
+			});
+			clean();
 		});
-		clean();
 	});
 	imageSelectMenu.appendChild(acceptbtn);