chore: bump version to v6.1.0rc1

Make the staging area a virtualized list so it doesn't choke when there
are a large number (i.e. more than a few hundred) of queue items.

invokeai/frontend/web/src/app/components/App.tsx

@@ -11,6 +11,7 @@ import { memo, useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
+import ThemeLocaleProvider from './ThemeLocaleProvider';
 const DEFAULT_CONFIG = {};
 
 interface Props {
@@ -30,12 +31,14 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
-      <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
-        <AppContent />
-        {!didStudioInit && <Loading />}
-      </Box>
-      <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
-      <GlobalModalIsolator />
+      <ThemeLocaleProvider>
+        <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
+          <AppContent />
+          {!didStudioInit && <Loading />}
+        </Box>
+        <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
+        <GlobalModalIsolator />
+      </ThemeLocaleProvider>
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -42,7 +42,6 @@ import { $socketOptions } from 'services/events/stores';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
 
 const App = lazy(() => import('./App'));
-const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
@@ -330,9 +329,7 @@ const InvokeAIUI = ({
     <React.StrictMode>
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
-          <ThemeLocaleProvider>
-            <App config={config} studioInitAction={studioInitAction} />
-          </ThemeLocaleProvider>
+          <App config={config} studioInitAction={studioInitAction} />
         </React.Suspense>
       </Provider>
     </React.StrictMode>

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -170,7 +170,6 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
         case 'canvas':
           // Go to the canvas tab, open the launchpad
           await navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
-          store.dispatch(canvasReset());
           break;
         case 'workflows':
           // Go to the workflows tab

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx

@@ -27,6 +27,7 @@ const sx = {
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0,
+  h: 'full',
   aspectRatio: '1/1',
   borderWidth: 2,
   borderRadius: 'base',
@@ -39,11 +40,11 @@ const sx = {
 
 type Props = {
   item: S['SessionQueueItem'];
-  number: number;
+  index: number;
   isSelected: boolean;
 };
 
-export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) => {
+export const QueueItemPreviewMini = memo(({ item, isSelected, index }: Props) => {
   const dispatch = useAppDispatch();
   const ctx = useCanvasSessionContext();
   const { imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
@@ -69,7 +70,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
 
   return (
     <Flex
-      id={getQueueItemElementId(item.item_id)}
+      id={getQueueItemElementId(index)}
       sx={sx}
       data-selected={isSelected}
       onClick={onClick}
@@ -78,7 +79,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
       <QueueItemStatusLabel item={item} position="absolute" margin="auto" />
       {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
       {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
-      <QueueItemNumber number={number} position="absolute" top={0} left={1} />
+      <QueueItemNumber number={index + 1} position="absolute" top={0} left={1} />
       <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
     </Flex>
   );

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx

@@ -1,17 +1,148 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Box, Flex, forwardRef } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { logger } from 'app/logging/logger';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { QueueItemPreviewMini } from 'features/controlLayers/components/SimpleSession/QueueItemPreviewMini';
 import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type { CSSProperties, RefObject } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Components, ItemContent, ListRange, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
+import type { S } from 'services/api/types';
+
+import { getQueueItemElementId } from './shared';
+
+const log = logger('system');
+
+const virtuosoStyles = {
+  width: '100%',
+  height: '72px',
+} satisfies CSSProperties;
+
+type VirtuosoContext = { selectedItemId: number | null };
+
+/**
+ * Scroll the item at the given index into view if it is not currently visible.
+ */
+const scrollIntoView = (
+  targetIndex: number,
+  rootEl: HTMLDivElement,
+  virtuosoHandle: VirtuosoHandle,
+  range: ListRange
+) => {
+  if (range.endIndex === 0) {
+    // No range is rendered; no need to scroll to anything.
+    return;
+  }
+
+  const targetItem = rootEl.querySelector(`#${getQueueItemElementId(targetIndex)}`);
+
+  if (!targetItem) {
+    if (targetIndex > range.endIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'end',
+      });
+    } else if (targetIndex < range.startIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'start',
+      });
+    } else {
+      log.debug(
+        `Unable to find queue item at index ${targetIndex} but it is in the rendered range ${range.startIndex}-${range.endIndex}`
+      );
+    }
+    return;
+  }
+
+  // We found the image in the DOM, but it might be in the overscan range - rendered but not in the visible viewport.
+  // Check if it is in the viewport and scroll if necessary.
+
+  const itemRect = targetItem.getBoundingClientRect();
+  const rootRect = rootEl.getBoundingClientRect();
+
+  if (itemRect.left < rootRect.left) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'start',
+    });
+  } else if (itemRect.right > rootRect.right) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'end',
+    });
+  } else {
+    // Image is already in view
+  }
+
+  return;
+};
+
+const useScrollableStagingArea = (rootRef: RefObject<HTMLDivElement>) => {
+  const [scroller, scrollerRef] = useState<HTMLElement | null>(null);
+  const [initialize, osInstance] = useOverlayScrollbars({
+    defer: true,
+    events: {
+      initialized(osInstance) {
+        // force overflow styles
+        const { viewport } = osInstance.elements();
+        viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
+        viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
+      },
+    },
+    options: {
+      scrollbars: {
+        visibility: 'auto',
+        autoHide: 'scroll',
+        autoHideDelay: 1300,
+        theme: 'os-theme-dark',
+      },
+      overflow: {
+        y: 'hidden',
+        x: 'scroll',
+      },
+    },
+  });
+
+  useEffect(() => {
+    const { current: root } = rootRef;
+
+    if (scroller && root) {
+      initialize({
+        target: root,
+        elements: {
+          viewport: scroller,
+        },
+      });
+    }
+
+    return () => {
+      osInstance()?.destroy();
+    };
+  }, [scroller, initialize, osInstance, rootRef]);
+
+  return scrollerRef;
+};
 
 export const StagingAreaItemsList = memo(() => {
   const canvasManager = useCanvasManagerSafe();
   const ctx = useCanvasSessionContext();
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
+  const rootRef = useRef<HTMLDivElement>(null);
+
   const items = useStore(ctx.$items);
   const selectedItemId = useStore(ctx.$selectedItemId);
 
+  const context = useMemo(() => ({ selectedItemId }), [selectedItemId]);
+  const scrollerRef = useScrollableStagingArea(rootRef);
+
   useEffect(() => {
     if (!canvasManager) {
       return;
@@ -20,21 +151,64 @@ export const StagingAreaItemsList = memo(() => {
     return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending);
   }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]);
 
+  useEffect(() => {
+    return ctx.$selectedItemIndex.listen((index) => {
+      if (!virtuosoRef.current) {
+        return;
+      }
+
+      if (!rootRef.current) {
+        return;
+      }
+
+      if (index === null) {
+        return;
+      }
+
+      scrollIntoView(index, rootRef.current, virtuosoRef.current, rangeRef.current);
+    });
+  }, [ctx.$selectedItemIndex]);
+
+  const onRangeChanged = useCallback((range: ListRange) => {
+    rangeRef.current = range;
+  }, []);
+
   return (
-    <Flex position="relative" maxW="full" w="full" h="72px">
-      <ScrollableContent overflowX="scroll" overflowY="hidden">
-        <Flex gap={2} w="full" h="full" justifyContent="safe center">
-          {items.map((item, i) => (
-            <QueueItemPreviewMini
-              key={`${item.item_id}-mini`}
-              item={item}
-              number={i + 1}
-              isSelected={selectedItemId === item.item_id}
-            />
-          ))}
-        </Flex>
-      </ScrollableContent>
-    </Flex>
+    <Box data-overlayscrollbars-initialize="" ref={rootRef} position="relative" w="full" h="full">
+      <Virtuoso<S['SessionQueueItem'], VirtuosoContext>
+        ref={virtuosoRef}
+        context={context}
+        data={items}
+        horizontalDirection
+        style={virtuosoStyles}
+        itemContent={itemContent}
+        components={components}
+        rangeChanged={onRangeChanged}
+        // Virtuoso expects the ref to be of HTMLElement | null | Window, but overlayscrollbars doesn't allow Window
+        scrollerRef={scrollerRef as VirtuosoProps<S['SessionQueueItem'], VirtuosoContext>['scrollerRef']}
+      />
+    </Box>
   );
 });
 StagingAreaItemsList.displayName = 'StagingAreaItemsList';
+
+const itemContent: ItemContent<S['SessionQueueItem'], VirtuosoContext> = (index, item, { selectedItemId }) => (
+  <QueueItemPreviewMini
+    key={`${item.item_id}-mini`}
+    item={item}
+    index={index}
+    isSelected={selectedItemId === item.item_id}
+  />
+);
+
+const listSx = {
+  '& > * + *': {
+    pl: 2,
+  },
+};
+
+const components: Components<S['SessionQueueItem'], VirtuosoContext> = {
+  List: forwardRef(({ context: _, ...rest }, ref) => {
+    return <Flex ref={ref} sx={listSx} {...rest} />;
+  }),
+};

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/shared.ts

@@ -13,7 +13,7 @@ export const getProgressMessage = (data?: S['InvocationProgressEvent'] | null) =
 
 export const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3))';
 
