Focus mode (#1365)

* Menu hamburger

* Focus

* nit

* nit

* nit

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/assets/css/style.css

@@ -181,25 +181,6 @@ body {
   margin: 3px 3px 3px 4px;
 }
 
-.comfy-menu-hamburger {
-  position: fixed;
-  top: 10px;
-  z-index: 9999;
-  right: 10px;
-  width: 30px;
-  display: none;
-  gap: 8px;
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.comfy-menu-hamburger div {
-  height: 3px;
-  width: 100%;
-  border-radius: 20px;
-  background-color: white;
-}
-
 .comfy-menu {
   font-size: 15px;
   position: absolute;

src/components/MenuHamburger.vue

@@ -0,0 +1,46 @@
+<template>
+  <Button
+    v-show="workspaceState.focusMode"
+    class="comfy-menu-hamburger"
+    icon="pi pi-bars"
+    severity="secondary"
+    text
+    size="large"
+    @click="exitFocusMode"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
+import { watchEffect } from 'vue'
+import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
+
+const workspaceState = useWorkspaceStore()
+const settingStore = useSettingStore()
+const exitFocusMode = () => {
+  workspaceState.focusMode = false
+}
+
+watchEffect(() => {
+  if (settingStore.get('Comfy.UseNewMenu') !== 'Disabled') {
+    return
+  }
+  if (workspaceState.focusMode) {
+    app.ui.menuContainer.style.display = 'none'
+  } else {
+    app.ui.menuContainer.style.display = 'block'
+  }
+})
+</script>
+
+<style scoped>
+.comfy-menu-hamburger {
+  pointer-events: auto;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  z-index: 9999;
+}
+</style>

src/components/graph/GraphCanvas.vue

@@ -62,7 +62,9 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
-  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+  () =>
+    settingStore.get('Comfy.UseNewMenu') !== 'Disabled' &&
+    !workspaceStore.focusMode
 )
 const canvasMenuEnabled = computed(() =>
   settingStore.get('Comfy.Graph.CanvasMenu')

src/components/topbar/TopMenubar.vue

@@ -29,13 +29,17 @@ import { computed, onMounted, provide, ref } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
 import { useEventBus } from '@vueuse/core'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 
+const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
 const betaMenuEnabled = computed(
-  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+  () =>
+    settingStore.get('Comfy.UseNewMenu') !== 'Disabled' &&
+    !workspaceState.focusMode
 )
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.UseNewMenu') === 'Top'

src/scripts/ui.ts

@@ -8,6 +8,7 @@ import { TaskItem } from '@/types/apiTypes'
 import { showSettingsDialog } from '@/services/dialogService'
 import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 
 export const ComfyDialog = _ComfyDialog
 
@@ -350,7 +351,6 @@ export class ComfyUI {
   autoQueueMode: string
   graphHasChanged: boolean
   autoQueueEnabled: boolean
-  menuHamburger: HTMLDivElement
   menuContainer: HTMLDivElement
   queueSize: Element
   restoreMenuPosition: () => void
@@ -421,18 +421,6 @@ export class ComfyUI {
       }
     })
 
-    this.menuHamburger = $el(
-      'div.comfy-menu-hamburger',
-      {
-        parent: containerElement,
-        onclick: () => {
-          this.menuContainer.style.display = 'block'
-          this.menuHamburger.style.display = 'none'
-        }
-      },
-      [$el('div'), $el('div'), $el('div')]
-    ) as HTMLDivElement
-
     this.menuContainer = $el('div.comfy-menu', { parent: containerElement }, [
       $el(
         'div.drag-handle.comfy-menu-header',
@@ -455,8 +443,7 @@ export class ComfyUI {
             $el('button.comfy-close-menu-btn', {
               textContent: '\u00d7',
               onclick: () => {
-                this.menuContainer.style.display = 'none'
-                this.menuHamburger.style.display = 'flex'
+                useWorkspaceStore().focusMode = true
               }
             })
           ])

src/stores/commandStore.ts

@@ -19,6 +19,7 @@ import { useWorkflowStore } from './workflowStore'
 import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'
 import { useBottomPanelStore } from './workspace/bottomPanelStore'
 import { LGraphNode } from '@comfyorg/litegraph'
+import { useWorkspaceStore } from './workspaceStateStore'
 
 export interface ComfyCommand {
   id: string
@@ -467,6 +468,15 @@ export const useCommandStore = defineStore('command', () => {
       function: () => {
         useBottomPanelStore().toggleBottomPanel()
       }
+    },
+    {
+      id: 'Workspace.ToggleFocusMode',
+      icon: 'pi pi-eye',
+      label: 'Toggle Focus Mode',
+      versionAdded: '1.3.27',
+      function: () => {
+        useWorkspaceStore().toggleFocusMode()
+      }
     }
   ]
 

src/stores/coreKeybindings.ts

@@ -167,5 +167,11 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       ctrl: true
     },
     commandId: 'Workspace.ToggleBottomPanelTab.integrated-terminal'
+  },
+  {
+    combo: {
+      key: 'f'
+    },
+    commandId: 'Workspace.ToggleFocusMode'
   }
 ]

src/stores/workspaceStateStore.ts

@@ -10,6 +10,11 @@ import { useSettingStore } from './settingStore'
 export const useWorkspaceStore = defineStore('workspace', () => {
   const spinner = ref(false)
   const shiftDown = ref(false)
+  /**
+   * Whether the workspace is in focus mode.
+   * When in focus mode, only the graph editor is visible.
+   */
+  const focusMode = ref(false)
 
   const toast = computed<ToastManager>(() => useToastStore())
   const queueSettings = computed(() => useQueueSettingsStore())
@@ -52,6 +57,10 @@ export const useWorkspaceStore = defineStore('workspace', () => {
   return {
     spinner,
     shiftDown,
+    focusMode,
+    toggleFocusMode: () => {
+      focusMode.value = !focusMode.value
+    },
     toast,
     queueSettings,
     command,

src/views/GraphView.vue

@@ -6,11 +6,12 @@
   <GlobalToast />
   <UnloadWindowConfirmDialog />
   <BrowserTabTitle />
+  <MenuHamburger />
 </template>
 
 <script setup lang="ts">
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
-
+import MenuHamburger from '@/components/MenuHamburger.vue'
 import { computed, onMounted, onBeforeUnmount, watch, watchEffect } from 'vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'

tests-ui/globalSetup.ts

@@ -49,7 +49,9 @@ module.exports = async function () {
     return {
       useWorkspaceStore: () => ({
         shiftDown: false,
-        spinner: false
+        spinner: false,
+        focusMode: false,
+        toggleFocusMode: jest.fn()
       })
     }
   })