github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 17:14:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: canvas flow rework (wip)

Browse Source
This commit is contained in:
psychedelicious
2025-06-03 13:45:01 +10:00
parent 5e93f58530
commit 8a78e37634
18 changed files with 645 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
View File

@@ -13,7 +13,7 @@ import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiXBold } from 'react-icons/pi';
import { useSelector } from 'react-redux';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
import { COLUMN_WIDTHS } from './constants';
import QueueItemDetail from './QueueItemDetail';
@@ -23,7 +23,7 @@ const selectedStyles = { bg: 'base.700' };
type InnerItemProps = {
index: number;
item: SessionQueueItemDTO;
item: S['SessionQueueItem'];
context: ListContext;
};
@@ -155,7 +155,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
</Flex>
<Collapse in={isOpen} transition={transition} unmountOnExit={true}>
<QueueItemDetail queueItemDTO={item} />
<QueueItemDetail queueItem={item} />
</Collapse>
</Flex>
);

12
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
View File

@@ -12,24 +12,20 @@ import type { ReactNode } from 'react';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiXBold } from 'react-icons/pi';
import { useGetQueueItemQuery } from 'services/api/endpoints/queue';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
type Props = {
queueItemDTO: SessionQueueItemDTO;
queueItem: S['SessionQueueItem'];
};
const QueueItemComponent = ({ queueItemDTO }: Props) => {
const { session_id, batch_id, item_id, origin, destination } = queueItemDTO;
const QueueItemComponent = ({ queueItem }: Props) => {
const { session_id, batch_id, item_id, origin, destination } = queueItem;
const { t } = useTranslation();
const isRetryEnabled = useFeatureStatus('retryQueueItem');
const { cancelBatch, isLoading: isLoadingCancelBatch, isCanceled: isBatchCanceled } = useCancelBatch(batch_id);
const { cancelQueueItem, isLoading: isLoadingCancelQueueItem } = useCancelQueueItem(item_id);
const { retryQueueItem, isLoading: isLoadingRetryQueueItem } = useRetryQueueItem(item_id);
const { data: queueItem } = useGetQueueItemQuery(item_id);
const originText = useOriginText(origin);
const destinationText = useDestinationText(destination);

10
invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
View File

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next';
import type { Components, ItemContent } from 'react-virtuoso';
import { Virtuoso } from 'react-virtuoso';
import { queueItemsAdapterSelectors, useListQueueItemsQuery } from 'services/api/endpoints/queue';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
import QueueItemComponent from './QueueItemComponent';
import QueueListComponent from './QueueListComponent';
@@ -24,13 +24,13 @@ import type { ListContext } from './types';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TableVirtuosoScrollerRef = (ref: HTMLElement | Window | null) => any;
const computeItemKey = (index: number, item: SessionQueueItemDTO): number => item.item_id;
const computeItemKey = (index: number, item: S['SessionQueueItem']): number => item.item_id;
const components: Components<SessionQueueItemDTO, ListContext> = {
const components: Components<S['SessionQueueItem'], ListContext> = {
List: QueueListComponent,
};
const itemContent: ItemContent<SessionQueueItemDTO, ListContext> = (index, item, context) => (
const itemContent: ItemContent<S['SessionQueueItem'], ListContext> = (index, item, context) => (
<QueueItemComponent index={index} item={item} context={context} />
);
@@ -114,7 +114,7 @@ const QueueList = () => {
<Flex w="full" h="full" flexDir="column">
<QueueListHeader />
<Flex ref={rootRef} w="full" h="full" alignItems="center" justifyContent="center">
<Virtuoso<SessionQueueItemDTO, ListContext>
<Virtuoso<S['SessionQueueItem'], ListContext>
data={queueItems}
endReached={handleLoadMore}
scrollerRef={setScroller as TableVirtuosoScrollerRef}

4
invokeai/frontend/web/src/features/queue/components/QueueList/QueueListComponent.tsx
View File

@@ -1,10 +1,10 @@
import { Flex, forwardRef, typedMemo } from '@invoke-ai/ui-library';
import type { Components } from 'react-virtuoso';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
import type { ListContext } from './types';
const QueueListComponent: Components<SessionQueueItemDTO, ListContext>['List'] = typedMemo(
const QueueListComponent: Components<S['SessionQueueItem'], ListContext>['List'] = typedMemo(
forwardRef((props, ref) => {
return (
<Flex {...props} ref={ref} flexDirection="column" gap={0.5}>

4
invokeai/frontend/web/src/features/queue/components/QueueList/useDestinationText.ts
View File

@@ -1,7 +1,7 @@
import { useTranslation } from 'react-i18next';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
export const useDestinationText = (destination: SessionQueueItemDTO['destination']) => {
export const useDestinationText = (destination: S['SessionQueueItem']['destination']) => {
const { t } = useTranslation();
if (destination === 'canvas') {

4
invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts
View File

@@ -1,7 +1,7 @@
import { useTranslation } from 'react-i18next';
import type { SessionQueueItemDTO } from 'services/api/types';
import type { S } from 'services/api/types';
export const useOriginText = (origin: SessionQueueItemDTO['origin']) => {
export const useOriginText = (origin: S['SessionQueueItem']['origin']) => {
const { t } = useTranslation();
if (origin === 'generation') {