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): add contextmenu for canvas entities

Browse Source
This commit is contained in:
psychedelicious 2024-08-13 15:37:33 +10:00
parent 86e1f4e8b0
commit e0e5941384
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
View File

@ -1,5 +1,4 @@
import { Spacer, useDisclosure } from '@invoke-ai/ui-library';
import IAIDroppable from 'common/components/IAIDroppable';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
@ -9,7 +8,6 @@ import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerA
import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import type { AddLayerFromImageDropData } from 'features/dnd/types';
import { memo, useMemo } from 'react';
import { LayerOpacity } from './LayerOpacity';
@ -21,10 +19,6 @@ type Props = {
export const Layer = memo(({ id }: Props) => {
const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'layer' }), [id]);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
const droppableData = useMemo<AddLayerFromImageDropData>(
() => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
[id]
);
return (
<EntityIdentifierContext.Provider value={entityIdentifier}>
@ -38,7 +32,6 @@ export const Layer = memo(({ id }: Props) => {
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
{isOpen && <LayerSettings />}
<IAIDroppable data={droppableData} />
</CanvasEntityContainer>
</EntityIdentifierContext.Provider>
);

23
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
View File

@ -1,12 +1,25 @@
import type { FlexProps } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library';
import { memo } from 'react';
import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library';
import { CanvasEntityActionMenuItems } from 'features/controlLayers/components/common/CanvasEntityActionMenuItems';
import { memo, useCallback } from 'react';
export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
const renderMenu = useCallback(() => {
return (
<MenuList>
<CanvasEntityActionMenuItems />
</MenuList>
);
}, []);
return (
<Flex gap={3} alignItems="center" p={3} cursor="pointer" {...rest}>
{children}
</Flex>
<ContextMenu renderMenu={renderMenu}>
{(ref) => (
<Flex ref={ref} gap={2} alignItems="center" p={2} role="button" {...rest}>
{children}
</Flex>
)}
</ContextMenu>
);
});