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

changed hotkeys (#5542)

Browse Source 
Adds adds ctrl/meta + scroll to change brush size on canvas.

* changed hotkeys

* new hotkey as an additional

* lint fixed"

* added ctrl scroll and removed hotkey

* using

* added fix

* feedbck_changes

* brush size change logic

* feat(ui): also check for meta key when modifying brush size

* feat(ui): add comment linking to where brush size algo was determined

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
This commit is contained in:
Rohinish 2024-01-31 10:27:16 +05:30 committed by GitHub
parent 1e855f8290
commit 0d4de4cc63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
View File

@ -1,7 +1,8 @@
import { $ctrl, $meta } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore'; import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore';
import { setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice'; import { setBrushSize, setStageCoordinates, setStageScale } from 'features/canvas/store/canvasSlice';
import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants'; import { CANVAS_SCALE_BY, MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/canvas/util/constants';
import type Konva from 'konva'; import type Konva from 'konva';
import type { KonvaEventObject } from 'konva/lib/Node'; import type { KonvaEventObject } from 'konva/lib/Node';
@ -13,6 +14,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const stageScale = useAppSelector((s) => s.canvas.stageScale); const stageScale = useAppSelector((s) => s.canvas.stageScale);
const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld); const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld);
const brushSize = useAppSelector((s) => s.canvas.brushSize);
return useCallback( return useCallback(
(e: KonvaEventObject<WheelEvent>) => { (e: KonvaEventObject<WheelEvent>) => {
@ -23,7 +25,22 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
e.evt.preventDefault(); e.evt.preventDefault();
// checking for ctrl key is pressed or not,
// so that brush size can be controlled using ctrl + scroll up/down
if ($ctrl.get() || $meta.get()) {
// This equation was derived by fitting a curve to the desired brush sizes and deltas
// see https://github.com/invoke-ai/InvokeAI/pull/5542#issuecomment-1915847565
const targetDelta = Math.sign(e.evt.deltaY) * 0.7363 * Math.pow(1.0394, brushSize);
// This needs to be clamped to prevent the delta from getting too large
const finalDelta = clamp(targetDelta, -20, 20);
// The new brush size is also clamped to prevent it from getting too large or small
const newBrushSize = clamp(brushSize + finalDelta, 1, 500);
dispatch(setBrushSize(newBrushSize));
} else {
const cursorPos = stageRef.current.getPointerPosition(); const cursorPos = stageRef.current.getPointerPosition();
let delta = e.evt.deltaY;
if (!cursorPos) { if (!cursorPos) {
return; return;
@ -33,9 +50,6 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
x: (cursorPos.x - stageRef.current.x()) / stageScale, x: (cursorPos.x - stageRef.current.x()) / stageScale,
y: (cursorPos.y - stageRef.current.y()) / stageScale, y: (cursorPos.y - stageRef.current.y()) / stageScale,
}; };
let delta = e.evt.deltaY;
// when we zoom on trackpad, e.evt.ctrlKey is true // when we zoom on trackpad, e.evt.ctrlKey is true
// in that case lets revert direction // in that case lets revert direction
if (e.evt.ctrlKey) { if (e.evt.ctrlKey) {
@ -51,8 +65,9 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
dispatch(setStageScale(newScale)); dispatch(setStageScale(newScale));
dispatch(setStageCoordinates(newCoordinates)); dispatch(setStageCoordinates(newCoordinates));
}
}, },
[stageRef, isMoveStageKeyHeld, stageScale, dispatch] [stageRef, isMoveStageKeyHeld, stageScale, dispatch, brushSize]
); );
}; };