-export const getQueueItemElementId = (itemId: number) => `queue-item-status-card-${itemId}`;
+export const getQueueItemElementId = (index: number) => `queue-item-preview-${index}`;
 
 export const getOutputImageName = (item: S['SessionQueueItem']) => {
   const nodeId = Object.entries(item.session.source_prepared_mapping).find(([nodeId]) =>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx

@@ -1,7 +1,6 @@
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
 import { StagingAreaToolbarAcceptButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton';
 import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
 import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
@@ -12,7 +11,7 @@ import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/
 import { StagingAreaToolbarSaveSelectedToGalleryButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton';
 import { StagingAreaToolbarToggleShowResultsButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { StagingAreaAutoSwitchButtons } from './StagingAreaAutoSwitchButtons';
@@ -23,16 +22,6 @@ export const StagingAreaToolbar = memo(() => {
 
   const ctx = useCanvasSessionContext();
 
-  useEffect(() => {
-    return ctx.$selectedItemId.listen((id) => {
-      if (id !== null) {
-        document
-          .getElementById(getQueueItemElementId(id))
-          ?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
-      }
-    });
-  }, [ctx.$selectedItemId]);
-
   useHotkeys('meta+left', ctx.selectFirst, { preventDefault: true });
   useHotkeys('meta+right', ctx.selectLast, { preventDefault: true });
 

invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx

@@ -482,11 +482,6 @@ export const NewGallery = memo(() => {
 
   const context = useMemo<GridContext>(() => ({ imageNames, queryArgs }), [imageNames, queryArgs]);
 
-  // Item content function
-  const itemContent: GridItemContent<string, GridContext> = useCallback((index, imageName) => {
-    return <ImageAtPosition index={index} imageName={imageName} />;
-  }, []);
-
   if (isLoading) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center" gap={4}>
@@ -511,7 +506,7 @@ export const NewGallery = memo(() => {
         ref={virtuosoRef}
         context={context}
         data={imageNames}
-        increaseViewportBy={2048}
+        increaseViewportBy={4096}
         itemContent={itemContent}
         computeItemKey={computeItemKey}
         components={components}
@@ -528,8 +523,12 @@ export const NewGallery = memo(() => {
 NewGallery.displayName = 'NewGallery';
 
 const scrollSeekConfiguration: ScrollSeekConfiguration = {
-  enter: (velocity) => velocity > 4096,
-  exit: (velocity) => velocity === 0,
+  enter: (velocity) => {
+    return Math.abs(velocity) > 2048;
+  },
+  exit: (velocity) => {
+    return velocity === 0;
+  },
 };
 
 // Styles
@@ -549,6 +548,10 @@ const ListComponent: GridComponents<GridContext>['List'] = forwardRef(({ context
 });
 ListComponent.displayName = 'ListComponent';
 
+const itemContent: GridItemContent<string, GridContext> = (index, imageName) => {
+  return <ImageAtPosition index={index} imageName={imageName} />;
+};
+
 const ItemComponent: GridComponents<GridContext>['Item'] = forwardRef(({ context: _, ...rest }, ref) => (
   <GridItem ref={ref} aspectRatio="1/1" {...rest} />
 ));

invokeai/frontend/web/src/features/gallery/hooks/useRangeBasedImageFetching.ts

@@ -1,5 +1,5 @@
 import { useAppStore } from 'app/store/storeHooks';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { ListRange } from 'react-virtuoso';
 import { imagesApi, useGetImageDTOsByNamesMutation } from 'services/api/endpoints/images';
 import { useThrottledCallback } from 'use-debounce';
@@ -13,33 +13,20 @@ interface UseRangeBasedImageFetchingReturn {
   onRangeChanged: (range: ListRange) => void;
 }
 
-const getUncachedNames = (imageNames: string[], cachedImageNames: string[], range: ListRange): string[] => {
-  if (range.startIndex === range.endIndex) {
-    // If the start and end indices are the same, no range to fetch
-    return [];
-  }
+const getUncachedNames = (imageNames: string[], cachedImageNames: string[], ranges: ListRange[]): string[] => {
+  const uncachedNamesSet = new Set<string>();
+  const cachedImageNamesSet = new Set(cachedImageNames);
 
-  if (imageNames.length === 0) {
-    return [];
-  }
-
-  const start = Math.max(0, range.startIndex);
-  const end = Math.min(imageNames.length - 1, range.endIndex);
-
-  if (cachedImageNames.length === 0) {
-    return imageNames.slice(start, end + 1);
-  }
-
-  const uncachedNames: string[] = [];
-
-  for (let i = start; i <= end; i++) {
-    const imageName = imageNames[i]!;
-    if (!cachedImageNames.includes(imageName)) {
-      uncachedNames.push(imageName);
+  for (const range of ranges) {
+    for (let i = range.startIndex; i <= range.endIndex; i++) {
+      const n = imageNames[i]!;
+      if (n && !cachedImageNamesSet.has(n)) {
+        uncachedNamesSet.add(n);
+      }
     }
   }
 
-  return uncachedNames;
+  return Array.from(uncachedNamesSet);
 };
 
 /**
@@ -53,39 +40,36 @@ export const useRangeBasedImageFetching = ({
 }: UseRangeBasedImageFetchingArgs): UseRangeBasedImageFetchingReturn => {
   const store = useAppStore();
   const [getImageDTOsByNames] = useGetImageDTOsByNamesMutation();
-  const lastRangeRef = useRef<ListRange | null>(null);
+  const [lastRange, setLastRange] = useState<ListRange | null>(null);
+  const [pendingRanges, setPendingRanges] = useState<ListRange[]>([]);
 
   const fetchImages = useCallback(
-    (visibleRange: ListRange) => {
+    (ranges: ListRange[], imageNames: string[]) => {
       if (!enabled) {
         return;
       }
       const cachedImageNames = imagesApi.util.selectCachedArgsForQuery(store.getState(), 'getImageDTO');
-      const uncachedNames = getUncachedNames(imageNames, cachedImageNames, visibleRange);
+      const uncachedNames = getUncachedNames(imageNames, cachedImageNames, ranges);
       if (uncachedNames.length === 0) {
         return;
       }
       getImageDTOsByNames({ image_names: uncachedNames });
-      lastRangeRef.current = visibleRange;
+      setPendingRanges([]);
     },
-    [enabled, getImageDTOsByNames, imageNames, store]
+    [enabled, getImageDTOsByNames, store]
   );
 
-  const throttledFetchImages = useThrottledCallback(fetchImages, 100);
+  const throttledFetchImages = useThrottledCallback(fetchImages, 500);
 
-  const onRangeChanged = useCallback(
-    (range: ListRange) => {
-      throttledFetchImages(range);
-    },
-    [throttledFetchImages]
-  );
+  const onRangeChanged = useCallback((range: ListRange) => {
+    setLastRange(range);
+    setPendingRanges((prev) => [...prev, range]);
+  }, []);
 
   useEffect(() => {
-    if (!lastRangeRef.current) {
-      return;
-    }
-    throttledFetchImages(lastRangeRef.current);
-  }, [imageNames, throttledFetchImages]);
+    const combinedRanges = lastRange ? [...pendingRanges, lastRange] : pendingRanges;
+    throttledFetchImages(combinedRanges, imageNames);
+  }, [imageNames, lastRange, pendingRanges, throttledFetchImages]);
 
   return {
     onRangeChanged,

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx

@@ -26,14 +26,14 @@ const optionsObject: Record<Language, string> = {
   nl: 'Nederlands',
   pl: 'Polski',
   pt: 'Português',
-  pt_BR: 'Português do Brasil',
+  'pt-BR': 'Português do Brasil',
   ru: 'Русский',
   sv: 'Svenska',
   tr: 'Türkçe',
   ua: 'Украї́нська',
   vi: 'Tiếng Việt',
-  zh_CN: '简体中文',
-  zh_Hant: '漢語',
+  'zh-CN': '简体中文',
+  'zh-Hant': '漢語',
 };
 
 const options = map(optionsObject, (label, value) => ({ label, value }));

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -9,7 +9,7 @@ import { uniq } from 'es-toolkit/compat';
 import type { Language, SystemState } from './types';
 
 const initialSystemState: SystemState = {
-  _version: 1,
+  _version: 2,
   shouldConfirmOnDelete: true,
   shouldAntialiasProgressImage: false,
   shouldConfirmOnNewSession: true,
@@ -96,6 +96,10 @@ const migrateSystemState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
   }
+  if (state._version === 1) {
+    state.language = (state as SystemState).language.replace('_', '-');
+    state._version = 2;
+  }
   return state;
 };
 

invokeai/frontend/web/src/features/system/store/types.ts

@@ -17,20 +17,20 @@ const zLanguage = z.enum([
   'nl',
   'pl',
   'pt',
-  'pt_BR',
+  'pt-BR',
   'ru',
   'sv',
   'tr',
   'ua',
   'vi',
-  'zh_CN',
-  'zh_Hant',
+  'zh-CN',
+  'zh-Hant',
 ]);
 export type Language = z.infer<typeof zLanguage>;
 export const isLanguage = (v: unknown): v is Language => zLanguage.safeParse(v).success;
 
 export interface SystemState {
-  _version: 1;
+  _version: 2;
   shouldConfirmOnDelete: boolean;
   shouldAntialiasProgressImage: boolean;
   shouldConfirmOnNewSession: boolean;

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

@@ -13,7 +13,7 @@ export const StagingArea = memo(() => {
   }
 
   return (
-    <Flex position="absolute" flexDir="column" bottom={4} gap={2} align="center" justify="center" left={4} right={4}>
+    <Flex position="absolute" flexDir="column" bottom={2} gap={2} align="center" justify="center" left={2} right={2}>
       <StagingAreaItemsList />
       <StagingAreaToolbar />
     </Flex>

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]);
+};

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "6.0.0"
+__version__ = "6.1.0rc1"