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): tweak layer ui component

Browse Source
This commit is contained in:
psychedelicious 2024-07-03 16:18:06 +10:00
parent eef9278ee6
commit 918354cd9d
3 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,12 @@
import { useDisclosure } from '@invoke-ai/ui-library'; import { useDisclosure } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIDroppable from 'common/components/IAIDroppable';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
import { LayerHeader } from 'features/controlLayers/components/Layer/LayerHeader'; import { LayerHeader } from 'features/controlLayers/components/Layer/LayerHeader';
import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings'; import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
import { entitySelected } from 'features/controlLayers/store/canvasV2Slice'; import { entitySelected } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react'; import type { LayerImageDropData } from 'features/dnd/types';
import { memo, useCallback, useMemo } from 'react';
type Props = { type Props = {
id: string; id: string;
@ -17,11 +19,16 @@ export const Layer = memo(({ id }: Props) => {
const onSelect = useCallback(() => { const onSelect = useCallback(() => {
dispatch(entitySelected({ id, type: 'layer' })); dispatch(entitySelected({ id, type: 'layer' }));
}, [dispatch, id]); }, [dispatch, id]);
const droppableData = useMemo<LayerImageDropData>(
() => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
[id]
);
return ( return (
<CanvasEntityContainer isSelected={isSelected} onSelect={onSelect}> <CanvasEntityContainer isSelected={isSelected} onSelect={onSelect}>
<LayerHeader id={id} onToggleVisibility={onToggle} /> <LayerHeader id={id} onToggleVisibility={onToggle} />
{isOpen && <LayerSettings id={id} />} {isOpen && <LayerSettings id={id} />}
<IAIDroppable data={droppableData} />
</CanvasEntityContainer> </CanvasEntityContainer>
); );
}); });

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

@ -1,24 +1,12 @@
import IAIDroppable from 'common/components/IAIDroppable';
import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings'; import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
import type { LayerImageDropData } from 'features/dnd/types'; import { memo } from 'react';
import { memo, useMemo } from 'react';
type Props = { type Props = {
id: string; id: string;
}; };
export const LayerSettings = memo(({ id }: Props) => { export const LayerSettings = memo(({ id }: Props) => {
const droppableData = useMemo<LayerImageDropData>( return <CanvasEntitySettings>PLACEHOLDER</CanvasEntitySettings>;
() => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
[id]
);
return (
<CanvasEntitySettings>
PLACEHOLDER
<IAIDroppable data={droppableData} />
</CanvasEntitySettings>
);
}); });
LayerSettings.displayName = 'LayerSettings'; LayerSettings.displayName = 'LayerSettings';

1
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
View File

@ -25,6 +25,7 @@ export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorde
return ( return (
<Flex <Flex
position="relative" // necessary for drop overlay
flexDir="column" flexDir="column"
w="full" w="full"
bg="base.850" bg="base.850"