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): add more context to ViewerImageDropData

Browse Source 
This is needed to disable the droppable when dragging the viewer's image itself - we don't want to allow dropping an image on the place it came from.
This commit is contained in:
psychedelicious
2024-02-02 17:40:37 +11:00
parent 265ccab15f
commit 2bfd4407ad
3 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/dnd/types/index.ts
View File

@@ -12,6 +12,7 @@ import type {
} from '@dnd-kit/core';
import type { BoardId } from 'features/gallery/store/types';
import type { FieldInputInstance, FieldInputTemplate } from 'features/nodes/types/field';
import type { ViewerMode } from 'features/viewer/store/viewerSlice';
import type { ImageDTO } from 'services/api/types';
type BaseDropData = {
@@ -20,6 +21,10 @@ type BaseDropData = {
export type ViewerImageDropData = BaseDropData & {
actionType: 'SET_VIEWER_IMAGE';
context: {
viewerMode: ViewerMode;
currentImageName?: string | null;
};
};
export type InitialImageDropData = BaseDropData & {

5
invokeai/frontend/web/src/features/dnd/util/isValidDrop.ts
View File

@@ -14,7 +14,10 @@ export const isValidDrop = (overData: TypesafeDroppableData | undefined, active:
switch (actionType) {
case 'SET_VIEWER_IMAGE':
return payloadType === 'IMAGE_DTO';
return (
payloadType === 'IMAGE_DTO' &&
overData.context.currentImageName !== active.data.current.payload.imageDTO.image_name
);
case 'SET_INITIAL_IMAGE':
return payloadType === 'IMAGE_DTO';
case 'SET_CONTROL_ADAPTER_IMAGE':

26
invokeai/frontend/web/src/features/viewer/components/ViewerDroppable.tsx
View File

@@ -1,15 +1,31 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import IAIDroppable from 'common/components/IAIDroppable';
import type { ViewerImageDropData } from 'features/dnd/types';
import { memo } from 'react';
import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
const viewerDropData: ViewerImageDropData = {
id: 'viewer-image',
actionType: 'SET_VIEWER_IMAGE',
};
const selectLastSelectedImageName = createSelector(
selectLastSelectedImage,
(lastSelectedImage) => lastSelectedImage?.image_name
);
export const ViewerDroppable = memo(() => {
const { t } = useTranslation();
const currentImageName = useAppSelector(selectLastSelectedImageName);
const viewerMode = useAppSelector((s) => s.viewer.viewerMode);
const viewerDropData = useMemo<ViewerImageDropData>(
() => ({
id: 'viewer-image',
actionType: 'SET_VIEWER_IMAGE',
context: {
currentImageName,
viewerMode,
},
}),
[currentImageName, viewerMode]
);
return <IAIDroppable data={viewerDropData} dropLabel={t('viewer.dropLabel')} />;
});