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): port bbox select to native select

Browse Source
This commit is contained in:
psychedelicious
2025-04-23 17:47:54 +10:00
committed by Mary Hipp Rogers
parent 8ed5585285
commit 07bcf3c446
3 changed files with 17 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@@ -387,7 +387,7 @@ export type StagingAreaImage = {
offsetY: number;
};
const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
export const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
export type AspectRatioID = z.infer<typeof zAspectRatioID>;
export const isAspectRatioID = (v: string): v is AspectRatioID => zAspectRatioID.safeParse(v).success;

31
invokeai/frontend/web/src/features/parameters/components/Bbox/BboxAspectRatioSelect.tsx
View File

@@ -1,15 +1,14 @@
import type { ComboboxOption, SystemStyleObject } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import type { SingleValue } from 'chakra-react-select';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { bboxAspectRatioIdChanged } from 'features/controlLayers/store/canvasSlice';
import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { selectAspectRatioID } from 'features/controlLayers/store/selectors';
import { isAspectRatioID } from 'features/controlLayers/store/types';
import { ASPECT_RATIO_OPTIONS } from 'features/parameters/components/Bbox/constants';
import { memo, useCallback, useMemo } from 'react';
import { isAspectRatioID, zAspectRatioID } from 'features/controlLayers/store/types';
import type { ChangeEventHandler } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi';
export const BboxAspectRatioSelect = memo(() => {
const { t } = useTranslation();
@@ -17,28 +16,30 @@ export const BboxAspectRatioSelect = memo(() => {
const id = useAppSelector(selectAspectRatioID);
const isStaging = useAppSelector(selectIsStaging);
const onChange = useCallback(
(v: SingleValue<ComboboxOption>) => {
if (!v || !isAspectRatioID(v.value)) {
const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
(e) => {
if (!isAspectRatioID(e.target.value)) {
return;
}
dispatch(bboxAspectRatioIdChanged({ id: v.value }));
dispatch(bboxAspectRatioIdChanged({ id: e.target.value }));
},
[dispatch]
);
const value = useMemo(() => ASPECT_RATIO_OPTIONS.filter((o) => o.value === id)[0], [id]);
return (
<FormControl isDisabled={isStaging}>
<InformationalPopover feature="paramAspect">
<FormLabel>{t('parameters.aspect')}</FormLabel>
</InformationalPopover>
<Combobox value={value} onChange={onChange} options={ASPECT_RATIO_OPTIONS} sx={selectStyles} />
<Select size="sm" value={id} onChange={onChange} cursor="pointer" iconSize="0.75rem" icon={<PiCaretDownBold />}>
{zAspectRatioID.options.map((ratio) => (
<option key={ratio} value={ratio}>
{ratio}
</option>
))}
</Select>
</FormControl>
);
});
BboxAspectRatioSelect.displayName = 'BboxAspectRatioSelect';
const selectStyles: SystemStyleObject = { minW: 24 };

12
invokeai/frontend/web/src/features/parameters/components/Bbox/constants.ts
View File

@@ -1,17 +1,5 @@
import type { ComboboxOption } from '@invoke-ai/ui-library';
import type { AspectRatioID } from 'features/controlLayers/store/types';
export const ASPECT_RATIO_OPTIONS: ComboboxOption[] = [
{ label: 'Free' as const, value: 'Free' },
{ label: '16:9' as const, value: '16:9' },
{ label: '3:2' as const, value: '3:2' },
{ label: '4:3' as const, value: '4:3' },
{ label: '1:1' as const, value: '1:1' },
{ label: '3:4' as const, value: '3:4' },
{ label: '2:3' as const, value: '2:3' },
{ label: '9:16' as const, value: '9:16' },
] as const;
export const ASPECT_RATIO_MAP: Record<Exclude<AspectRatioID, 'Free'>, { ratio: number; inverseID: AspectRatioID }> = {
'16:9': { ratio: 16 / 9, inverseID: '9:16' },
'3:2': { ratio: 3 / 2, inverseID: '2:3' },