From 8e4478cd734aca0974e01dacd0bebd23fa7d0c53 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Sun, 7 Apr 2024 17:22:29 +0800 Subject: [PATCH 1/3] tweak(ui): show hotkey menu when not focus debug input --- ui/src/modules/app_builder/Canvas/index.tsx | 10 ++++++- .../app_builder/Canvas/useHotKeyMenu.ts | 4 +-- ui/src/modules/app_builder/index.tsx | 29 ++++++++++++------- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/ui/src/modules/app_builder/Canvas/index.tsx b/ui/src/modules/app_builder/Canvas/index.tsx index e4e887e..678a289 100644 --- a/ui/src/modules/app_builder/Canvas/index.tsx +++ b/ui/src/modules/app_builder/Canvas/index.tsx @@ -41,6 +41,7 @@ export interface BuilderCanvasProps { onClick?: (e: React.MouseEvent) => void interaction?: InteractionInfo errorInteraction?: ErrorInteraction + toobarFocusedRef: React.RefObject onNodeDragStop: NodeDragHandler onNodesDelete: OnNodesDelete onAddNode: (n: Node[]) => void @@ -62,6 +63,7 @@ export const BuilderCanvas: React.FC = ({ metadata, interaction, errorInteraction, + toobarFocusedRef, onClick, onNodeDragStop, onNodesDelete, @@ -154,7 +156,13 @@ export const BuilderCanvas: React.FC = ({ ) // hot keys - const { events: paneEvents, hotKeyMenuOpened, setHotKeyMenuOpened, menuPosition, menuStatus } = useHotKeyMenu() + const { + events: paneEvents, + hotKeyMenuOpened, + setHotKeyMenuOpened, + menuPosition, + menuStatus + } = useHotKeyMenu(toobarFocusedRef) useHotkeys([ [ diff --git a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts index 27d5e19..d14a23f 100644 --- a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts +++ b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts @@ -1,7 +1,7 @@ import { getHotkeyHandler } from '@mantine/hooks' import { useEffect, useRef, useState } from 'react' -export const useHotKeyMenu = () => { +export const useHotKeyMenu = (toobarFocusedRef: React.RefObject) => { const [menuPosition, setMenuPosition] = useState([0, 0]) const [hotKeyMenuOpened, setHotKeyMenuOpened] = useState(false) const menuStatus = useRef({ @@ -29,7 +29,7 @@ export const useHotKeyMenu = () => { } const showHotKeyMenu = () => { - if (!menuStatus.current.inPane) { + if (!menuStatus.current.inPane || toobarFocusedRef.current) { return } setMenuPosition([menuStatus.current.mouseX, menuStatus.current.mouseY]) diff --git a/ui/src/modules/app_builder/index.tsx b/ui/src/modules/app_builder/index.tsx index 1f9ac6d..6616b79 100644 --- a/ui/src/modules/app_builder/index.tsx +++ b/ui/src/modules/app_builder/index.tsx @@ -14,7 +14,7 @@ import { import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import download from 'downloadjs' import yaml from 'js-yaml' -import { useDebouncedValue, useDisclosure, useHotkeys } from '@mantine/hooks' +import { useDebouncedValue, useDisclosure, useFocusWithin, useHotkeys } from '@mantine/hooks' import { ReactFlowProvider, useNodesInitialized, useReactFlow } from 'reactflow' import { FormProvider, useForm, useFormContext } from 'react-hook-form' import { ApplicationInfo, ApplicationVersionInfo, InteractionInfo, VersionMetadata } from '@api/linguflow.schemas' @@ -96,6 +96,12 @@ const AppBuilder: React.FC = () => { const containerElem = useRef(null) const [menuOpened, setMenuOpened] = useState(false) const [toolbarPaneOpened, setToolbarPaneOpened] = useState(false) + const { ref: focusRef, focused: toolbarFocused } = useFocusWithin() + const toobarFocusedRef = useRef(toolbarFocused) + + useEffect(() => { + toobarFocusedRef.current = toolbarFocused + }, [toolbarFocused]) const [currentInteraction, setCurrentInteraction] = useState() const [errorInteraction, setErrorInteraction] = useState() @@ -223,6 +229,7 @@ const AppBuilder: React.FC = () => { metadata={verMetadata} interaction={currentInteraction} errorInteraction={errorInteraction} + toobarFocusedRef={toobarFocusedRef} onClick={() => setMenuOpened(false)} onNodeDragStop={() => setCanUpdate(true)} onRelayout={() => setCanUpdate(true)} @@ -239,15 +246,17 @@ const AppBuilder: React.FC = () => { onCanSave={() => setCanSave(true)} /> - +
+ +
) From e862f1e302e318a88d92e84e292993579bf6bd02 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Sun, 7 Apr 2024 17:46:24 +0800 Subject: [PATCH 2/3] chore: disable exhaustive deps in event binding --- ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts index d14a23f..e6afd18 100644 --- a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts +++ b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts @@ -50,6 +50,7 @@ export const useHotKeyMenu = (toobarFocusedRef: React.RefObject) => { const showHotKeyMenuHandler = getHotkeyHandler([['Space', showHotKeyMenu]]) document.body.addEventListener('keyup', showHotKeyMenuHandler) return () => document.body.removeEventListener('keyup', showHotKeyMenuHandler) + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return { From 4a4568508521398aa13d52ac4aade46e27881034 Mon Sep 17 00:00:00 2001 From: Suhaha Date: Tue, 9 Apr 2024 10:28:16 +0800 Subject: [PATCH 3/3] chore: typo --- ui/src/modules/app_builder/Canvas/index.tsx | 6 +++--- ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts | 4 ++-- ui/src/modules/app_builder/index.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/src/modules/app_builder/Canvas/index.tsx b/ui/src/modules/app_builder/Canvas/index.tsx index 678a289..c4826ad 100644 --- a/ui/src/modules/app_builder/Canvas/index.tsx +++ b/ui/src/modules/app_builder/Canvas/index.tsx @@ -41,7 +41,7 @@ export interface BuilderCanvasProps { onClick?: (e: React.MouseEvent) => void interaction?: InteractionInfo errorInteraction?: ErrorInteraction - toobarFocusedRef: React.RefObject + toolbarFocusedRef: React.RefObject onNodeDragStop: NodeDragHandler onNodesDelete: OnNodesDelete onAddNode: (n: Node[]) => void @@ -63,7 +63,7 @@ export const BuilderCanvas: React.FC = ({ metadata, interaction, errorInteraction, - toobarFocusedRef, + toolbarFocusedRef, onClick, onNodeDragStop, onNodesDelete, @@ -162,7 +162,7 @@ export const BuilderCanvas: React.FC = ({ setHotKeyMenuOpened, menuPosition, menuStatus - } = useHotKeyMenu(toobarFocusedRef) + } = useHotKeyMenu(toolbarFocusedRef) useHotkeys([ [ diff --git a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts index e6afd18..959f807 100644 --- a/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts +++ b/ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts @@ -1,7 +1,7 @@ import { getHotkeyHandler } from '@mantine/hooks' import { useEffect, useRef, useState } from 'react' -export const useHotKeyMenu = (toobarFocusedRef: React.RefObject) => { +export const useHotKeyMenu = (toolbarFocusedRef: React.RefObject) => { const [menuPosition, setMenuPosition] = useState([0, 0]) const [hotKeyMenuOpened, setHotKeyMenuOpened] = useState(false) const menuStatus = useRef({ @@ -29,7 +29,7 @@ export const useHotKeyMenu = (toobarFocusedRef: React.RefObject) => { } const showHotKeyMenu = () => { - if (!menuStatus.current.inPane || toobarFocusedRef.current) { + if (!menuStatus.current.inPane || toolbarFocusedRef.current) { return } setMenuPosition([menuStatus.current.mouseX, menuStatus.current.mouseY]) diff --git a/ui/src/modules/app_builder/index.tsx b/ui/src/modules/app_builder/index.tsx index 6616b79..e8e53e1 100644 --- a/ui/src/modules/app_builder/index.tsx +++ b/ui/src/modules/app_builder/index.tsx @@ -97,10 +97,10 @@ const AppBuilder: React.FC = () => { const [menuOpened, setMenuOpened] = useState(false) const [toolbarPaneOpened, setToolbarPaneOpened] = useState(false) const { ref: focusRef, focused: toolbarFocused } = useFocusWithin() - const toobarFocusedRef = useRef(toolbarFocused) + const toolbarFocusedRef = useRef(toolbarFocused) useEffect(() => { - toobarFocusedRef.current = toolbarFocused + toolbarFocusedRef.current = toolbarFocused }, [toolbarFocused]) const [currentInteraction, setCurrentInteraction] = useState() @@ -229,7 +229,7 @@ const AppBuilder: React.FC = () => { metadata={verMetadata} interaction={currentInteraction} errorInteraction={errorInteraction} - toobarFocusedRef={toobarFocusedRef} + toolbarFocusedRef={toolbarFocusedRef} onClick={() => setMenuOpened(false)} onNodeDragStop={() => setCanUpdate(true)} onRelayout={() => setCanUpdate(true)}