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

perf(ui): memoize infill components

Browse Source
This commit is contained in:
psychedelicious 2024-04-15 22:25:33 +10:00
parent a24c9d0f7a
commit 5a8489bbfc
2 changed files with 10 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
View File

@ -1,24 +1,18 @@
import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice'; import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback } from 'react';
import type { RgbaColor } from 'react-colorful'; import type { RgbaColor } from 'react-colorful';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const selectInfillColor = createMemoizedSelector(selectGenerationSlice, (generation) => generation.infillColorValue);
const ParamInfillColorOptions = () => { const ParamInfillColorOptions = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const infillColor = useAppSelector(selectInfillColor);
() =>
createSelector(selectGenerationSlice, (generation) => ({
infillColor: generation.infillColorValue,
})),
[]
);
const { infillColor } = useAppSelector(selector);
const infillMethod = useAppSelector((s) => s.generation.infillMethod); const infillMethod = useAppSelector((s) => s.generation.infillMethod);

22
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
View File

@ -1,35 +1,23 @@
import { Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
import { import {
selectGenerationSlice,
setInfillMosaicMaxColor, setInfillMosaicMaxColor,
setInfillMosaicMinColor, setInfillMosaicMinColor,
setInfillMosaicTileHeight, setInfillMosaicTileHeight,
setInfillMosaicTileWidth, setInfillMosaicTileWidth,
} from 'features/parameters/store/generationSlice'; } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback } from 'react';
import type { RgbaColor } from 'react-colorful'; import type { RgbaColor } from 'react-colorful';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const ParamInfillMosaicTileSize = () => { const ParamInfillMosaicTileSize = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const infillMosaicTileWidth = useAppSelector((s) => s.generation.infillMosaicTileWidth);
() => const infillMosaicTileHeight = useAppSelector((s) => s.generation.infillMosaicTileHeight);
createSelector(selectGenerationSlice, (generation) => ({ const infillMosaicMinColor = useAppSelector((s) => s.generation.infillMosaicMinColor);
infillMosaicTileWidth: generation.infillMosaicTileWidth, const infillMosaicMaxColor = useAppSelector((s) => s.generation.infillMosaicMaxColor);
infillMosaicTileHeight: generation.infillMosaicTileHeight,
infillMosaicMinColor: generation.infillMosaicMinColor,
infillMosaicMaxColor: generation.infillMosaicMaxColor,
})),
[]
);
const { infillMosaicTileWidth, infillMosaicTileHeight, infillMosaicMinColor, infillMosaicMaxColor } =
useAppSelector(selector);
const infillMethod = useAppSelector((s) => s.generation.infillMethod); const infillMethod = useAppSelector((s) => s.generation.infillMethod);
const { t } = useTranslation(); const { t } = useTranslation();