feat(ui): add delete button to each layer

This commit is contained in:
psychedelicious 2024-08-29 10:27:55 +10:00
parent 085cc82926
commit 85b23784cf
9 changed files with 66 additions and 21 deletions

View File

@ -1,8 +1,7 @@
import { Spacer } from '@invoke-ai/ui-library'; import { Spacer } from '@invoke-ai/ui-library';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle'; import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper'; import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper';
import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
@ -29,8 +28,7 @@ export const ControlLayer = memo(({ id }: Props) => {
<CanvasEntityEditableTitle /> <CanvasEntityEditableTitle />
<Spacer /> <Spacer />
<ControlLayerBadges /> <ControlLayerBadges />
<CanvasEntityIsLockedToggle /> <CanvasEntityHeaderCommonActions />
<CanvasEntityEnabledToggle />
</CanvasEntityHeader> </CanvasEntityHeader>
<CanvasEntitySettingsWrapper> <CanvasEntitySettingsWrapper>
<ControlLayerControlAdapter /> <ControlLayerControlAdapter />

View File

@ -1,7 +1,7 @@
import { Spacer } from '@invoke-ai/ui-library'; import { Spacer } from '@invoke-ai/ui-library';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings'; import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
@ -18,10 +18,10 @@ export const IPAdapter = memo(({ id }: Props) => {
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<CanvasEntityHeader ps={4}> <CanvasEntityHeader ps={4} py={5}>
<CanvasEntityEditableTitle /> <CanvasEntityEditableTitle />
<Spacer /> <Spacer />
<CanvasEntityEnabledToggle /> <CanvasEntityHeaderCommonActions />
</CanvasEntityHeader> </CanvasEntityHeader>
<IPAdapterSettings /> <IPAdapterSettings />
</CanvasEntityContainer> </CanvasEntityContainer>

View File

@ -1,8 +1,7 @@
import { Spacer } from '@invoke-ai/ui-library'; import { Spacer } from '@invoke-ai/ui-library';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle'; import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
import { EntityMaskAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext'; import { EntityMaskAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
@ -25,8 +24,7 @@ export const InpaintMask = memo(({ id }: Props) => {
<CanvasEntityPreviewImage /> <CanvasEntityPreviewImage />
<CanvasEntityEditableTitle /> <CanvasEntityEditableTitle />
<Spacer /> <Spacer />
<CanvasEntityIsLockedToggle /> <CanvasEntityHeaderCommonActions />
<CanvasEntityEnabledToggle />
</CanvasEntityHeader> </CanvasEntityHeader>
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityMaskAdapterGate> </EntityMaskAdapterGate>

View File

@ -1,8 +1,7 @@
import { Spacer } from '@invoke-ai/ui-library'; import { Spacer } from '@invoke-ai/ui-library';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle'; import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
import { EntityLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext'; import { EntityLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
@ -25,8 +24,7 @@ export const RasterLayer = memo(({ id }: Props) => {
<CanvasEntityPreviewImage /> <CanvasEntityPreviewImage />
<CanvasEntityEditableTitle /> <CanvasEntityEditableTitle />
<Spacer /> <Spacer />
<CanvasEntityIsLockedToggle /> <CanvasEntityHeaderCommonActions />
<CanvasEntityEnabledToggle />
</CanvasEntityHeader> </CanvasEntityHeader>
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityLayerAdapterGate> </EntityLayerAdapterGate>

View File

@ -1,8 +1,7 @@
import { Spacer } from '@invoke-ai/ui-library'; import { Spacer } from '@invoke-ai/ui-library';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle'; import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage';
import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges'; import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges';
@ -28,8 +27,7 @@ export const RegionalGuidance = memo(({ id }: Props) => {
<CanvasEntityEditableTitle /> <CanvasEntityEditableTitle />
<Spacer /> <Spacer />
<RegionalGuidanceBadges /> <RegionalGuidanceBadges />
<CanvasEntityIsLockedToggle /> <CanvasEntityHeaderCommonActions />
<CanvasEntityEnabledToggle />
</CanvasEntityHeader> </CanvasEntityHeader>
<RegionalGuidanceSettings /> <RegionalGuidanceSettings />
</CanvasEntityContainer> </CanvasEntityContainer>

View File

@ -0,0 +1,31 @@
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashSimpleFill } from 'react-icons/pi';
export const CanvasEntityDeleteButton = memo(() => {
const { t } = useTranslation();
const entityIdentifier = useEntityIdentifierContext();
const dispatch = useAppDispatch();
const onClick = useCallback(() => {
dispatch(entityDeleted({ entityIdentifier }));
}, [dispatch, entityIdentifier]);
return (
<IconButton
size="sm"
aria-label={t('common.delete')}
tooltip={t('common.delete')}
variant="link"
alignSelf="stretch"
icon={<PiTrashSimpleFill />}
onClick={onClick}
colorScheme='error'
/>
);
});
CanvasEntityDeleteButton.displayName = 'CanvasEntityDeleteButton';

View File

@ -21,7 +21,8 @@ export const CanvasEntityEnabledToggle = memo(() => {
size="sm" size="sm"
aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')} aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')} tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
variant="ghost" variant="link"
alignSelf="stretch"
icon={isEnabled ? <PiCircleFill /> : <PiCircleBold />} icon={isEnabled ? <PiCircleFill /> : <PiCircleBold />}
onClick={onClick} onClick={onClick}
/> />

View File

@ -0,0 +1,20 @@
import { Flex } from '@invoke-ai/ui-library';
import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityIsLockedToggle } from 'features/controlLayers/components/common/CanvasEntityIsLockedToggle';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { memo } from 'react';
export const CanvasEntityHeaderCommonActions = memo(() => {
const entityIdentifier = useEntityIdentifierContext();
return (
<Flex alignSelf="stretch">
{entityIdentifier.type !== 'ip_adapter' && <CanvasEntityIsLockedToggle />}
<CanvasEntityEnabledToggle />
<CanvasEntityDeleteButton />
</Flex>
);
});
CanvasEntityHeaderCommonActions.displayName = 'CanvasEntityHeaderCommonActions';

View File

@ -21,7 +21,8 @@ export const CanvasEntityIsLockedToggle = memo(() => {
size="sm" size="sm"
aria-label={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')} aria-label={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
tooltip={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')} tooltip={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
variant="ghost" variant="link"
alignSelf="stretch"
icon={isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />} icon={isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />}
onClick={onClick} onClick={onClick}
/> />