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

122
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 { 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 { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { PropsWithChildren, memo } from 'react';
import { useSelector } from 'react-redux';
import { NodeProps } from 'reactflow';
import NodeWrapper from '../common/NodeWrapper';
import { stateSelector } from 'app/store/store';
const selector = createSelector(stateSelector, ({ system, gallery }) => {
const imageDTO = gallery.selection[gallery.selection.length - 1];
@ -54,44 +56,86 @@ const CurrentImageNode = (props: NodeProps) => {
export default memo(CurrentImageNode);
const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => (
<NodeWrapper
nodeId={props.nodeProps.data.id}
selected={props.nodeProps.selected}
width={384}
>
<Flex
className={DRAG_HANDLE_CLASSNAME}
sx={{
flexDirection: 'column',
}}
>
const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
const [isHovering, setIsHovering] = useState(false);
const handleMouseEnter = () => {
setIsHovering(true);
};
const handleMouseLeave = () => {
setIsHovering(false);
};
return (
<NodeWrapper nodeId={props.nodeProps.id} selected={props.nodeProps.selected} width={384}>
<Flex
layerStyle="nodeHeader"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={DRAG_HANDLE_CLASSNAME}
sx={{
borderTopRadius: 'base',
alignItems: 'center',
justifyContent: 'center',
h: 8,
position: 'relative',
flexDirection: 'column',
}}
>
<Text
<Flex
layerStyle="nodeHeader"
sx={{
fontSize: 'sm',
fontWeight: 600,
color: 'base.700',
_dark: { color: 'base.200' },
borderTopRadius: 'base',
alignItems: 'center',
justifyContent: 'center',
h: 8,
}}
>
Current Image
</Text>
<Text
sx={{
fontSize: 'sm',
fontWeight: 600,
color: 'base.700',
_dark: { color: 'base.200' },
}}
>
Current Image
</Text>
</Flex>
<Flex
layerStyle="nodeBody"
sx={{
w: 'full',
h: 'full',
borderBottomRadius: 'base',
p: 2,
}}
>
{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
layerStyle="nodeBody"
sx={{ w: 'full', h: 'full', borderBottomRadius: 'base', p: 2 }}
>
{props.children}
</Flex>
</Flex>
</NodeWrapper>
);
</NodeWrapper>
);
};