Outpainting tab loads to empty canvas instead of upload

frontend/dist/index.html

@@ -9,6 +9,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">
@@ -24,6 +25,9 @@
 >>>>>>> Builds fresh bundle
 =======
   <script type="module" crossorigin src="./assets/index.205e5ea1.js"></script>
+=======
+  <script type="module" crossorigin src="./assets/index.7f5e02f1.js"></script>
+>>>>>>> Outpainting tab loads to empty canvas instead of upload
   <link rel="stylesheet" href="./assets/index.978b75a1.css">
 >>>>>>> Builds fresh bundle
 </head>

frontend/src/app/socketio/emitters.ts

@@ -54,7 +54,7 @@ const makeSocketIOEmitters = (
           systemState,
         };
 
-      if (['inpainting', 'outpainting'].includes(generationMode)) {
+      if (generationMode === 'inpainting') {
         const baseCanvasImage = baseCanvasImageSelector(getState());
         const imageUrl = baseCanvasImage?.image.url;
 

frontend/src/features/canvas/IAICanvasBoundingBox.tsx

@@ -137,7 +137,8 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
 
   const dragBoundFunc = useCallback(
     (position: Vector2d) => {
-      if (!baseCanvasImage) return boundingBoxCoordinates;
+      if (!baseCanvasImage && activeTabName !== 'outpainting')
+        return boundingBoxCoordinates;
 
       const { x, y } = position;
 
@@ -153,6 +154,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     },
     [
       baseCanvasImage,
+      activeTabName,
       boundingBoxCoordinates,
       stageDimensions.width,
       stageDimensions.height,
@@ -236,7 +238,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
 
       // We may not change anything, stash the old position
       let newCoordinate = { ...oldPos };
-
+      console.log(oldPos, newPos);
       // Set the new coords based on what snapped
       if (didSnapX && !didSnapY) {
         newCoordinate = {
@@ -267,7 +269,8 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
        * Unlike anchorDragBoundFunc, it does get a width and height, so
        * the logic to constrain the size of the bounding box is very simple.
        */
-      if (!baseCanvasImage) return oldBoundBox;
+      if (!baseCanvasImage && activeTabName !== 'outpainting')
+        return oldBoundBox;
       if (
         newBoundBox.width + newBoundBox.x > stageDimensions.width ||
         newBoundBox.height + newBoundBox.y > stageDimensions.height ||
@@ -279,7 +282,12 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
 
       return newBoundBox;
     },
-    [baseCanvasImage, stageDimensions]
+    [
+      activeTabName,
+      baseCanvasImage,
+      stageDimensions.height,
+      stageDimensions.width,
+    ]
   );
 
   const handleStartedTransforming = () => {
@@ -333,9 +341,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
         globalCompositeOperation={'destination-out'}
       />
       <Rect
-        dragBoundFunc={
-          activeTabName === 'inpainting' ? dragBoundFunc : undefined
-        }
+        {...(activeTabName === 'inpainting' ? { dragBoundFunc } : {})}
         listening={!isDrawing && tool === 'move'}
         draggable={true}
         fillEnabled={false}

frontend/src/features/canvas/IAICanvasResizer.tsx

@@ -34,8 +34,10 @@ const IAICanvasResizer = () => {
 
   useLayoutEffect(() => {
     window.setTimeout(() => {
-      if (!ref.current || !baseCanvasImage) return;
-      const { width: imageWidth, height: imageHeight } = baseCanvasImage.image;
+      if (!ref.current) return;
+      const { width: imageWidth, height: imageHeight } = baseCanvasImage?.image
+        ? baseCanvasImage.image
+        : { width: 512, height: 512 };
       const { clientWidth, clientHeight } = ref.current;
 
       const scale = Math.min(

frontend/src/features/canvas/canvasSlice.ts

@@ -413,18 +413,18 @@ export const canvasSlice = createSlice({
       };
     },
     setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
-      state[state.currentCanvas].boundingBoxDimensions = action.payload;
+      const currentCanvas = state[state.currentCanvas];
+      currentCanvas.boundingBoxDimensions = action.payload;
+
       const { width: boundingBoxWidth, height: boundingBoxHeight } =
         action.payload;
       const { x: boundingBoxX, y: boundingBoxY } =
-        state[state.currentCanvas].boundingBoxCoordinates;
+        currentCanvas.boundingBoxCoordinates;
       const { width: canvasWidth, height: canvasHeight } =
-        state[state.currentCanvas].stageDimensions;
+        currentCanvas.stageDimensions;
 
-      const scaledCanvasWidth =
-        canvasWidth / state[state.currentCanvas].stageScale;
-      const scaledCanvasHeight =
-        canvasHeight / state[state.currentCanvas].stageScale;
+      const scaledCanvasWidth = canvasWidth / currentCanvas.stageScale;
+      const scaledCanvasHeight = canvasHeight / currentCanvas.stageScale;
 
       const roundedCanvasWidth = roundDownToMultiple(scaledCanvasWidth, 64);
       const roundedCanvasHeight = roundDownToMultiple(scaledCanvasHeight, 64);
@@ -458,22 +458,22 @@ export const canvasSlice = createSlice({
 
       const clampedX = _.clamp(
         overflowCorrectedX,
-        state[state.currentCanvas].stageCoordinates.x,
+        currentCanvas.stageCoordinates.x,
         roundedCanvasWidth - newBoundingBoxWidth
       );
 
       const clampedY = _.clamp(
         overflowCorrectedY,
-        state[state.currentCanvas].stageCoordinates.y,
+        currentCanvas.stageCoordinates.y,
         roundedCanvasHeight - newBoundingBoxHeight
       );
 
-      state[state.currentCanvas].boundingBoxDimensions = {
+      currentCanvas.boundingBoxDimensions = {
         width: newBoundingBoxWidth,
         height: newBoundingBoxHeight,
       };
 
-      state[state.currentCanvas].boundingBoxCoordinates = {
+      currentCanvas.boundingBoxCoordinates = {
         x: clampedX,
         y: clampedY,
       };

frontend/src/features/tabs/Outpainting/OutpaintingDisplay.tsx

@@ -61,7 +61,15 @@ const OutpaintingDisplay = () => {
 
   return (
     <div className={'workarea-single-view'}>
-      <div className="workarea-split-view-left">{outpaintingComponent}</div>
+      <div className="workarea-split-view-left">
+        <div className="inpainting-main-area">
+          <IAICanvasOutpaintingControls />
+          <div className="inpainting-canvas-area">
+            {doesCanvasNeedScaling ? <IAICanvasResizer /> : <IAICanvas />}
+          </div>
+        </div>
+      </div>
+      {/* <div className="workarea-split-view-left">{outpaintingComponent}</div> */}
     </div>
   );
 };