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 9f4a8f11f8
commit 0dcd6aa5d9
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 { Spacer, useDisclosure } from '@invoke-ai/ui-library';
import IAIDroppable from 'common/components/IAIDroppable';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; 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 { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import type { AddLayerFromImageDropData } from 'features/dnd/types';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { LayerOpacity } from './LayerOpacity'; import { LayerOpacity } from './LayerOpacity';
@ -21,10 +19,6 @@ type Props = {
export const Layer = memo(({ id }: Props) => { export const Layer = memo(({ id }: Props) => {
const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'layer' }), [id]); const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'layer' }), [id]);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
const droppableData = useMemo<AddLayerFromImageDropData>(
() => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
[id]
);
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
@ -38,7 +32,6 @@ export const Layer = memo(({ id }: Props) => {
<CanvasEntityDeleteButton /> <CanvasEntityDeleteButton />
</CanvasEntityHeader> </CanvasEntityHeader>
{isOpen && <LayerSettings />} {isOpen && <LayerSettings />}
<IAIDroppable data={droppableData} />
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityIdentifierContext.Provider> </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 type { FlexProps } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library'; import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library';
import { memo } from 'react'; import { CanvasEntityActionMenuItems } from 'features/controlLayers/components/common/CanvasEntityActionMenuItems';
import { memo, useCallback } from 'react';
export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => { export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
const renderMenu = useCallback(() => {
return (
<MenuList>
<CanvasEntityActionMenuItems />
</MenuList>
);
}, []);
return ( return (
<Flex gap={3} alignItems="center" p={3} cursor="pointer" {...rest}> <ContextMenu renderMenu={renderMenu}>
{children} {(ref) => (
</Flex> <Flex ref={ref} gap={2} alignItems="center" p={2} role="button" {...rest}>
{children}
</Flex>
)}
</ContextMenu>
); );
}); });