github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): simpler dnd typing implementation

Browse Source
This commit is contained in:
psychedelicious
2024-10-28 15:10:54 +10:00
parent 406fc58889
commit 93a3ed56e7
19 changed files with 523 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/controlLayers/components/CanvasDropArea.tsx
View File

@@ -1,20 +1,15 @@
import { Grid, GridItem } from '@invoke-ai/ui-library';
import { Dnd } from 'features/dnd2/dnd';
import { DndDropTarget } from 'features/dnd2/DndDropTarget';
import {
newControlLayerFromImageDndTarget,
addGlobalReferenceImageFromImageDndTarget,
newRasterLayerFromImageDndTarget,
addRegionalGuidanceReferenceImageFromImageDndTarget,
} from 'features/dnd2/types';
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const addRasterLayerFromImageDndTargetData = newRasterLayerFromImageDndTarget.getData({});
const addControlLayerFromImageDndTargetData = newControlLayerFromImageDndTarget.getData({});
const addRasterLayerFromImageDndTargetData = Dnd.Target.newRasterLayerFromImage.getData();
const addControlLayerFromImageDndTargetData = Dnd.Target.newControlLayerFromImage.getData();
const addRegionalGuidanceReferenceImageFromImageDndTargetData =
addRegionalGuidanceReferenceImageFromImageDndTarget.getData({});
const addGlobalReferenceImageFromImageDndTargetData = addGlobalReferenceImageFromImageDndTarget.getData({});
Dnd.Target.newRegionalGuidanceReferenceImageFromImage.getData();
const addGlobalReferenceImageFromImageDndTargetData = Dnd.Target.newGlobalReferenceImageFromImage.getData();
export const CanvasDropArea = memo(() => {
const { t } = useTranslation();

6
invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx
View File

@@ -6,8 +6,8 @@ import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHook
import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
import type { Dnd } from 'features/dnd2/dnd';
import { DndDropOverlay } from 'features/dnd2/DndDropOverlay';
import type { DndState } from 'features/dnd2/types';
import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -84,8 +84,8 @@ const PanelTabs = memo(() => {
const { t } = useTranslation();
const store = useAppStore();
const activeEntityCount = useAppSelector(selectEntityCountActive);
const [layersTabDndState, setLayersTabDndState] = useState<DndState>('idle');
const [galleryTabDndState, setGalleryTabDndState] = useState<DndState>('idle');
const [layersTabDndState, setLayersTabDndState] = useState<Dnd.types['DndState']>('idle');
const [galleryTabDndState, setGalleryTabDndState] = useState<Dnd.types['DndState']>('idle');
const layersTabRef = useRef<HTMLDivElement>(null);
const galleryTabRef = useRef<HTMLDivElement>(null);
const timeoutRef = useRef<number | null>(null);

6
invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
View File

@@ -10,8 +10,8 @@ import { ControlLayerSettings } from 'features/controlLayers/components/ControlL
import { ControlLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { Dnd } from 'features/dnd2/dnd';
import { DndDropTarget } from 'features/dnd2/DndDropTarget';
import { replaceLayerWithImageDndTarget, type ReplaceLayerWithImageDndTargetData } from 'features/dnd2/types';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -25,8 +25,8 @@ export const ControlLayer = memo(({ id }: Props) => {
() => ({ id, type: 'control_layer' }),
[id]
);
const targetData = useMemo<ReplaceLayerWithImageDndTargetData>(
() => replaceLayerWithImageDndTarget.getData({ entityIdentifier }, entityIdentifier.id),
const targetData = useMemo<Dnd.types['TargetDataTypeMap']['replaceLayerWithImage']>(
() => Dnd.Target.replaceLayerWithImage.getData({ entityIdentifier }, entityIdentifier.id),
[entityIdentifier]
);

4
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
View File

@@ -4,9 +4,9 @@ import { useStore } from '@nanostores/react';
import { skipToken } from '@reduxjs/toolkit/query';
import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
import type { ImageWithDims } from 'features/controlLayers/store/types';
import type { Dnd } from 'features/dnd2/dnd';
import { DndDropTarget } from 'features/dnd2/DndDropTarget';
import { DndImage } from 'features/dnd2/DndImage';
import type { DndTargetData } from 'features/dnd2/types';
import { memo, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
@@ -31,7 +31,7 @@ const sx = {
type Props = {
image: ImageWithDims | null;
onChangeImage: (imageDTO: ImageDTO | null) => void;
targetData: DndTargetData;
targetData: Dnd.types['TargetDataUnion'];
postUploadAction: PostUploadAction;
};

6
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
View File

@@ -19,7 +19,7 @@ import {
import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
import type { CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
import { setGlobalReferenceImageDndTarget, type SetGlobalReferenceImageDndTargetData } from 'features/dnd2/types';
import { Dnd } from 'features/dnd2/dnd';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiBoundingBoxBold } from 'react-icons/pi';
@@ -84,9 +84,9 @@ export const IPAdapterSettings = memo(() => {
() => ({ type: 'SET_IPA_IMAGE', id: entityIdentifier.id }),
[entityIdentifier.id]
);
const targetData = useMemo<SetGlobalReferenceImageDndTargetData>(
const targetData = useMemo<Dnd.types['TargetDataTypeMap']['setGlobalReferenceImage']>(
() =>
setGlobalReferenceImageDndTarget.getData(
Dnd.Target.setGlobalReferenceImage.getData(
{ globalReferenceImageId: entityIdentifier.id },
ipAdapter.image?.image_name
),

7
invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
View File

@@ -7,9 +7,8 @@ import { CanvasEntityEditableTitle } from 'features/controlLayers/components/com
import { RasterLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { Dnd } from 'features/dnd2/dnd';
import { DndDropTarget } from 'features/dnd2/DndDropTarget';
import type { ReplaceLayerWithImageDndTargetData } from 'features/dnd2/types';
import { replaceLayerWithImageDndTarget } from 'features/dnd2/types';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -20,8 +19,8 @@ type Props = {
export const RasterLayer = memo(({ id }: Props) => {
const { t } = useTranslation();
const entityIdentifier = useMemo<CanvasEntityIdentifier<'raster_layer'>>(() => ({ id, type: 'raster_layer' }), [id]);
const targetData = useMemo<ReplaceLayerWithImageDndTargetData>(
() => replaceLayerWithImageDndTarget.getData({ entityIdentifier }, entityIdentifier.id),
const targetData = useMemo<Dnd.types['TargetDataTypeMap']['replaceLayerWithImage']>(
() => Dnd.Target.replaceLayerWithImage.getData({ entityIdentifier }, entityIdentifier.id),
[entityIdentifier]
);

12
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx
View File

@@ -20,8 +20,7 @@ import {
} from 'features/controlLayers/store/canvasSlice';
import { selectCanvasSlice, selectRegionalGuidanceReferenceImage } from 'features/controlLayers/store/selectors';
import type { CLIPVisionModelV2, IPMethodV2 } from 'features/controlLayers/store/types';
import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dnd2/types';
import { setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd2/types';
import { Dnd } from 'features/dnd2/dnd';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiBoundingBoxBold, PiTrashSimpleFill } from 'react-icons/pi';
@@ -92,13 +91,10 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro
[dispatch, entityIdentifier, referenceImageId]
);
const targetData = useMemo<SetRegionalGuidanceReferenceImageDndTargetData>(
const targetData = useMemo<Dnd.types['TargetDataTypeMap']['setRegionalGuidanceReferenceImage']>(
() =>
setRegionalGuidanceReferenceImageDndTarget.getData(
{
regionalGuidanceId: entityIdentifier.id,
referenceImageId,
},
Dnd.Target.setRegionalGuidanceReferenceImage.getData(
{ regionalGuidanceId: entityIdentifier.id, referenceImageId },
ipAdapter.image?.image_name
),
[entityIdentifier.id, ipAdapter.image?.image_name, referenceImageId]