github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-19 09:54:24 -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

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.
*/