mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
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:
@@ -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
|
||||
|
||||
@@ -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'
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user