Skip to content

Commit

Permalink
tweak(ui): show hotkey menu only not focus debug input (#73)
Browse files Browse the repository at this point in the history
* tweak(ui): show hotkey menu when not focus debug input

* chore: disable exhaustive deps in event binding

* chore: typo
shhdgit authored Apr 10, 2024
1 parent decb188 commit 61adf4b
Showing 3 changed files with 31 additions and 13 deletions.
10 changes: 9 additions & 1 deletion ui/src/modules/app_builder/Canvas/index.tsx
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@ export interface BuilderCanvasProps {
onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
interaction?: InteractionInfo
errorInteraction?: ErrorInteraction
toolbarFocusedRef: React.RefObject<boolean>
onNodeDragStop: NodeDragHandler
onNodesDelete: OnNodesDelete
onAddNode: (n: Node<BlockNodeProps>[]) => void
@@ -62,6 +63,7 @@ export const BuilderCanvas: React.FC<BuilderCanvasProps> = ({
metadata,
interaction,
errorInteraction,
toolbarFocusedRef,
onClick,
onNodeDragStop,
onNodesDelete,
@@ -154,7 +156,13 @@ export const BuilderCanvas: React.FC<BuilderCanvasProps> = ({
)

// hot keys
const { events: paneEvents, hotKeyMenuOpened, setHotKeyMenuOpened, menuPosition, menuStatus } = useHotKeyMenu()
const {
events: paneEvents,
hotKeyMenuOpened,
setHotKeyMenuOpened,
menuPosition,
menuStatus
} = useHotKeyMenu(toolbarFocusedRef)

useHotkeys([
[
5 changes: 3 additions & 2 deletions ui/src/modules/app_builder/Canvas/useHotKeyMenu.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getHotkeyHandler } from '@mantine/hooks'
import { useEffect, useRef, useState } from 'react'

export const useHotKeyMenu = () => {
export const useHotKeyMenu = (toolbarFocusedRef: React.RefObject<boolean>) => {
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 || toolbarFocusedRef.current) {
return
}
setMenuPosition([menuStatus.current.mouseX, menuStatus.current.mouseY])
@@ -50,6 +50,7 @@ export const useHotKeyMenu = () => {
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 {
29 changes: 19 additions & 10 deletions ui/src/modules/app_builder/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
@@ -98,6 +98,12 @@ const AppBuilder: React.FC = () => {
const containerElem = useRef<HTMLDivElement>(null)
const [menuOpened, setMenuOpened] = useState(false)
const [toolbarPaneOpened, setToolbarPaneOpened] = useState(false)
const { ref: focusRef, focused: toolbarFocused } = useFocusWithin()
const toolbarFocusedRef = useRef(toolbarFocused)

useEffect(() => {
toolbarFocusedRef.current = toolbarFocused
}, [toolbarFocused])

const [currentInteraction, setCurrentInteraction] = useState<InteractionInfo>()
const [errorInteraction, setErrorInteraction] = useState<ErrorInteraction>()
@@ -225,6 +231,7 @@ const AppBuilder: React.FC = () => {
metadata={verMetadata}
interaction={currentInteraction}
errorInteraction={errorInteraction}
toolbarFocusedRef={toolbarFocusedRef}
onClick={() => setMenuOpened(false)}
onNodeDragStop={() => setCanUpdate(true)}
onRelayout={() => setCanUpdate(true)}
@@ -241,15 +248,17 @@ const AppBuilder: React.FC = () => {
onCanSave={() => setCanSave(true)}
/>
</Box>
<Toolbar
app={appData?.application}
ver={verData?.version}
toolbarPaneOpened={toolbarPaneOpened}
setToolbarPaneOpened={setToolbarPaneOpened}
isCreatingVersion={isCreatingVersion}
onUpdateCurrentInteraction={setCurrentInteraction}
onInteractionError={setErrorInteraction}
/>
<div ref={focusRef}>
<Toolbar
app={appData?.application}
ver={verData?.version}
toolbarPaneOpened={toolbarPaneOpened}
setToolbarPaneOpened={setToolbarPaneOpened}
isCreatingVersion={isCreatingVersion}
onUpdateCurrentInteraction={setCurrentInteraction}
onInteractionError={setErrorInteraction}
/>
</div>
</Box>
</ContainerElemProvider>
)

0 comments on commit 61adf4b

Please sign in to comment.