Tweak how backgrounds work to avoid black lines in saved images

CogappLabs · Mar 21, 2024 · 65f7789 · 65f7789
1 parent 499808a
commit 65f7789
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 16 deletions.
diff --git a/public/rooms/room-1.jpeg b/public/rooms/room-1.jpeg
diff --git a/public/rooms/room-1.png b/public/rooms/room-1.png
diff --git a/public/rooms/room-2.jpeg b/public/rooms/room-2.jpeg
diff --git a/public/rooms/room-2.png b/public/rooms/room-2.png
diff --git a/public/rooms/room-3.jpeg b/public/rooms/room-3.jpeg
diff --git a/public/rooms/room-3.png b/public/rooms/room-3.png
diff --git a/public/rooms/room-4.jpeg b/public/rooms/room-4.jpeg
diff --git a/public/rooms/room-4.png b/public/rooms/room-4.png
diff --git a/src/app/components/Canvas.tsx b/src/app/components/Canvas.tsx
@@ -34,8 +34,8 @@ const Canvas = (
   useEffect(() => {
     if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
       setSize({
-        width: divRef.current.offsetWidth,
-        height: divRef.current.offsetHeight,
+        width: Math.min(divRef.current.offsetWidth, CANVAS_VIRTUAL_WIDTH),
+        height: Math.min(divRef.current.offsetHeight, CANVAS_VIRTUAL_HEIGHT),
       });
     }
   }, []);
@@ -45,8 +45,8 @@ const Canvas = (
     const checkSize = () => {
       if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
         setSize({
-          width: divRef.current.offsetWidth,
-          height: divRef.current.offsetHeight,
+          width: Math.min(divRef.current.offsetWidth, CANVAS_VIRTUAL_WIDTH),
+          height: Math.min(divRef.current.offsetHeight, CANVAS_VIRTUAL_HEIGHT),
         });
       }
     };
@@ -82,15 +82,10 @@ const Canvas = (
     };
   }, [selectedId, images, setImages]);
 
-  const scale = Math.min(
-    divRef.current?.offsetWidth ? divRef.current?.offsetWidth / CANVAS_VIRTUAL_WIDTH : CANVAS_VIRTUAL_WIDTH,
-    divRef.current?.offsetHeight ? divRef.current?.offsetWidth / CANVAS_VIRTUAL_HEIGHT : CANVAS_VIRTUAL_HEIGHT,
-  );
-
   return (
     <div
       ref={divRef}
-      className="h-full w-full bg-contain bg-center bg-no-repeat"
+      className="h-full w-full"
       onDragOver={(e) => e.preventDefault()}
       onDrop={(e) => {
         e.preventDefault();
@@ -100,11 +95,10 @@ const Canvas = (
       }}
     >
       <Stage
+        className="flex justify-center"
         ref={forwardedRef}
         width={size.width}
         height={size.height}
-        scaleX={scale}
-        scaleY={scale}
         onMouseDown={checkDeselect}
         onTouchStart={checkDeselect}
       >

diff --git a/src/app/components/backgrounds.tsx b/src/app/components/backgrounds.tsx
@@ -1,8 +1,8 @@
 const backgroundImages = [
-  '/rooms/room-1.png',
-  '/rooms/room-2.png',
-  '/rooms/room-3.png',
-  '/rooms/room-4.png',
+  '/rooms/room-1.jpeg',
+  '/rooms/room-2.jpeg',
+  '/rooms/room-3.jpeg',
+  '/rooms/room-4.jpeg',
 ];
 
 export {