diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx index 44fa964596..dae5e44dcd 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx @@ -4,16 +4,42 @@ import { stateSelector } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu'; -import { memo, useMemo } from 'react'; +import { MouseEvent, memo, useCallback, useMemo } from 'react'; import { ImageDTO } from 'services/api/types'; import MultipleSelectionMenuItems from './MultipleSelectionMenuItems'; import SingleSelectionMenuItems from './SingleSelectionMenuItems'; +import { MotionProps } from 'framer-motion'; type Props = { imageDTO: ImageDTO; children: ContextMenuProps['children']; }; +const motionProps: MotionProps = { + variants: { + enter: { + visibility: 'visible', + opacity: 1, + scale: 1, + transition: { + duration: 0.07, + ease: [0.4, 0, 0.2, 1], + }, + }, + exit: { + transitionEnd: { + visibility: 'hidden', + }, + opacity: 0, + scale: 0.8, + transition: { + duration: 0.07, + easings: 'easeOut', + }, + }, + }, +}; + const ImageContextMenu = ({ imageDTO, children }: Props) => { const selector = useMemo( () => @@ -31,11 +57,20 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => { const { selectionCount } = useAppSelector(selector); + const handleContextMenu = useCallback((e: MouseEvent) => { + e.preventDefault(); + }, []); + return ( menuProps={{ size: 'sm', isLazy: true }} + menuButtonProps={{ bg: 'transparent', _hover: { bg: 'transparent' } }} renderMenu={() => ( - + {selectionCount === 1 ? ( ) : (