github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): even more better focus handling

Browse Source
This commit is contained in:
psychedelicious
2025-07-01 13:32:45 +10:00
parent e817631ba3
commit fa72a97794
22 changed files with 312 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/common/components/FocusRegionWrapper.tsx
View File

@@ -1,7 +1,10 @@
import { Box, type BoxProps, type SystemStyleObject } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { type FocusRegionName, useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
import type { IDockviewPanelProps, IGridviewPanelProps } from 'dockview';
import { selectSystemShouldEnableHighlightFocusedRegions } from 'features/system/store/systemSlice';
import type { PanelParameters } from 'features/ui/layouts/auto-layout-context';
import type { PropsWithChildren } from 'react';
import { memo, useMemo, useRef } from 'react';
interface FocusRegionWrapperProps extends BoxProps {
@@ -9,8 +12,11 @@ interface FocusRegionWrapperProps extends BoxProps {
focusOnMount?: boolean;
}
const BASE_FOCUS_REGION_STYLES: SystemStyleObject = {
export const BASE_FOCUS_REGION_STYLES: SystemStyleObject = {
position: 'relative',
w: 'full',
h: 'full',
p: 2,
'&[data-highlighted="true"]::after': {
borderColor: 'invokeBlue.300',
},
@@ -23,7 +29,6 @@ const BASE_FOCUS_REGION_STYLES: SystemStyleObject = {
border: '1px solid',
borderColor: 'transparent',
pointerEvents: 'none',
// transition: 'border-color 0.1s ease-in-out',
},
};
@@ -50,3 +55,26 @@ export const FocusRegionWrapper = memo((props: FocusRegionWrapperProps) => {
});
FocusRegionWrapper.displayName = 'FocusRegionWrapper';
export const AutoLayoutPanelContainer = memo(
(
props:
| PropsWithChildren<IDockviewPanelProps<PanelParameters>>
| PropsWithChildren<IGridviewPanelProps<PanelParameters>>
) => {
const ref = useRef<HTMLDivElement>(null);
const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions);
useFocusRegion(props.params.focusRegion, ref);
const isFocused = useIsRegionFocused(props.params.focusRegion);
const isHighlighted = isFocused && shouldHighlightFocusedRegions;
return (
<Box ref={ref} tabIndex={-1} sx={BASE_FOCUS_REGION_STYLES} data-highlighted={isHighlighted}>
{props.children}
</Box>
);
}
);
AutoLayoutPanelContainer.displayName = 'AutoLayoutPanelContainer';