Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): update useGlobalModifiers to store each key independently

Browse Source 
This reduces rerenders when the user presses a modifier key.
This commit is contained in:
psychedelicious
2024-01-01 15:55:11 +11:00
committed by Kent Keirsey
parent 7e2eeec1f3
commit 5c3dd62ae0
5 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.tsx
View File

@ -1,6 +1,6 @@
import { forwardRef, NumberInput as ChakraNumberInput } from '@chakra-ui/react'; import { forwardRef, NumberInput as ChakraNumberInput } from '@chakra-ui/react';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { $modifiers } from 'common/hooks/useGlobalModifiers'; import { $shift } from 'common/hooks/useGlobalModifiers';
import { roundToMultiple } from 'common/util/roundDownToMultiple'; import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { stopPastePropagation } from 'common/util/stopPastePropagation'; import { stopPastePropagation } from 'common/util/stopPastePropagation';
import { clamp } from 'lodash-es'; import { clamp } from 'lodash-es';
@ -29,10 +29,10 @@ export const InvNumberInput = memo(
const [valueAsString, setValueAsString] = useState<string>(String(value)); const [valueAsString, setValueAsString] = useState<string>(String(value));
const [valueAsNumber, setValueAsNumber] = useState<number>(value); const [valueAsNumber, setValueAsNumber] = useState<number>(value);
const modifiers = useStore($modifiers); const shift = useStore($shift);
const step = useMemo( const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step), () => (shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step] [shift, _fineStep, _step]
); );
const isInteger = useMemo( const isInteger = useMemo(
() => Number.isInteger(_step) && Number.isInteger(_fineStep ?? 1), () => Number.isInteger(_step) && Number.isInteger(_fineStep ?? 1),

8
invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx
View File

@ -9,7 +9,7 @@ import {
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import type { InvFormattedMark } from 'common/components/InvSlider/types'; import type { InvFormattedMark } from 'common/components/InvSlider/types';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $modifiers } from 'common/hooks/useGlobalModifiers'; import { $shift } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
@ -35,10 +35,10 @@ export const InvRangeSlider = memo(
const [isMouseOverSlider, setIsMouseOverSlider] = useState(false); const [isMouseOverSlider, setIsMouseOverSlider] = useState(false);
const [isChanging, setIsChanging] = useState(false); const [isChanging, setIsChanging] = useState(false);
const modifiers = useStore($modifiers); const shift = useStore($shift);
const step = useMemo( const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step), () => (shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step] [shift, _fineStep, _step]
); );
const controlProps = useFormControl({}); const controlProps = useFormControl({});

8
invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx
View File

@ -8,7 +8,7 @@ import {
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $modifiers } from 'common/hooks/useGlobalModifiers'; import { $shift } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
@ -36,10 +36,10 @@ export const InvSlider = memo((props: InvSliderProps) => {
const [isMouseOverSlider, setIsMouseOverSlider] = useState(false); const [isMouseOverSlider, setIsMouseOverSlider] = useState(false);
const [isChanging, setIsChanging] = useState(false); const [isChanging, setIsChanging] = useState(false);
const modifiers = useStore($modifiers); const shift = useStore($shift);
const step = useMemo( const step = useMemo(
() => (modifiers.shift ? _fineStep ?? _step : _step), () => (shift ? _fineStep ?? _step : _step),
[modifiers.shift, _fineStep, _step] [shift, _fineStep, _step]
); );
const controlProps = useFormControl({}); const controlProps = useFormControl({});

41
invokeai/frontend/web/src/common/hooks/useGlobalModifiers.ts
View File

@ -1,27 +1,18 @@
import { atom, map } from 'nanostores'; import { atom } from 'nanostores';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
export type Modifiers = { export const $shift = atom(false);
shift: boolean; export const $ctrl = atom(false);
ctrl: boolean; export const $meta = atom(false);
meta: boolean; export const $alt = atom(false);
alt: boolean;
};
export const $modifiers = map<Modifiers>({
shift: false,
ctrl: false,
meta: false,
alt: false,
});
const $subscribers = atom(0); const $subscribers = atom(0);
const listener = (e: KeyboardEvent) => { const listener = (e: KeyboardEvent) => {
$modifiers.setKey('shift', e.shiftKey); $shift.set(e.shiftKey);
$modifiers.setKey('ctrl', e.ctrlKey); $ctrl.set(e.ctrlKey);
$modifiers.setKey('alt', e.altKey); $alt.set(e.altKey);
$modifiers.setKey('meta', e.metaKey); $meta.set(e.metaKey);
}; };
export const useGlobalModifiersInit = () => { export const useGlobalModifiersInit = () => {
@ -46,16 +37,16 @@ export const useGlobalModifiersInit = () => {
export const useGlobalModifiersSetters = () => { export const useGlobalModifiersSetters = () => {
const setShift = useCallback((shift: boolean) => { const setShift = useCallback((shift: boolean) => {
$modifiers.setKey('shift', shift); $shift.set(shift);
}, []); }, []);
const setCtrl = useCallback((shift: boolean) => { const setCtrl = useCallback((ctrl: boolean) => {
$modifiers.setKey('ctrl', shift); $ctrl.set(ctrl);
}, []); }, []);
const setAlt = useCallback((shift: boolean) => { const setAlt = useCallback((alt: boolean) => {
$modifiers.setKey('alt', shift); $alt.set(alt);
}, []); }, []);
const setMeta = useCallback((shift: boolean) => { const setMeta = useCallback((meta: boolean) => {
$modifiers.setKey('meta', shift); $meta.set(meta);
}, []); }, []);
return { setShift, setCtrl, setAlt, setMeta }; return { setShift, setCtrl, setAlt, setMeta };
}; };

4
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -6,7 +6,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import IAIDndImage from 'common/components/IAIDndImage'; import IAIDndImage from 'common/components/IAIDndImage';
import IAIDndImageIcon from 'common/components/IAIDndImageIcon'; import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
import IAIFillSkeleton from 'common/components/IAIFillSkeleton'; import IAIFillSkeleton from 'common/components/IAIFillSkeleton';
import { $modifiers } from 'common/hooks/useGlobalModifiers'; import { $shift } from 'common/hooks/useGlobalModifiers';
import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
import type { import type {
ImageDraggableData, ImageDraggableData,
@ -42,7 +42,7 @@ const GalleryImage = (props: HoverableImageProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { imageName, virtuosoContext } = props; const { imageName, virtuosoContext } = props;
const { currentData: imageDTO } = useGetImageDTOQuery(imageName); const { currentData: imageDTO } = useGetImageDTOQuery(imageName);
const { shift } = useStore($modifiers); const shift = useStore($shift);
const { t } = useTranslation(); const { t } = useTranslation();
const { handleClick, isSelected, selection, selectionCount } = const { handleClick, isSelected, selection, selectionCount } =