github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-15 14:15:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): remove unused stuff 4

Browse Source
This commit is contained in:
psychedelicious
2024-08-23 16:44:35 +10:00
parent cf6751cc06
commit 49c75ca381
40 changed files with 72 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
View File

@@ -156,7 +156,7 @@ export function selectEntity(state: CanvasV2State, { id, type }: CanvasEntityIde
}
}
export function selectAllEntitiesOfType(state: CanvasV2State, type: CanvasEntityState['type']): CanvasEntityState[] {
function selectAllEntitiesOfType(state: CanvasV2State, type: CanvasEntityState['type']): CanvasEntityState[] {
if (type === 'raster_layer') {
return state.rasterLayers.entities;
} else if (type === 'control_layer') {
@@ -474,12 +474,10 @@ export const {
// Raster layers
rasterLayerAdded,
rasterLayerRecalled,
rasterLayerAllDeleted,
rasterLayerConvertedToControlLayer,
// Control layers
controlLayerAdded,
controlLayerRecalled,
controlLayerAllDeleted,
controlLayerConvertedToRasterLayer,
controlLayerModelChanged,
controlLayerControlModeChanged,
@@ -489,9 +487,6 @@ export const {
// IP Adapters
ipaAdded,
ipaRecalled,
ipaIsEnabledToggled,
ipaDeleted,
ipaAllDeleted,
ipaImageChanged,
ipaMethodChanged,
ipaModelChanged,
@@ -501,7 +496,6 @@ export const {
// Regions
rgAdded,
rgRecalled,
rgAllDeleted,
rgPositivePromptChanged,
rgNegativePromptChanged,
rgFillColorChanged,
@@ -607,10 +601,6 @@ export const canvasV2PersistConfig: PersistConfig<CanvasV2State> = {
persistDenylist: [],
};
export const sessionRequested = createAction(`${canvasV2Slice.name}/sessionRequested`);
export const sessionStagingAreaImageAccepted = createAction<{ index: number }>(
`${canvasV2Slice.name}/sessionStagingAreaImageAccepted`
);
export const transformationApplied = createAction<CanvasEntityIdentifier>(
`${canvasV2Slice.name}/transformationApplied`
);

3
invokeai/frontend/web/src/features/controlLayers/store/controlLayersReducers.ts
View File

@@ -57,9 +57,6 @@ export const controlLayersReducers = {
state.controlLayers.entities.push(data);
state.selectedEntityIdentifier = { type: 'control_layer', id: data.id };
},
controlLayerAllDeleted: (state) => {
state.controlLayers.entities = [];
},
controlLayerConvertedToRasterLayer: {
reducer: (state, action: PayloadAction<{ id: string; newId: string }>) => {
const { id, newId } = action.payload;

2
invokeai/frontend/web/src/features/controlLayers/store/inpaintMaskReducers.ts
View File

@@ -10,7 +10,7 @@ import type {
import { merge } from 'lodash-es';
import { assert } from 'tsafe';
export const selectInpaintMaskEntity = (state: CanvasV2State, id: string) =>
const selectInpaintMaskEntity = (state: CanvasV2State, id: string) =>
state.inpaintMasks.entities.find((layer) => layer.id === id);
export const selectInpaintMaskEntityOrThrow = (state: CanvasV2State, id: string) => {
const entity = selectInpaintMaskEntity(state, id);

16
invokeai/frontend/web/src/features/controlLayers/store/ipAdaptersReducers.ts
View File

@@ -7,7 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
import type { CanvasIPAdapterState, CanvasV2State, CLIPVisionModelV2, IPAdapterConfig, IPMethodV2 } from './types';
import { imageDTOToImageWithDims } from './types';
export const selectIPAdapterEntity = (state: CanvasV2State, id: string) =>
const selectIPAdapterEntity = (state: CanvasV2State, id: string) =>
state.ipAdapters.entities.find((ipa) => ipa.id === id);
export const selectIPAdapterEntityOrThrow = (state: CanvasV2State, id: string) => {
const entity = selectIPAdapterEntity(state, id);
@@ -36,20 +36,6 @@ export const ipAdaptersReducers = {
state.ipAdapters.entities.push(data);
state.selectedEntityIdentifier = { type: 'ip_adapter', id: data.id };
},
ipaIsEnabledToggled: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
const ipa = selectIPAdapterEntity(state, id);
if (ipa) {
ipa.isEnabled = !ipa.isEnabled;
}
},
ipaDeleted: (state, action: PayloadAction<{ id: string }>) => {
const { id } = action.payload;
state.ipAdapters.entities = state.ipAdapters.entities.filter((ipa) => ipa.id !== id);
},
ipaAllDeleted: (state) => {
state.ipAdapters.entities = [];
},
ipaImageChanged: {
reducer: (state, action: PayloadAction<{ id: string; imageDTO: ImageDTO | null }>) => {
const { id, imageDTO } = action.payload;

8
invokeai/frontend/web/src/features/controlLayers/store/lorasReducers.ts
View File

@@ -2,7 +2,6 @@ import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import type { CanvasV2State, LoRA } from 'features/controlLayers/store/types';
import { zModelIdentifierField } from 'features/nodes/types/common';
import type { LoRAModelConfig } from 'services/api/types';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
export const defaultLoRAConfig: Pick<LoRA, 'weight' | 'isEnabled'> = {
@@ -10,12 +9,7 @@ export const defaultLoRAConfig: Pick<LoRA, 'weight' | 'isEnabled'> = {
isEnabled: true,
};
export const selectLoRA = (state: CanvasV2State, id: string) => state.loras.find((lora) => lora.id === id);
export const selectLoRAOrThrow = (state: CanvasV2State, id: string) => {
const lora = selectLoRA(state, id);
assert(lora, `LoRA with id ${id} not found`);
return lora;
};
const selectLoRA = (state: CanvasV2State, id: string) => state.loras.find((lora) => lora.id === id);
export const lorasReducers = {
loraAdded: {

13
invokeai/frontend/web/src/features/controlLayers/store/rasterLayersReducers.ts
View File

@@ -2,18 +2,12 @@ import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { deepClone } from 'common/util/deepClone';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import { merge } from 'lodash-es';
import { assert } from 'tsafe';
import type { CanvasControlLayerState, CanvasRasterLayerState, CanvasV2State } from './types';
import { initialControlNet } from './types';
export const selectRasterLayer = (state: CanvasV2State, id: string) =>
const selectRasterLayerEntity = (state: CanvasV2State, id: string) =>
state.rasterLayers.entities.find((layer) => layer.id === id);
export const selectLayerOrThrow = (state: CanvasV2State, id: string) => {
const layer = selectRasterLayer(state, id);
assert(layer, `Layer with id ${id} not found`);
return layer;
};
export const rasterLayersReducers = {
rasterLayerAdded: {
@@ -46,13 +40,10 @@ export const rasterLayersReducers = {
state.rasterLayers.entities.push(data);
state.selectedEntityIdentifier = { type: 'raster_layer', id: data.id };
},
rasterLayerAllDeleted: (state) => {
state.rasterLayers.entities = [];
},
rasterLayerConvertedToControlLayer: {
reducer: (state, action: PayloadAction<{ id: string; newId: string }>) => {
const { id, newId } = action.payload;
const layer = selectRasterLayer(state, id);
const layer = selectRasterLayerEntity(state, id);
if (!layer) {
return;
}

7
invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts
View File

@@ -16,10 +16,10 @@ import { assert } from 'tsafe';
import type { CanvasRegionalGuidanceState } from './types';
export const selectRegionalGuidanceEntity = (state: CanvasV2State, id: string) => {
const selectRegionalGuidanceEntity = (state: CanvasV2State, id: string) => {
return state.regions.entities.find((rg) => rg.id === id);
};
export const selectRegionalGuidanceIPAdapter = (state: CanvasV2State, id: string, ipAdapterId: string) => {
const selectRegionalGuidanceIPAdapter = (state: CanvasV2State, id: string, ipAdapterId: string) => {
const entity = state.regions.entities.find((rg) => rg.id === id);
if (!entity) {
return;
@@ -85,9 +85,6 @@ export const regionsReducers = {
state.regions.entities.push(data);
state.selectedEntityIdentifier = { type: 'regional_guidance', id: data.id };
},
rgAllDeleted: (state) => {
state.regions.entities = [];
},
rgPositivePromptChanged: (state, action: PayloadAction<{ id: string; prompt: string | null }>) => {
const { id, prompt } = action.payload;
const entity = selectRegionalGuidanceEntity(state, id);

6
invokeai/frontend/web/src/features/controlLayers/store/sessionReducers.ts
View File

@@ -1,5 +1,9 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import type { CanvasV2State, SessionMode, StagingAreaImage } from 'features/controlLayers/store/types';
import type {
CanvasV2State,
SessionMode,
StagingAreaImage,
} from 'features/controlLayers/store/types';
export const sessionReducers = {
sessionStartedStaging: (state) => {

14
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@@ -524,9 +524,6 @@ const zCanvasRectState = z.object({
});
export type CanvasRectState = z.infer<typeof zCanvasRectState>;
const zLayerEffect = z.enum(['LightnessToAlphaFilter']);
export type LayerEffect = z.infer<typeof zLayerEffect>;
const zCanvasImageState = z.object({
id: zId,
type: z.literal('image'),
@@ -540,7 +537,6 @@ const zCanvasObjectState = z.discriminatedUnion('type', [
zCanvasEraserLineState,
zCanvasRectState,
]);
export type CanvasObjectState = z.infer<typeof zCanvasObjectState>;
const zIPAdapterConfig = z.object({
image: zImageWithDims.nullable(),
@@ -822,9 +818,6 @@ export type StageAttrs = {
height: Dimensions['height'];
scale: number;
};
export type PositionChangedArg = { id: string; position: Coordinate };
export type ScaleChangedArg = { id: string; scale: Coordinate; position: Coordinate };
export type BboxChangedArg = { id: string; bbox: Rect | null };
export type EntityIdentifierPayload<T = object> = { entityIdentifier: CanvasEntityIdentifier } & T;
export type EntityMovedPayload = EntityIdentifierPayload<{ position: Coordinate }>;
@@ -836,7 +829,6 @@ export type EntityRasterizedPayload = EntityIdentifierPayload<{
rect: Rect;
replaceObjects: boolean;
}>;
export type ImageObjectAddedArg = { id: string; imageDTO: ImageDTO; position?: Coordinate };
/**
* A helper type to remove `[index: string]: any;` from a type.
@@ -845,9 +837,9 @@ export type ImageObjectAddedArg = { id: string; imageDTO: ImageDTO; position?: C
* `RectConfig`, `ImageConfig`, etc all include `[index: string]: any;` in their type signature.
* TODO(psyche): Fix this upstream.
*/
export type RemoveIndexString<T> = {
[K in keyof T as string extends K ? never : K]: T[K];
};
// export type RemoveIndexString<T> = {
// [K in keyof T as string extends K ? never : K]: T[K];
// };
export type GenerationMode = 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';

4
invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts
View File

@@ -3,14 +3,14 @@ import { getEventCoordinates } from '@dnd-kit/utilities';
import { useStore } from '@nanostores/react';
import { useAppSelector } from 'app/store/storeHooks';
import { $viewport } from 'features/nodes/store/nodesSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { useCallback } from 'react';
/**
* Applies scaling to the drag transform (if on node editor tab) and centers it on cursor.
*/
export const useScaledModifer = () => {
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const workflowsViewport = useStore($viewport);
const modifier: Modifier = useCallback(
({ activatorEvent, draggingNodeRect, transform }) => {

17
invokeai/frontend/web/src/features/dnd/types/index.ts
View File

@@ -18,17 +18,6 @@ type BaseDropData = {
id: string;
};
export type CurrentImageDropData = BaseDropData & {
actionType: 'SET_CURRENT_IMAGE';
};
export type CAImageDropData = BaseDropData & {
actionType: 'SET_CA_IMAGE';
context: {
id: string;
};
};
export type IPAImageDropData = BaseDropData & {
actionType: 'SET_IPA_IMAGE';
context: {
@@ -56,10 +45,6 @@ type UpscaleInitialImageDropData = BaseDropData & {
actionType: 'SET_UPSCALE_INITIAL_IMAGE';
};
export type InitialImageDropData = BaseDropData & {
actionType: 'SET_INITIAL_IMAGE';
};
type NodesImageDropData = BaseDropData & {
actionType: 'SET_NODES_IMAGE';
context: {
@@ -86,11 +71,9 @@ export type SelectForCompareDropData = BaseDropData & {
};
export type TypesafeDroppableData =
| CurrentImageDropData
| NodesImageDropData
| AddToBoardDropData
| RemoveFromBoardDropData
| CAImageDropData
| IPAImageDropData
| RGIPAdapterImageDropData
| SelectForCompareDropData

4
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
View File

@@ -6,7 +6,7 @@ import { MetadataLayers } from 'features/metadata/components/MetadataLayers';
import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
import { MetadataT2IAdapters } from 'features/metadata/components/MetadataT2IAdapters';
import { handlers } from 'features/metadata/util/handlers';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
type Props = {
@@ -14,7 +14,7 @@ type Props = {
};
const ImageMetadataActions = (props: Props) => {
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const { metadata } = props;
if (!metadata || Object.keys(metadata).length === 0) {

4
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
View File

@@ -2,7 +2,7 @@ import { Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { ToggleMetadataViewerButton } from 'features/gallery/components/ImageViewer/ToggleMetadataViewerButton';
import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
import CurrentImageButtons from './CurrentImageButtons';
@@ -10,7 +10,7 @@ import { ViewerToggleMenu } from './ViewerToggleMenu';
export const ViewerToolbar = memo(() => {
const showToggle = useAppSelector((s) => {
const tab = activeTabNameSelector(s);
const tab = selectActiveTab(s);
if (tab === 'upscaling' || tab === 'workflows') {
return false;
}

4
invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
View File

@@ -4,7 +4,7 @@ import { handlers, parseAndRecallAllMetadata, parseAndRecallPrompts } from 'feat
import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
import { toast } from 'features/toast/toast';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@@ -13,8 +13,8 @@ import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
export const useImageActions = (image_name?: string) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
const activeStylePresetId = useAppSelector((s) => s.stylePreset.activeStylePresetId);
const activeTabName = useAppSelector(selectActiveTab);
const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(image_name);
const [hasMetadata, setHasMetadata] = useState(false);
const [hasSeed, setHasSeed] = useState(false);

2
invokeai/frontend/web/src/features/metadata/util/recallers.ts
View File

@@ -21,7 +21,6 @@ import {
negativePromptChanged,
positivePrompt2Changed,
positivePromptChanged,
rasterLayerAllDeleted,
rasterLayerRecalled,
refinerModelChanged,
rgRecalled,
@@ -40,7 +39,6 @@ import {
vaeSelected,
} from 'features/controlLayers/store/canvasV2Slice';
import type {
CanvasControlAdapterState,
CanvasIPAdapterState,
CanvasRasterLayerState,
CanvasRegionalGuidanceState,

4
invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
import InvocationCacheStatus from './InvocationCacheStatus';
@@ -11,7 +11,7 @@ import QueueTabQueueControls from './QueueTabQueueControls';
const QueueTabContent = () => {
const isInvocationCacheEnabled = useFeatureStatus('invocationCache');
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
return (
<Flex

4
invokeai/frontend/web/src/features/queue/hooks/useQueueBack.ts
View File

@@ -1,13 +1,13 @@
import { enqueueRequested } from 'app/store/actions';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { useCallback, useMemo } from 'react';
import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
export const useQueueBack = () => {
const dispatch = useAppDispatch();
const tabName = useAppSelector(activeTabNameSelector);
const tabName = useAppSelector(selectActiveTab);
const { isReady } = useIsReadyToEnqueue();
const [_, { isLoading }] = useEnqueueBatchMutation({
fixedCacheKey: 'enqueueBatch',

4
invokeai/frontend/web/src/features/queue/hooks/useQueueFront.ts
View File

@@ -2,13 +2,13 @@ import { enqueueRequested } from 'app/store/actions';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { useCallback, useMemo } from 'react';
import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
export const useQueueFront = () => {
const dispatch = useAppDispatch();
const tabName = useAppSelector(activeTabNameSelector);
const tabName = useAppSelector(selectActiveTab);
const { isReady } = useIsReadyToEnqueue();
const [_, { isLoading }] = useEnqueueBatchMutation({
fixedCacheKey: 'enqueueBatch',

4
invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
View File

@@ -14,7 +14,7 @@ import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedS
import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetModelConfigQuery } from 'services/api/endpoints/models';
@@ -30,7 +30,7 @@ const formLabelProps2: FormLabelProps = {
export const AdvancedSettingsAccordion = memo(() => {
const vaeKey = useAppSelector((state) => state.canvasV2.params.vae?.key);
const { currentData: vaeConfig } = useGetModelConfigQuery(vaeKey ?? skipToken);
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const selectBadges = useMemo(
() =>

4
invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
View File

@@ -14,7 +14,7 @@ import ParamMainModelSelect from 'features/parameters/components/MainModel/Param
import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
@@ -26,7 +26,7 @@ const formLabelProps: FormLabelProps = {
export const GenerationSettingsAccordion = memo(() => {
const { t } = useTranslation();
const modelConfig = useSelectedModelConfig();
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const selectBadges = useMemo(
() =>
createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {

6
invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts
View File

@@ -2,17 +2,17 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import type { AppFeature, SDFeature } from 'app/types/invokeai';
import { selectConfigSlice } from 'features/system/store/configSlice';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import type { TabName } from "features/ui/store/uiTypes";
import { useMemo } from 'react';
export const useFeatureStatus = (feature: AppFeature | SDFeature | InvokeTabName) => {
export const useFeatureStatus = (feature: AppFeature | SDFeature | TabName) => {
const selectIsFeatureEnabled = useMemo(
() =>
createSelector(selectConfigSlice, (config) => {
return !(
config.disabledFeatures.includes(feature as AppFeature) ||
config.disabledSDFeatures.includes(feature as SDFeature) ||
config.disabledTabs.includes(feature as InvokeTabName)
config.disabledTabs.includes(feature as TabName)
);
}),
[feature]

10
invokeai/frontend/web/src/features/ui/components/AppContent.tsx
View File

@@ -18,8 +18,8 @@ import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
import { usePanel } from 'features/ui/hooks/usePanel';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import { $isGalleryPanelOpen, $isParametersPanelOpen } from 'features/ui/store/uiSlice';
import type { TabName } from "features/ui/store/uiTypes";
import type { CSSProperties } from 'react';
import { memo, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@@ -29,8 +29,8 @@ import { Panel, PanelGroup } from 'react-resizable-panels';
import ParametersPanelUpscale from './ParametersPanels/ParametersPanelUpscale';
import ResizeHandle from './tabs/ResizeHandle';
const TABS_WITH_GALLERY_PANEL: InvokeTabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_OPTIONS_PANEL: InvokeTabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_GALLERY_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_OPTIONS_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const panelStyles: CSSProperties = { position: 'relative', height: '100%', width: '100%' };
const GALLERY_MIN_SIZE_PX = 310;
@@ -38,8 +38,8 @@ const GALLERY_MIN_SIZE_PCT = 20;
const OPTIONS_PANEL_MIN_SIZE_PX = 430;
const OPTIONS_PANEL_MIN_SIZE_PCT = 20;
export const onGalleryPanelCollapse = (isCollapsed: boolean) => $isGalleryPanelOpen.set(!isCollapsed);
export const onParametersPanelCollapse = (isCollapsed: boolean) => $isParametersPanelOpen.set(!isCollapsed);
const onGalleryPanelCollapse = (isCollapsed: boolean) => $isGalleryPanelOpen.set(!isCollapsed);
const onParametersPanelCollapse = (isCollapsed: boolean) => $isParametersPanelOpen.set(!isCollapsed);
export const AppContent = memo(() => {
const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);

8
invokeai/frontend/web/src/features/ui/components/TabButton.tsx
View File

@@ -1,13 +1,13 @@
import { IconButton, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import type { TabName } from "../store/uiTypes";
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, type ReactElement, useCallback } from 'react';
export const TabButton = memo(({ tab, icon, label }: { tab: InvokeTabName; icon: ReactElement; label: string }) => {
export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }) => {
const dispatch = useAppDispatch();
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const onClick = useCallback(() => {
dispatch(setActiveTab(tab));
}, [dispatch, tab]);

4
invokeai/frontend/web/src/features/ui/components/TabMountGate.tsx
View File

@@ -1,11 +1,11 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectConfigSlice } from 'features/system/store/configSlice';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import type { TabName } from "../store/uiTypes";
import type { PropsWithChildren } from 'react';
import { memo, useMemo } from 'react';
export const TabMountGate = memo(({ tab, children }: PropsWithChildren<{ tab: InvokeTabName }>) => {
export const TabMountGate = memo(({ tab, children }: PropsWithChildren<{ tab: TabName }>) => {
const selectIsTabEnabled = useMemo(
() => createSelector(selectConfigSlice, (config) => !config.disabledTabs.includes(tab)),
[tab]

4
invokeai/frontend/web/src/features/ui/components/TabVisibilityGate.tsx
View File

@@ -1,10 +1,10 @@
import { Box } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import type { InvokeTabName } from 'features/ui/store/tabMap';
import type { TabName } from "../store/uiTypes";
import type { PropsWithChildren } from 'react';
import { memo } from 'react';
export const TabVisibilityGate = memo(({ tab, children }: PropsWithChildren<{ tab: InvokeTabName }>) => {
export const TabVisibilityGate = memo(({ tab, children }: PropsWithChildren<{ tab: TabName }>) => {
const activeTabName = useAppSelector((s) => s.ui.activeTab);
return (

4
invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx
View File

@@ -2,13 +2,13 @@ import { Box } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { useScopeOnFocus } from 'common/hooks/interactionScopes';
import NodeEditor from 'features/nodes/components/NodeEditor';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo, useRef } from 'react';
import { ReactFlowProvider } from 'reactflow';
const NodesTab = () => {
const mode = useAppSelector((s) => s.workflow.mode);
const activeTabName = useAppSelector(activeTabNameSelector);
const activeTabName = useAppSelector(selectActiveTab);
const ref = useRef<HTMLDivElement>(null);
useScopeOnFocus('workflows', ref);

3
invokeai/frontend/web/src/features/ui/store/tabMap.tsx
View File

@@ -1,3 +0,0 @@
export const TAB_NUMBER_MAP = ['generation', 'upscaling', 'workflows', 'models', 'queue'] as const;
export type InvokeTabName = (typeof TAB_NUMBER_MAP)[number];

19
invokeai/frontend/web/src/features/ui/store/uiSelectors.ts
View File

@@ -1,21 +1,4 @@
import { createSelector } from '@reduxjs/toolkit';
import { selectConfigSlice } from 'features/system/store/configSlice';
import { selectUiSlice } from 'features/ui/store/uiSlice';
import { isString } from 'lodash-es';
import { TAB_NUMBER_MAP } from './tabMap';
export const activeTabNameSelector = createSelector(
selectUiSlice,
/**
* Previously `activeTab` was an integer, but now it's a string.
* Default to first tab in case user has integer.
*/
(ui) => (isString(ui.activeTab) ? ui.activeTab : 'generation')
);
export const activeTabIndexSelector = createSelector(selectUiSlice, selectConfigSlice, (ui, config) => {
const tabs = TAB_NUMBER_MAP.filter((t) => !config.disabledTabs.includes(t));
const idx = tabs.indexOf(ui.activeTab);
return idx === -1 ? 0 : idx;
});
export const selectActiveTab = createSelector(selectUiSlice, (ui) => ui.activeTab);

4
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@@ -4,7 +4,7 @@ import type { PersistConfig, RootState } from 'app/store/store';
import { workflowLoadRequested } from 'features/nodes/store/actions';
import { atom } from 'nanostores';
import type { InvokeTabName } from './tabMap';
import type { TabName } from "./uiTypes";
import type { UIState } from './uiTypes';
const initialUIState: UIState = {
@@ -21,7 +21,7 @@ export const uiSlice = createSlice({
name: 'ui',
initialState: initialUIState,
reducers: {
setActiveTab: (state, action: PayloadAction<InvokeTabName>) => {
setActiveTab: (state, action: PayloadAction<TabName>) => {
state.activeTab = action.payload;
},
setShouldShowImageDetails: (state, action: PayloadAction<boolean>) => {

5
invokeai/frontend/web/src/features/ui/store/uiTypes.ts
View File

@@ -1,4 +1,5 @@
import type { InvokeTabName } from './tabMap';
export type TabName = 'generation' | 'upscaling' | 'workflows' | 'models' | 'queue';
export interface UIState {
/**
@@ -8,7 +9,7 @@ export interface UIState {
/**
* The currently active tab.
*/
activeTab: InvokeTabName;
activeTab: TabName;
/**
* Whether or not to show image details, e.g. metadata, workflow, etc.
*/