@webviz/subsurface-viewer/dist/utils/event.js

3D visualization component for subsurface reservoir data

import React, { useState } from "react";
function updateZScaleReducer(zScale, action) {
    return zScale * getZScaleModifier(action);
}
function getZScaleModifier(arrowEvent) {
    let scaleFactor = 0;
    switch (arrowEvent.key) {
        case "ArrowUp":
            scaleFactor = 0.05;
            break;
        case "ArrowDown":
            scaleFactor = -0.05;
            break;
        case "PageUp":
            scaleFactor = 0.25;
            break;
        case "PageDown":
            scaleFactor = -0.25;
            break;
        default:
            break;
    }
    if (arrowEvent.shiftModifier) {
        scaleFactor /= 5;
    }
    return 1 + scaleFactor;
}
function convertToArrowEvent(event) {
    if (event.type === "keydown") {
        switch (event.key) {
            case "ArrowUp":
            case "ArrowDown":
            case "PageUp":
            case "PageDown":
                return {
                    key: event.key,
                    shiftModifier: event.shiftKey,
                };
            default:
                return null;
        }
    }
    return null;
}
/**
 * A hook for listening to key arrow events.
 * @returns an object containing the factor state, a callback for altering
 * the state, and a ref that is used to attach the event listener used for
 * keyboard events.
 */
export const useScaleFactor = (initialValue) => {
    const [factor, setFactor] = React.useState(initialValue !== null && initialValue !== void 0 ? initialValue : 1);
    const elementRef = React.useRef(null);
    React.useEffect(() => {
        const keyDownHandler = (e) => {
            const arrowEvent = convertToArrowEvent(e);
            if (!arrowEvent) {
                return;
            }
            setFactor((oldValue) => updateZScaleReducer(oldValue, arrowEvent));
            // prevent being handled by regular OrbitController
            e.stopPropagation();
        };
        const element = elementRef.current;
        // Listen for keypress events.
        element === null || element === void 0 ? void 0 : element.addEventListener("keydown", keyDownHandler, true);
        return () => {
            element === null || element === void 0 ? void 0 : element.removeEventListener("keydown", keyDownHandler);
        };
    }, [elementRef]);
    return { factor, setFactor, elementRef };
};
export function useShiftHeld() {
    // Used for scaling in z direction using arrow keys.
    const [shiftHeld, setShiftHeld] = useState(false);
    const divRef = React.useRef(null);
    React.useEffect(() => {
        const keyDownHandler = (e) => {
            if (e.key === "Shift") {
                setShiftHeld(true);
            }
        };
        const keyUpHandler = (e) => {
            if (e.key === "Shift") {
                setShiftHeld(false);
            }
        };
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const element = divRef.current;
        element === null || element === void 0 ? void 0 : element.addEventListener("keydown", keyDownHandler, true);
        element === null || element === void 0 ? void 0 : element.addEventListener("keyup", keyUpHandler, true);
        return () => {
            element === null || element === void 0 ? void 0 : element.removeEventListener("keydown", keyDownHandler);
            element === null || element === void 0 ? void 0 : element.removeEventListener("keyup", keyUpHandler);
        };
    }, [setShiftHeld, divRef]);
    return { divRef, shiftHeld };
}
//# sourceMappingURL=event.js.map