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

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

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