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

feat(ui): improve controlnet image style

Browse Source 
css is terrible
This commit is contained in:
psychedelicious
2023-06-07 15:42:17 +10:00
parent 0843028e6e
commit 6c2b39d1df
4 changed files with 78 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx
View File

@ -3,7 +3,6 @@ import {
DragEndEvent,
DragOverlay,
DragStartEvent,
KeyboardSensor,
MouseSensor,
TouchSensor,
pointerWithin,
@ -15,6 +14,7 @@ import OverlayDragImage from './OverlayDragImage';
import { ImageDTO } from 'services/api';
import { isImageDTO } from 'services/types/guards';
import { snapCenterToCursor } from '@dnd-kit/modifiers';
import { AnimatePresence, motion } from 'framer-motion';
type ImageDndContextProps = PropsWithChildren;
@ -62,7 +62,25 @@ const ImageDndContext = (props: ImageDndContextProps) => {
>
{props.children}
<DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
{draggedImage && <OverlayDragImage image={draggedImage} />}
<AnimatePresence>
{draggedImage && (
<motion.div
layout
key="overlay-drag-image"
initial={{
opacity: 0,
scale: 0.7,
}}
animate={{
opacity: 1,
scale: 1,
transition: { duration: 0.1 },
}}
>
<OverlayDragImage image={draggedImage} />
</motion.div>
)}
</AnimatePresence>
</DragOverlay>
</DndContext>
);