Better min/max focusing & animation delay

This commit is contained in:
Dustin Brett 2024-07-13 23:05:22 -07:00
parent 2ce326425c
commit 90c09feef0
3 changed files with 42 additions and 32 deletions

View File

@ -1,4 +1,4 @@
import { useCallback, useMemo } from "react";
import { useMemo } from "react";
import {
CLOSE,
MAXIMIZE,
@ -15,8 +15,7 @@ import {
type MenuItem,
} from "contexts/menu/useMenuContextState";
import { useProcesses } from "contexts/process";
import { MENU_SEPERATOR, PREVENT_SCROLL } from "utils/constants";
import { useSession } from "contexts/session";
import { MENU_SEPERATOR } from "utils/constants";
const useTitlebarContextMenu = (id: string): ContextMenuCapture => {
const { contextMenu } = useMenu();
@ -24,19 +23,13 @@ const useTitlebarContextMenu = (id: string): ContextMenuCapture => {
const {
processes: { [id]: process },
} = useProcesses();
const { setForegroundId } = useSession();
const {
allowResizing = true,
componentWindow,
hideMaximizeButton,
hideMinimizeButton,
maximized,
minimized,
} = process || {};
const focusWindow = useCallback((): void => {
setForegroundId(id);
componentWindow?.focus(PREVENT_SCROLL);
}, [componentWindow, id, setForegroundId]);
return useMemo(
() =>
@ -49,8 +42,6 @@ const useTitlebarContextMenu = (id: string): ContextMenuCapture => {
action: () => {
if (minimized) onMinimize();
else onMaximize();
focusWindow();
},
disabled: !isMaxOrMin,
icon: isMaxOrMin ? RESTORE : RESTORE_DISABLED,
@ -63,10 +54,7 @@ const useTitlebarContextMenu = (id: string): ContextMenuCapture => {
label: "Minimize",
},
!hideMaximizeButton && {
action: () => {
onMaximize();
focusWindow();
},
action: onMaximize,
disabled: isMaxOrMin || !allowResizing,
icon: isMaxOrMin ? MAXIMIZE_DISABLED : MAXIMIZE,
label: "Maximize",
@ -82,7 +70,6 @@ const useTitlebarContextMenu = (id: string): ContextMenuCapture => {
[
allowResizing,
contextMenu,
focusWindow,
hideMaximizeButton,
hideMinimizeButton,
maximized,

View File

@ -8,7 +8,7 @@ import { PREVENT_SCROLL } from "utils/constants";
type WindowActions = {
onClose: () => void;
onMaximize: () => void;
onMinimize: () => void;
onMinimize: (keepForegroundId?: boolean) => void;
};
const useWindowActions = (id: string): WindowActions => {
@ -16,14 +16,28 @@ const useWindowActions = (id: string): WindowActions => {
const { setForegroundId, removeFromStack } = useSession();
const { closeWithTransition, maximize, minimize } = useProcesses();
const processesRef = useProcessesRef();
const onMinimize = useCallback((): void => {
minimize(id);
setForegroundId(nextFocusableId);
}, [id, minimize, nextFocusableId, setForegroundId]);
const onMinimize = useCallback(
(keepForegroundId?: boolean): void => {
minimize(id);
if (!keepForegroundId) setForegroundId(nextFocusableId);
},
[id, minimize, nextFocusableId, setForegroundId]
);
const onMaximize = useCallback((): void => {
maximize(id);
processesRef.current[id]?.componentWindow?.focus(PREVENT_SCROLL);
}, [id, maximize, processesRef]);
const triggerMaximize = (): void => {
maximize(id);
setForegroundId(id);
processesRef.current[id]?.componentWindow?.focus(PREVENT_SCROLL);
};
const [currentAnimation] =
processesRef.current[id]?.componentWindow?.getAnimations() || [];
if (currentAnimation?.finished) {
currentAnimation.finished.then(triggerMaximize);
} else {
triggerMaximize();
}
}, [id, maximize, processesRef, setForegroundId]);
const onClose = useCallback((): void => {
removeFromStack(id);
closeWithTransition(id);

View File

@ -9,6 +9,7 @@ import { useViewport } from "contexts/viewport";
import { useProcessesRef } from "hooks/useProcessesRef";
import { KEYPRESS_DEBOUNCE_MS } from "utils/constants";
import { haltEvent, toggleShowDesktop, viewHeight } from "utils/functions";
import useWindowActions from "components/system/Window/Titlebar/useWindowActions";
declare global {
interface Window {
@ -52,10 +53,11 @@ const updateKeyStates = (event: KeyboardEvent): void => {
};
const useGlobalKeyboardShortcuts = (): void => {
const { closeWithTransition, maximize, minimize, open } = useProcesses();
const { closeWithTransition, minimize, open } = useProcesses();
const processesRef = useProcessesRef();
const { foregroundId, stackOrder } = useSession();
const { fullscreenElement, toggleFullscreen } = useViewport();
const { onMaximize, onMinimize } = useWindowActions(foregroundId);
const altBindingsRef = useRef<Record<string, () => void>>({});
const shiftBindingsRef = useRef<Record<string, () => void>>({
E: () => open("FileExplorer"),
@ -171,12 +173,12 @@ const useGlobalKeyboardShortcuts = (): void => {
hideMinimizeButton = false,
maximized,
minimized,
} = processesRef.current[foregroundId];
} = processesRef.current[foregroundId] || {};
if (maximized) {
maximize(foregroundId);
onMaximize();
} else if (!minimized && !hideMinimizeButton) {
minimize(foregroundId);
onMinimize(true);
}
},
ARROWUP: () => {
@ -185,17 +187,24 @@ const useGlobalKeyboardShortcuts = (): void => {
hideMaximizeButton = false,
maximized,
minimized,
} = processesRef.current[foregroundId];
} = processesRef.current[foregroundId] || {};
if (minimized) {
minimize(foregroundId);
onMinimize(true);
} else if (!maximized && allowResizing && !hideMaximizeButton) {
maximize(foregroundId);
onMaximize();
}
},
D: () => toggleShowDesktop(processesRef.current, stackOrder, minimize),
};
}, [foregroundId, maximize, minimize, processesRef, stackOrder]);
}, [
foregroundId,
minimize,
onMaximize,
onMinimize,
processesRef,
stackOrder,
]);
};
export default useGlobalKeyboardShortcuts;