From 284f7688100071aa81d3d6f68c34c50c0b86df85 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 21:30:52 +1000
Subject: [PATCH] feat(ui): restore minimal HUD

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/HeadsUpDisplay.tsx             | 66 ++++++-------------
 .../Settings/CanvasSettingsPopover.tsx        |  2 +
 .../Settings/CanvasSettingsShowHUDSwitch.tsx  | 28 ++++++++
 .../components/StageComponent.tsx             | 10 ++-
 .../store/canvasSettingsSlice.ts              |  6 +-
 6 files changed, 64 insertions(+), 49 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 694a006778..7cd0c29fae 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1683,6 +1683,7 @@
         "deletePrompt": "Delete Prompt",
         "resetRegion": "Reset Region",
         "debugLayers": "Debug Layers",
+        "showHUD": "Show HUD",
         "rectangle": "Rectangle",
         "maskFill": "Mask Fill",
         "addPositivePrompt": "Add $t(common.positivePrompt)",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
index 28fef1854a..2cb989b2ff 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
@@ -1,53 +1,27 @@
-import { Box, Flex, Text } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
+import { Grid, GridItem, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { round } from 'lodash-es';
 import { memo } from 'react';
 
 const selectBbox = createSelector(selectCanvasSlice, (canvas) => canvas.bbox);
 
 export const HeadsUpDisplay = memo(() => {
-  const canvasManager = useCanvasManager();
-  const stageAttrs = useStore(canvasManager.stateApi.$stageAttrs);
-  const cursorPos = useStore(canvasManager.stateApi.$lastCursorPos);
-  const isDrawing = useStore(canvasManager.stateApi.$isDrawing);
-  const isMouseDown = useStore(canvasManager.stateApi.$isMouseDown);
-  const lastMouseDownPos = useStore(canvasManager.stateApi.$lastMouseDownPos);
-  const lastAddedPoint = useStore(canvasManager.stateApi.$lastAddedPoint);
   const bbox = useAppSelector(selectBbox);
 
   return (
-    <Flex flexDir="column" bg="blackAlpha.400" borderBottomEndRadius="base" p={2} minW={64} gap={2}>
-      <HUDItem label="Zoom" value={`${round(stageAttrs.scale * 100, 2)}%`} />
-      <HUDItem label="Stage Pos" value={`${round(stageAttrs.x, 3)}, ${round(stageAttrs.y, 3)}`} />
-      <HUDItem
-        label="Stage Size"
-        value={`${round(stageAttrs.width / stageAttrs.scale, 2)}×${round(stageAttrs.height / stageAttrs.scale, 2)} px`}
-      />
-      <HUDItem label="BBox Size" value={`${bbox.rect.width}×${bbox.rect.height} px`} />
-      <HUDItem label="BBox Position" value={`${bbox.rect.x}, ${bbox.rect.y}`} />
-      <HUDItem label="BBox Width % 8" value={round(bbox.rect.width % 8, 2)} />
-      <HUDItem label="BBox Height % 8" value={round(bbox.rect.height % 8, 2)} />
-      <HUDItem label="BBox X % 8" value={round(bbox.rect.x % 8, 2)} />
-      <HUDItem label="BBox Y % 8" value={round(bbox.rect.y % 8, 2)} />
-      <HUDItem
-        label="Cursor Position"
-        value={cursorPos ? `${round(cursorPos.x, 2)}, ${round(cursorPos.y, 2)}` : '?, ?'}
-      />
-      <HUDItem label="Is Drawing" value={isDrawing ? 'True' : 'False'} />
-      <HUDItem label="Is Mouse Down" value={isMouseDown ? 'True' : 'False'} />
-      <HUDItem
-        label="Last Mouse Down Pos"
-        value={lastMouseDownPos ? `${round(lastMouseDownPos.x, 2)}, ${round(lastMouseDownPos.y, 2)}` : '?, ?'}
-      />
-      <HUDItem
-        label="Last Added Point"
-        value={lastAddedPoint ? `${round(lastAddedPoint.x, 2)}, ${round(lastAddedPoint.y, 2)}` : '?, ?'}
-      />
-    </Flex>
+    <Grid
+      bg="base.900"
+      borderBottomEndRadius="base"
+      p={2}
+      gap={2}
+      borderRadius="base"
+      templateColumns="auto auto"
+      opacity={0.6}
+    >
+      <HUDItem label="BBox" value={`${bbox.rect.width}×${bbox.rect.height} px`} />
+      <HUDItem label="Scaled BBox" value={`${bbox.scaledSize.width}×${bbox.scaledSize.height} px`} />
+    </Grid>
   );
 });
 
@@ -55,12 +29,14 @@ HeadsUpDisplay.displayName = 'HeadsUpDisplay';
 
 const HUDItem = memo(({ label, value }: { label: string; value: string | number }) => {
   return (
-    <Box display="inline-block" lineHeight={1}>
-      <Text as="span">{label}: </Text>
-      <Text as="span" fontWeight="semibold">
-        {value}
-      </Text>
-    </Box>
+    <>
+      <GridItem>
+        <Text textAlign="end">{label}: </Text>
+      </GridItem>
+      <GridItem fontWeight="semibold">
+        <Text>{value}</Text>
+      </GridItem>
+    </>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
index dae5e143c8..fe1b9a4b27 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -18,6 +18,7 @@ import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/compo
 import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
 import { CanvasSettingsResetButton } from 'features/controlLayers/components/Settings/CanvasSettingsResetButton';
+import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiSettings4Fill } from 'react-icons/ri';
@@ -37,6 +38,7 @@ export const CanvasSettingsPopover = memo(() => {
             <CanvasSettingsInvertScrollCheckbox />
             <CanvasSettingsClipToBboxCheckbox />
             <CanvasSettingsDynamicGridSwitch />
+            <CanvasSettingsShowHUDSwitch />
             <CanvasSettingsResetButton />
             <DebugSettings />
           </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx
new file mode 100644
index 0000000000..e570e0019e
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx
@@ -0,0 +1,28 @@
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSettingsSlice, settingsShowHUDToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectShowHUD = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.showHUD);
+
+export const CanvasSettingsShowHUDSwitch = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const showHUD = useAppSelector(selectShowHUD);
+  const onChange = useCallback(() => {
+    dispatch(settingsShowHUDToggled());
+  }, [dispatch]);
+
+  return (
+    <FormControl>
+      <FormLabel m={0} flexGrow={1}>
+        {t('controlLayers.showHUD')}
+      </FormLabel>
+      <Switch size="sm" isChecked={showHUD} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasSettingsShowHUDSwitch.displayName = 'CanvasSettingsShowHUDSwitch';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index 3fe1ba634d..b4c2646f4f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -48,9 +48,11 @@ const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null)
 };
 
 const selectDynamicGrid = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.dynamicGrid);
+const selectShowHUD = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.showHUD);
 
 export const StageComponent = memo(() => {
   const dynamicGrid = useAppSelector(selectDynamicGrid);
+  const showHUD = useAppSelector(selectShowHUD);
 
   const [stage] = useState(
     () =>
@@ -99,9 +101,11 @@ export const StageComponent = memo(() => {
         overflow="hidden"
         data-testid="control-layers-canvas"
       />
-      <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
-        <HeadsUpDisplay />
-      </Flex>
+      {showHUD && (
+        <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
+          <HeadsUpDisplay />
+        </Flex>
+      )}
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
index 627f1f28d3..ca6034377b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
@@ -35,10 +35,14 @@ export const canvasSettingsSlice = createSlice({
     settingsAutoSaveToggled: (state) => {
       state.autoSave = !state.autoSave;
     },
+    settingsShowHUDToggled: (state) => {
+      state.showHUD = !state.showHUD;
+    },
   },
 });
 
-export const { clipToBboxChanged, settingsAutoSaveToggled, settingsDynamicGridToggled } = canvasSettingsSlice.actions;
+export const { clipToBboxChanged, settingsAutoSaveToggled, settingsDynamicGridToggled, settingsShowHUDToggled } =
+  canvasSettingsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrate = (state: any): any => {