From 4f8782f61677205b4f7e2cff802c415d8305cbbd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 18 Sep 2024 10:43:22 +1000
Subject: [PATCH] fix(ui): hide scale method from HUD when disabled

---
 .../components/HUD/CanvasHUDItemScaledBbox.tsx         | 10 ++++++----
 .../web/src/features/controlLayers/store/selectors.ts  |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
index 177762de40..c576636949 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
@@ -1,16 +1,18 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasHUDItem } from 'features/controlLayers/components/HUD/CanvasHUDItem';
-import { selectBbox } from 'features/controlLayers/store/selectors';
+import { selectScaledSize, selectScaleMethod } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selectScaledSize = createSelector(selectBbox, (bbox) => bbox.scaledSize);
-
 export const CanvasHUDItemScaledBbox = memo(() => {
   const { t } = useTranslation();
+  const scaleMethod = useAppSelector(selectScaleMethod);
   const scaledSize = useAppSelector(selectScaledSize);
 
+  if (scaleMethod === 'none') {
+    return null;
+  }
+
   return (
     <CanvasHUDItem label={t('controlLayers.HUD.scaledBbox')} value={`${scaledSize.width}×${scaledSize.height} px`} />
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts b/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts
index b6e0868236..46a82bd801 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts
@@ -288,3 +288,5 @@ export const selectWidth = createSelector(selectCanvasSlice, (canvas) => canvas.
 export const selectHeight = createSelector(selectCanvasSlice, (canvas) => canvas.bbox.rect.height);
 export const selectAspectRatioID = createSelector(selectCanvasSlice, (canvas) => canvas.bbox.aspectRatio.id);
 export const selectAspectRatioValue = createSelector(selectCanvasSlice, (canvas) => canvas.bbox.aspectRatio.value);
+export const selectScaledSize = createSelector(selectBbox, (bbox) => bbox.scaledSize);
+export const selectScaleMethod = createSelector(selectBbox, (bbox) => bbox.scaleMethod);