Spaces:
Configuration error
Configuration error
File size: 2,783 Bytes
74aacd5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React, { ReactNode } from 'react'
import { useRecoilState } from 'recoil'
import { shortcutsState } from '../../store/Atoms'
import Modal from '../shared/Modal'
interface Shortcut {
content: string
keys: string[]
}
function ShortCut(props: Shortcut) {
const { content, keys } = props
return (
<div className="shortcut-option">
<div className="shortcut-description">{content}</div>
<div style={{ display: 'flex', justifySelf: 'end', gap: '8px' }}>
{keys.map((k, index) => (
<div className="shortcut-key" key={k}>
{k}
</div>
))}
</div>
</div>
)
}
const isMac = (function () {
return /macintosh|mac os x/i.test(navigator.userAgent)
})()
const isWindows = (function () {
return /windows|win32/i.test(navigator.userAgent)
})()
const CmdOrCtrl = isMac ? 'Cmd' : 'Ctrl'
export default function ShortcutsModal() {
const [shortcutsShow, setShortcutState] = useRecoilState(shortcutsState)
const shortcutStateHandler = () => {
setShortcutState(false)
}
return (
<Modal
onClose={shortcutStateHandler}
title="Hotkeys"
className="modal-shortcuts"
show={shortcutsShow}
>
<div className="shortcut-options">
<div className="shortcut-options-column">
<ShortCut content="Pan" keys={['Space + Drag']} />
<ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
<ShortCut content="Decrease Brush Size" keys={['[']} />
<ShortCut content="Increase Brush Size" keys={[']']} />
<ShortCut content="View Original Image" keys={['Hold Tab']} />
<ShortCut
content="Multi-Stroke Drawing"
keys={[`Hold ${CmdOrCtrl}`]}
/>
<ShortCut content="Cancel Drawing" keys={['Esc']} />
</div>
<div className="shortcut-options-column">
<ShortCut content="Rerun last mask" keys={['R']} />
<ShortCut content="Undo" keys={[CmdOrCtrl, 'Z']} />
<ShortCut content="Redo" keys={[CmdOrCtrl, 'Shift', 'Z']} />
<ShortCut content="Copy Result" keys={[CmdOrCtrl, 'C']} />
<ShortCut content="Paste Image" keys={[CmdOrCtrl, 'V']} />
<ShortCut
content="Trigger Manually Inpainting"
keys={['Shift', 'R']}
/>
<ShortCut content="Trigger Interactive Segmentation" keys={['I']} />
</div>
<div className="shortcut-options-column">
<ShortCut content="Switch Theme" keys={['Shift', 'D']} />
<ShortCut content="Toggle Hotkeys Dialog" keys={['H']} />
<ShortCut content="Toggle Settings Dialog" keys={['S']} />
<ShortCut content="Toggle File Manager" keys={['F']} />
</div>
</div>
</Modal>
)
}
|