Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added precision scroll shortcut

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-03-19 13:29:37 +11:00
parent cfdff1e549
commit b69be17aca
1 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/hooks/useStageInteraction.js
View File

@ -1,8 +1,8 @@
import { useRef, useEffect } from "react";
import { useRef, useEffect, useState } from "react";
import { useGesture } from "react-use-gesture";
import normalizeWheel from "normalize-wheel";
import { useKeyboard } from "../contexts/KeyboardContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
const wheelZoomSpeed = -1;
const touchZoomSpeed = 0.005;
@ -23,6 +23,8 @@ function useStageInteraction(
const pinchPreviousDistanceRef = useRef();
const pinchPreviousOriginRef = useRef();
const [zoomSpeed, setZoomSpeed] = useState(1);
// Prevent accessibility pinch to zoom on Mac
useEffect(() => {
function handleGesture(e) {
@ -55,7 +57,8 @@ function useStageInteraction(
const newScale = Math.min(
Math.max(
stageScale +
(pixelY * wheelZoomSpeed * stageScale) / window.innerHeight,
(pixelY * wheelZoomSpeed * stageScale * zoomSpeed) /
window.innerHeight,
minZoom
),
maxZoom
@ -99,7 +102,8 @@ function useStageInteraction(
const originYDelta = originY - pinchPreviousOriginRef.current.y;
const newScale = Math.min(
Math.max(
stageScale + distanceDelta * touchZoomSpeed * stageScale,
stageScale +
distanceDelta * touchZoomSpeed * stageScale * zoomSpeed,
minZoom
),
maxZoom
@ -176,13 +180,12 @@ function useStageInteraction(
}
);
function handleKeyDown(event) {
function handleKeyDown({ key, ctrlKey, metaKey }) {
// TODO: Find better way to detect whether keyboard event should fire.
// This one fires on all open stages
if (preventInteraction) {
return;
}
const { key, ctrlKey, metaKey } = event;
if (
(key === "=" || key === "+" || key === "-" || key === "_") &&
!ctrlKey &&
@ -192,7 +195,8 @@ function useStageInteraction(
const newScale = Math.min(
Math.max(
stageScale +
(pixelY * wheelZoomSpeed * stageScale) / window.innerHeight,
(pixelY * wheelZoomSpeed * stageScale * zoomSpeed) /
window.innerHeight,
minZoom
),
maxZoom
@ -210,9 +214,25 @@ function useStageInteraction(
onStageScaleChange(newScale);
}
if (key === "Alt") {
setZoomSpeed(0.25);
}
}
useKeyboard(handleKeyDown);
function handleKeyUp({ key }) {
if (key === "Alt") {
setZoomSpeed(1);
}
}
useKeyboard(handleKeyDown, handleKeyUp);
function handleBlur() {
setZoomSpeed(1);
}
useBlur(handleBlur);
}
export default useStageInteraction;