Fixes wonky canvas layer ordering & compositing

frontend/dist/index.html

@@ -10,6 +10,7 @@
 <<<<<<< refs/remotes/upstream/development
 <<<<<<< refs/remotes/upstream/development
 <<<<<<< refs/remotes/upstream/development
+<<<<<<< refs/remotes/upstream/development
 <<<<<<< refs/remotes/upstream/development
   <script type="module" crossorigin src="./assets/index.a8ba2a6c.js"></script>
   <link rel="stylesheet" href="./assets/index.40a72c80.css">
@@ -28,6 +29,9 @@
 =======
   <script type="module" crossorigin src="./assets/index.7f5e02f1.js"></script>
 >>>>>>> Outpainting tab loads to empty canvas instead of upload
+=======
+  <script type="module" crossorigin src="./assets/index.c26f71e8.js"></script>
+>>>>>>> Fixes wonky canvas layer ordering & compositing
   <link rel="stylesheet" href="./assets/index.978b75a1.css">
 >>>>>>> Builds fresh bundle
 </head>

frontend/src/features/canvas/IAICanvas.tsx

@@ -55,6 +55,7 @@ const canvasSelector = createSelector(
       stageCoordinates,
       tool,
       isMovingStage,
+      shouldShowIntermediates,
     } = currentCanvas;
 
     const { shouldShowGrid } = outpaintingCanvas;
@@ -87,6 +88,7 @@ const canvasSelector = createSelector(
       tool,
       isOnOutpaintingTab: activeTabName === 'outpainting',
       isStaging,
+      shouldShowIntermediates,
     };
   },
   {
@@ -113,6 +115,7 @@ const IAICanvas = () => {
     tool,
     isOnOutpaintingTab,
     isStaging,
+    shouldShowIntermediates,
   } = useAppSelector(canvasSelector);
 
   useCanvasHotkeys();
@@ -176,31 +179,29 @@ const IAICanvas = () => {
           </Layer>
 
           <Layer
-            id={'image'}
+            id={'base'}
             ref={canvasImageLayerRef}
             listening={false}
             imageSmoothingEnabled={false}
           >
             <IAICanvasObjectRenderer />
-            <IAICanvasIntermediateImage />
           </Layer>
           <Layer id={'mask'} visible={isMaskEnabled} listening={false}>
             <IAICanvasMaskLines visible={true} listening={false} />
             <IAICanvasMaskCompositer listening={false} />
           </Layer>
-          <Layer id={'tool'}>
+          <Layer id="preview" imageSmoothingEnabled={false}>
             {!isStaging && (
-              <>
+              <IAICanvasBrushPreview
-                <IAICanvasBoundingBox visible={shouldShowBoundingBox} />
+                visible={tool !== 'move'}
-                <IAICanvasBrushPreview
+                listening={false}
-                  visible={tool !== 'move'}
+              />
-                  listening={false}
-                />
-              </>
             )}
-          </Layer>
-          <Layer imageSmoothingEnabled={false}>
             {isStaging && <IAICanvasStagingArea />}
+            {shouldShowIntermediates && <IAICanvasIntermediateImage />}
+            {!isStaging && (
+              <IAICanvasBoundingBox visible={shouldShowBoundingBox} />
+            )}
           </Layer>
         </Stage>
         {isOnOutpaintingTab && <IAICanvasStatusText />}

frontend/src/features/canvas/IAICanvasMaskCompositer.tsx

@@ -151,11 +151,11 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   if (
     !(
       fillPatternImage &&
-      stageCoordinates.x &&
+      stageCoordinates.x !== undefined &&
-      stageCoordinates.y &&
+      stageCoordinates.y !== undefined &&
-      stageScale &&
+      stageScale !== undefined &&
-      stageDimensions.width &&
+      stageDimensions.width !== undefined &&
-      stageDimensions.height
+      stageDimensions.height !== undefined
     )
   )
     return null;