From 0843028e6ea8fb5779c8966b2187e5e9f006014b Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 7 Jun 2023 15:40:43 +1000 Subject: [PATCH] fix(ui): improve dragging activation - delay of 250ms - prevent gallery images from accidentally activating native drag and drop --- .../web/src/app/components/ImageDnd/ImageDndContext.tsx | 4 ++-- .../web/src/features/gallery/components/HoverableImage.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx b/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx index 2d669c529a..71202726b7 100644 --- a/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx +++ b/invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx @@ -40,11 +40,11 @@ const ImageDndContext = (props: ImageDndContextProps) => { ); const mouseSensor = useSensor(MouseSensor, { - activationConstraint: { distance: 15 }, + activationConstraint: { delay: 250, tolerance: 5 }, }); const touchSensor = useSensor(TouchSensor, { - activationConstraint: { distance: 15 }, + activationConstraint: { delay: 250, tolerance: 5 }, }); // TODO: Use KeyboardSensor - needs composition of multiple collisionDetection algos // Alternatively, fix `rectIntersection` collection detection to work with the drag overlay diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx index 2b8f72101d..b13d58e322 100644 --- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx @@ -279,6 +279,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { objectFit={ shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit } + draggable={false} rounded="md" src={thumbnail_url || image_url} fallback={}