Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleans up IAICanvasStatusText

Browse Source
This commit is contained in:
psychedelicious 2022-11-20 10:35:39 +11:00 committed by blessedcoolant
parent 0f6856b719
commit 9418324030
2 changed files with 37 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/features/canvas/components/IAICanvasStatusText.tsx
View File

@ -21,27 +21,31 @@ const selector = createSelector(
layer, layer,
} = canvas; } = canvas;
const position = cursorPosition const { cursorX, cursorY } = cursorPosition
? { cursorX: cursorPosition.x, cursorY: cursorPosition.y } ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y }
: { cursorX: -1, cursorY: -1 }; : { cursorX: -1, cursorY: -1 };
return { return {
stageWidth, activeLayerColor:
stageHeight, layer === 'mask' ? 'var(--status-working-color)' : 'inherit',
stageX, activeLayerString: layer.charAt(0).toUpperCase() + layer.slice(1),
stageY, boundingBoxColor:
boxWidth, boxWidth < 512 || boxHeight < 512
boxHeight, ? 'var(--status-working-color)'
boxX, : 'inherit',
boxY, boundingBoxCoordinatesString: `(${roundToHundreth(
stageScale, boxX
)}, ${roundToHundreth(boxY)})`,
boundingBoxDimensionsString: `${boxWidth}×${boxHeight}`,
canvasCoordinatesString: `${roundToHundreth(stageX)}×${roundToHundreth(
stageY
)}`,
canvasDimensionsString: `${stageWidth}×${stageHeight}`,
canvasScaleString: Math.round(stageScale * 100),
cursorCoordinatesString: `(${cursorX}, ${cursorY})`,
shouldShowCanvasDebugInfo, shouldShowCanvasDebugInfo,
layerFormatted: layer.charAt(0).toUpperCase() + layer.slice(1),
layer,
...position,
}; };
}, },
{ {
memoizeOptions: { memoizeOptions: {
resultEqualityCheck: _.isEqual, resultEqualityCheck: _.isEqual,
@ -50,48 +54,37 @@ const selector = createSelector(
); );
const IAICanvasStatusText = () => { const IAICanvasStatusText = () => {
const { const {
stageWidth, activeLayerColor,
stageHeight, activeLayerString,
stageX, boundingBoxColor,
stageY, boundingBoxCoordinatesString,
boxWidth, boundingBoxDimensionsString,
boxHeight, canvasCoordinatesString,
boxX, canvasDimensionsString,
boxY, canvasScaleString,
cursorX, cursorCoordinatesString,
cursorY,
stageScale,
shouldShowCanvasDebugInfo, shouldShowCanvasDebugInfo,
layer,
layerFormatted,
} = useAppSelector(selector); } = useAppSelector(selector);
return ( return (
<div className="canvas-status-text"> <div className="canvas-status-text">
<div <div
style={{ style={{
color: layer === 'mask' ? 'var(--status-working-color)' : 'inherit', color: activeLayerColor,
}} }}
>{`Active Layer: ${layerFormatted}`}</div> >{`Active Layer: ${activeLayerString}`}</div>
<div>{`Canvas Scale: ${Math.round(stageScale * 100)}%`}</div> <div>{`Canvas Scale: ${canvasScaleString}%`}</div>
<div <div
style={{ style={{
color: color: boundingBoxColor,
boxWidth < 512 || boxHeight < 512
? 'var(--status-working-color)'
: 'inherit',
}} }}
>{`Bounding Box: ${boxWidth}×${boxHeight}`}</div> >{`Bounding Box: ${boundingBoxDimensionsString}`}</div>
{shouldShowCanvasDebugInfo && ( {shouldShowCanvasDebugInfo && (
<> <>
<div>{`Bounding Box Position: (${roundToHundreth( <div>{`Bounding Box Position: ${boundingBoxCoordinatesString}`}</div>
boxX <div>{`Canvas Dimensions: ${canvasDimensionsString}`}</div>
)}, ${roundToHundreth(boxY)})`}</div> <div>{`Canvas Position: ${canvasCoordinatesString}`}</div>
<div>{`Canvas Dimensions: ${stageWidth}×${stageHeight}`}</div> <div>{`Cursor Position: ${cursorCoordinatesString}`}</div>
<div>{`Canvas Position: ${roundToHundreth(stageX)}×${roundToHundreth(
stageY
)}`}</div>
<div>{`Cursor Position: (${cursorX}, ${cursorY})`}</div>
</> </>
)} )}
</div> </div>

2
frontend/src/features/tabs/components/UnifiedCanvas/CanvasWorkarea.scss
View File

@ -92,7 +92,7 @@
top: 0; top: 0;
left: 0; left: 0;
background-color: var(--background-color); background-color: var(--background-color);
opacity: 0.5; opacity: 0.65;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 0.8rem; font-size: 0.8rem;