diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts index a036448cd19..86aee8da673 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/useCanvasEntityListDnd.ts @@ -4,7 +4,7 @@ import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag- import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import { singleCanvasEntityDndSource } from 'features/dnd/dnd'; import { type DndListTargetState, idle } from 'features/dnd/types'; -import { firefoxDndFix } from 'features/dnd/util'; +import { dndInputFix } from 'features/dnd/util'; import type { RefObject } from 'react'; import { useEffect, useState } from 'react'; @@ -18,7 +18,7 @@ export const useCanvasEntityListDnd = (ref: RefObject, entityIdenti return; } return combine( - firefoxDndFix(element), + dndInputFix(element), draggable({ element, getInitialData() { diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/useRefImageDnd.ts b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/useRefImageDnd.ts index c7efd1e7eba..c65295919da 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/useRefImageDnd.ts +++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/useRefImageDnd.ts @@ -3,7 +3,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'; import { singleRefImageDndSource } from 'features/dnd/dnd'; import { type DndListTargetState, idle } from 'features/dnd/types'; -import { firefoxDndFix } from 'features/dnd/util'; +import { dndInputFix } from 'features/dnd/util'; import type { RefObject } from 'react'; import { useEffect, useState } from 'react'; @@ -17,7 +17,7 @@ export const useRefImageDnd = (ref: RefObject, id: string) => { return; } return combine( - firefoxDndFix(element), + dndInputFix(element), draggable({ element, getInitialData() { diff --git a/invokeai/frontend/web/src/features/dnd/DndImage.tsx b/invokeai/frontend/web/src/features/dnd/DndImage.tsx index ecc11ee5975..72ed938d015 100644 --- a/invokeai/frontend/web/src/features/dnd/DndImage.tsx +++ b/invokeai/frontend/web/src/features/dnd/DndImage.tsx @@ -6,7 +6,7 @@ import { useMiddleClickOpenInNewTab } from 'common/hooks/useMiddleClickOpenInNew import { singleImageDndSource } from 'features/dnd/dnd'; import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage'; import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage'; -import { firefoxDndFix } from 'features/dnd/util'; +import { dndInputFix } from 'features/dnd/util'; import { useImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu'; import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react'; import type { ImageDTO } from 'services/api/types'; @@ -40,7 +40,7 @@ export const DndImage = memo( return; } return combine( - firefoxDndFix(element), + dndInputFix(element), draggable({ element, getInitialData: () => singleImageDndSource.getData({ imageDTO }, imageDTO.image_name), diff --git a/invokeai/frontend/web/src/features/dnd/util.ts b/invokeai/frontend/web/src/features/dnd/util.ts index 553a89944cc..a3fba596d7e 100644 --- a/invokeai/frontend/web/src/features/dnd/util.ts +++ b/invokeai/frontend/web/src/features/dnd/util.ts @@ -1,7 +1,6 @@ import type { GetOffsetFn } from '@atlaskit/pragmatic-drag-and-drop/dist/types/public-utils/element/custom-native-drag-preview/types'; import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types'; import type { SystemStyleObject } from '@invoke-ai/ui-library'; -import { noop } from 'es-toolkit/compat'; import type { CSSProperties } from 'react'; /** @@ -47,12 +46,12 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP } /** - * Firefox has a bug where input or textarea elements with draggable parents do not allow selection of their text. + * There is a bug where input or textarea elements with draggable parents do not allow selection of their text. * - * This helper function implements a workaround by setting the draggable attribute to false when the mouse is over a + * This helper function implements a workaround by setting the draggable attribute to false when the mouse is over an * input or textarea child of the draggable. It reverts the attribute on mouse out. * - * The fix is only applied for Firefox, and should be used in every `pragmatic-drag-and-drop` `draggable`. + * The fix should be used in every `pragmatic-drag-and-drop` `draggable`. * * See: * - https://github.com/atlassian/pragmatic-drag-and-drop/issues/111 @@ -66,7 +65,7 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP * return; * } * return combine( - * firefoxDndFix(element), + * dndInputFix(element), * // The rest of the draggable setup is the same * draggable({ * element, @@ -77,11 +76,7 @@ export function triggerPostMoveFlash(element: HTMLElement, backgroundColor: CSSP * @param element The draggable element * @returns A cleanup function that removes the event listeners */ -export const firefoxDndFix = (element: HTMLElement): (() => void) => { - if (!navigator.userAgent.includes('Firefox')) { - return noop; - } - +export const dndInputFix = (element: HTMLElement): (() => void) => { const abortController = new AbortController(); element.addEventListener( diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx index d03a884a094..5484cdb8790 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx @@ -12,7 +12,7 @@ import type { DndDragPreviewMultipleImageState } from 'features/dnd/DndDragPrevi import { createMultipleImageDragPreview, setMultipleImageDragPreview } from 'features/dnd/DndDragPreviewMultipleImage'; import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage'; import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage'; -import { firefoxDndFix } from 'features/dnd/util'; +import { dndInputFix } from 'features/dnd/util'; import { useImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu'; import { GalleryItemHoverIcons } from 'features/gallery/components/ImageGrid/GalleryItemHoverIcons'; import { @@ -129,7 +129,7 @@ export const GalleryImage = memo(({ imageDTO }: Props) => { }); return combine( - firefoxDndFix(element), + dndInputFix(element), draggable({ element, getInitialData: () => { diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx index 41e1837a847..dfef8f8155f 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx @@ -6,7 +6,7 @@ import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; -import { firefoxDndFix } from 'features/dnd/util'; +import { dndInputFix } from 'features/dnd/util'; import { RootContainerElementEditMode } from 'features/nodes/components/sidePanel/builder/ContainerElement'; import { buildFormElementDndData, useBuilderDndMonitor } from 'features/nodes/components/sidePanel/builder/dnd-hooks'; import { WorkflowBuilderEditMenu } from 'features/nodes/components/sidePanel/builder/WorkflowBuilderMenu'; @@ -86,7 +86,7 @@ const useAddFormElementDnd = ( return; } return combine( - firefoxDndFix(draggableElement), + dndInputFix(draggableElement), draggable({ element: draggableElement, getInitialData: () => { diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts index 788a613a7a5..9ce96cf565e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts @@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHook import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar'; import { parseify } from 'common/util/serialize'; -import { firefoxDndFix, triggerPostMoveFlash } from 'features/dnd/util'; +import { dndInputFix, triggerPostMoveFlash } from 'features/dnd/util'; import type { CenterOrEdge } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge'; import { attachClosestCenterOrEdge, @@ -405,7 +405,7 @@ export const useFormElementDnd = ( } return combine( - firefoxDndFix(draggableElement), + dndInputFix(draggableElement), draggable({ element: draggableElement, dragHandle: dragHandleElement, @@ -567,7 +567,7 @@ export const useNodeFieldDnd = ( return; } return combine( - firefoxDndFix(draggableElement), + dndInputFix(draggableElement), draggable({ element: draggableElement, dragHandle: dragHandleElement,