mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
chore(ui): delete unused files
This commit is contained in:
psychedelicious
parent
71e298b722
commit
5eaea9dd64
@ -1,43 +0,0 @@
|
|||||||
import { Box, Flex, Icon } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { FaExclamation } from 'react-icons/fa';
|
|
||||||
|
|
||||||
const IAIErrorLoadingImageFallback = () => {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
height: 'full',
|
|
||||||
width: 'full',
|
|
||||||
'::before': {
|
|
||||||
content: "''",
|
|
||||||
display: 'block',
|
|
||||||
pt: '100%',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
insetInlineStart: 0,
|
|
||||||
height: 'full',
|
|
||||||
width: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
borderRadius: 'base',
|
|
||||||
bg: 'base.100',
|
|
||||||
color: 'base.500',
|
|
||||||
_dark: {
|
|
||||||
color: 'base.700',
|
|
||||||
bg: 'base.850',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon as={FaExclamation} boxSize={16} opacity={0.7} />
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(IAIErrorLoadingImageFallback);
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { chakra } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Chakra-enabled <form />
|
|
||||||
*/
|
|
||||||
const IAIForm = chakra.form;
|
|
||||||
|
|
||||||
export default IAIForm;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { FormErrorMessage, FormErrorMessageProps } from '@chakra-ui/react';
|
|
||||||
import { ReactNode } from 'react';
|
|
||||||
|
|
||||||
type IAIFormErrorMessageProps = FormErrorMessageProps & {
|
|
||||||
children: ReactNode | string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function IAIFormErrorMessage(props: IAIFormErrorMessageProps) {
|
|
||||||
const { children, ...rest } = props;
|
|
||||||
return (
|
|
||||||
<FormErrorMessage color="error.400" {...rest}>
|
|
||||||
{children}
|
|
||||||
</FormErrorMessage>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { FormHelperText, FormHelperTextProps } from '@chakra-ui/react';
|
|
||||||
import { ReactNode } from 'react';
|
|
||||||
|
|
||||||
type IAIFormHelperTextProps = FormHelperTextProps & {
|
|
||||||
children: ReactNode | string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function IAIFormHelperText(props: IAIFormHelperTextProps) {
|
|
||||||
const { children, ...rest } = props;
|
|
||||||
return (
|
|
||||||
<FormHelperText margin={0} color="base.400" {...rest}>
|
|
||||||
{children}
|
|
||||||
</FormHelperText>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { Flex, useColorMode } from '@chakra-ui/react';
|
|
||||||
import { ReactElement } from 'react';
|
|
||||||
import { mode } from 'theme/util/mode';
|
|
||||||
|
|
||||||
export function IAIFormItemWrapper({
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: ReactElement | ReactElement[];
|
|
||||||
}) {
|
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
flexDirection: 'column',
|
|
||||||
padding: 4,
|
|
||||||
rowGap: 4,
|
|
||||||
borderRadius: 'base',
|
|
||||||
width: 'full',
|
|
||||||
bg: mode('base.100', 'base.900')(colorMode),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import {
|
|
||||||
Checkbox,
|
|
||||||
CheckboxProps,
|
|
||||||
FormControl,
|
|
||||||
FormControlProps,
|
|
||||||
FormLabel,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import { memo, ReactNode } from 'react';
|
|
||||||
|
|
||||||
type IAIFullCheckboxProps = CheckboxProps & {
|
|
||||||
label: string | ReactNode;
|
|
||||||
formControlProps?: FormControlProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
const IAIFullCheckbox = (props: IAIFullCheckboxProps) => {
|
|
||||||
const { label, formControlProps, ...rest } = props;
|
|
||||||
return (
|
|
||||||
<FormControl {...formControlProps}>
|
|
||||||
<FormLabel>{label}</FormLabel>
|
|
||||||
<Checkbox colorScheme="accent" {...rest} />
|
|
||||||
</FormControl>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(IAIFullCheckbox);
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import { Flex, Icon } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { FaImage } from 'react-icons/fa';
|
|
||||||
|
|
||||||
const SelectImagePlaceholder = () => {
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
// bg: 'base.800',
|
|
||||||
borderRadius: 'base',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
aspectRatio: '1/1',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon color="base.400" boxSize={32} as={FaImage}></Icon>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(SelectImagePlaceholder);
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { useBreakpoint } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
export default function useResolution():
|
|
||||||
| 'mobile'
|
|
||||||
| 'tablet'
|
|
||||||
| 'desktop'
|
|
||||||
| 'unknown' {
|
|
||||||
const breakpointValue = useBreakpoint();
|
|
||||||
|
|
||||||
const mobileResolutions = ['base', 'sm'];
|
|
||||||
const tabletResolutions = ['md', 'lg'];
|
|
||||||
const desktopResolutions = ['xl', '2xl'];
|
|
||||||
|
|
||||||
if (mobileResolutions.includes(breakpointValue)) {
|
|
||||||
return 'mobile';
|
|
||||||
}
|
|
||||||
if (tabletResolutions.includes(breakpointValue)) {
|
|
||||||
return 'tablet';
|
|
||||||
}
|
|
||||||
if (desktopResolutions.includes(breakpointValue)) {
|
|
||||||
return 'desktop';
|
|
||||||
}
|
|
||||||
return 'unknown';
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import dateFormat from 'dateformat';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get a `now` timestamp with 1s precision, formatted as ISO datetime.
|
|
||||||
*/
|
|
||||||
export const getTimestamp = () =>
|
|
||||||
dateFormat(new Date(), `yyyy-mm-dd'T'HH:MM:ss:lo`);
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
// TODO: Restore variations
|
|
||||||
// Support code from v2.3 in here.
|
|
||||||
|
|
||||||
// export const stringToSeedWeights = (
|
|
||||||
// string: string
|
|
||||||
// ): InvokeAI.SeedWeights | boolean => {
|
|
||||||
// const stringPairs = string.split(',');
|
|
||||||
// const arrPairs = stringPairs.map((p) => p.split(':'));
|
|
||||||
// const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
|
|
||||||
// return { seed: Number(p[0]), weight: Number(p[1]) };
|
|
||||||
// });
|
|
||||||
|
|
||||||
// if (!validateSeedWeights(pairs)) {
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return pairs;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const validateSeedWeights = (
|
|
||||||
// seedWeights: InvokeAI.SeedWeights | string
|
|
||||||
// ): boolean => {
|
|
||||||
// return typeof seedWeights === 'string'
|
|
||||||
// ? Boolean(stringToSeedWeights(seedWeights))
|
|
||||||
// : Boolean(
|
|
||||||
// seedWeights.length &&
|
|
||||||
// !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
|
|
||||||
// const { seed, weight } = pair;
|
|
||||||
// const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
|
|
||||||
// const isWeightValid =
|
|
||||||
// !isNaN(parseInt(weight.toString(), 10)) &&
|
|
||||||
// weight >= 0 &&
|
|
||||||
// weight <= 1;
|
|
||||||
// return !(isSeedValid && isWeightValid);
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const seedWeightsToString = (
|
|
||||||
// seedWeights: InvokeAI.SeedWeights
|
|
||||||
// ): string => {
|
|
||||||
// return seedWeights.reduce((acc, pair, i, arr) => {
|
|
||||||
// const { seed, weight } = pair;
|
|
||||||
// acc += `${seed}:${weight}`;
|
|
||||||
// if (i !== arr.length - 1) {
|
|
||||||
// acc += ',';
|
|
||||||
// }
|
|
||||||
// return acc;
|
|
||||||
// }, '');
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const seedWeightsToArray = (
|
|
||||||
// seedWeights: InvokeAI.SeedWeights
|
|
||||||
// ): Array<Array<number>> => {
|
|
||||||
// return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
|
|
||||||
// pair.seed,
|
|
||||||
// pair.weight,
|
|
||||||
// ]);
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const stringToSeedWeightsArray = (
|
|
||||||
// string: string
|
|
||||||
// ): Array<Array<number>> => {
|
|
||||||
// const stringPairs = string.split(',');
|
|
||||||
// const arrPairs = stringPairs.map((p) => p.split(':'));
|
|
||||||
// return arrPairs.map(
|
|
||||||
// (p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
export default {};
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import Konva from 'konva';
|
|
||||||
import { IRect } from 'konva/lib/types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts a Konva node to a dataURL
|
|
||||||
* @param node - The Konva node to convert to a dataURL
|
|
||||||
* @param boundingBox - The bounding box to crop to
|
|
||||||
* @returns A dataURL of the node cropped to the bounding box
|
|
||||||
*/
|
|
||||||
export const konvaNodeToDataURL = (
|
|
||||||
node: Konva.Node,
|
|
||||||
boundingBox: IRect
|
|
||||||
): string => {
|
|
||||||
// get a dataURL of the bbox'd region
|
|
||||||
return node.toDataURL(boundingBox);
|
|
||||||
};
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import { useAppDispatch } from 'app/store/storeHooks';
|
|
||||||
import IAIButton from 'common/components/IAIButton';
|
|
||||||
import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
|
|
||||||
import { memo, useCallback } from 'react';
|
|
||||||
import { useControlAdapterControlImage } from '../hooks/useControlAdapterControlImage';
|
|
||||||
import { controlAdapterImageProcessed } from '../store/actions';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
id: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ControlAdapterPreprocessButton = ({ id }: Props) => {
|
|
||||||
const controlImage = useControlAdapterControlImage(id);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const isReady = useIsReadyToEnqueue();
|
|
||||||
|
|
||||||
const handleProcess = useCallback(() => {
|
|
||||||
dispatch(
|
|
||||||
controlAdapterImageProcessed({
|
|
||||||
id,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}, [id, dispatch]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIButton
|
|
||||||
size="sm"
|
|
||||||
onClick={handleProcess}
|
|
||||||
isDisabled={Boolean(!controlImage) || !isReady}
|
|
||||||
>
|
|
||||||
Preprocess
|
|
||||||
</IAIButton>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ControlAdapterPreprocessButton);
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
import { As, Badge, Flex } from '@chakra-ui/react';
|
|
||||||
import IAIDroppable from 'common/components/IAIDroppable';
|
|
||||||
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
|
|
||||||
import { TypesafeDroppableData } from 'features/dnd/types';
|
|
||||||
import { BoardId } from 'features/gallery/store/types';
|
|
||||||
import { ReactNode, memo } from 'react';
|
|
||||||
import BoardContextMenu from '../BoardContextMenu';
|
|
||||||
|
|
||||||
type GenericBoardProps = {
|
|
||||||
board_id: BoardId;
|
|
||||||
droppableData?: TypesafeDroppableData;
|
|
||||||
onClick: () => void;
|
|
||||||
isSelected: boolean;
|
|
||||||
icon: As;
|
|
||||||
label: string;
|
|
||||||
dropLabel?: ReactNode;
|
|
||||||
badgeCount?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const formatBadgeCount = (count: number) =>
|
|
||||||
Intl.NumberFormat('en-US', {
|
|
||||||
notation: 'compact',
|
|
||||||
maximumFractionDigits: 1,
|
|
||||||
}).format(count);
|
|
||||||
|
|
||||||
const GenericBoard = (props: GenericBoardProps) => {
|
|
||||||
const {
|
|
||||||
board_id,
|
|
||||||
droppableData,
|
|
||||||
onClick,
|
|
||||||
isSelected,
|
|
||||||
icon,
|
|
||||||
label,
|
|
||||||
badgeCount,
|
|
||||||
dropLabel,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BoardContextMenu board_id={board_id}>
|
|
||||||
{(ref) => (
|
|
||||||
<Flex
|
|
||||||
ref={ref}
|
|
||||||
sx={{
|
|
||||||
flexDir: 'column',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
borderRadius: 'base',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
onClick={onClick}
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderRadius: 'base',
|
|
||||||
w: 'full',
|
|
||||||
aspectRatio: '1/1',
|
|
||||||
overflow: 'hidden',
|
|
||||||
shadow: isSelected ? 'selected.light' : undefined,
|
|
||||||
_dark: { shadow: isSelected ? 'selected.dark' : undefined },
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IAINoContentFallback
|
|
||||||
boxSize={8}
|
|
||||||
icon={icon}
|
|
||||||
sx={{
|
|
||||||
border: '2px solid var(--invokeai-colors-base-200)',
|
|
||||||
_dark: { border: '2px solid var(--invokeai-colors-base-800)' },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
position: 'absolute',
|
|
||||||
insetInlineEnd: 0,
|
|
||||||
top: 0,
|
|
||||||
p: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{badgeCount !== undefined && (
|
|
||||||
<Badge variant="solid">{formatBadgeCount(badgeCount)}</Badge>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
<IAIDroppable data={droppableData} dropLabel={dropLabel} />
|
|
||||||
</Flex>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
fontWeight: isSelected ? 600 : undefined,
|
|
||||||
fontSize: 'sm',
|
|
||||||
color: isSelected ? 'base.900' : 'base.700',
|
|
||||||
_dark: { color: isSelected ? 'base.50' : 'base.200' },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</BoardContextMenu>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(GenericBoard);
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
import IAIButton from 'common/components/IAIButton';
|
|
||||||
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
|
|
||||||
import { memo, useCallback, useMemo } from 'react';
|
|
||||||
import { useBoardName } from 'services/api/hooks/useBoardName';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
board_id: 'images' | 'assets' | 'no_board';
|
|
||||||
};
|
|
||||||
|
|
||||||
const SystemBoardButton = ({ board_id }: Props) => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const selector = useMemo(
|
|
||||||
() =>
|
|
||||||
createSelector(
|
|
||||||
[stateSelector],
|
|
||||||
({ gallery }) => {
|
|
||||||
const { selectedBoardId } = gallery;
|
|
||||||
return { isSelected: selectedBoardId === board_id };
|
|
||||||
},
|
|
||||||
defaultSelectorOptions
|
|
||||||
),
|
|
||||||
[board_id]
|
|
||||||
);
|
|
||||||
|
|
||||||
const { isSelected } = useAppSelector(selector);
|
|
||||||
|
|
||||||
const boardName = useBoardName(board_id);
|
|
||||||
|
|
||||||
const handleClick = useCallback(() => {
|
|
||||||
dispatch(boardIdSelected({ boardId: board_id }));
|
|
||||||
}, [board_id, dispatch]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIButton
|
|
||||||
onClick={handleClick}
|
|
||||||
size="sm"
|
|
||||||
isChecked={isSelected}
|
|
||||||
sx={{
|
|
||||||
flexGrow: 1,
|
|
||||||
borderRadius: 'base',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{boardName}
|
|
||||||
</IAIButton>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(SystemBoardButton);
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { FaEyeSlash } from 'react-icons/fa';
|
|
||||||
|
|
||||||
const CurrentImageHidden = () => {
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
color: 'base.400',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FaEyeSlash fontSize="25vh" />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(CurrentImageHidden);
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { Flex, Spinner, SpinnerProps } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
type ImageFallbackSpinnerProps = SpinnerProps;
|
|
||||||
|
|
||||||
const ImageFallbackSpinner = (props: ImageFallbackSpinnerProps) => {
|
|
||||||
const { size = 'xl', ...rest } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'absolute',
|
|
||||||
color: 'base.400',
|
|
||||||
minH: 36,
|
|
||||||
minW: 36,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Spinner size={size} {...rest} />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ImageFallbackSpinner);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import {
|
|
||||||
ClipInputFieldTemplate,
|
|
||||||
ClipInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const ClipInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<ClipInputFieldValue, ClipInputFieldTemplate>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ClipInputFieldComponent);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import {
|
|
||||||
CollectionInputFieldTemplate,
|
|
||||||
CollectionInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const CollectionInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
CollectionInputFieldValue,
|
|
||||||
CollectionInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(CollectionInputFieldComponent);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import {
|
|
||||||
CollectionItemInputFieldTemplate,
|
|
||||||
CollectionItemInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const CollectionItemInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
CollectionItemInputFieldValue,
|
|
||||||
CollectionItemInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(CollectionItemInputFieldComponent);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import {
|
|
||||||
ConditioningInputFieldTemplate,
|
|
||||||
ConditioningInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const ConditioningInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
ConditioningInputFieldValue,
|
|
||||||
ConditioningInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ConditioningInputFieldComponent);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import {
|
|
||||||
ControlInputFieldTemplate,
|
|
||||||
ControlInputFieldValue,
|
|
||||||
ControlPolymorphicInputFieldTemplate,
|
|
||||||
ControlPolymorphicInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const ControlInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
ControlInputFieldValue | ControlPolymorphicInputFieldValue,
|
|
||||||
ControlInputFieldTemplate | ControlPolymorphicInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ControlInputFieldComponent);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import {
|
|
||||||
DenoiseMaskInputFieldTemplate,
|
|
||||||
DenoiseMaskInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const DenoiseMaskInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
DenoiseMaskInputFieldValue,
|
|
||||||
DenoiseMaskInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(DenoiseMaskInputFieldComponent);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import {
|
|
||||||
IPAdapterInputFieldTemplate,
|
|
||||||
IPAdapterInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
IPAdapterPolymorphicInputFieldValue,
|
|
||||||
IPAdapterPolymorphicInputFieldTemplate,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const IPAdapterInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
IPAdapterInputFieldValue | IPAdapterPolymorphicInputFieldValue,
|
|
||||||
IPAdapterInputFieldTemplate | IPAdapterPolymorphicInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(IPAdapterInputFieldComponent);
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
import {
|
|
||||||
ImageCollectionInputFieldTemplate,
|
|
||||||
ImageCollectionInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import IAIDndImage from 'common/components/IAIDndImage';
|
|
||||||
import IAIDropOverlay from 'common/components/IAIDropOverlay';
|
|
||||||
import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
|
|
||||||
import { NodesMultiImageDropData } from 'features/dnd/types';
|
|
||||||
import { isValidDrop } from 'features/dnd/util/isValidDrop';
|
|
||||||
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
|
|
||||||
|
|
||||||
const ImageCollectionInputFieldComponent = (
|
|
||||||
props: FieldComponentProps<
|
|
||||||
ImageCollectionInputFieldValue,
|
|
||||||
ImageCollectionInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
const { nodeId, field } = props;
|
|
||||||
|
|
||||||
// const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
// const handleDrop = useCallback(
|
|
||||||
// ({ image_name }: ImageDTO) => {
|
|
||||||
// dispatch(
|
|
||||||
// fieldValueChanged({
|
|
||||||
// nodeId,
|
|
||||||
// fieldName: field.name,
|
|
||||||
// value: uniqBy([...(field.value ?? []), { image_name }], 'image_name'),
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// },
|
|
||||||
// [dispatch, field.name, field.value, nodeId]
|
|
||||||
// );
|
|
||||||
|
|
||||||
const droppableData: NodesMultiImageDropData = {
|
|
||||||
id: `node-${nodeId}-${field.name}`,
|
|
||||||
actionType: 'SET_MULTI_NODES_IMAGE',
|
|
||||||
context: { nodeId: nodeId, fieldName: field.name },
|
|
||||||
};
|
|
||||||
|
|
||||||
const {
|
|
||||||
isOver,
|
|
||||||
setNodeRef: setDroppableRef,
|
|
||||||
active,
|
|
||||||
} = useDroppableTypesafe({
|
|
||||||
id: `node_${nodeId}`,
|
|
||||||
data: droppableData,
|
|
||||||
});
|
|
||||||
|
|
||||||
// const handleReset = useCallback(() => {
|
|
||||||
// dispatch(
|
|
||||||
// fieldValueChanged({
|
|
||||||
// nodeId,
|
|
||||||
// fieldName: field.name,
|
|
||||||
// value: undefined,
|
|
||||||
// })
|
|
||||||
// );
|
|
||||||
// }, [dispatch, field.name, nodeId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
ref={setDroppableRef}
|
|
||||||
sx={{
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'relative',
|
|
||||||
minH: '10rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{field.value?.map(({ image_name }) => (
|
|
||||||
<ImageSubField key={image_name} imageName={image_name} />
|
|
||||||
))}
|
|
||||||
{isValidDrop(droppableData, active) && <IAIDropOverlay isOver={isOver} />}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ImageCollectionInputFieldComponent);
|
|
||||||
|
|
||||||
type ImageSubFieldProps = { imageName: string };
|
|
||||||
|
|
||||||
const ImageSubField = (props: ImageSubFieldProps) => {
|
|
||||||
const { currentData: image } = useGetImageDTOQuery(props.imageName);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIDndImage imageDTO={image} isDropDisabled={true} isDragDisabled={true} />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import {
|
|
||||||
LatentsInputFieldTemplate,
|
|
||||||
LatentsInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
LatentsPolymorphicInputFieldValue,
|
|
||||||
LatentsPolymorphicInputFieldTemplate,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const LatentsInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
LatentsInputFieldValue | LatentsPolymorphicInputFieldValue,
|
|
||||||
LatentsInputFieldTemplate | LatentsPolymorphicInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(LatentsInputFieldComponent);
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import {
|
|
||||||
T2IAdapterInputFieldTemplate,
|
|
||||||
T2IAdapterInputFieldValue,
|
|
||||||
T2IAdapterPolymorphicInputFieldTemplate,
|
|
||||||
T2IAdapterPolymorphicInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const T2IAdapterInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<
|
|
||||||
T2IAdapterInputFieldValue | T2IAdapterPolymorphicInputFieldValue,
|
|
||||||
T2IAdapterInputFieldTemplate | T2IAdapterPolymorphicInputFieldTemplate
|
|
||||||
>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(T2IAdapterInputFieldComponent);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import {
|
|
||||||
UNetInputFieldTemplate,
|
|
||||||
UNetInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const UNetInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<UNetInputFieldValue, UNetInputFieldTemplate>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(UNetInputFieldComponent);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import {
|
|
||||||
VaeInputFieldTemplate,
|
|
||||||
VaeInputFieldValue,
|
|
||||||
FieldComponentProps,
|
|
||||||
} from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
const VaeInputFieldComponent = (
|
|
||||||
_props: FieldComponentProps<VaeInputFieldValue, VaeInputFieldTemplate>
|
|
||||||
) => {
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(VaeInputFieldComponent);
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { NODE_MIN_WIDTH } from 'features/nodes/types/constants';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { NodeResizeControl, NodeResizerProps } from 'reactflow';
|
|
||||||
|
|
||||||
// this causes https://github.com/invoke-ai/InvokeAI/issues/4140
|
|
||||||
// not using it for now
|
|
||||||
|
|
||||||
const NodeResizer = (props: NodeResizerProps) => {
|
|
||||||
const { ...rest } = props;
|
|
||||||
return (
|
|
||||||
<NodeResizeControl
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
border: 'none',
|
|
||||||
background: 'transparent',
|
|
||||||
width: 15,
|
|
||||||
height: 15,
|
|
||||||
bottom: 0,
|
|
||||||
right: 0,
|
|
||||||
}}
|
|
||||||
minWidth={NODE_MIN_WIDTH}
|
|
||||||
{...rest}
|
|
||||||
></NodeResizeControl>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(NodeResizer);
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import { Box, Flex } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
|
|
||||||
import { InvocationTemplate, NodeData } from 'features/nodes/types/types';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import NotesTextarea from '../../flow/nodes/Invocation/NotesTextarea';
|
|
||||||
import NodeTitle from '../../flow/nodes/common/NodeTitle';
|
|
||||||
import ScrollableContent from '../ScrollableContent';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
stateSelector,
|
|
||||||
({ nodes }) => {
|
|
||||||
const lastSelectedNodeId =
|
|
||||||
nodes.selectedNodes[nodes.selectedNodes.length - 1];
|
|
||||||
|
|
||||||
const lastSelectedNode = nodes.nodes.find(
|
|
||||||
(node) => node.id === lastSelectedNodeId
|
|
||||||
);
|
|
||||||
|
|
||||||
const lastSelectedNodeTemplate = lastSelectedNode
|
|
||||||
? nodes.nodeTemplates[lastSelectedNode.data.type]
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: lastSelectedNode?.data,
|
|
||||||
template: lastSelectedNodeTemplate,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
defaultSelectorOptions
|
|
||||||
);
|
|
||||||
|
|
||||||
const InspectorDetailsTab = () => {
|
|
||||||
const { data, template } = useAppSelector(selector);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
if (!template || !data) {
|
|
||||||
return (
|
|
||||||
<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Content data={data} template={template} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(InspectorDetailsTab);
|
|
||||||
|
|
||||||
const Content = (props: { data: NodeData; template: InvocationTemplate }) => {
|
|
||||||
const { data } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: 'relative',
|
|
||||||
w: 'full',
|
|
||||||
h: 'full',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ScrollableContent>
|
|
||||||
<Flex
|
|
||||||
sx={{
|
|
||||||
flexDir: 'column',
|
|
||||||
position: 'relative',
|
|
||||||
p: 1,
|
|
||||||
gap: 2,
|
|
||||||
w: 'full',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<NodeTitle nodeId={data.id} />
|
|
||||||
<NotesTextarea nodeId={data.id} />
|
|
||||||
</Flex>
|
|
||||||
</ScrollableContent>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { Box, Text } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAITextarea from 'common/components/IAITextarea';
|
|
||||||
import { workflowNotesChanged } from 'features/nodes/store/nodesSlice';
|
|
||||||
import { ChangeEvent, memo, useCallback } from 'react';
|
|
||||||
|
|
||||||
const selector = createSelector(stateSelector, ({ nodes }) => {
|
|
||||||
const { notes } = nodes.workflow;
|
|
||||||
|
|
||||||
return {
|
|
||||||
notes,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const WorkflowNotesTab = () => {
|
|
||||||
const { notes } = useAppSelector(selector);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const handleChangeNotes = useCallback(
|
|
||||||
(e: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
dispatch(workflowNotesChanged(e.target.value));
|
|
||||||
},
|
|
||||||
[dispatch]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ pos: 'relative', h: 'full' }}>
|
|
||||||
<IAITextarea
|
|
||||||
onChange={handleChangeNotes}
|
|
||||||
value={notes}
|
|
||||||
fontSize="sm"
|
|
||||||
sx={{ h: 'full', resize: 'none' }}
|
|
||||||
/>
|
|
||||||
<Box sx={{ pos: 'absolute', bottom: 2, right: 2 }}>
|
|
||||||
<Text
|
|
||||||
sx={{
|
|
||||||
fontSize: 'xs',
|
|
||||||
opacity: 0.5,
|
|
||||||
userSelect: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{notes.length}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(WorkflowNotesTab);
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
import { AnyInvocationType } from 'services/events/types';
|
|
||||||
|
|
||||||
export const makeTemplateSelector = (type: AnyInvocationType) =>
|
|
||||||
createSelector(
|
|
||||||
stateSelector,
|
|
||||||
({ nodes }) => nodes.nodeTemplates[type],
|
|
||||||
defaultSelectorOptions
|
|
||||||
);
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import IAICollapse from 'common/components/IAICollapse';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import ParamBoundingBoxHeight from './ParamBoundingBoxHeight';
|
|
||||||
import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
|
|
||||||
|
|
||||||
const ParamBoundingBoxCollapse = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAICollapse label={t('parameters.boundingBoxHeader')}>
|
|
||||||
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
|
|
||||||
<ParamBoundingBoxWidth />
|
|
||||||
<ParamBoundingBoxHeight />
|
|
||||||
</Flex>
|
|
||||||
</IAICollapse>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ParamBoundingBoxCollapse);
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
import IAISlider from 'common/components/IAISlider';
|
|
||||||
import { setThreshold } from 'features/parameters/store/generationSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
stateSelector,
|
|
||||||
(state) => {
|
|
||||||
const { threshold } = state.generation;
|
|
||||||
return {
|
|
||||||
threshold,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
defaultSelectorOptions
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function ParamNoiseThreshold() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { threshold } = useAppSelector(selector);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISlider
|
|
||||||
label={t('parameters.noiseThreshold')}
|
|
||||||
min={0}
|
|
||||||
max={20}
|
|
||||||
step={0.1}
|
|
||||||
onChange={(v) => dispatch(setThreshold(v))}
|
|
||||||
handleReset={() => dispatch(setThreshold(0))}
|
|
||||||
value={threshold}
|
|
||||||
withInput
|
|
||||||
withReset
|
|
||||||
withSliderMarks
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
import IAISlider from 'common/components/IAISlider';
|
|
||||||
import { setPerlin } from 'features/parameters/store/generationSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
stateSelector,
|
|
||||||
(state) => {
|
|
||||||
const { perlin } = state.generation;
|
|
||||||
return {
|
|
||||||
perlin,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
defaultSelectorOptions
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function ParamPerlinNoise() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { perlin } = useAppSelector(selector);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISlider
|
|
||||||
label={t('parameters.perlinNoise')}
|
|
||||||
min={0}
|
|
||||||
max={1}
|
|
||||||
step={0.05}
|
|
||||||
onChange={(v) => dispatch(setPerlin(v))}
|
|
||||||
handleReset={() => dispatch(setPerlin(0))}
|
|
||||||
value={perlin}
|
|
||||||
withInput
|
|
||||||
withReset
|
|
||||||
withSliderMarks
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISlider from 'common/components/IAISlider';
|
|
||||||
import { setVariationAmount } from 'features/parameters/store/generationSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function ParamVariationAmount() {
|
|
||||||
const variationAmount = useAppSelector(
|
|
||||||
(state: RootState) => state.generation.variationAmount
|
|
||||||
);
|
|
||||||
|
|
||||||
const shouldGenerateVariations = useAppSelector(
|
|
||||||
(state: RootState) => state.generation.shouldGenerateVariations
|
|
||||||
);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISlider
|
|
||||||
label={t('parameters.variationAmount')}
|
|
||||||
value={variationAmount}
|
|
||||||
step={0.01}
|
|
||||||
min={0}
|
|
||||||
max={1}
|
|
||||||
isDisabled={!shouldGenerateVariations}
|
|
||||||
onChange={(v) => dispatch(setVariationAmount(v))}
|
|
||||||
handleReset={() => dispatch(setVariationAmount(0.1))}
|
|
||||||
withInput
|
|
||||||
withReset
|
|
||||||
withSliderMarks
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
// TODO: variations
|
|
||||||
|
|
||||||
// import { Flex } from '@chakra-ui/react';
|
|
||||||
// import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
// import { stateSelector } from 'app/store/store';
|
|
||||||
// import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
// import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|
||||||
// import IAICollapse from 'common/components/IAICollapse';
|
|
||||||
// import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
|
|
||||||
// import { memo } from 'react';
|
|
||||||
// import { useTranslation } from 'react-i18next';
|
|
||||||
// import ParamVariationAmount from './ParamVariationAmount';
|
|
||||||
// import { ParamVariationToggle } from './ParamVariationToggle';
|
|
||||||
// import ParamVariationWeights from './ParamVariationWeights';
|
|
||||||
|
|
||||||
// const selector = createSelector(
|
|
||||||
// stateSelector,
|
|
||||||
// (state) => {
|
|
||||||
// const activeLabel = state.generation.shouldGenerateVariations
|
|
||||||
// ? 'Enabled'
|
|
||||||
// : undefined;
|
|
||||||
|
|
||||||
// return { activeLabel };
|
|
||||||
// },
|
|
||||||
// defaultSelectorOptions
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const ParamVariationCollapse = () => {
|
|
||||||
// const { t } = useTranslation();
|
|
||||||
// const { activeLabel } = useAppSelector(selector);
|
|
||||||
|
|
||||||
// const isVariationEnabled = useFeatureStatus('variation').isFeatureEnabled;
|
|
||||||
|
|
||||||
// if (!isVariationEnabled) {
|
|
||||||
// return null;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <IAICollapse label={t('parameters.variations')} activeLabel={activeLabel}>
|
|
||||||
// <Flex sx={{ gap: 2, flexDirection: 'column' }}>
|
|
||||||
// <ParamVariationToggle />
|
|
||||||
// <ParamVariationAmount />
|
|
||||||
// <ParamVariationWeights />
|
|
||||||
// </Flex>
|
|
||||||
// </IAICollapse>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default memo(ParamVariationCollapse);
|
|
||||||
|
|
||||||
export default {};
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import type { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISwitch from 'common/components/IAISwitch';
|
|
||||||
import { setShouldGenerateVariations } from 'features/parameters/store/generationSlice';
|
|
||||||
import { ChangeEvent } from 'react';
|
|
||||||
|
|
||||||
export const ParamVariationToggle = () => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const shouldGenerateVariations = useAppSelector(
|
|
||||||
(state: RootState) => state.generation.shouldGenerateVariations
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
dispatch(setShouldGenerateVariations(e.target.checked));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISwitch
|
|
||||||
label="Enable Variations"
|
|
||||||
isChecked={shouldGenerateVariations}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
// TODO: variations
|
|
||||||
|
|
||||||
// import { RootState } from 'app/store/store';
|
|
||||||
// import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
// import IAIInput from 'common/components/IAIInput';
|
|
||||||
// import { validateSeedWeights } from 'common/util/seedWeightPairs';
|
|
||||||
// import { setSeedWeights } from 'features/parameters/store/generationSlice';
|
|
||||||
// import { ChangeEvent } from 'react';
|
|
||||||
// import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
// export default function ParamVariationWeights() {
|
|
||||||
// const seedWeights = useAppSelector(
|
|
||||||
// (state: RootState) => state.generation.seedWeights
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const shouldGenerateVariations = useAppSelector(
|
|
||||||
// (state: RootState) => state.generation.shouldGenerateVariations
|
|
||||||
// );
|
|
||||||
|
|
||||||
// const { t } = useTranslation();
|
|
||||||
|
|
||||||
// const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
// const handleChangeSeedWeights = (e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
// dispatch(setSeedWeights(e.target.value));
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <IAIInput
|
|
||||||
// label={t('parameters.seedWeights')}
|
|
||||||
// value={seedWeights}
|
|
||||||
// isInvalid={
|
|
||||||
// shouldGenerateVariations &&
|
|
||||||
// !(validateSeedWeights(seedWeights) || seedWeights === '')
|
|
||||||
// }
|
|
||||||
// isDisabled={!shouldGenerateVariations}
|
|
||||||
// onChange={handleChangeSeedWeights}
|
|
||||||
// />
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
export default {};
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
|
|
||||||
export const postprocessingSelector = (state: RootState) =>
|
|
||||||
state.postprocessing;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { memo } from 'react';
|
|
||||||
import QueueItemCard from './common/QueueItemCard';
|
|
||||||
import { useGetCurrentQueueItemQuery } from 'services/api/endpoints/queue';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const CurrentQueueItemCard = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data: currentQueueItemData } = useGetCurrentQueueItemQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<QueueItemCard
|
|
||||||
label={t('queue.current')}
|
|
||||||
session_queue_item={currentQueueItemData}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(CurrentQueueItemCard);
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { memo } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useGetNextQueueItemQuery } from 'services/api/endpoints/queue';
|
|
||||||
import QueueItemCard from './common/QueueItemCard';
|
|
||||||
|
|
||||||
const NextQueueItemCard = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data: nextQueueItemData } = useGetNextQueueItemQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<QueueItemCard
|
|
||||||
label={t('queue.next')}
|
|
||||||
session_queue_item={nextQueueItemData}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(NextQueueItemCard);
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import { Flex, Skeleton } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { COLUMN_WIDTHS } from './constants';
|
|
||||||
|
|
||||||
const QueueItemSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<Flex alignItems="center" p={1.5} gap={4} minH={9} h="full" w="full">
|
|
||||||
<Flex
|
|
||||||
w={COLUMN_WIDTHS.number}
|
|
||||||
justifyContent="flex-end"
|
|
||||||
alignItems="center"
|
|
||||||
>
|
|
||||||
<Skeleton w="full" h="full">
|
|
||||||
|
|
||||||
</Skeleton>
|
|
||||||
</Flex>
|
|
||||||
<Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center">
|
|
||||||
<Skeleton w="full" h="full">
|
|
||||||
|
|
||||||
</Skeleton>
|
|
||||||
</Flex>
|
|
||||||
<Flex w={COLUMN_WIDTHS.time} alignItems="center">
|
|
||||||
<Skeleton w="full" h="full">
|
|
||||||
|
|
||||||
</Skeleton>
|
|
||||||
</Flex>
|
|
||||||
<Flex w={COLUMN_WIDTHS.batchId} alignItems="center">
|
|
||||||
<Skeleton w="full" h="full">
|
|
||||||
|
|
||||||
</Skeleton>
|
|
||||||
</Flex>
|
|
||||||
<Flex w={COLUMN_WIDTHS.fieldValues} alignItems="center" flexGrow={1}>
|
|
||||||
<Skeleton w="full" h="full">
|
|
||||||
|
|
||||||
</Skeleton>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(QueueItemSkeleton);
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { Flex, Heading, Text } from '@chakra-ui/react';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
|
|
||||||
|
|
||||||
const QueueStatusCard = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { data: queueStatus } = useGetQueueStatusQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
layerStyle="second"
|
|
||||||
borderRadius="base"
|
|
||||||
p={2}
|
|
||||||
flexDir="column"
|
|
||||||
gap={1}
|
|
||||||
w={96}
|
|
||||||
>
|
|
||||||
<Heading size="md">{t('queue.status')}</Heading>
|
|
||||||
<Text>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{t('queue.pending')}:{' '}
|
|
||||||
</Text>
|
|
||||||
{queueStatus?.queue.pending}
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{t('queue.in_progress')}:{' '}
|
|
||||||
</Text>
|
|
||||||
{queueStatus?.queue.in_progress}
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{t('queue.completed')}:{' '}
|
|
||||||
</Text>
|
|
||||||
{queueStatus?.queue.completed}
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{t('queue.failed')}:{' '}
|
|
||||||
</Text>
|
|
||||||
{queueStatus?.queue.failed}
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{t('queue.canceled')}:{' '}
|
|
||||||
</Text>
|
|
||||||
{queueStatus?.queue.canceled}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(QueueStatusCard);
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import { Flex, Heading, Text, Tooltip } from '@chakra-ui/react';
|
|
||||||
import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import { components } from 'services/api/schema';
|
|
||||||
|
|
||||||
const QueueItemCard = ({
|
|
||||||
session_queue_item,
|
|
||||||
label,
|
|
||||||
}: {
|
|
||||||
session_queue_item?: components['schemas']['SessionQueueItem'] | null;
|
|
||||||
label: string;
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
layerStyle="second"
|
|
||||||
borderRadius="base"
|
|
||||||
w="full"
|
|
||||||
p={2}
|
|
||||||
flexDir="column"
|
|
||||||
gap={1}
|
|
||||||
>
|
|
||||||
<Flex justifyContent="space-between" alignItems="flex-start">
|
|
||||||
<Heading size="md">{label}</Heading>
|
|
||||||
{session_queue_item && (
|
|
||||||
<Tooltip label="Batch ID" placement="top" hasArrow>
|
|
||||||
<Text fontSize="xs">{session_queue_item.batch_id}</Text>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
{session_queue_item && (
|
|
||||||
<ScrollableContent>
|
|
||||||
<Text>Batch Values: </Text>
|
|
||||||
{session_queue_item.field_values &&
|
|
||||||
session_queue_item.field_values
|
|
||||||
.filter((v) => v.node_path !== 'metadata_accumulator')
|
|
||||||
.map(({ node_path, field_name, value }) => (
|
|
||||||
<Text
|
|
||||||
key={`${session_queue_item.item_id}.${node_path}.${field_name}.${value}`}
|
|
||||||
>
|
|
||||||
<Text as="span" fontWeight={600}>
|
|
||||||
{node_path}.{field_name}
|
|
||||||
</Text>
|
|
||||||
: {value}
|
|
||||||
</Text>
|
|
||||||
))}
|
|
||||||
</ScrollableContent>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(QueueItemCard);
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { Box } from '@chakra-ui/react';
|
|
||||||
import { memo, useMemo } from 'react';
|
|
||||||
import { SessionQueueItemStatus } from 'services/api/endpoints/queue';
|
|
||||||
|
|
||||||
const STATUSES = {
|
|
||||||
pending: { colorScheme: 'cyan', translationKey: 'queue.pending' },
|
|
||||||
in_progress: { colorScheme: 'yellow', translationKey: 'queue.in_progress' },
|
|
||||||
completed: { colorScheme: 'green', translationKey: 'queue.completed' },
|
|
||||||
failed: { colorScheme: 'red', translationKey: 'queue.failed' },
|
|
||||||
canceled: { colorScheme: 'orange', translationKey: 'queue.canceled' },
|
|
||||||
};
|
|
||||||
|
|
||||||
const QueueStatusDot = ({ status }: { status: SessionQueueItemStatus }) => {
|
|
||||||
const sx = useMemo(
|
|
||||||
() => ({
|
|
||||||
w: 2,
|
|
||||||
h: 2,
|
|
||||||
bg: `${STATUSES[status].colorScheme}.${500}`,
|
|
||||||
_dark: {
|
|
||||||
bg: `${STATUSES[status].colorScheme}.${400}`,
|
|
||||||
},
|
|
||||||
borderRadius: '100%',
|
|
||||||
}),
|
|
||||||
[status]
|
|
||||||
);
|
|
||||||
return <Box sx={sx} />;
|
|
||||||
};
|
|
||||||
export default memo(QueueStatusDot);
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export const formatNumberShort = (num: number) =>
|
|
||||||
Intl.NumberFormat('en-US', {
|
|
||||||
notation: 'standard',
|
|
||||||
}).format(num);
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import {
|
|
||||||
Flex,
|
|
||||||
Modal,
|
|
||||||
ModalBody,
|
|
||||||
ModalContent,
|
|
||||||
ModalFooter,
|
|
||||||
ModalHeader,
|
|
||||||
ModalOverlay,
|
|
||||||
Text,
|
|
||||||
useDisclosure,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
|
|
||||||
import IAIButton from 'common/components/IAIButton';
|
|
||||||
import { memo, useCallback, useEffect, useState } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
onSettingsModalClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ResetWebUIButton = ({ onSettingsModalClose }: Props) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [countdown, setCountdown] = useState(5);
|
|
||||||
|
|
||||||
const {
|
|
||||||
isOpen: isRefreshModalOpen,
|
|
||||||
onOpen: onRefreshModalOpen,
|
|
||||||
onClose: onRefreshModalClose,
|
|
||||||
} = useDisclosure();
|
|
||||||
|
|
||||||
const handleClickResetWebUI = useCallback(() => {
|
|
||||||
// Only remove our keys
|
|
||||||
Object.keys(window.localStorage).forEach((key) => {
|
|
||||||
if (
|
|
||||||
LOCALSTORAGE_KEYS.includes(key) ||
|
|
||||||
key.startsWith(LOCALSTORAGE_PREFIX)
|
|
||||||
) {
|
|
||||||
localStorage.removeItem(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
onSettingsModalClose();
|
|
||||||
onRefreshModalOpen();
|
|
||||||
setInterval(() => setCountdown((prev) => prev - 1), 1000);
|
|
||||||
}, [onSettingsModalClose, onRefreshModalOpen]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (countdown <= 0) {
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
}, [countdown]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<IAIButton colorScheme="error" onClick={handleClickResetWebUI}>
|
|
||||||
{t('settings.resetWebUI')}
|
|
||||||
</IAIButton>
|
|
||||||
<Modal
|
|
||||||
closeOnOverlayClick={false}
|
|
||||||
isOpen={isRefreshModalOpen}
|
|
||||||
onClose={onRefreshModalClose}
|
|
||||||
isCentered
|
|
||||||
closeOnEsc={false}
|
|
||||||
>
|
|
||||||
<ModalOverlay backdropFilter="blur(40px)" />
|
|
||||||
<ModalContent>
|
|
||||||
<ModalHeader />
|
|
||||||
<ModalBody>
|
|
||||||
<Flex justifyContent="center">
|
|
||||||
<Text fontSize="lg">
|
|
||||||
<Text>{t('settings.resetComplete')}</Text>
|
|
||||||
<Text>Reloading in {countdown}...</Text>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</ModalBody>
|
|
||||||
<ModalFooter />
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ResetWebUIButton);
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import { createAction } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
export const sessionReadyToInvoke = createAction('system/sessionReadyToInvoke');
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
// TODO: split system slice inot this
|
|
||||||
|
|
||||||
// import type { PayloadAction } from '@reduxjs/toolkit';
|
|
||||||
// import { createSlice } from '@reduxjs/toolkit';
|
|
||||||
// import { socketSubscribed, socketUnsubscribed } from 'services/events/actions';
|
|
||||||
|
|
||||||
// export type SessionState = {
|
|
||||||
// /**
|
|
||||||
// * The current socket session id
|
|
||||||
// */
|
|
||||||
// sessionId: string;
|
|
||||||
// /**
|
|
||||||
// * Whether the current session is a canvas session. Needed to manage the staging area.
|
|
||||||
// */
|
|
||||||
// isCanvasSession: boolean;
|
|
||||||
// /**
|
|
||||||
// * When a session is canceled, its ID is stored here until a new session is created.
|
|
||||||
// */
|
|
||||||
// canceledSessionId: string;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const initialSessionState: SessionState = {
|
|
||||||
// sessionId: '',
|
|
||||||
// isCanvasSession: false,
|
|
||||||
// canceledSessionId: '',
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const sessionSlice = createSlice({
|
|
||||||
// name: 'session',
|
|
||||||
// initialState: initialSessionState,
|
|
||||||
// reducers: {
|
|
||||||
// sessionIdChanged: (state, action: PayloadAction<string>) => {
|
|
||||||
// state.sessionId = action.payload;
|
|
||||||
// },
|
|
||||||
// isCanvasSessionChanged: (state, action: PayloadAction<boolean>) => {
|
|
||||||
// state.isCanvasSession = action.payload;
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// extraReducers: (builder) => {
|
|
||||||
// /**
|
|
||||||
// * Socket Subscribed
|
|
||||||
// */
|
|
||||||
// builder.addCase(socketSubscribed, (state, action) => {
|
|
||||||
// state.sessionId = action.payload.sessionId;
|
|
||||||
// state.canceledSessionId = '';
|
|
||||||
// });
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Socket Unsubscribed
|
|
||||||
// */
|
|
||||||
// builder.addCase(socketUnsubscribed, (state) => {
|
|
||||||
// state.sessionId = '';
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
// export const { sessionIdChanged, isCanvasSessionChanged } =
|
|
||||||
// sessionSlice.actions;
|
|
||||||
|
|
||||||
// export default sessionSlice.reducer;
|
|
||||||
|
|
||||||
export default {};
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
|
||||||
import { PropsWithChildren, memo } from 'react';
|
|
||||||
const OverlayScrollable = (props: PropsWithChildren) => {
|
|
||||||
return (
|
|
||||||
<OverlayScrollbarsComponent
|
|
||||||
defer
|
|
||||||
style={{ height: '100%', width: '100%' }}
|
|
||||||
options={{
|
|
||||||
scrollbars: {
|
|
||||||
visibility: 'auto',
|
|
||||||
autoHide: 'move',
|
|
||||||
autoHideDelay: 1300,
|
|
||||||
theme: 'os-theme-dark',
|
|
||||||
},
|
|
||||||
overflow: { x: 'hidden' },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</OverlayScrollbarsComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default memo(OverlayScrollable);
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
|
|
||||||
export const modelmanagerSelector = (state: RootState) => state.modelmanager;
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import UnifiedCanvasBrushSettings from './UnifiedCanvasBrushSettings';
|
|
||||||
import UnifiedCanvasLimitStrokesToBox from './UnifiedCanvasLimitStrokesToBox';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasBaseBrushSettings() {
|
|
||||||
return (
|
|
||||||
<Flex gap={4} alignItems="center">
|
|
||||||
<UnifiedCanvasBrushSettings />
|
|
||||||
<UnifiedCanvasLimitStrokesToBox />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import UnifiedCanvasBrushSize from './UnifiedCanvasBrushSize';
|
|
||||||
import UnifiedCanvasColorPicker from './UnifiedCanvasColorPicker';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasBrushSettings() {
|
|
||||||
return (
|
|
||||||
<Flex columnGap={4} alignItems="center">
|
|
||||||
<UnifiedCanvasBrushSize />
|
|
||||||
<UnifiedCanvasColorPicker />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISlider from 'common/components/IAISlider';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { setBrushSize } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasBrushSize() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const brushSize = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.brushSize
|
|
||||||
);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['BracketLeft'],
|
|
||||||
() => {
|
|
||||||
dispatch(setBrushSize(Math.max(brushSize - 5, 5)));
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[brushSize]
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['BracketRight'],
|
|
||||||
() => {
|
|
||||||
dispatch(setBrushSize(Math.min(brushSize + 5, 500)));
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[brushSize]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISlider
|
|
||||||
label={t('unifiedCanvas.brushSize')}
|
|
||||||
value={brushSize}
|
|
||||||
withInput
|
|
||||||
onChange={(newSize) => dispatch(setBrushSize(newSize))}
|
|
||||||
sliderNumberInputProps={{ max: 500 }}
|
|
||||||
isCompact
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { useAppDispatch } from 'app/store/storeHooks';
|
|
||||||
import IAIButton from 'common/components/IAIButton';
|
|
||||||
|
|
||||||
import { clearMask } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { FaTrash } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasClearMask() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const handleClearMask = () => dispatch(clearMask());
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIButton
|
|
||||||
size="sm"
|
|
||||||
leftIcon={<FaTrash />}
|
|
||||||
onClick={handleClearMask}
|
|
||||||
tooltip={`${t('unifiedCanvas.clearMask')} (Shift+C)`}
|
|
||||||
>
|
|
||||||
{t('unifiedCanvas.betaClear')}
|
|
||||||
</IAIButton>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
import { Box, Flex } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIColorPicker from 'common/components/IAIColorPicker';
|
|
||||||
import IAIPopover from 'common/components/IAIPopover';
|
|
||||||
import {
|
|
||||||
canvasSelector,
|
|
||||||
isStagingSelector,
|
|
||||||
} from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { setBrushColor, setMaskColor } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { clamp, isEqual } from 'lodash-es';
|
|
||||||
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
[canvasSelector, isStagingSelector],
|
|
||||||
(canvas, isStaging) => {
|
|
||||||
const { brushColor, maskColor, layer } = canvas;
|
|
||||||
return {
|
|
||||||
brushColor,
|
|
||||||
maskColor,
|
|
||||||
layer,
|
|
||||||
isStaging,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function UnifiedCanvasColorPicker() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { brushColor, maskColor, layer, isStaging } = useAppSelector(selector);
|
|
||||||
|
|
||||||
const currentColorDisplay = () => {
|
|
||||||
if (layer === 'base') {
|
|
||||||
return `rgba(${brushColor.r},${brushColor.g},${brushColor.b},${brushColor.a})`;
|
|
||||||
}
|
|
||||||
if (layer === 'mask') {
|
|
||||||
return `rgba(${maskColor.r},${maskColor.g},${maskColor.b},${maskColor.a})`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+BracketLeft'],
|
|
||||||
() => {
|
|
||||||
dispatch(
|
|
||||||
setBrushColor({
|
|
||||||
...brushColor,
|
|
||||||
a: clamp(brushColor.a - 0.05, 0.05, 1),
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[brushColor]
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+BracketRight'],
|
|
||||||
() => {
|
|
||||||
dispatch(
|
|
||||||
setBrushColor({
|
|
||||||
...brushColor,
|
|
||||||
a: clamp(brushColor.a + 0.05, 0.05, 1),
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[brushColor]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIPopover
|
|
||||||
triggerComponent={
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: 7,
|
|
||||||
height: 7,
|
|
||||||
minWidth: 7,
|
|
||||||
minHeight: 7,
|
|
||||||
borderRadius: 'full',
|
|
||||||
bg: currentColorDisplay(),
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Flex minWidth={60} direction="column" gap={4} width="100%">
|
|
||||||
{layer === 'base' && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
paddingTop: 2,
|
|
||||||
paddingBottom: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IAIColorPicker
|
|
||||||
color={brushColor}
|
|
||||||
onChange={(newColor) => dispatch(setBrushColor(newColor))}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{layer === 'mask' && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
paddingTop: 2,
|
|
||||||
paddingBottom: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IAIColorPicker
|
|
||||||
color={maskColor}
|
|
||||||
onChange={(newColor) => dispatch(setMaskColor(newColor))}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</IAIPopover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setShouldDarkenOutsideBoundingBox } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasDarkenOutsideSelection() {
|
|
||||||
const shouldDarkenOutsideBoundingBox = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.shouldDarkenOutsideBoundingBox
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.betaDarkenOutside')}
|
|
||||||
isChecked={shouldDarkenOutsideBoundingBox}
|
|
||||||
onChange={(e) =>
|
|
||||||
dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setIsMaskEnabled } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasEnableMask() {
|
|
||||||
const isMaskEnabled = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.isMaskEnabled
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const handleToggleEnableMask = () =>
|
|
||||||
dispatch(setIsMaskEnabled(!isMaskEnabled));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={`${t('unifiedCanvas.enableMask')} (H)`}
|
|
||||||
isChecked={isMaskEnabled}
|
|
||||||
onChange={handleToggleEnableMask}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setShouldRestrictStrokesToBox } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasLimitStrokesToBox() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const shouldRestrictStrokesToBox = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.shouldRestrictStrokesToBox
|
|
||||||
);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.betaLimitToBox')}
|
|
||||||
isChecked={shouldRestrictStrokesToBox}
|
|
||||||
onChange={(e) =>
|
|
||||||
dispatch(setShouldRestrictStrokesToBox(e.target.checked))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import UnifiedCanvasBrushSettings from './UnifiedCanvasBrushSettings';
|
|
||||||
import UnifiedCanvasClearMask from './UnifiedCanvasClearMask';
|
|
||||||
import UnifiedCanvasEnableMask from './UnifiedCanvasEnableMask';
|
|
||||||
import UnifiedCanvasPreserveMask from './UnifiedCanvasPreserveMask';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasMaskBrushSettings() {
|
|
||||||
return (
|
|
||||||
<Flex gap={4} alignItems="center">
|
|
||||||
<UnifiedCanvasBrushSettings />
|
|
||||||
<UnifiedCanvasEnableMask />
|
|
||||||
<UnifiedCanvasPreserveMask />
|
|
||||||
<UnifiedCanvasClearMask />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/layout';
|
|
||||||
import UnifiedCanvasDarkenOutsideSelection from './UnifiedCanvasDarkenOutsideSelection';
|
|
||||||
import UnifiedCanvasShowGrid from './UnifiedCanvasShowGrid';
|
|
||||||
import UnifiedCanvasSnapToGrid from './UnifiedCanvasSnapToGrid';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasMoveSettings() {
|
|
||||||
return (
|
|
||||||
<Flex alignItems="center" gap={4}>
|
|
||||||
<UnifiedCanvasShowGrid />
|
|
||||||
<UnifiedCanvasSnapToGrid />
|
|
||||||
<UnifiedCanvasDarkenOutsideSelection />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setShouldPreserveMaskedArea } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasPreserveMask() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const shouldPreserveMaskedArea = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.shouldPreserveMaskedArea
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.betaPreserveMasked')}
|
|
||||||
isChecked={shouldPreserveMaskedArea}
|
|
||||||
onChange={(e) => dispatch(setShouldPreserveMaskedArea(e.target.checked))}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import IAIPopover from 'common/components/IAIPopover';
|
|
||||||
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import {
|
|
||||||
setShouldAntialias,
|
|
||||||
setShouldAutoSave,
|
|
||||||
setShouldCropToBoundingBoxOnSave,
|
|
||||||
setShouldShowCanvasDebugInfo,
|
|
||||||
setShouldShowIntermediates,
|
|
||||||
} from 'features/canvas/store/canvasSlice';
|
|
||||||
|
|
||||||
import { FaWrench } from 'react-icons/fa';
|
|
||||||
|
|
||||||
import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
export const canvasControlsSelector = createSelector(
|
|
||||||
[canvasSelector],
|
|
||||||
(canvas) => {
|
|
||||||
const {
|
|
||||||
shouldAutoSave,
|
|
||||||
shouldCropToBoundingBoxOnSave,
|
|
||||||
shouldShowCanvasDebugInfo,
|
|
||||||
shouldShowIntermediates,
|
|
||||||
shouldAntialias,
|
|
||||||
} = canvas;
|
|
||||||
|
|
||||||
return {
|
|
||||||
shouldAutoSave,
|
|
||||||
shouldCropToBoundingBoxOnSave,
|
|
||||||
shouldShowCanvasDebugInfo,
|
|
||||||
shouldShowIntermediates,
|
|
||||||
shouldAntialias,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const UnifiedCanvasSettings = () => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const {
|
|
||||||
shouldAutoSave,
|
|
||||||
shouldCropToBoundingBoxOnSave,
|
|
||||||
shouldShowCanvasDebugInfo,
|
|
||||||
shouldShowIntermediates,
|
|
||||||
shouldAntialias,
|
|
||||||
} = useAppSelector(canvasControlsSelector);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIPopover
|
|
||||||
isLazy={false}
|
|
||||||
triggerComponent={
|
|
||||||
<IAIIconButton
|
|
||||||
tooltip={t('unifiedCanvas.canvasSettings')}
|
|
||||||
tooltipProps={{
|
|
||||||
placement: 'bottom',
|
|
||||||
}}
|
|
||||||
aria-label={t('unifiedCanvas.canvasSettings')}
|
|
||||||
icon={<FaWrench />}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Flex direction="column" gap={2}>
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.showIntermediates')}
|
|
||||||
isChecked={shouldShowIntermediates}
|
|
||||||
onChange={(e) =>
|
|
||||||
dispatch(setShouldShowIntermediates(e.target.checked))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.autoSaveToGallery')}
|
|
||||||
isChecked={shouldAutoSave}
|
|
||||||
onChange={(e) => dispatch(setShouldAutoSave(e.target.checked))}
|
|
||||||
/>
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.saveBoxRegionOnly')}
|
|
||||||
isChecked={shouldCropToBoundingBoxOnSave}
|
|
||||||
onChange={(e) =>
|
|
||||||
dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.showCanvasDebugInfo')}
|
|
||||||
isChecked={shouldShowCanvasDebugInfo}
|
|
||||||
onChange={(e) =>
|
|
||||||
dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.antialiasing')}
|
|
||||||
isChecked={shouldAntialias}
|
|
||||||
onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
|
|
||||||
/>
|
|
||||||
<ClearCanvasHistoryButtonModal />
|
|
||||||
</Flex>
|
|
||||||
</IAIPopover>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(UnifiedCanvasSettings);
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setShouldShowGrid } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasShowGrid() {
|
|
||||||
const shouldShowGrid = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.shouldShowGrid
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={t('unifiedCanvas.showGrid')}
|
|
||||||
isChecked={shouldShowGrid}
|
|
||||||
onChange={(e) => dispatch(setShouldShowGrid(e.target.checked))}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
|
|
||||||
import { setShouldSnapToGrid } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { ChangeEvent } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasSnapToGrid() {
|
|
||||||
const shouldSnapToGrid = useAppSelector(
|
|
||||||
(state: RootState) => state.canvas.shouldSnapToGrid
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
dispatch(setShouldSnapToGrid(e.target.checked));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAISimpleCheckbox
|
|
||||||
label={`${t('unifiedCanvas.snapToGrid')} (N)`}
|
|
||||||
isChecked={shouldSnapToGrid}
|
|
||||||
onChange={handleChangeShouldSnapToGrid}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
|
|
||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
import UnifiedCanvasBaseBrushSettings from './UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings';
|
|
||||||
import UnifiedCanvasMaskBrushSettings from './UnifiedCanvasToolSettings/UnifiedCanvasMaskBrushSettings';
|
|
||||||
import UnifiedCanvasMoveSettings from './UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
[canvasSelector],
|
|
||||||
(canvas) => {
|
|
||||||
const { tool, layer } = canvas;
|
|
||||||
return {
|
|
||||||
tool,
|
|
||||||
layer,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function UnifiedCanvasToolSettingsBeta() {
|
|
||||||
const { tool, layer } = useAppSelector(selector);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex height={8} minHeight={8} maxHeight={8} alignItems="center">
|
|
||||||
{layer == 'base' && ['brush', 'eraser', 'colorPicker'].includes(tool) && (
|
|
||||||
<UnifiedCanvasBaseBrushSettings />
|
|
||||||
)}
|
|
||||||
{layer == 'mask' && ['brush', 'eraser', 'colorPicker'].includes(tool) && (
|
|
||||||
<UnifiedCanvasMaskBrushSettings />
|
|
||||||
)}
|
|
||||||
{tool == 'move' && <UnifiedCanvasMoveSettings />}
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
|
|
||||||
import { useCallback } from 'react';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaCopy } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasCopyToClipboard() {
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
const { isClipboardAPIAvailable } = useCopyImageToClipboard();
|
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['meta+c', 'ctrl+c'],
|
|
||||||
() => {
|
|
||||||
handleCopyImageToClipboard();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging && isClipboardAPIAvailable,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[isClipboardAPIAvailable]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleCopyImageToClipboard = useCallback(() => {
|
|
||||||
if (!isClipboardAPIAvailable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
dispatch(canvasCopiedToClipboard());
|
|
||||||
}, [dispatch, isClipboardAPIAvailable]);
|
|
||||||
|
|
||||||
if (!isClipboardAPIAvailable) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
|
|
||||||
icon={<FaCopy />}
|
|
||||||
onClick={handleCopyImageToClipboard}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { canvasDownloadedAsImage } from 'features/canvas/store/actions';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaDownload } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasDownloadImage() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
|
||||||
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+d'],
|
|
||||||
() => {
|
|
||||||
handleDownloadAsImage();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[canvasBaseLayer]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDownloadAsImage = () => {
|
|
||||||
dispatch(canvasDownloadedAsImage());
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
|
|
||||||
icon={<FaDownload />}
|
|
||||||
onClick={handleDownloadAsImage}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaUpload } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasFileUploader() {
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
|
|
||||||
const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
|
|
||||||
postUploadAction: { type: 'SET_CANVAS_INITIAL_IMAGE' },
|
|
||||||
});
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={t('common.upload')}
|
|
||||||
tooltip={t('common.upload')}
|
|
||||||
icon={<FaUpload />}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
{...getUploadButtonProps()}
|
|
||||||
/>
|
|
||||||
<input {...getUploadInputProps()} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIMantineSelect from 'common/components/IAIMantineSelect';
|
|
||||||
import {
|
|
||||||
canvasSelector,
|
|
||||||
isStagingSelector,
|
|
||||||
} from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { setIsMaskEnabled, setLayer } from 'features/canvas/store/canvasSlice';
|
|
||||||
import {
|
|
||||||
CanvasLayer,
|
|
||||||
LAYER_NAMES_DICT,
|
|
||||||
} from 'features/canvas/store/canvasTypes';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const selector = createSelector(
|
|
||||||
[canvasSelector, isStagingSelector],
|
|
||||||
(canvas, isStaging) => {
|
|
||||||
const { layer, isMaskEnabled } = canvas;
|
|
||||||
return { layer, isMaskEnabled, isStaging };
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function UnifiedCanvasLayerSelect() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const { layer, isMaskEnabled, isStaging } = useAppSelector(selector);
|
|
||||||
|
|
||||||
const handleToggleMaskLayer = () => {
|
|
||||||
dispatch(setLayer(layer === 'mask' ? 'base' : 'mask'));
|
|
||||||
};
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['q'],
|
|
||||||
() => {
|
|
||||||
handleToggleMaskLayer();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[layer]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleChangeLayer = (v: string) => {
|
|
||||||
const newLayer = v as CanvasLayer;
|
|
||||||
dispatch(setLayer(newLayer));
|
|
||||||
if (newLayer === 'mask' && !isMaskEnabled) {
|
|
||||||
dispatch(setIsMaskEnabled(true));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<IAIMantineSelect
|
|
||||||
tooltip={`${t('unifiedCanvas.layer')} (Q)`}
|
|
||||||
aria-label={`${t('unifiedCanvas.layer')} (Q)`}
|
|
||||||
value={layer}
|
|
||||||
data={LAYER_NAMES_DICT}
|
|
||||||
onChange={handleChangeLayer}
|
|
||||||
disabled={isStaging}
|
|
||||||
w="full"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { canvasMerged } from 'features/canvas/store/actions';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaLayerGroup } from 'react-icons/fa';
|
|
||||||
export default function UnifiedCanvasMergeVisible() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+m'],
|
|
||||||
() => {
|
|
||||||
handleMergeVisible();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleMergeVisible = () => {
|
|
||||||
dispatch(canvasMerged());
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
|
|
||||||
icon={<FaLayerGroup />}
|
|
||||||
onClick={handleMergeVisible}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { RootState } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { setTool } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaArrowsAlt } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasMoveTool() {
|
|
||||||
const tool = useAppSelector((state: RootState) => state.canvas.tool);
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['v'],
|
|
||||||
() => {
|
|
||||||
handleSelectMoveTool();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSelectMoveTool = () => dispatch(setTool('move'));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.move')} (V)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.move')} (V)`}
|
|
||||||
icon={<FaArrowsAlt />}
|
|
||||||
isChecked={tool === 'move' || isStaging}
|
|
||||||
onClick={handleSelectMoveTool}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { resetCanvas } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaTrash } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasResetCanvas() {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
|
|
||||||
const handleResetCanvas = () => {
|
|
||||||
dispatch(resetCanvas());
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={t('unifiedCanvas.clearCanvas')}
|
|
||||||
tooltip={t('unifiedCanvas.clearCanvas')}
|
|
||||||
icon={<FaTrash />}
|
|
||||||
onClick={handleResetCanvas}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
colorScheme="error"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { useAppDispatch } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick';
|
|
||||||
import { resetCanvasView } from 'features/canvas/store/canvasSlice';
|
|
||||||
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaCrosshairs } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasResetView() {
|
|
||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['r'],
|
|
||||||
() => {
|
|
||||||
handleResetCanvasView();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => true,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[canvasBaseLayer]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClickResetCanvasView = useSingleAndDoubleClick(
|
|
||||||
() => handleResetCanvasView(false),
|
|
||||||
() => handleResetCanvasView(true)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleResetCanvasView = (shouldScaleTo1 = false) => {
|
|
||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
|
||||||
if (!canvasBaseLayer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const clientRect = canvasBaseLayer.getClientRect({
|
|
||||||
skipTransform: true,
|
|
||||||
});
|
|
||||||
dispatch(
|
|
||||||
resetCanvasView({
|
|
||||||
contentRect: clientRect,
|
|
||||||
shouldScaleTo1,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.resetView')} (R)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.resetView')} (R)`}
|
|
||||||
icon={<FaCrosshairs />}
|
|
||||||
onClick={handleClickResetCanvasView}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { canvasSavedToGallery } from 'features/canvas/store/actions';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { FaSave } from 'react-icons/fa';
|
|
||||||
|
|
||||||
export default function UnifiedCanvasSaveToGallery() {
|
|
||||||
const isStaging = useAppSelector(isStagingSelector);
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+s'],
|
|
||||||
() => {
|
|
||||||
handleSaveToGallery();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSaveToGallery = () => {
|
|
||||||
dispatch(canvasSavedToGallery());
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
|
|
||||||
icon={<FaSave />}
|
|
||||||
onClick={handleSaveToGallery}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
import { ButtonGroup, Flex } from '@chakra-ui/react';
|
|
||||||
import { createSelector } from '@reduxjs/toolkit';
|
|
||||||
import { stateSelector } from 'app/store/store';
|
|
||||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
||||||
import IAIIconButton from 'common/components/IAIIconButton';
|
|
||||||
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
|
|
||||||
import {
|
|
||||||
addEraseRect,
|
|
||||||
addFillRect,
|
|
||||||
setTool,
|
|
||||||
} from 'features/canvas/store/canvasSlice';
|
|
||||||
import { isEqual } from 'lodash-es';
|
|
||||||
import { memo, useCallback } from 'react';
|
|
||||||
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import {
|
|
||||||
FaEraser,
|
|
||||||
FaEyeDropper,
|
|
||||||
FaFillDrip,
|
|
||||||
FaPaintBrush,
|
|
||||||
FaPlus,
|
|
||||||
} from 'react-icons/fa';
|
|
||||||
|
|
||||||
export const selector = createSelector(
|
|
||||||
[stateSelector, isStagingSelector],
|
|
||||||
({ canvas }, isStaging) => {
|
|
||||||
const { tool } = canvas;
|
|
||||||
|
|
||||||
return {
|
|
||||||
tool,
|
|
||||||
isStaging,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
memoizeOptions: {
|
|
||||||
resultEqualityCheck: isEqual,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const UnifiedCanvasToolSelect = () => {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { tool, isStaging } = useAppSelector(selector);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['b'],
|
|
||||||
() => {
|
|
||||||
handleSelectBrushTool();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['e'],
|
|
||||||
() => {
|
|
||||||
handleSelectEraserTool();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[tool]
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['c'],
|
|
||||||
() => {
|
|
||||||
handleSelectColorPickerTool();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
[tool]
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['shift+f'],
|
|
||||||
() => {
|
|
||||||
handleFillRect();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
['delete', 'backspace'],
|
|
||||||
() => {
|
|
||||||
handleEraseBoundingBox();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: () => !isStaging,
|
|
||||||
preventDefault: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSelectBrushTool = useCallback(
|
|
||||||
() => dispatch(setTool('brush')),
|
|
||||||
[dispatch]
|
|
||||||
);
|
|
||||||
const handleSelectEraserTool = useCallback(
|
|
||||||
() => dispatch(setTool('eraser')),
|
|
||||||
[dispatch]
|
|
||||||
);
|
|
||||||
const handleSelectColorPickerTool = useCallback(
|
|
||||||
() => dispatch(setTool('colorPicker')),
|
|
||||||
[dispatch]
|
|
||||||
);
|
|
||||||
const handleFillRect = useCallback(() => dispatch(addFillRect()), [dispatch]);
|
|
||||||
const handleEraseBoundingBox = useCallback(
|
|
||||||
() => dispatch(addEraseRect()),
|
|
||||||
[dispatch]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex flexDirection="column" gap={2}>
|
|
||||||
<ButtonGroup>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.brush')} (B)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.brush')} (B)`}
|
|
||||||
icon={<FaPaintBrush />}
|
|
||||||
isChecked={tool === 'brush' && !isStaging}
|
|
||||||
onClick={handleSelectBrushTool}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
/>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.eraser')} (E)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.eraser')} (B)`}
|
|
||||||
icon={<FaEraser />}
|
|
||||||
isChecked={tool === 'eraser' && !isStaging}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
onClick={handleSelectEraserTool}
|
|
||||||
/>
|
|
||||||
</ButtonGroup>
|
|
||||||
<ButtonGroup>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
|
|
||||||
icon={<FaFillDrip />}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
onClick={handleFillRect}
|
|
||||||
/>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
|
|
||||||
icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
onClick={handleEraseBoundingBox}
|
|
||||||
/>
|
|
||||||
</ButtonGroup>
|
|
||||||
<IAIIconButton
|
|
||||||
aria-label={`${t('unifiedCanvas.colorPicker')} (C)`}
|
|
||||||
tooltip={`${t('unifiedCanvas.colorPicker')} (C)`}
|
|
||||||
icon={<FaEyeDropper />}
|
|
||||||
isChecked={tool === 'colorPicker' && !isStaging}
|
|
||||||
isDisabled={isStaging}
|
|
||||||
onClick={handleSelectColorPickerTool}
|
|
||||||
width="max-content"
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(UnifiedCanvasToolSelect);
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import { Flex } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
import IAICanvasRedoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton';
|
|
||||||
import IAICanvasUndoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton';
|
|
||||||
import { memo } from 'react';
|
|
||||||
import UnifiedCanvasSettings from './UnifiedCanvasToolSettings/UnifiedCanvasSettings';
|
|
||||||
import UnifiedCanvasCopyToClipboard from './UnifiedCanvasToolbar/UnifiedCanvasCopyToClipboard';
|
|
||||||
import UnifiedCanvasDownloadImage from './UnifiedCanvasToolbar/UnifiedCanvasDownloadImage';
|
|
||||||
import UnifiedCanvasFileUploader from './UnifiedCanvasToolbar/UnifiedCanvasFileUploader';
|
|
||||||
import UnifiedCanvasLayerSelect from './UnifiedCanvasToolbar/UnifiedCanvasLayerSelect';
|
|
||||||
import UnifiedCanvasMergeVisible from './UnifiedCanvasToolbar/UnifiedCanvasMergeVisible';
|
|
||||||
import UnifiedCanvasMoveTool from './UnifiedCanvasToolbar/UnifiedCanvasMoveTool';
|
|
||||||
import UnifiedCanvasResetCanvas from './UnifiedCanvasToolbar/UnifiedCanvasResetCanvas';
|
|
||||||
import UnifiedCanvasResetView from './UnifiedCanvasToolbar/UnifiedCanvasResetView';
|
|
||||||
import UnifiedCanvasSaveToGallery from './UnifiedCanvasToolbar/UnifiedCanvasSaveToGallery';
|
|
||||||
import UnifiedCanvasToolSelect from './UnifiedCanvasToolbar/UnifiedCanvasToolSelect';
|
|
||||||
|
|
||||||
const UnifiedCanvasToolbarBeta = () => {
|
|
||||||
return (
|
|
||||||
<Flex flexDirection="column" rowGap={2} width="min-content">
|
|
||||||
<UnifiedCanvasLayerSelect />
|
|
||||||
<UnifiedCanvasToolSelect />
|
|
||||||
|
|
||||||
<Flex gap={2}>
|
|
||||||
<UnifiedCanvasMoveTool />
|
|
||||||
<UnifiedCanvasResetView />
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex columnGap={2}>
|
|
||||||
<UnifiedCanvasMergeVisible />
|
|
||||||
<UnifiedCanvasSaveToGallery />
|
|
||||||
</Flex>
|
|
||||||
<Flex columnGap={2}>
|
|
||||||
<UnifiedCanvasCopyToClipboard />
|
|
||||||
<UnifiedCanvasDownloadImage />
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex gap={2}>
|
|
||||||
<IAICanvasUndoButton />
|
|
||||||
<IAICanvasRedoButton />
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex gap={2}>
|
|
||||||
<UnifiedCanvasFileUploader />
|
|
||||||
<UnifiedCanvasResetCanvas />
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<UnifiedCanvasSettings />
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(UnifiedCanvasToolbarBeta);
|
|
||||||
Loading…
Reference in New Issue
Block a user