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): ip adapter layers are not selectable

Browse Source
This commit is contained in:
psychedelicious 2024-04-30 13:07:56 +10:00 committed by Kent Keirsey
parent 415a41e21a
commit 2af5c4be9f
1 changed files with 6 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
invokeai/frontend/web/src/features/regionalPrompts/components/IPAdapterLayerListItem.tsx
View File

@ -1,16 +1,12 @@
import { Flex, Spacer } from '@invoke-ai/ui-library'; import { Flex, Spacer } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import ControlAdapterLayerConfig from 'features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig'; import ControlAdapterLayerConfig from 'features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig';
import { LayerTitle } from 'features/regionalPrompts/components/LayerTitle'; import { LayerTitle } from 'features/regionalPrompts/components/LayerTitle';
import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton'; import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton';
import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle'; import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle';
import { import { isIPAdapterLayer, selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
isIPAdapterLayer, import { memo, useMemo } from 'react';
layerSelected,
selectRegionalPromptsSlice,
} from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo, useCallback, useMemo } from 'react';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
type Props = { type Props = {
@ -18,26 +14,18 @@ type Props = {
}; };
export const IPAdapterLayerListItem = memo(({ layerId }: Props) => { export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo( const selector = useMemo(
() => () =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
assert(isIPAdapterLayer(layer), `Layer ${layerId} not found or not an IP Adapter layer`); assert(isIPAdapterLayer(layer), `Layer ${layerId} not found or not an IP Adapter layer`);
return { return layer.ipAdapterId;
ipAdapterId: layer.ipAdapterId,
isSelected: layerId === regionalPrompts.present.selectedLayerId,
};
}), }),
[layerId] [layerId]
); );
const { ipAdapterId, isSelected } = useAppSelector(selector); const ipAdapterId = useAppSelector(selector);
const onClickCapture = useCallback(() => {
// Must be capture so that the layer is selected before deleting/resetting/etc
dispatch(layerSelected(layerId));
}, [dispatch, layerId]);
return ( return (
<Flex gap={2} onClickCapture={onClickCapture} bg={isSelected ? 'base.400' : 'base.800'} borderRadius="base" p="1px"> <Flex gap={2} bg="base.800" borderRadius="base" p="1px">
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base"> <Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
<Flex gap={3} alignItems="center"> <Flex gap={3} alignItems="center">
<RPLayerVisibilityToggle layerId={layerId} /> <RPLayerVisibilityToggle layerId={layerId} />