3.0 Pre-Release Polish -- Bug Fixes / Style Fixes / Misc

invokeai/frontend/web/src/app/components/GlobalHotkeys.ts

@@ -1,7 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import {
   setActiveTab,
   toggleGalleryPanel,
@@ -14,10 +16,11 @@ import React, { memo } from 'react';
 import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
 
 const globalHotkeysSelector = createSelector(
-  (state: RootState) => state.hotkeys,
-  (hotkeys) => {
+  [(state: RootState) => state.hotkeys, (state: RootState) => state.ui],
+  (hotkeys, ui) => {
     const { shift } = hotkeys;
-    return { shift };
+    const { shouldPinParametersPanel, shouldPinGallery } = ui;
+    return { shift, shouldPinGallery, shouldPinParametersPanel };
   },
   {
     memoizeOptions: {
@@ -34,7 +37,10 @@ const globalHotkeysSelector = createSelector(
  */
 const GlobalHotkeys: React.FC = () => {
   const dispatch = useAppDispatch();
-  const { shift } = useAppSelector(globalHotkeysSelector);
+  const { shift, shouldPinParametersPanel, shouldPinGallery } = useAppSelector(
+    globalHotkeysSelector
+  );
+  const activeTabName = useAppSelector(activeTabNameSelector);
 
   useHotkeys(
     '*',
@@ -51,18 +57,30 @@ const GlobalHotkeys: React.FC = () => {
 
   useHotkeys('o', () => {
     dispatch(toggleParametersPanel());
+    if (activeTabName === 'unifiedCanvas' && shouldPinParametersPanel) {
+      dispatch(requestCanvasRescale());
+    }
   });
 
   useHotkeys(['shift+o'], () => {
     dispatch(togglePinParametersPanel());
+    if (activeTabName === 'unifiedCanvas') {
+      dispatch(requestCanvasRescale());
+    }
   });
 
   useHotkeys('g', () => {
     dispatch(toggleGalleryPanel());
+    if (activeTabName === 'unifiedCanvas' && shouldPinGallery) {
+      dispatch(requestCanvasRescale());
+    }
   });
 
   useHotkeys(['shift+g'], () => {
     dispatch(togglePinGalleryPanel());
+    if (activeTabName === 'unifiedCanvas') {
+      dispatch(requestCanvasRescale());
+    }
   });
 
   useHotkeys('1', () => {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -11,6 +11,7 @@ import {
   setIsMouseOverBoundingBox,
   setIsMovingBoundingBox,
   setIsTransformingBoundingBox,
+  setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
@@ -20,6 +21,7 @@ import { Vector2d } from 'konva/lib/types';
 import { isEqual } from 'lodash-es';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { Group, Rect, Transformer } from 'react-konva';
 
 const boundingBoxPreviewSelector = createSelector(
@@ -91,6 +93,10 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
 
   const scaledStep = 64 * stageScale;
 
+  useHotkeys('N', () => {
+    dispatch(setShouldSnapToGrid(!shouldSnapToGrid));
+  });
+
   const handleOnDragMove = useCallback(
     (e: KonvaEventObject<DragEvent>) => {
       if (!shouldSnapToGrid) {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -139,7 +139,7 @@ const IAICanvasToolChooserOptions = () => {
   );
 
   useHotkeys(
-    ['shift+BracketLeft'],
+    ['Shift+BracketLeft'],
     () => {
       dispatch(
         setBrushColor({
@@ -156,7 +156,7 @@ const IAICanvasToolChooserOptions = () => {
   );
 
   useHotkeys(
-    ['shift+BracketRight'],
+    ['Shift+BracketRight'],
     () => {
       dispatch(
         setBrushColor({

invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

@@ -110,8 +110,11 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
     return (
       <div ref={ref} {...others}>
         <div>
-          <Text>{label}</Text>
-          <Text size="xs" color="base.600">
+          <Text fontWeight={600}>{label}</Text>
+          <Text
+            size="xs"
+            sx={{ color: 'base.600', _dark: { color: 'base.500' } }}
+          >
             {description}
           </Text>
         </div>

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx

@@ -20,8 +20,8 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
         justifyContent: 'space-between',
         px: 2,
         py: 1,
-        bg: 'base.300',
-        _dark: { bg: 'base.700' },
+        bg: 'base.100',
+        _dark: { bg: 'base.900' },
       }}
     >
       <Tooltip label={nodeId}>
@@ -30,7 +30,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
           sx={{
             fontWeight: 600,
             color: 'base.900',
-            _dark: { color: 'base.100' },
+            _dark: { color: 'base.200' },
           }}
         >
           {title}

invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx

@@ -59,7 +59,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
           flexDirection: 'column',
           borderBottomRadius: 'md',
           py: 2,
-          bg: 'base.200',
+          bg: 'base.150',
           _dark: { bg: 'base.800' },
         }}
       >

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -1,9 +1,9 @@
-import 'reactflow/dist/style.css';
 import { Box } from '@chakra-ui/react';
 import { ReactFlowProvider } from 'reactflow';
+import 'reactflow/dist/style.css';
 
-import { Flow } from './Flow';
 import { memo } from 'react';
+import { Flow } from './Flow';
 
 const NodeEditor = () => {
   return (

invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx

@@ -1,9 +1,9 @@
 import { Box, useToken } from '@chakra-ui/react';
 import { NODE_MIN_WIDTH } from 'app/constants';
 
+import { useAppSelector } from 'app/store/storeHooks';
 import { PropsWithChildren } from 'react';
 import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
-import { useAppSelector } from 'app/store/storeHooks';
 
 type NodeWrapperProps = PropsWithChildren & {
   selected: boolean;

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -15,7 +15,7 @@ import {
   ModalOverlay,
   useDisclosure,
 } from '@chakra-ui/react';
-import { cloneElement, ReactElement } from 'react';
+import { ReactElement, cloneElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import HotkeysModalItem from './HotkeysModalItem';
 
@@ -65,11 +65,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       desc: t('hotkeys.pinOptions.desc'),
       hotkey: 'Shift+O',
     },
-    {
-      title: t('hotkeys.toggleViewer.title'),
-      desc: t('hotkeys.toggleViewer.desc'),
-      hotkey: 'Z',
-    },
     {
       title: t('hotkeys.toggleGallery.title'),
       desc: t('hotkeys.toggleGallery.desc'),
@@ -85,12 +80,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       desc: t('hotkeys.changeTabs.desc'),
       hotkey: '1-5',
     },
-
-    {
-      title: t('hotkeys.consoleToggle.title'),
-      desc: t('hotkeys.consoleToggle.desc'),
-      hotkey: '`',
-    },
   ];
 
   const generalHotkeys = [
@@ -109,11 +98,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       desc: t('hotkeys.setParameters.desc'),
       hotkey: 'A',
     },
-    {
-      title: t('hotkeys.restoreFaces.title'),
-      desc: t('hotkeys.restoreFaces.desc'),
-      hotkey: 'Shift+R',
-    },
     {
       title: t('hotkeys.upscale.title'),
       desc: t('hotkeys.upscale.desc'),

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

@@ -183,7 +183,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
       >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>{t('common.settingsLabel')}</ModalHeader>
+          <ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             <Flex sx={{ gap: 4, flexDirection: 'column' }}>
@@ -331,12 +331,15 @@ export default SettingsModal;
 const StyledFlex = (props: PropsWithChildren) => {
   return (
     <Flex
-      layerStyle="second"
       sx={{
         flexDirection: 'column',
         gap: 2,
         p: 4,
         borderRadius: 'base',
+        bg: 'base.100',
+        _dark: {
+          bg: 'base.900',
+        },
       }}
     >
       {props.children}

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx

@@ -3,7 +3,7 @@ import { EntityState } from '@reduxjs/toolkit';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';
 import { forEach } from 'lodash-es';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -44,13 +44,7 @@ const ModelList = (props: ModelListProps) => {
 
   return (
     <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
-      <Flex
-        flexDirection="column"
-        gap={4}
-        maxHeight={window.innerHeight - 240}
-        overflow="scroll"
-        paddingInlineEnd={4}
-      >
+      <Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
         <ButtonGroup isAttached>
           <IAIButton
             onClick={() => setModelFormatFilter('all')}
@@ -83,35 +77,39 @@ const ModelList = (props: ModelListProps) => {
 
         {['all', 'diffusers'].includes(modelFormatFilter) &&
           filteredDiffusersModels.length > 0 && (
-            <Flex sx={{ gap: 2, flexDir: 'column' }}>
-              <Text variant="subtext" fontSize="sm">
-                Diffusers
-              </Text>
-              {filteredDiffusersModels.map((model) => (
-                <ModelListItem
-                  key={model.id}
-                  model={model}
-                  isSelected={selectedModelId === model.id}
-                  setSelectedModelId={setSelectedModelId}
-                />
-              ))}
-            </Flex>
+            <StyledModelContainer>
+              <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                <Text variant="subtext" fontSize="sm">
+                  Diffusers
+                </Text>
+                {filteredDiffusersModels.map((model) => (
+                  <ModelListItem
+                    key={model.id}
+                    model={model}
+                    isSelected={selectedModelId === model.id}
+                    setSelectedModelId={setSelectedModelId}
+                  />
+                ))}
+              </Flex>
+            </StyledModelContainer>
           )}
         {['all', 'checkpoint'].includes(modelFormatFilter) &&
           filteredCheckpointModels.length > 0 && (
-            <Flex sx={{ gap: 2, flexDir: 'column' }}>
-              <Text variant="subtext" fontSize="sm">
-                Checkpoint
-              </Text>
-              {filteredCheckpointModels.map((model) => (
-                <ModelListItem
-                  key={model.id}
-                  model={model}
-                  isSelected={selectedModelId === model.id}
-                  setSelectedModelId={setSelectedModelId}
-                />
-              ))}
-            </Flex>
+            <StyledModelContainer>
+              <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                <Text variant="subtext" fontSize="sm">
+                  Checkpoint
+                </Text>
+                {filteredCheckpointModels.map((model) => (
+                  <ModelListItem
+                    key={model.id}
+                    model={model}
+                    isSelected={selectedModelId === model.id}
+                    setSelectedModelId={setSelectedModelId}
+                  />
+                ))}
+              </Flex>
+            </StyledModelContainer>
           )}
       </Flex>
     </Flex>
@@ -143,3 +141,24 @@ const modelsFilter = (
   });
   return filteredModels;
 };
+
+const StyledModelContainer = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      flexDirection="column"
+      maxHeight={window.innerHeight - 280}
+      overflow="scroll"
+      gap={4}
+      borderRadius={4}
+      p={4}
+      sx={{
+        bg: 'base.200',
+        _dark: {
+          bg: 'base.800',
+        },
+      }}
+    >
+      {props.children}
+    </Flex>
+  );
+};