Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): do not rerender top panel buttons

Browse Source
This commit is contained in:
psychedelicious 2023-08-16 22:43:31 +10:00
parent c2e7f62701
commit 0d36bab6cc
4 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
invokeai/frontend/web/src/features/nodes/components/NodeEditorSettings.tsx
View File

@ -15,7 +15,7 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import IAISwitch from 'common/components/IAISwitch'; import IAISwitch from 'common/components/IAISwitch';
import { ChangeEvent, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { FaCog } from 'react-icons/fa'; import { FaCog } from 'react-icons/fa';
import { import {
shouldAnimateEdgesChanged, shouldAnimateEdgesChanged,
@ -23,21 +23,26 @@ import {
shouldSnapToGridChanged, shouldSnapToGridChanged,
shouldValidateGraphChanged, shouldValidateGraphChanged,
} from '../store/nodesSlice'; } from '../store/nodesSlice';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
const selector = createSelector(stateSelector, ({ nodes }) => { const selector = createSelector(
const { stateSelector,
shouldAnimateEdges, ({ nodes }) => {
shouldValidateGraph, const {
shouldSnapToGrid, shouldAnimateEdges,
shouldColorEdges, shouldValidateGraph,
} = nodes; shouldSnapToGrid,
return { shouldColorEdges,
shouldAnimateEdges, } = nodes;
shouldValidateGraph, return {
shouldSnapToGrid, shouldAnimateEdges,
shouldColorEdges, shouldValidateGraph,
}; shouldSnapToGrid,
}); shouldColorEdges,
};
},
defaultSelectorOptions
);
const NodeEditorSettings = () => { const NodeEditorSettings = () => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
@ -136,4 +141,4 @@ const NodeEditorSettings = () => {
); );
}; };
export default NodeEditorSettings; export default memo(NodeEditorSettings);

6
invokeai/frontend/web/src/features/nodes/components/ui/ClearGraphButton.tsx
View File

@ -25,7 +25,9 @@ const ClearGraphButton = () => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef<HTMLButtonElement | null>(null); const cancelRef = useRef<HTMLButtonElement | null>(null);
const nodes = useAppSelector((state: RootState) => state.nodes.nodes); const nodesCount = useAppSelector(
(state: RootState) => state.nodes.nodes.length
);
const handleConfirmClear = useCallback(() => { const handleConfirmClear = useCallback(() => {
dispatch(nodeEditorReset()); dispatch(nodeEditorReset());
@ -49,7 +51,7 @@ const ClearGraphButton = () => {
tooltip={t('nodes.clearGraph')} tooltip={t('nodes.clearGraph')}
aria-label={t('nodes.clearGraph')} aria-label={t('nodes.clearGraph')}
onClick={onOpen} onClick={onOpen}
isDisabled={nodes.length === 0} isDisabled={!nodesCount}
/> />
<AlertDialog <AlertDialog

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

@ -8,7 +8,7 @@ import IAIIconButton, {
import { selectIsReadyNodes } from 'features/nodes/store/selectors'; import { selectIsReadyNodes } from 'features/nodes/store/selectors';
import ProgressBar from 'features/system/components/ProgressBar'; import ProgressBar from 'features/system/components/ProgressBar';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaPlay } from 'react-icons/fa'; import { FaPlay } from 'react-icons/fa';
@ -18,7 +18,7 @@ interface InvokeButton
iconButton?: boolean; iconButton?: boolean;
} }
export default function NodeInvokeButton(props: InvokeButton) { const NodeInvokeButton = (props: InvokeButton) => {
const { iconButton = false, ...rest } = props; const { iconButton = false, ...rest } = props;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const activeTabName = useAppSelector(activeTabNameSelector); const activeTabName = useAppSelector(activeTabNameSelector);
@ -92,4 +92,6 @@ export default function NodeInvokeButton(props: InvokeButton) {
</Box> </Box>
</Box> </Box>
); );
} };
export default memo(NodeInvokeButton);

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

@ -1,11 +1,11 @@
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaSyncAlt } from 'react-icons/fa'; import { FaSyncAlt } from 'react-icons/fa';
import { receivedOpenAPISchema } from 'services/api/thunks/schema'; import { receivedOpenAPISchema } from 'services/api/thunks/schema';
export default function ReloadSchemaButton() { const ReloadSchemaButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -21,4 +21,6 @@ export default function ReloadSchemaButton() {
onClick={handleReloadSchema} onClick={handleReloadSchema}
/> />
); );
} };
export default memo(ReloadSchemaButton);