github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): wip raster layers

Browse Source 
I meant to split this up into smaller commits and undo some of it, but I committed afterwards and it's tedious to undo.
This commit is contained in:
psychedelicious
2024-06-06 13:05:07 +10:00
parent 5fa93de8c4
commit 699fbb4e55
8 changed files with 88 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
invokeai/frontend/web/src/features/controlLayers/components/BrushColorPicker.tsx
View File

@@ -1,4 +1,4 @@
import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } from '@invoke-ai/ui-library';
import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
@@ -20,21 +20,17 @@ export const BrushColorPicker = memo(() => {
return (
<Popover isLazy>
<PopoverTrigger>
<span>
<Tooltip label={t('controlLayers.brushColor')}>
<Flex
as="button"
aria-label={t('controlLayers.brushColor')}
borderRadius="full"
borderWidth={1}
bg={rgbaColorToString(brushColor)}
w={8}
h={8}
cursor="pointer"
tabIndex={-1}
/>
</Tooltip>
</span>
<Flex
as="button"
aria-label={t('controlLayers.brushColor')}
borderRadius="full"
borderWidth={1}
bg={rgbaColorToString(brushColor)}
w={8}
h={8}
cursor="pointer"
tabIndex={-1}
/>
</PopoverTrigger>
<PopoverContent>
<PopoverBody minH={64}>

2
invokeai/frontend/web/src/features/controlLayers/components/BrushSize.tsx
View File

@@ -28,7 +28,7 @@ export const BrushSize = memo(() => {
[dispatch]
);
return (
<FormControl w="min-content">
<FormControl w="min-content" gap={2}>
<FormLabel m={0}>{t('controlLayers.brushSize')}</FormLabel>
<Popover isLazy>
<PopoverTrigger>

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

@@ -1,31 +1,40 @@
/* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { BrushColorPicker } from 'features/controlLayers/components/BrushColorPicker';
import { BrushSize } from 'features/controlLayers/components/BrushSize';
import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
import { $tool } from 'features/controlLayers/store/controlLayersSlice';
import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
import { memo } from 'react';
import { memo, useMemo } from 'react';
export const ControlLayersToolbar = memo(() => {
const tool = useStore($tool);
const withBrushSize = useMemo(() => {
return tool === 'brush' || tool === 'eraser';
}, [tool]);
const withBrushColor = useMemo(() => {
return tool === 'brush';
}, [tool]);
return (
<Flex w="full" gap={2}>
<Flex flex={1} justifyContent="center">
<Flex gap={2} marginInlineEnd="auto">
<ToggleProgressButton />
<ToolChooser />
</Flex>
</Flex>
<Flex flex={1} gap={2} justifyContent="center">
<BrushSize />
<BrushColorPicker />
<ToolChooser />
<UndoRedoButtonGroup />
<ControlLayersSettingsPopover />
<Flex flex={1} gap={2} justifyContent="center" alignItems="center">
{withBrushSize && <BrushSize />}
{withBrushColor && <BrushColorPicker />}
</Flex>
<Flex flex={1} justifyContent="center">
<Flex gap={2} marginInlineStart="auto">
<UndoRedoButtonGroup />
<ControlLayersSettingsPopover />
<ViewerToggleMenu />
</Flex>
</Flex>