fix(ui): workaround for dockview bug that lets you drag tabs in certain ways

invokeai/frontend/web/src/features/ui/layouts/TabWithLaunchpadIcon.tsx

@@ -16,6 +16,8 @@ import {
   PiTextAaBold,
 } from 'react-icons/pi';
 
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
+
 const TAB_ICONS: Record<TabName, IconType> = {
   generate: PiTextAaBold,
   canvas: PiBoundingBoxBold,
@@ -41,6 +43,8 @@ export const TabWithLaunchpadIcon = memo((props: IDockviewPanelHeaderProps) => {
     setFocusedRegion(props.params.focusRegion);
   }, [props.params.focusRegion]);
 
+  useHackOutDvTabDraggable(ref);
+
   return (
     <Flex ref={ref} alignItems="center" h="full" px={4} gap={3} onPointerDown={onPointerDown}>
       <Icon as={TAB_ICONS[activeTab]} color="invokeYellow.300" boxSize={5} />

invokeai/frontend/web/src/features/ui/layouts/TabWithoutCloseButton.tsx

@@ -5,6 +5,7 @@ import type { IDockviewPanelHeaderProps } from 'dockview';
 import { memo, useCallback, useRef } from 'react';
 
 import type { PanelParameters } from './auto-layout-context';
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
 
 export const TabWithoutCloseButton = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -20,6 +21,8 @@ export const TabWithoutCloseButton = memo((props: IDockviewPanelHeaderProps<Pane
     setFocusedRegion(props.params.focusRegion);
   }, [props.params.focusRegion]);
 
+  useHackOutDvTabDraggable(ref);
+
   return (
     <Flex ref={ref} alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>

invokeai/frontend/web/src/features/ui/layouts/TabWithoutCloseButtonAndWithProgressIndicator.tsx

@@ -7,6 +7,7 @@ import { memo, useCallback, useRef } from 'react';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
 import type { PanelParameters } from './auto-layout-context';
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
 
 export const TabWithoutCloseButtonAndWithProgressIndicator = memo(
   (props: IDockviewPanelHeaderProps<PanelParameters>) => {
@@ -25,6 +26,8 @@ export const TabWithoutCloseButtonAndWithProgressIndicator = memo(
       setFocusedRegion(props.params.focusRegion);
     }, [props.params.focusRegion]);
 
+    useHackOutDvTabDraggable(ref);
+
     return (
       <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
         <Text userSelect="none" px={4}>

invokeai/frontend/web/src/features/ui/layouts/use-hack-out-dv-tab-draggable.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+/**
+ * Prevent undesired dnd behavior in Dockview tabs.
+ *
+ * Dockview always sets the draggable flag on its tab elements, even when dnd is disabled. This hook traverses
+ * up from the provided ref to find the closest tab element and sets its `draggable` attribute to `false`.
+ */
+export const useHackOutDvTabDraggable = (ref: RefObject<HTMLElement>) => {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const parentTab = el.closest('.dv-tab');
+    if (!parentTab) {
+      return;
+    }
+    parentTab.setAttribute('draggable', 'false');
+  }, [ref]);
+};