From 2553ffdc8c8e088af047ef40e4755fef3c707e4a Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Wed, 13 Aug 2025 12:26:30 -0700
Subject: [PATCH] Display a checkerboard pattern for transparency

---
 .../src/pages/PageEdit/EditPaintSurface.tsx   |  30 ++++++++++++++++++
 frontend/libs/common/src/index.ts             |   1 +
 .../src/lib/assets/images/checkerboard.png    | Bin 0 -> 197 bytes
 .../common/src/lib/assets/images/index.ts     |   3 ++
 frontend/libs/common/src/lib/assets/index.ts  |   1 +
 5 files changed, 35 insertions(+)
 create mode 100644 frontend/libs/common/src/lib/assets/images/checkerboard.png
 create mode 100644 frontend/libs/common/src/lib/assets/images/index.ts
 create mode 100644 frontend/libs/common/src/lib/assets/index.ts

diff --git a/frontend/apps/editor3d/app/src/pages/PageEdit/EditPaintSurface.tsx b/frontend/apps/editor3d/app/src/pages/PageEdit/EditPaintSurface.tsx
index 0a77f5a0b4..59dd030507 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEdit/EditPaintSurface.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEdit/EditPaintSurface.tsx
@@ -20,6 +20,8 @@ import { useGlobalMouseUp } from "../PageDraw/hooks/useGlobalMouseUp";
 import { useRightPanelLayoutManagement } from "../PageDraw/hooks/useRightPanelLayoutManagement";
 import { LineNode } from "../PageDraw/stores/SceneState";
 import { Node } from "../PageDraw/Node";
+import { checkerboard } from "@storyteller/common";
+import { loadImageFromUrl } from "~/Helpers/ImageHelpers";
 
 export type EditPaintSurfaceProps = {
   nodes: Node[];
@@ -58,6 +60,9 @@ export const EditPaintSurface = ({
   const [snapshotImage, setSnapshotImage] = useState<HTMLImageElement | null>(
     null,
   );
+  // TODO: Polish this by using canvas graphics instead of a bitmap
+  // Or at least manually do the pattern fill to avoid image interpolation
+  const [checkerImage, setCheckerImage] = useState<HTMLImageElement | null>(null);
   const rightContainerRef = React.useRef<HTMLDivElement>(null);
   const cursorLayerRef = React.useRef<Konva.Layer>(null);
   const cursorShapeRef = React.useRef<Konva.Circle>(null);
@@ -975,6 +980,11 @@ export const EditPaintSurface = ({
     }
   }, [selectedNodeIds, stageRef, transformerRefs]);
 
+  // Load the checkboard image for transparency background
+  useEffect(() => {
+    loadImageFromUrl(checkerboard).then(setCheckerImage);
+  }, []);
+
   return (
     <SplitPane
       singlePaneMode={singlePaneMode}
@@ -1002,6 +1012,26 @@ export const EditPaintSurface = ({
             onMouseEnter={handleStageMouseEnter}
             onMouseLeave={handleStageMouseLeave}
           >
+            <Layer
+              clipFunc={(ctx) => {
+                ctx.rect(0, 0, store.getAspectRatioDimensions().width, store.getAspectRatioDimensions().height); // leftPanelWidth, leftPanelHeight);
+              }}
+              imageSmoothingEnabled={false} // Disable image smoothing for pixel art
+            >
+              <Rect
+                x={0}
+                y={0}
+                fillPatternImage={checkerImage || undefined}
+                fillPatternRepeat="repeat"
+                fillPatternScaleX={window.devicePixelRatio}
+                fillPatternScaleY={window.devicePixelRatio}
+                width={store.getAspectRatioDimensions().width}
+                height={store.getAspectRatioDimensions().height}
+                listening={false}
+                zIndex={-2}
+                imageSmoothingEnabled={false} // Disable image smoothing for pixel art
+              />
+            </Layer>
             <Layer
               clipFunc={(ctx) => {
                 ctx.rect(0, 0, store.getAspectRatioDimensions().width, store.getAspectRatioDimensions().height); // leftPanelWidth, leftPanelHeight);
diff --git a/frontend/libs/common/src/index.ts b/frontend/libs/common/src/index.ts
index 9840691184..86bf6b115f 100644
--- a/frontend/libs/common/src/index.ts
+++ b/frontend/libs/common/src/index.ts
@@ -1,3 +1,4 @@
+export * from "./lib/assets";
 export * from "./lib/enums";
 export * from "./lib/interfaces";
 export * from "./lib/types";
diff --git a/frontend/libs/common/src/lib/assets/images/checkerboard.png b/frontend/libs/common/src/lib/assets/images/checkerboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..44638977cbc5bbe42c6d54ed6097878cc61f0d7c
GIT binary patch
literal 197
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBew3$+V@L(#+v|pc42C>M9G*Xv*n4q@!AyRR
zogNEa7tCD!F663ww~?_~?MDk{O*FXD*m(8)CA*U+3kS0Wp~Ca*ajiO>uQzG%-UQmh
N;OXk;vd$@?2>?t@G>ZTL

literal 0
HcmV?d00001

diff --git a/frontend/libs/common/src/lib/assets/images/index.ts b/frontend/libs/common/src/lib/assets/images/index.ts
new file mode 100644
index 0000000000..0e0f2c1704
--- /dev/null
+++ b/frontend/libs/common/src/lib/assets/images/index.ts
@@ -0,0 +1,3 @@
+import checkerboard from './checkerboard.png';
+
+export { checkerboard };
diff --git a/frontend/libs/common/src/lib/assets/index.ts b/frontend/libs/common/src/lib/assets/index.ts
new file mode 100644
index 0000000000..b5ee1278a5
--- /dev/null
+++ b/frontend/libs/common/src/lib/assets/index.ts
@@ -0,0 +1 @@
+export * from "./images";