Add keyboard shortcuts for sketch and modeling tools (#2419)
* Add keyboard shortcuts for sketch and modeling tools * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Add a playwright test * skip linux Signed-off-by: Jess Frazelle <github@jessfraz.com> * fmt fml Signed-off-by: Jess Frazelle <github@jessfraz.com> * Give more generous test timeout for worst case engine runs * Fix up test mouse clicks after zoom bug fixes --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com> Co-authored-by: Jess Frazelle <github@jessfraz.com>
This commit is contained in:
101
src/Toolbar.tsx
101
src/Toolbar.tsx
@ -12,6 +12,8 @@ import {
|
||||
} from 'components/NetworkHealthIndicator'
|
||||
import { useStore } from 'useStore'
|
||||
import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
|
||||
import { useHotkeys } from 'react-hotkeys-hook'
|
||||
import Tooltip from 'components/Tooltip'
|
||||
|
||||
export const Toolbar = () => {
|
||||
const { commandBarSend } = useCommandsContext()
|
||||
@ -40,6 +42,56 @@ export const Toolbar = () => {
|
||||
const disableAllButtons =
|
||||
overallState !== NetworkHealthState.Ok || isExecuting || !isStreamReady
|
||||
|
||||
useHotkeys(
|
||||
'l',
|
||||
() =>
|
||||
state.matches('Sketch.Line tool')
|
||||
? send('CancelSketch')
|
||||
: send('Equip Line tool'),
|
||||
{ enabled: !disableAllButtons, scopes: ['sketch'] }
|
||||
)
|
||||
useHotkeys(
|
||||
'a',
|
||||
() =>
|
||||
state.matches('Sketch.Tangential arc to')
|
||||
? send('CancelSketch')
|
||||
: send('Equip tangential arc to'),
|
||||
{ enabled: !disableAllButtons, scopes: ['sketch'] }
|
||||
)
|
||||
useHotkeys(
|
||||
'r',
|
||||
() =>
|
||||
state.matches('Sketch.Rectangle tool')
|
||||
? send('CancelSketch')
|
||||
: send('Equip rectangle tool'),
|
||||
{ enabled: !disableAllButtons, scopes: ['sketch'] }
|
||||
)
|
||||
useHotkeys(
|
||||
's',
|
||||
() =>
|
||||
state.nextEvents.includes('Enter sketch') && pathId
|
||||
? send({ type: 'Enter sketch' })
|
||||
: send({ type: 'Enter sketch', data: { forceNewSketch: true } }),
|
||||
{ enabled: !disableAllButtons, scopes: ['modeling'] }
|
||||
)
|
||||
useHotkeys(
|
||||
'esc',
|
||||
() =>
|
||||
state.matches('Sketch.SketchIdle')
|
||||
? send('Cancel')
|
||||
: send('CancelSketch'),
|
||||
{ enabled: !disableAllButtons, scopes: ['sketch'] }
|
||||
)
|
||||
useHotkeys(
|
||||
'e',
|
||||
() =>
|
||||
commandBarSend({
|
||||
type: 'Find and select command',
|
||||
data: { name: 'Extrude', ownerMachine: 'modeling' },
|
||||
}),
|
||||
{ enabled: !disableAllButtons, scopes: ['modeling'] }
|
||||
)
|
||||
|
||||
function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
|
||||
const span = toolbarButtonsRef.current
|
||||
if (!span) {
|
||||
@ -77,6 +129,13 @@ export const Toolbar = () => {
|
||||
disabled={disableAllButtons}
|
||||
>
|
||||
<span data-testid="start-sketch">Start Sketch</span>
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: S
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
)}
|
||||
@ -94,6 +153,13 @@ export const Toolbar = () => {
|
||||
disabled={disableAllButtons}
|
||||
>
|
||||
Edit Sketch
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: S
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
)}
|
||||
@ -111,6 +177,13 @@ export const Toolbar = () => {
|
||||
disabled={disableAllButtons}
|
||||
>
|
||||
Exit Sketch
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: Esc
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
)}
|
||||
@ -134,6 +207,13 @@ export const Toolbar = () => {
|
||||
disabled={disableAllButtons}
|
||||
>
|
||||
Line
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: L
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
<li className="contents" key="tangential-arc-button">
|
||||
@ -158,6 +238,13 @@ export const Toolbar = () => {
|
||||
}
|
||||
>
|
||||
Tangential Arc
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: A
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
<li className="contents" key="rectangle-button">
|
||||
@ -187,6 +274,13 @@ export const Toolbar = () => {
|
||||
}
|
||||
>
|
||||
Rectangle
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: R
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
</>
|
||||
@ -264,6 +358,13 @@ export const Toolbar = () => {
|
||||
}}
|
||||
>
|
||||
Extrude
|
||||
<Tooltip
|
||||
delay={1250}
|
||||
position="bottom"
|
||||
className="!px-2 !text-xs"
|
||||
>
|
||||
Shortcut: E
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</li>
|
||||
)}
|
||||
|
Reference in New Issue
Block a user