diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx index 452233580d3..0fa4518c92f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx @@ -1,3 +1,5 @@ +import { Divider, Grid } from '@invoke-ai/ui-library'; +import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { CanvasHUDItemBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemBbox'; import { CanvasHUDItemScaledBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemScaledBbox'; @@ -5,9 +7,6 @@ import { CanvasHUDItemStats } from 'features/controlLayers/components/HUD/Canvas import { selectCanvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice'; import { memo } from 'react'; -import { Divider, Grid } from '@invoke-ai/ui-library'; -import { createSelector } from '@reduxjs/toolkit'; - const selectCanvasSettings = createSelector(selectCanvasSettingsSlice, (canvasSettings) => ({ showSystemStats: canvasSettings.showSystemStats, })); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx index b3f049d4043..34f776fff26 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx @@ -11,7 +11,9 @@ export const CanvasHUDItemStats = memo(() => { pollingInterval: 1000, }); - if (!systemStats) return null; + if (!systemStats) { + return null; + } return ( <> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx index c9b6dba8e6b..bd8c4e306d4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx @@ -1,15 +1,14 @@ +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSettingsSlice, settingsShowHUDToggled, settingsShowSystemStatsToggled, } from 'features/controlLayers/store/canvasSettingsSlice'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library'; -import { createSelector } from '@reduxjs/toolkit'; - const selectShowHUD = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.showHUD); const selectShowSystemStats = createSelector( selectCanvasSettingsSlice, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts index a2aadd879a1..07b232170fd 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts @@ -1,10 +1,9 @@ +import type { PayloadAction, Selector } from '@reduxjs/toolkit'; +import { createSelector, createSlice } from '@reduxjs/toolkit'; import type { PersistConfig, RootState } from 'app/store/store'; import { newCanvasSessionRequested, newGallerySessionRequested } from 'features/controlLayers/store/actions'; import type { RgbaColor } from 'features/controlLayers/store/types'; -import { createSelector, createSlice } from '@reduxjs/toolkit'; -import type { PayloadAction, Selector } from '@reduxjs/toolkit'; - type CanvasSettingsState = { /** * Whether to show HUD (Heads-Up Display) on the canvas. @@ -240,4 +239,3 @@ export const selectIsolatedTransformingPreview = createCanvasSettingsSelector( (settings) => settings.isolatedTransformingPreview ); export const selectPressureSensitivity = createCanvasSettingsSelector((settings) => settings.pressureSensitivity); -export const selectShowSystemStats = createCanvasSettingsSelector((settings) => settings.showSystemStats);