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

render cover image based on URL in image entities

Browse Source
This commit is contained in:
Mary Hipp 2023-06-16 15:01:22 -04:00 committed by psychedelicious
parent 7a2d3f628a
commit fe10a9f747
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
View File

@ -20,18 +20,26 @@ import {
boardUpdated,
imageAddedToBoard,
} from '../../../../services/thunks/board';
import { selectImagesAll } from '../../store/imagesSlice';
import { selectImagesAll, selectImagesById } from '../../store/imagesSlice';
import IAIDndImage from '../../../../common/components/IAIDndImage';
import { defaultSelectorOptions } from '../../../../app/store/util/defaultMemoizeOptions';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from '../../../../app/store/store';
const selector = createSelector(
[selectImagesAll],
(images) => {
return { images };
},
defaultSelectorOptions
);
const coverImageSelector = (imageName: string | undefined) =>
createSelector(
[(state: RootState) => state],
(state) => {
const coverImage = imageName
? selectImagesById(state, imageName)
: undefined;
return {
coverImage,
};
},
defaultSelectorOptions
);
interface HoverableBoardProps {
board: BoardDTO;
@ -40,9 +48,11 @@ interface HoverableBoardProps {
const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
const dispatch = useAppDispatch();
const { images } = useAppSelector(selector);
const { coverImage } = useAppSelector(
coverImageSelector(board?.cover_image_name)
);
const { board_name, board_id, cover_image_url } = board;
const { board_name, board_id } = board;
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected(board_id));
@ -125,7 +135,7 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
}}
>
<IAIDndImage
image={cover_image_url ? images[0] : undefined}
image={coverImage}
onDrop={handleDrop}
fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
isUploadDisabled={true}