Skip to content

Commit 68f2fb2

Browse files
blessedcoolantblessedcoolant
authored
3.0 Pre-Release Polish -- Bug Fixes / Style Fixes / Misc (#3812)
## What type of PR is this? (check all applicable) - [ ] Refactor - [x] Feature - [x] Bug Fix - [ ] Optimization - [ ] Documentation Update ## Have you discussed this change with the InvokeAI team? - [x] Yes - [ ] No, because: ## Description Making some final style fixes before we push the next 3.0 version tomorrow. - Fixed light mode colors in Settings Modal. - Double checked other light mode colors. Nothing seems off. - Added Base Model badge to the model list item. Makes it visually better and also serves as a quick glance feature for the user. - Some minor styling updates to the Node Editor. - Fixed hotkeys 'G' and 'O', 'Shift+G' and 'Shift+O' used to toggle the panels not resizing canvas. #3780 - Fixed hotkey 'N' not working for Snap To Grid on Canvas. - Fixed brush opacity hotkeys not working. - Cleaned up hotkeys modal of hotkeys that are no longer used. - Updated compel requirement to `2.0.0` ## Related Tickets & Documents <!-- For pull requests that relate or close an issue, please include them below. For example having the text: "closes #1234" would connect the current pull request to issue 1234. And when we merge the pull request, Github will automatically close the issue. --> - Related Issue # - Closes #3780 ## QA Instructions, Screenshots, Recordings <!-- Please provide steps on how to test changes, any hardware or software specifications as well as any other pertinent information. --> ## Added/updated tests? - [ ] Yes - [x] No : _please replace this line with details on why tests have not been included_ ## [optional] Are there any post deployment tasks we need to perform?
2 parents e31b2a6 + bd4eaa4 commit 68f2fb2

File tree

14 files changed

+135
-77
lines changed

14 files changed

+135
-77
lines changed

Diff for: ‎invokeai/frontend/web/src/app/components/GlobalHotkeys.ts

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { createSelector } from '@reduxjs/toolkit';
22
import { RootState } from 'app/store/store';
33
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
4+
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
45
import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
6+
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
57
import {
68
setActiveTab,
79
toggleGalleryPanel,
@@ -14,10 +16,11 @@ import React, { memo } from 'react';
1416
import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
1517

1618
const globalHotkeysSelector = createSelector(
17-
(state: RootState) => state.hotkeys,
18-
(hotkeys) => {
19+
[(state: RootState) => state.hotkeys, (state: RootState) => state.ui],
20+
(hotkeys, ui) => {
1921
const { shift } = hotkeys;
20-
return { shift };
22+
const { shouldPinParametersPanel, shouldPinGallery } = ui;
23+
return { shift, shouldPinGallery, shouldPinParametersPanel };
2124
},
2225
{
2326
memoizeOptions: {
@@ -34,7 +37,10 @@ const globalHotkeysSelector = createSelector(
3437
*/
3538
const GlobalHotkeys: React.FC = () => {
3639
const dispatch = useAppDispatch();
37-
const { shift } = useAppSelector(globalHotkeysSelector);
40+
const { shift, shouldPinParametersPanel, shouldPinGallery } = useAppSelector(
41+
globalHotkeysSelector
42+
);
43+
const activeTabName = useAppSelector(activeTabNameSelector);
3844

3945
useHotkeys(
4046
'*',
@@ -51,18 +57,30 @@ const GlobalHotkeys: React.FC = () => {
5157

5258
useHotkeys('o', () => {
5359
dispatch(toggleParametersPanel());
60+
if (activeTabName === 'unifiedCanvas' && shouldPinParametersPanel) {
61+
dispatch(requestCanvasRescale());
62+
}
5463
});
5564

5665
useHotkeys(['shift+o'], () => {
5766
dispatch(togglePinParametersPanel());
67+
if (activeTabName === 'unifiedCanvas') {
68+
dispatch(requestCanvasRescale());
69+
}
5870
});
5971

6072
useHotkeys('g', () => {
6173
dispatch(toggleGalleryPanel());
74+
if (activeTabName === 'unifiedCanvas' && shouldPinGallery) {
75+
dispatch(requestCanvasRescale());
76+
}
6277
});
6378

6479
useHotkeys(['shift+g'], () => {
6580
dispatch(togglePinGalleryPanel());
81+
if (activeTabName === 'unifiedCanvas') {
82+
dispatch(requestCanvasRescale());
83+
}
6684
});
6785

6886
useHotkeys('1', () => {

Diff for: ‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
setIsMouseOverBoundingBox,
1212
setIsMovingBoundingBox,
1313
setIsTransformingBoundingBox,
14+
setShouldSnapToGrid,
1415
} from 'features/canvas/store/canvasSlice';
1516
import { uiSelector } from 'features/ui/store/uiSelectors';
1617
import Konva from 'konva';
@@ -20,6 +21,7 @@ import { Vector2d } from 'konva/lib/types';
2021
import { isEqual } from 'lodash-es';
2122

2223
import { useCallback, useEffect, useRef, useState } from 'react';
24+
import { useHotkeys } from 'react-hotkeys-hook';
2325
import { Group, Rect, Transformer } from 'react-konva';
2426

2527
const boundingBoxPreviewSelector = createSelector(
@@ -91,6 +93,10 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
9193

9294
const scaledStep = 64 * stageScale;
9395

96+
useHotkeys('N', () => {
97+
dispatch(setShouldSnapToGrid(!shouldSnapToGrid));
98+
});
99+
94100
const handleOnDragMove = useCallback(
95101
(e: KonvaEventObject<DragEvent>) => {
96102
if (!shouldSnapToGrid) {

Diff for: ‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const IAICanvasToolChooserOptions = () => {
139139
);
140140

141141
useHotkeys(
142-
['shift+BracketLeft'],
142+
['Shift+BracketLeft'],
143143
() => {
144144
dispatch(
145145
setBrushColor({
@@ -156,7 +156,7 @@ const IAICanvasToolChooserOptions = () => {
156156
);
157157

158158
useHotkeys(
159-
['shift+BracketRight'],
159+
['Shift+BracketRight'],
160160
() => {
161161
dispatch(
162162
setBrushColor({

Diff for: ‎invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,11 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
110110
return (
111111
<div ref={ref} {...others}>
112112
<div>
113-
<Text>{label}</Text>
114-
<Text size="xs" color="base.600">
113+
<Text fontWeight={600}>{label}</Text>
114+
<Text
115+
size="xs"
116+
sx={{ color: 'base.600', _dark: { color: 'base.500' } }}
117+
>
115118
{description}
116119
</Text>
117120
</div>

Diff for: ‎invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
2020
justifyContent: 'space-between',
2121
px: 2,
2222
py: 1,
23-
bg: 'base.300',
24-
_dark: { bg: 'base.700' },
23+
bg: 'base.100',
24+
_dark: { bg: 'base.900' },
2525
}}
2626
>
2727
<Tooltip label={nodeId}>
@@ -30,7 +30,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
3030
sx={{
3131
fontWeight: 600,
3232
color: 'base.900',
33-
_dark: { color: 'base.100' },
33+
_dark: { color: 'base.200' },
3434
}}
3535
>
3636
{title}

Diff for: ‎invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
5959
flexDirection: 'column',
6060
borderBottomRadius: 'md',
6161
py: 2,
62-
bg: 'base.200',
62+
bg: 'base.150',
6363
_dark: { bg: 'base.800' },
6464
}}
6565
>

Diff for: ‎invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import 'reactflow/dist/style.css';
21
import { Box } from '@chakra-ui/react';
32
import { ReactFlowProvider } from 'reactflow';
3+
import 'reactflow/dist/style.css';
44

5-
import { Flow } from './Flow';
65
import { memo } from 'react';
6+
import { Flow } from './Flow';
77

88
const NodeEditor = () => {
99
return (

Diff for: ‎invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Box, useToken } from '@chakra-ui/react';
22
import { NODE_MIN_WIDTH } from 'app/constants';
33

4+
import { useAppSelector } from 'app/store/storeHooks';
45
import { PropsWithChildren } from 'react';
56
import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
6-
import { useAppSelector } from 'app/store/storeHooks';
77

88
type NodeWrapperProps = PropsWithChildren & {
99
selected: boolean;

Diff for: ‎invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

+1-17
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
ModalOverlay,
1616
useDisclosure,
1717
} from '@chakra-ui/react';
18-
import { cloneElement, ReactElement } from 'react';
18+
import { ReactElement, cloneElement } from 'react';
1919
import { useTranslation } from 'react-i18next';
2020
import HotkeysModalItem from './HotkeysModalItem';
2121

@@ -65,11 +65,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
6565
desc: t('hotkeys.pinOptions.desc'),
6666
hotkey: 'Shift+O',
6767
},
68-
{
69-
title: t('hotkeys.toggleViewer.title'),
70-
desc: t('hotkeys.toggleViewer.desc'),
71-
hotkey: 'Z',
72-
},
7368
{
7469
title: t('hotkeys.toggleGallery.title'),
7570
desc: t('hotkeys.toggleGallery.desc'),
@@ -85,12 +80,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
8580
desc: t('hotkeys.changeTabs.desc'),
8681
hotkey: '1-5',
8782
},
88-
89-
{
90-
title: t('hotkeys.consoleToggle.title'),
91-
desc: t('hotkeys.consoleToggle.desc'),
92-
hotkey: '`',
93-
},
9483
];
9584

9685
const generalHotkeys = [
@@ -109,11 +98,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
10998
desc: t('hotkeys.setParameters.desc'),
11099
hotkey: 'A',
111100
},
112-
{
113-
title: t('hotkeys.restoreFaces.title'),
114-
desc: t('hotkeys.restoreFaces.desc'),
115-
hotkey: 'Shift+R',
116-
},
117101
{
118102
title: t('hotkeys.upscale.title'),
119103
desc: t('hotkeys.upscale.desc'),

Diff for: ‎invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
183183
>
184184
<ModalOverlay />
185185
<ModalContent>
186-
<ModalHeader>{t('common.settingsLabel')}</ModalHeader>
186+
<ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
187187
<ModalCloseButton />
188188
<ModalBody>
189189
<Flex sx={{ gap: 4, flexDirection: 'column' }}>
@@ -331,12 +331,15 @@ export default SettingsModal;
331331
const StyledFlex = (props: PropsWithChildren) => {
332332
return (
333333
<Flex
334-
layerStyle="second"
335334
sx={{
336335
flexDirection: 'column',
337336
gap: 2,
338337
p: 4,
339338
borderRadius: 'base',
339+
bg: 'base.100',
340+
_dark: {
341+
bg: 'base.900',
342+
},
340343
}}
341344
>
342345
{props.children}

Diff for: ‎invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx

+53-34
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { EntityState } from '@reduxjs/toolkit';
33
import IAIButton from 'common/components/IAIButton';
44
import IAIInput from 'common/components/IAIInput';
55
import { forEach } from 'lodash-es';
6-
import type { ChangeEvent } from 'react';
6+
import type { ChangeEvent, PropsWithChildren } from 'react';
77
import { useCallback, useState } from 'react';
88
import { useTranslation } from 'react-i18next';
99
import {
@@ -44,13 +44,7 @@ const ModelList = (props: ModelListProps) => {
4444

4545
return (
4646
<Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
47-
<Flex
48-
flexDirection="column"
49-
gap={4}
50-
maxHeight={window.innerHeight - 240}
51-
overflow="scroll"
52-
paddingInlineEnd={4}
53-
>
47+
<Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
5448
<ButtonGroup isAttached>
5549
<IAIButton
5650
onClick={() => setModelFormatFilter('all')}
@@ -83,35 +77,39 @@ const ModelList = (props: ModelListProps) => {
8377

8478
{['all', 'diffusers'].includes(modelFormatFilter) &&
8579
filteredDiffusersModels.length > 0 && (
86-
<Flex sx={{ gap: 2, flexDir: 'column' }}>
87-
<Text variant="subtext" fontSize="sm">
88-
Diffusers
89-
</Text>
90-
{filteredDiffusersModels.map((model) => (
91-
<ModelListItem
92-
key={model.id}
93-
model={model}
94-
isSelected={selectedModelId === model.id}
95-
setSelectedModelId={setSelectedModelId}
96-
/>
97-
))}
98-
</Flex>
80+
<StyledModelContainer>
81+
<Flex sx={{ gap: 2, flexDir: 'column' }}>
82+
<Text variant="subtext" fontSize="sm">
83+
Diffusers
84+
</Text>
85+
{filteredDiffusersModels.map((model) => (
86+
<ModelListItem
87+
key={model.id}
88+
model={model}
89+
isSelected={selectedModelId === model.id}
90+
setSelectedModelId={setSelectedModelId}
91+
/>
92+
))}
93+
</Flex>
94+
</StyledModelContainer>
9995
)}
10096
{['all', 'checkpoint'].includes(modelFormatFilter) &&
10197
filteredCheckpointModels.length > 0 && (
102-
<Flex sx={{ gap: 2, flexDir: 'column' }}>
103-
<Text variant="subtext" fontSize="sm">
104-
Checkpoint
105-
</Text>
106-
{filteredCheckpointModels.map((model) => (
107-
<ModelListItem
108-
key={model.id}
109-
model={model}
110-
isSelected={selectedModelId === model.id}
111-
setSelectedModelId={setSelectedModelId}
112-
/>
113-
))}
114-
</Flex>
98+
<StyledModelContainer>
99+
<Flex sx={{ gap: 2, flexDir: 'column' }}>
100+
<Text variant="subtext" fontSize="sm">
101+
Checkpoint
102+
</Text>
103+
{filteredCheckpointModels.map((model) => (
104+
<ModelListItem
105+
key={model.id}
106+
model={model}
107+
isSelected={selectedModelId === model.id}
108+
setSelectedModelId={setSelectedModelId}
109+
/>
110+
))}
111+
</Flex>
112+
</StyledModelContainer>
115113
)}
116114
</Flex>
117115
</Flex>
@@ -143,3 +141,24 @@ const modelsFilter = (
143141
});
144142
return filteredModels;
145143
};
144+
145+
const StyledModelContainer = (props: PropsWithChildren) => {
146+
return (
147+
<Flex
148+
flexDirection="column"
149+
maxHeight={window.innerHeight - 280}
150+
overflow="scroll"
151+
gap={4}
152+
borderRadius={4}
153+
p={4}
154+
sx={{
155+
bg: 'base.200',
156+
_dark: {
157+
bg: 'base.800',
158+
},
159+
}}
160+
>
161+
{props.children}
162+
</Flex>
163+
);
164+
};

0 commit comments

Comments
 (0)