github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 16:54:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): lint

Browse Source
This commit is contained in:
psychedelicious
2025-06-23 22:16:18 +10:00
parent 4665f0df40
commit a294e8e0fd
8 changed files with 76 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
View File

@@ -15,8 +15,6 @@ import { addGalleryOffsetChangedListener } from 'app/store/middleware/listenerMi
import { addGetOpenAPISchemaListener } from 'app/store/middleware/listenerMiddleware/listeners/getOpenAPISchema';
import { addImageAddedToBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard';
import { addImageRemovedFromBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageRemovedFromBoard';
import { addImagesStarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesStarred';
import { addImagesUnstarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesUnstarred';
import { addImageUploadedFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageUploaded';
import { addModelSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelSelected';
import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded';
@@ -47,10 +45,6 @@ addImageUploadedFulfilledListener(startAppListening);
// Image deleted
addDeleteBoardAndImagesFulfilledListener(startAppListening);
// Image starred
addImagesStarredListener(startAppListening);
addImagesUnstarredListener(startAppListening);
// Gallery
addGalleryImageClickedListener(startAppListening);
addGalleryOffsetChangedListener(startAppListening);

25
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts
View File

@@ -1,25 +0,0 @@
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { imagesApi } from 'services/api/endpoints/images';
export const addImagesStarredListener = (startAppListening: AppStartListening) => {
startAppListening({
matcher: imagesApi.endpoints.starImages.matchFulfilled,
effect: (action, { dispatch, getState }) => {
// const { updated_image_names: starredImages } = action.payload;
// const state = getState();
// const { selection } = state.gallery;
// const updatedSelection: ImageDTO[] = [];
// selection.forEach((selectedImageDTO) => {
// if (starredImages.includes(selectedImageDTO.image_name)) {
// updatedSelection.push({
// ...selectedImageDTO,
// starred: true,
// });
// } else {
// updatedSelection.push(selectedImageDTO);
// }
// });
// dispatch(selectionChanged(updatedSelection));
},
});
};

25
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts
View File

@@ -1,25 +0,0 @@
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { imagesApi } from 'services/api/endpoints/images';
export const addImagesUnstarredListener = (startAppListening: AppStartListening) => {
startAppListening({
matcher: imagesApi.endpoints.unstarImages.matchFulfilled,
effect: (action, { dispatch, getState }) => {
// const { updated_image_names: unstarredImages } = action.payload;
// const state = getState();
// const { selection } = state.gallery;
// const updatedSelection: ImageDTO[] = [];
// selection.forEach((selectedImageDTO) => {
// if (unstarredImages.includes(selectedImageDTO.image_name)) {
// updatedSelection.push({
// ...selectedImageDTO,
// starred: false,
// });
// } else {
// updatedSelection.push(selectedImageDTO);
// }
// });
// dispatch(selectionChanged(updatedSelection));
},
});
};

2
invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
View File

@@ -23,7 +23,7 @@ import {
} from 'react-icons/pi';
import { useImageDTO } from 'services/api/endpoints/images';
import { useImageViewerContext } from './ImageViewerPanel';
import { useImageViewerContext } from './context';
export const CurrentImageButtons = memo(() => {
const { t } = useTranslation();

2
invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
View File

@@ -18,7 +18,7 @@ import { NoContentForViewer } from './NoContentForViewer';
import { ProgressImage } from './ProgressImage2';
import { ProgressIndicator } from './ProgressIndicator2';
export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO?: ImageDTO }) => {
export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | null }) => {
const shouldShowImageDetails = useAppSelector(selectShouldShowImageDetails);
const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer);

73
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx
View File

@@ -1,14 +1,9 @@
import { Divider, Flex } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
import type { ProgressImage as ProgressImageType } from 'features/nodes/types/common';
import { type Atom, atom, computed } from 'nanostores';
import type { PropsWithChildren } from 'react';
import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import type { ImageDTO, S } from 'services/api/types';
import { $socket } from 'services/events/stores';
import { assert } from 'tsafe';
import { memo } from 'react';
import { ImageViewerContextProvider } from './context';
export const ImageViewerPanel = memo(() => {
return (
@@ -22,65 +17,3 @@ export const ImageViewerPanel = memo(() => {
);
});
ImageViewerPanel.displayName = 'ImageViewerPanel';
type ImageViewerContextValue = {
$progressEvent: Atom<S['InvocationProgressEvent'] | null>;
$progressImage: Atom<ProgressImageType | null>;
$hasProgressImage: Atom<boolean>;
onLoadImage: (imageDTO: ImageDTO) => void;
};
const ImageViewerContext = createContext<ImageViewerContextValue | null>(null);
const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
const socket = useStore($socket);
const $progressEvent = useState(() => atom<S['InvocationProgressEvent'] | null>(null))[0];
const $progressImage = useState(() => atom<ProgressImageType | null>(null))[0];
const $hasProgressImage = useState(() => computed($progressImage, (progressImage) => progressImage !== null))[0];
useEffect(() => {
if (!socket) {
return;
}
const onInvocationProgress = (data: S['InvocationProgressEvent']) => {
$progressEvent.set(data);
if (data.image) {
$progressImage.set(data.image);
}
};
socket.on('invocation_progress', onInvocationProgress);
return () => {
socket.off('invocation_progress', onInvocationProgress);
};
}, [$progressEvent, $progressImage, socket]);
const onLoadImage = useCallback(
(imageDTO: ImageDTO) => {
const progressEvent = $progressEvent.get();
if (!progressEvent || !imageDTO) {
return;
}
if (progressEvent.session_id === imageDTO.session_id) {
$progressImage.set(null);
}
},
[$progressEvent, $progressImage]
);
const value = useMemo(
() => ({ $progressEvent, $progressImage, $hasProgressImage, onLoadImage }),
[$hasProgressImage, $progressEvent, $progressImage, onLoadImage]
);
return <ImageViewerContext.Provider value={value}>{props.children}</ImageViewerContext.Provider>;
});
ImageViewerContextProvider.displayName = 'ImageViewerContextProvider';
export const useImageViewerContext = () => {
const value = useContext(ImageViewerContext);
assert(value !== null, 'useImageViewerContext must be used within a ImageViewerContextProvider');
return value;
};

2
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
View File

@@ -9,7 +9,7 @@ import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiInfoBold } from 'react-icons/pi';
import { useImageViewerContext } from './ImageViewerPanel';
import { useImageViewerContext } from './context';
export const ToggleMetadataViewerButton = memo(() => {
const dispatch = useAppDispatch();

70
invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx Normal file
View File

@@ -0,0 +1,70 @@
import { useStore } from '@nanostores/react';
import type { ProgressImage as ProgressImageType } from 'features/nodes/types/common';
import { type Atom, atom, computed } from 'nanostores';
import type { PropsWithChildren } from 'react';
import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import type { ImageDTO, S } from 'services/api/types';
import { $socket } from 'services/events/stores';
import { assert } from 'tsafe';
type ImageViewerContextValue = {
$progressEvent: Atom<S['InvocationProgressEvent'] | null>;
$progressImage: Atom<ProgressImageType | null>;
$hasProgressImage: Atom<boolean>;
onLoadImage: (imageDTO: ImageDTO) => void;
};
const ImageViewerContext = createContext<ImageViewerContextValue | null>(null);
export const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
const socket = useStore($socket);
const $progressEvent = useState(() => atom<S['InvocationProgressEvent'] | null>(null))[0];
const $progressImage = useState(() => atom<ProgressImageType | null>(null))[0];
const $hasProgressImage = useState(() => computed($progressImage, (progressImage) => progressImage !== null))[0];
useEffect(() => {
if (!socket) {
return;
}
const onInvocationProgress = (data: S['InvocationProgressEvent']) => {
$progressEvent.set(data);
if (data.image) {
$progressImage.set(data.image);
}
};
socket.on('invocation_progress', onInvocationProgress);
return () => {
socket.off('invocation_progress', onInvocationProgress);
};
}, [$progressEvent, $progressImage, socket]);
const onLoadImage = useCallback(
(imageDTO: ImageDTO) => {
const progressEvent = $progressEvent.get();
if (!progressEvent || !imageDTO) {
return;
}
if (progressEvent.session_id === imageDTO.session_id) {
$progressImage.set(null);
}
},
[$progressEvent, $progressImage]
);
const value = useMemo(
() => ({ $progressEvent, $progressImage, $hasProgressImage, onLoadImage }),
[$hasProgressImage, $progressEvent, $progressImage, onLoadImage]
);
return <ImageViewerContext.Provider value={value}>{props.children}</ImageViewerContext.Provider>;
});
ImageViewerContextProvider.displayName = 'ImageViewerContextProvider';
export const useImageViewerContext = () => {
const value = useContext(ImageViewerContext);
assert(value !== null, 'useImageViewerContext must be used within a ImageViewerContextProvider');
return value;
};