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

Add Next/Prev Buttons CurrentImageNode.tsx

Browse Source
This commit is contained in:
mickr777 2023-08-24 18:31:27 +10:00 committed by GitHub
parent 7f6fdf5d39
commit c1b8e4b501
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 83 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
View File

@ -1,13 +1,15 @@
import { Flex, Image, Text } from '@chakra-ui/react'; import { useState, PropsWithChildren, memo } from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store'; import { Flex, Image, Text } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { NodeProps } from 'reactflow';
import NodeWrapper from '../common/NodeWrapper';
import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
import IAIDndImage from 'common/components/IAIDndImage'; import IAIDndImage from 'common/components/IAIDndImage';
import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { PropsWithChildren, memo } from 'react'; import { stateSelector } from 'app/store/store';
import { useSelector } from 'react-redux';
import { NodeProps } from 'reactflow';
import NodeWrapper from '../common/NodeWrapper';
const selector = createSelector(stateSelector, ({ system, gallery }) => { const selector = createSelector(stateSelector, ({ system, gallery }) => {
const imageDTO = gallery.selection[gallery.selection.length - 1]; const imageDTO = gallery.selection[gallery.selection.length - 1];
@ -54,15 +56,25 @@ const CurrentImageNode = (props: NodeProps) => {
export default memo(CurrentImageNode); export default memo(CurrentImageNode);
const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => ( const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
<NodeWrapper const [isHovering, setIsHovering] = useState(false);
nodeId={props.nodeProps.data.id}
selected={props.nodeProps.selected} const handleMouseEnter = () => {
width={384} setIsHovering(true);
> };
const handleMouseLeave = () => {
setIsHovering(false);
};
return (
<NodeWrapper nodeId={props.nodeProps.id} selected={props.nodeProps.selected} width={384}>
<Flex <Flex
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={DRAG_HANDLE_CLASSNAME} className={DRAG_HANDLE_CLASSNAME}
sx={{ sx={{
position: 'relative',
flexDirection: 'column', flexDirection: 'column',
}} }}
> >
@ -88,10 +100,42 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => (
</Flex> </Flex>
<Flex <Flex
layerStyle="nodeBody" layerStyle="nodeBody"
sx={{ w: 'full', h: 'full', borderBottomRadius: 'base', p: 2 }} sx={{
w: 'full',
h: 'full',
borderBottomRadius: 'base',
p: 2,
}}
> >
{props.children} {props.children}
{isHovering && (
<motion.div
key="nextPrevButtons"
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
transition: { duration: 0.1 },
}}
exit={{
opacity: 0,
transition: { duration: 0.1 },
}}
style={{
position: 'absolute',
top: 40,
left: -2,
right: -2,
bottom: 0,
pointerEvents: 'none',
}}
>
<NextPrevImageButtons />
</motion.div>
)}
</Flex> </Flex>
</Flex> </Flex>
</NodeWrapper> </NodeWrapper>
); );
};