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]
);
return (
<FormControl orientation="vertical">
<FormControl>
<FormLabel>{t('regionalPrompts.brushSize')}</FormLabel>
<CompositeSlider min={1} max={100} 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 { promptLayerOpacityChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { memo, useCallback } from 'react';
@ -15,9 +15,10 @@ export const PromptLayerOpacity = memo(() => {
[dispatch]
);
return (
<FormControl orientation="vertical">
<FormLabel>{t('regionalPrompts.brushSize')}</FormLabel>
<FormControl>
<FormLabel>Layer Opacity</FormLabel>
<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>
);
});

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

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