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

Fixes next/prev image buttons

Browse Source
This commit is contained in:
psychedelicious 2022-11-03 00:49:23 +11:00 committed by Lincoln Stein
parent 1d9edbd0dd
commit 3feb7d8922
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/features/gallery/CurrentImagePreview.tsx
View File

@ -2,7 +2,12 @@ import { IconButton, Image } from '@chakra-ui/react';
import { useState } from 'react'; import { useState } from 'react';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { RootState, useAppDispatch, useAppSelector } from '../../app/store'; import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
import { GalleryState, selectNextImage, selectPrevImage } from './gallerySlice'; import {
GalleryCategory,
GalleryState,
selectNextImage,
selectPrevImage,
} from './gallerySlice';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash'; import _ from 'lodash';
import { OptionsState } from '../options/optionsSlice'; import { OptionsState } from '../options/optionsSlice';
@ -14,11 +19,15 @@ export const imagesSelector = createSelector(
const { currentCategory, currentImage, intermediateImage } = gallery; const { currentCategory, currentImage, intermediateImage } = gallery;
const { shouldShowImageDetails } = options; const { shouldShowImageDetails } = options;
const tempImages = gallery.categories[currentCategory].images; const tempImages =
gallery.categories[
currentImage ? (currentImage.category as GalleryCategory) : 'result'
].images;
const currentImageIndex = tempImages.findIndex( const currentImageIndex = tempImages.findIndex(
(i) => i.uuid === gallery?.currentImage?.uuid (i) => i.uuid === gallery?.currentImage?.uuid
); );
const imagesLength = tempImages.length; const imagesLength = tempImages.length;
return { return {
imageToDisplay: intermediateImage ? intermediateImage : currentImage, imageToDisplay: intermediateImage ? intermediateImage : currentImage,
currentCategory, currentCategory,
@ -66,17 +75,10 @@ export default function CurrentImagePreview() {
const handleClickNextButton = () => { const handleClickNextButton = () => {
dispatch(selectNextImage()); dispatch(selectNextImage());
}; };
console.log(imageToDisplay);
return ( return (
<div className={'current-image-preview'}> <div className={'current-image-preview'}>
{imageToDisplay && ( {imageToDisplay && <Image src={imageToDisplay.url} />}
<Image
src={imageToDisplay.url}
width={imageToDisplay.width}
height={imageToDisplay.height}
/>
)}
{!shouldShowImageDetails && ( {!shouldShowImageDetails && (
<div className="current-image-next-prev-buttons"> <div className="current-image-next-prev-buttons">
<div <div