feat(ui): wip img2img ui

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next';
 import { FocusEvent, memo, useEffect, useMemo, useState } from 'react';
 import { BiReset } from 'react-icons/bi';
 import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
+import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
 
 export type IAIFullSliderProps = {
   label: string;
@@ -119,7 +120,9 @@ const IAISlider = (props: IAIFullSliderProps) => {
       min,
       numberInputMax
     );
-    onChange(clamped);
+    const quantized = roundDownToMultiple(clamped, step);
+    onChange(quantized);
+    setLocalInputValue(quantized);
   };
 
   const handleInputChange = (v: number | string) => {

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -0,0 +1,37 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { isEqual } from 'lodash';
+import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
+
+const globalHotkeysSelector = createSelector(
+  (state: RootState) => state.hotkeys,
+  (hotkeys) => {
+    const { shift } = hotkeys;
+    return { shift };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+export const useGlobalHotkeys = () => {
+  const dispatch = useAppDispatch();
+  const { shift } = useAppSelector(globalHotkeysSelector);
+
+  useHotkeys(
+    '*',
+    () => {
+      if (isHotkeyPressed('shift')) {
+        !shift && dispatch(shiftKeyPressed(true));
+      } else {
+        shift && dispatch(shiftKeyPressed(false));
+      }
+    },
+    { keyup: true, keydown: true },
+    [shift]
+  );
+};