diff --git a/frontend/src/features/canvas/components/IAICanvasStatusText.tsx b/frontend/src/features/canvas/components/IAICanvasStatusText.tsx index de0e1b54fb..9ad9539463 100644 --- a/frontend/src/features/canvas/components/IAICanvasStatusText.tsx +++ b/frontend/src/features/canvas/components/IAICanvasStatusText.tsx @@ -21,27 +21,31 @@ const selector = createSelector( layer, } = canvas; - const position = cursorPosition + const { cursorX, cursorY } = cursorPosition ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y } : { cursorX: -1, cursorY: -1 }; return { - stageWidth, - stageHeight, - stageX, - stageY, - boxWidth, - boxHeight, - boxX, - boxY, - stageScale, + activeLayerColor: + layer === 'mask' ? 'var(--status-working-color)' : 'inherit', + activeLayerString: layer.charAt(0).toUpperCase() + layer.slice(1), + boundingBoxColor: + boxWidth < 512 || boxHeight < 512 + ? 'var(--status-working-color)' + : 'inherit', + boundingBoxCoordinatesString: `(${roundToHundreth( + boxX + )}, ${roundToHundreth(boxY)})`, + boundingBoxDimensionsString: `${boxWidth}×${boxHeight}`, + canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth( + stageY + )}`, + canvasDimensionsString: `${stageWidth}×${stageHeight}`, + canvasScaleString: Math.round(stageScale * 100), + cursorCoordinatesString: `(${cursorX}, ${cursorY})`, shouldShowCanvasDebugInfo, - layerFormatted: layer.charAt(0).toUpperCase() + layer.slice(1), - layer, - ...position, }; }, - { memoizeOptions: { resultEqualityCheck: _.isEqual, @@ -50,48 +54,37 @@ const selector = createSelector( ); const IAICanvasStatusText = () => { const { - stageWidth, - stageHeight, - stageX, - stageY, - boxWidth, - boxHeight, - boxX, - boxY, - cursorX, - cursorY, - stageScale, + activeLayerColor, + activeLayerString, + boundingBoxColor, + boundingBoxCoordinatesString, + boundingBoxDimensionsString, + canvasCoordinatesString, + canvasDimensionsString, + canvasScaleString, + cursorCoordinatesString, shouldShowCanvasDebugInfo, - layer, - layerFormatted, } = useAppSelector(selector); return (
{`Active Layer: ${layerFormatted}`}
-
{`Canvas Scale: ${Math.round(stageScale * 100)}%`}
+ >{`Active Layer: ${activeLayerString}`}
+
{`Canvas Scale: ${canvasScaleString}%`}
{`Bounding Box: ${boxWidth}×${boxHeight}`}
+ >{`Bounding Box: ${boundingBoxDimensionsString}`} {shouldShowCanvasDebugInfo && ( <> -
{`Bounding Box Position: (${roundToHundreth( - boxX - )}, ${roundToHundreth(boxY)})`}
-
{`Canvas Dimensions: ${stageWidth}×${stageHeight}`}
-
{`Canvas Position: ${roundToHundreth(stageX)}×${roundToHundreth( - stageY - )}`}
-
{`Cursor Position: (${cursorX}, ${cursorY})`}
+
{`Bounding Box Position: ${boundingBoxCoordinatesString}`}
+
{`Canvas Dimensions: ${canvasDimensionsString}`}
+
{`Canvas Position: ${canvasCoordinatesString}`}
+
{`Cursor Position: ${cursorCoordinatesString}`}
)} diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss b/frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss index eb0c60ea2b..dbeced2f02 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss +++ b/frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss @@ -92,7 +92,7 @@ top: 0; left: 0; background-color: var(--background-color); - opacity: 0.5; + opacity: 0.65; display: flex; flex-direction: column; font-size: 0.8rem;