Canvas styling

frontend/src/features/canvas/IAICanvas.tsx

@@ -33,6 +33,8 @@ import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
 import IAICanvasGrid from './IAICanvasGrid';
 import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
 import IAICanvasStatusText from './IAICanvasStatusText';
+import { Box, Button } from '@chakra-ui/react';
+import { rgbaColorToRgbString, rgbaColorToString } from './util/colorToString';
 
 const canvasSelector = createSelector(
   [
@@ -52,7 +54,11 @@ const canvasSelector = createSelector(
       stageDimensions,
       stageCoordinates,
       tool,
+      layer,
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
       isMovingStage,
+      maskColor,
     } = currentCanvas;
 
     const { shouldShowGrid } = outpaintingCanvas;
@@ -85,6 +91,10 @@ const canvasSelector = createSelector(
       stageDimensions,
       stageScale,
       tool,
+      layer,
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      maskColorString: rgbaColorToString({ ...maskColor, a: 0.5 }),
       outpaintingOnly: activeTabName === 'outpainting',
     };
   },
@@ -110,7 +120,11 @@ const IAICanvas = () => {
     stageDimensions,
     stageScale,
     tool,
+    layer,
     outpaintingOnly,
+    boundingBoxCoordinates,
+    boundingBoxDimensions,
+    maskColorString,
   } = useAppSelector(canvasSelector);
 
   useCanvasHotkeys();
@@ -137,6 +151,9 @@ const IAICanvas = () => {
   const { handleDragStart, handleDragMove, handleDragEnd } =
     useCanvasDragMove();
 
+  const panelTop = boundingBoxCoordinates.y + boundingBoxDimensions.height;
+  const panelLeft = boundingBoxCoordinates.x + boundingBoxDimensions.width;
+
   return (
     <div className="inpainting-canvas-container">
       <div className="inpainting-canvas-wrapper">
@@ -146,8 +163,14 @@ const IAICanvas = () => {
           style={{
             outline: 'none',
             ...(stageCursor ? { cursor: stageCursor } : {}),
+            border: `1px solid var(--border-color-light)`,
+            borderRadius: '0.5rem',
+            boxShadow: `inset 0 0 20px ${layer === 'mask' ? '1px' : '1px'} ${
+              layer === 'mask'
+                ? 'var(--accent-color)'
+                : 'var(--border-color-light)'
+            }`,
           }}
-          className="inpainting-canvas-stage checkerboard"
           x={stageCoordinates.x}
           y={stageCoordinates.y}
           width={stageDimensions.width}

frontend/src/features/tabs/CanvasWorkarea.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/Mixins/' as *;
+@use '../../styles/Mixins/' as *;
 
 .inpainting-main-area {
   display: flex;
@@ -30,7 +30,7 @@
     }
 
     .inpainting-color-picker {
-      margin-left: 1rem !important;
+      margin-left: 1rem;
     }
 
     .inpainting-brush-options {
@@ -69,7 +69,9 @@
     }
 
     .inpainting-canvas-stage {
-      border-radius: 0.5rem;
+      // border-radius: 0.5rem;
+      // border: 1px solid var(--border-color-light);
+
       canvas {
         border-radius: 0.5rem;
       }

frontend/src/features/tabs/Inpainting/InpaintingWorkarea.scss

@@ -1,84 +0,0 @@
-@use '../../../styles/Mixins/' as *;
-
-.inpainting-main-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 1rem;
-  width: 100%;
-  height: 100%;
-
-  .inpainting-settings {
-    display: flex;
-    align-items: center;
-    column-gap: 0.5rem;
-
-    svg {
-      transform: scale(0.9);
-    }
-
-    .inpainting-buttons-group {
-      display: flex;
-      align-items: center;
-      column-gap: 0.5rem;
-    }
-
-    .inpainting-button-dropdown {
-      display: flex;
-      flex-direction: column;
-      row-gap: 0.5rem;
-    }
-
-    .inpainting-color-picker {
-      margin-left: 1rem;
-    }
-
-    .inpainting-brush-options {
-      display: flex;
-      align-items: center;
-      column-gap: 1rem;
-    }
-  }
-
-  .inpainting-canvas-area {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    row-gap: 1rem;
-    width: 100%;
-    height: 100%;
-  }
-
-  .inpainting-canvas-spiner {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .inpainting-canvas-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    border-radius: 0.5rem;
-
-    .inpainting-canvas-wrapper {
-      position: relative;
-    }
-
-    .inpainting-canvas-stage {
-      border-radius: 0.5rem;
-      border: 1px solid var(--border-color-light);
-
-      canvas {
-        border-radius: 0.5rem;
-      }
-    }
-  }
-}
-
-.inpainting-options-btn {
-  min-height: 2rem;
-}

frontend/src/styles/index.scss

@@ -46,8 +46,7 @@
 @use '../features/tabs/TextToImage/TextToImage.scss';
 @use '../features/tabs/ImageToImage/ImageToImage.scss';
 @use '../features/tabs/FloatingButton.scss';
-@use '../features/tabs/Inpainting/InpaintingWorkarea.scss';
-@use '../features/tabs/Outpainting/OutpaintingWorkarea.scss';
+@use '../features/tabs/CanvasWorkarea.scss';
 
 // Component Shared
 @use '../common/components/IAINumberInput.scss';