feat: App mode - update keybindings (#9794)

## Summary

Improve app mode discoverability/usability

## Changes

- **What**:
- toggle linear rebound as alt+m
- toggle minimap rebound as alt+shift+m
- show keybinding for toggling mode on button

- **Breaking**:
- Toggle minimap shortcut changed from ALT+M to ALT+SHIFT+M

## Screenshots (if applicable)

<img width="302" height="145" alt="image"
src="https://github.com/user-attachments/assets/5f2df599-c0db-4df1-ba22-d7ee9eb6b662"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9794-feat-App-mode-update-keybindings-3216d73d3650811eac37f226b381e54a)
by [Unito](https://www.unito.io)
This commit is contained in:
pythongosssss
2026-03-18 15:32:36 +00:00
committed by GitHub
parent 190bbf0ac2
commit e7384ab2da
2 changed files with 25 additions and 8 deletions

View File

@@ -12,6 +12,7 @@ import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
import Button from '@/components/ui/button/Button.vue'
import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
import { useTelemetry } from '@/platform/telemetry'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useCommandStore } from '@/stores/commandStore'
@@ -23,6 +24,7 @@ const { source, align = 'start' } = defineProps<{
const { t } = useI18n()
const canvasStore = useCanvasStore()
const keybindingStore = useKeybindingStore()
const dropdownOpen = ref(false)
const { menuItems } = useWorkflowActionsMenu(
@@ -43,6 +45,16 @@ function handleOpen(open: boolean) {
}
}
function toggleModeTooltip() {
const label = canvasStore.linearMode
? t('breadcrumbsMenu.enterNodeGraph')
: t('breadcrumbsMenu.enterAppMode')
const shortcut = keybindingStore
.getKeybindingByCommandId('Comfy.ToggleLinear')
?.combo.toString()
return label + (shortcut ? t('g.shortcutSuffix', { shortcut }) : '')
}
function toggleLinearMode() {
dropdownOpen.value = false
void useCommandStore().execute('Comfy.ToggleLinear', {
@@ -52,7 +64,14 @@ function toggleLinearMode() {
const tooltipPt = {
root: {
style: { transform: 'translateX(calc(50% - 16px))' }
style: {
transform: 'translateX(calc(50% - 16px))',
whiteSpace: 'nowrap',
maxWidth: 'none'
}
},
text: {
style: { whiteSpace: 'nowrap' }
},
arrow: {
class: '!left-[16px]'
@@ -68,9 +87,7 @@ const tooltipPt = {
>
<Button
v-tooltip.bottom="{
value: canvasStore.linearMode
? t('breadcrumbsMenu.enterNodeGraph')
: t('breadcrumbsMenu.enterAppMode'),
value: toggleModeTooltip(),
showDelay: 300,
hideDelay: 300,
pt: tooltipPt

View File

@@ -56,9 +56,8 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
},
{
combo: {
ctrl: true,
shift: true,
key: 'a'
alt: true,
key: 'm'
},
commandId: 'Comfy.ToggleLinear'
},
@@ -179,7 +178,8 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
{
combo: {
key: 'm',
alt: true
alt: true,
shift: true
},
commandId: 'Comfy.Canvas.ToggleMinimap'
},