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): layouting regional prompts

Browse Source
This commit is contained in:
psychedelicious 2024-04-17 23:12:03 +10:00 committed by Kent Keirsey
parent a5bfe2dccb
commit 30e3e12513
3 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ export const BrushSize = memo(() => {
[dispatch] [dispatch]
); );
return ( return (
<FormControl orientation="vertical"> <FormControl>
<FormLabel>{t('regionalPrompts.brushSize')}</FormLabel> <FormLabel>{t('regionalPrompts.brushSize')}</FormLabel>
<CompositeSlider min={1} max={100} value={brushSize} onChange={onChange} /> <CompositeSlider min={1} max={100} value={brushSize} onChange={onChange} />
<CompositeNumberInput min={1} max={500} value={brushSize} onChange={onChange} /> <CompositeNumberInput min={1} max={500} value={brushSize} onChange={onChange} />

7
invokeai/frontend/web/src/features/regionalPrompts/components/PromptLayerOpacity.tsx
View File

@ -1,4 +1,4 @@
import { CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { promptLayerOpacityChanged } from 'features/regionalPrompts/store/regionalPromptsSlice'; import { promptLayerOpacityChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -15,9 +15,10 @@ export const PromptLayerOpacity = memo(() => {
[dispatch] [dispatch]
); );
return ( return (
<FormControl orientation="vertical"> <FormControl>
<FormLabel>{t('regionalPrompts.brushSize')}</FormLabel> <FormLabel>Layer Opacity</FormLabel>
<CompositeSlider min={0.25} max={1} step={0.01} value={promptLayerOpacity} onChange={onChange} /> <CompositeSlider min={0.25} max={1} step={0.01} value={promptLayerOpacity} onChange={onChange} />
<CompositeNumberInput min={0.25} max={1} step={0.01} value={promptLayerOpacity} onChange={onChange} />
</FormControl> </FormControl>
); );
}); });

21
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { Button, Flex } from '@invoke-ai/ui-library'; import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton'; import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton';
@ -11,7 +11,6 @@ import { PromptLayerOpacity } from 'features/regionalPrompts/components/PromptLa
import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser'; import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser';
import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice'; import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs'; import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';
import { ImageSizeLinear } from 'features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear';
import { memo } from 'react'; import { memo } from 'react';
const selectLayerIdsReversed = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => const selectLayerIdsReversed = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) =>
@ -27,23 +26,21 @@ export const RegionalPromptsEditor = memo(() => {
return ( return (
<Flex gap={4} w="full" h="full"> <Flex gap={4} w="full" h="full">
<Flex flexDir="column" gap={4} flexShrink={0}> <Flex flexDir="column" gap={4} flexShrink={0}>
<Flex> <Flex gap={3}>
<Button onClick={debugBlobs}>DEBUG</Button> <ButtonGroup isAttached={false}>
<AddLayerButton /> <Button onClick={debugBlobs}>DEBUG</Button>
<DeleteAllLayersButton /> <AddLayerButton />
<DeleteAllLayersButton />
</ButtonGroup>
<ToolChooser />
</Flex> </Flex>
<BrushSize /> <BrushSize />
<PromptLayerOpacity /> <PromptLayerOpacity />
<ImageSizeLinear />
<ToolChooser />
{layerIdsReversed.map((id) => ( {layerIdsReversed.map((id) => (
<LayerListItem key={id} id={id} /> <LayerListItem key={id} id={id} />
))} ))}
</Flex> </Flex>
<Flex> <StageComponent />
<StageComponent />
{/* <RegionalPromptsStage /> */}
</Flex>
</Flex> </Flex>
); );
}); });