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

Update CurrentImageNode.tsx

Browse Source
This commit is contained in:
mickr777 2023-08-24 19:20:35 +10:00 committed by GitHub
parent b6dc5c0fee
commit 5d8cd62e44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,15 @@
import { useState, PropsWithChildren, memo } from "react"; import { useState, PropsWithChildren, memo } from 'react';
import { useSelector } from "react-redux"; import { useSelector } from 'react-redux';
import { createSelector } from "@reduxjs/toolkit"; import { createSelector } from '@reduxjs/toolkit';
import { Flex, Image, Text } from "@chakra-ui/react"; import { Flex, Image, Text } from '@chakra-ui/react';
import { motion } from "framer-motion"; import { motion } from 'framer-motion';
import { NodeProps } from "reactflow"; import { NodeProps } from 'reactflow';
import NodeWrapper from "../common/NodeWrapper"; import NodeWrapper from '../common/NodeWrapper';
import NextPrevImageButtons from "features/gallery/components/NextPrevImageButtons"; 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 { stateSelector } from "app/store/store"; import { stateSelector } from 'app/store/store';
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];
@ -29,10 +29,10 @@ const CurrentImageNode = (props: NodeProps) => {
<Image <Image
src={progressImage.dataURL} src={progressImage.dataURL}
sx={{ sx={{
w: "full", w: 'full',
h: "full", h: 'full',
objectFit: "contain", objectFit: 'contain',
borderRadius: "base", borderRadius: 'base',
}} }}
/> />
</Wrapper> </Wrapper>
@ -78,43 +78,43 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
className={DRAG_HANDLE_CLASSNAME} className={DRAG_HANDLE_CLASSNAME}
sx={{ sx={{
position: "relative", position: 'relative',
flexDirection: "column", flexDirection: 'column',
}} }}
> >
<Flex <Flex
layerStyle="nodeHeader" layerStyle='nodeHeader'
sx={{ sx={{
borderTopRadius: "base", borderTopRadius: 'base',
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
h: 8, h: 8,
}} }}
> >
<Text <Text
sx={{ sx={{
fontSize: "sm", fontSize: 'sm',
fontWeight: 600, fontWeight: 600,
color: "base.700", color: 'base.700',
_dark: { color: "base.200" }, _dark: { color: 'base.200' },
}} }}
> >
Current Image Current Image
</Text> </Text>
</Flex> </Flex>
<Flex <Flex
layerStyle="nodeBody" layerStyle='nodeBody'
sx={{ sx={{
w: "full", w: 'full',
h: "full", h: 'full',
borderBottomRadius: "base", borderBottomRadius: 'base',
p: 2, p: 2,
}} }}
> >
{props.children} {props.children}
{isHovering && ( {isHovering && (
<motion.div <motion.div
key="nextPrevButtons" key='nextPrevButtons'
initial={{ initial={{
opacity: 0, opacity: 0,
}} }}
@ -127,12 +127,12 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
transition: { duration: 0.1 }, transition: { duration: 0.1 },
}} }}
style={{ style={{
position: "absolute", position: 'absolute',
top: 40, top: 40,
left: -2, left: -2,
right: -2, right: -2,
bottom: 0, bottom: 0,
pointerEvents: "none", pointerEvents: 'none',
}} }}
> >
<NextPrevImageButtons /> <NextPrevImageButtons />