Improves canvas status text and adds option to toggle debug info

frontend/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -17,6 +17,8 @@ const selector = createSelector(
       boundingBoxCoordinates: { x: boxX, y: boxY },
       cursorPosition,
       stageScale,
+      shouldShowCanvasDebugInfo,
+      layer,
     } = canvas;
 
     const position = cursorPosition
@@ -33,6 +35,9 @@ const selector = createSelector(
       boxX,
       boxY,
       stageScale,
+      shouldShowCanvasDebugInfo,
+      layerFormatted: layer.charAt(0).toUpperCase() + layer.slice(1),
+      layer,
       ...position,
     };
   },
@@ -56,17 +61,37 @@ const IAICanvasStatusText = () => {
     cursorX,
     cursorY,
     stageScale,
+    shouldShowCanvasDebugInfo,
+    layer,
+    layerFormatted,
   } = useAppSelector(selector);
+
   return (
     <div className="canvas-status-text">
-      <div>{`Stage: ${stageWidth} x ${stageHeight}`}</div>
-      <div>{`Stage: ${roundToHundreth(stageX)}, ${roundToHundreth(
-        stageY
-      )}`}</div>
-      <div>{`Scale: ${roundToHundreth(stageScale)}`}</div>
-      <div>{`Box: ${boxWidth} x ${boxHeight}`}</div>
-      <div>{`Box: ${roundToHundreth(boxX)}, ${roundToHundreth(boxY)}`}</div>
-      <div>{`Cursor: ${cursorX}, ${cursorY}`}</div>
+      <div
+        style={{
+          color: layer === 'mask' ? 'var(--status-working-color)' : 'inherit',
+        }}
+      >{`Active Layer: ${layerFormatted}`}</div>
+      <div>{`Canvas Scale: ${Math.round(stageScale * 100)}%`}</div>
+      <div
+        style={{
+          color:
+            boxWidth < 512 || boxHeight < 512
+              ? 'var(--status-working-color)'
+              : 'inherit',
+        }}
+      >{`Bounding Box: ${boxWidth}×${boxHeight}`}</div>
+      {shouldShowCanvasDebugInfo && (
+        <>
+          <div>{`Bounding Box Position: (${roundToHundreth(
+            boxX
+          )}, ${roundToHundreth(boxY)})`}</div>
+          <div>{`Canvas Dimensions: ${stageWidth}×${stageHeight}`}</div>
+          <div>{`Canvas Position: ${stageX}×${stageY}`}</div>
+          <div>{`Cursor Position: (${cursorX}, ${cursorY})`}</div>
+        </>
+      )}
     </div>
   );
 };

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import {
   setShouldAutoSave,
   setShouldDarkenOutsideBoundingBox,
+  setShouldShowCanvasDebugInfo,
   setShouldShowGrid,
   setShouldShowIntermediates,
   setShouldSnapToGrid,
@@ -24,6 +25,7 @@ export const canvasControlsSelector = createSelector(
       shouldShowGrid,
       shouldSnapToGrid,
       shouldAutoSave,
+      shouldShowCanvasDebugInfo,
     } = canvas;
 
     return {
@@ -32,6 +34,7 @@ export const canvasControlsSelector = createSelector(
       shouldAutoSave,
       shouldDarkenOutsideBoundingBox,
       shouldShowIntermediates,
+      shouldShowCanvasDebugInfo,
     };
   },
   {
@@ -49,6 +52,7 @@ const IAICanvasSettingsButtonPopover = () => {
     shouldSnapToGrid,
     shouldAutoSave,
     shouldDarkenOutsideBoundingBox,
+    shouldShowCanvasDebugInfo,
   } = useAppSelector(canvasControlsSelector);
 
   return (
@@ -94,6 +98,13 @@ const IAICanvasSettingsButtonPopover = () => {
           isChecked={shouldAutoSave}
           onChange={(e) => dispatch(setShouldAutoSave(e.target.checked))}
         />
+        <IAICheckbox
+          label="Show Canvas Debug Info"
+          isChecked={shouldShowCanvasDebugInfo}
+          onChange={(e) =>
+            dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
+          }
+        />
       </Flex>
     </IAIPopover>
   );

frontend/src/features/canvas/store/canvasSlice.ts

@@ -70,6 +70,7 @@ const initialCanvasState: CanvasState = {
   shouldShowBoundingBox: true,
   shouldShowBrush: true,
   shouldShowBrushPreview: false,
+  shouldShowCanvasDebugInfo: false,
   shouldShowCheckboardTransparency: false,
   shouldShowGrid: true,
   shouldShowIntermediates: true,
@@ -640,6 +641,9 @@ export const canvasSlice = createSlice({
     setShouldShowStagingOutline: (state, action: PayloadAction<boolean>) => {
       state.shouldShowStagingOutline = action.payload;
     },
+    setShouldShowCanvasDebugInfo: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowCanvasDebugInfo = action.payload;
+    },
     setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
       state.pastLayerStates.push({
         ...state.layerState,
@@ -653,63 +657,64 @@ export const canvasSlice = createSlice({
 });
 
 export const {
-  setTool,
-  setLayer,
-  setBrushColor,
-  setBrushSize,
+  addImageToStagingArea,
   addLine,
   addPointToCurrentLine,
-  setShouldPreserveMaskedArea,
-  setIsMaskEnabled,
-  setShouldShowCheckboardTransparency,
-  setShouldShowBrushPreview,
-  setMaskColor,
   clearMask,
-  undo,
+  commitStagingAreaImage,
+  discardStagedImages,
+  fitBoundingBoxToStage,
+  nextStagingAreaImage,
+  prevStagingAreaImage,
   redo,
-  setCursorPosition,
-  setStageDimensions,
-  setInitialCanvasImage,
-  setBoundingBoxDimensions,
+  resetCanvas,
+  resetCanvasView,
+  resizeAndScaleCanvas,
+  resizeCanvas,
   setBoundingBoxCoordinates,
+  setBoundingBoxDimensions,
   setBoundingBoxPreviewFill,
-  setDoesCanvasNeedScaling,
-  setStageScale,
-  toggleTool,
-  setShouldShowBoundingBox,
-  setShouldDarkenOutsideBoundingBox,
-  setIsDrawing,
-  setShouldShowBrush,
+  setBrushColor,
+  setBrushSize,
+  setCanvasContainerDimensions,
   setClearBrushHistory,
-  setShouldUseInpaintReplace,
+  setCursorPosition,
+  setDoesCanvasNeedScaling,
+  setInitialCanvasImage,
   setInpaintReplace,
-  setShouldLockBoundingBox,
-  toggleShouldLockBoundingBox,
-  setIsMovingBoundingBox,
-  setIsTransformingBoundingBox,
+  setIsDrawing,
+  setIsMaskEnabled,
   setIsMouseOverBoundingBox,
   setIsMoveBoundingBoxKeyHeld,
   setIsMoveStageKeyHeld,
-  setStageCoordinates,
-  addImageToStagingArea,
-  resetCanvas,
-  setShouldShowGrid,
-  setShouldSnapToGrid,
-  setShouldAutoSave,
-  setShouldShowIntermediates,
+  setIsMovingBoundingBox,
   setIsMovingStage,
-  nextStagingAreaImage,
-  prevStagingAreaImage,
-  commitStagingAreaImage,
-  discardStagedImages,
-  resizeAndScaleCanvas,
-  resizeCanvas,
-  resetCanvasView,
-  setCanvasContainerDimensions,
-  fitBoundingBoxToStage,
-  setShouldShowStagingImage,
+  setIsTransformingBoundingBox,
+  setLayer,
+  setMaskColor,
   setMergedCanvas,
+  setShouldAutoSave,
+  setShouldDarkenOutsideBoundingBox,
+  setShouldLockBoundingBox,
+  setShouldPreserveMaskedArea,
+  setShouldShowBoundingBox,
+  setShouldShowBrush,
+  setShouldShowBrushPreview,
+  setShouldShowCanvasDebugInfo,
+  setShouldShowCheckboardTransparency,
+  setShouldShowGrid,
+  setShouldShowIntermediates,
+  setShouldShowStagingImage,
   setShouldShowStagingOutline,
+  setShouldSnapToGrid,
+  setShouldUseInpaintReplace,
+  setStageCoordinates,
+  setStageDimensions,
+  setStageScale,
+  setTool,
+  toggleShouldLockBoundingBox,
+  toggleTool,
+  undo,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

frontend/src/features/canvas/store/canvasTypes.ts

@@ -101,6 +101,7 @@ export interface CanvasState {
   shouldShowBoundingBox: boolean;
   shouldShowBrush: boolean;
   shouldShowBrushPreview: boolean;
+  shouldShowCanvasDebugInfo: boolean;
   shouldShowCheckboardTransparency: boolean;
   shouldShowGrid: boolean;
   shouldShowIntermediates: boolean;

frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss

@@ -97,7 +97,7 @@
   flex-direction: column;
   font-size: 0.8rem;
   padding: 0.25rem;
-  width: 12rem;
+  min-width: 12rem;
   border-radius: 0.25rem;
   margin: 0.25rem;
   pointer-events: none;