From 45596058f16c8717592934cd8e589a26ea405ba1 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Sat, 11 Jan 2025 16:51:55 +1100
Subject: [PATCH] Revert "[Desktop] Native window in graph view (#2216)"

This reverts commit 8f5aa1ff08dd8f691033fd9dd9874a98cd70c471.
---
 src/assets/css/style.css             |   6 -
 src/components/MenuHamburger.vue     |  32 +--
 src/components/topbar/TopMenubar.vue |  26 +-
 src/scripts/ui.ts                    | 412 +++++++++++++--------------
 4 files changed, 222 insertions(+), 254 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 24ad5013ca..e5947bc5d7 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -765,7 +765,6 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
-/* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;
 }
@@ -773,8 +772,3 @@ audio.comfy-audio.empty-audio-widget {
 .no-drag {
   app-region: no-drag;
 }
-
-.window-actions-spacer {
-  width: calc(100vw - env(titlebar-area-width, 100vw));
-}
-/* End of [Desktop] Electron window specific styles */
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index bd19f81fc9..77036864d2 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -1,22 +1,18 @@
 <template>
-  <div
+  <Button
     v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag"
+    class="comfy-menu-hamburger"
     :style="positionCSS"
-  >
-    <Button
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
-      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      :aria-label="$t('menu.showMenu')"
-      aria-live="assertive"
-      @click="exitFocusMode"
-      @contextmenu="showNativeMenu"
-    />
-    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
-  </div>
+    icon="pi pi-bars"
+    severity="secondary"
+    text
+    size="large"
+    v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
+    :aria-label="$t('menu.showMenu')"
+    aria-live="assertive"
+    @click="exitFocusMode"
+    @contextmenu="showNativeMenu"
+  />
 </template>
 
 <script setup lang="ts">
@@ -57,6 +53,8 @@ const positionCSS = computed<CSSProperties>(() =>
 
 <style scoped>
 .comfy-menu-hamburger {
-  @apply pointer-events-auto fixed z-[9999] flex flex-row;
+  pointer-events: auto;
+  position: fixed;
+  z-index: 9999;
 }
 </style>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 4883fd3e5d..8c703d38e7 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -3,10 +3,10 @@
     <div
       ref="topMenuRef"
       class="comfyui-menu flex items-center"
-      v-show="showTopMenu"
+      v-show="betaMenuEnabled && !workspaceState.focusMode"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
-      <h1 class="comfyui-logo mx-2 app-drag">ComfyUI</h1>
+      <h1 class="comfyui-logo mx-2">ComfyUI</h1>
       <CommandMenubar />
       <Divider layout="vertical" class="mx-2" />
       <div class="flex-grow min-w-0">
@@ -25,18 +25,8 @@
         @click="workspaceState.focusMode = true"
         @contextmenu="showNativeMenu"
       />
-      <div
-        v-show="menuSetting !== 'Bottom'"
-        class="window-actions-spacer flex-shrink-0"
-      />
     </div>
   </teleport>
-
-  <!-- Virtual top menu for native window (drag handle) -->
-  <div
-    v-show="isNativeWindow && !showTopMenu"
-    class="fixed top-0 left-0 app-drag w-full h-[var(--comfy-topbar-height)]"
-  />
 </template>
 
 <script setup lang="ts">
@@ -59,20 +49,14 @@ const settingStore = useSettingStore()
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
-const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
+const betaMenuEnabled = computed(
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+)
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.UseNewMenu') === 'Top'
     ? '.comfyui-body-top'
     : '.comfyui-body-bottom'
 )
-const isNativeWindow = computed(
-  () =>
-    isElectron() && settingStore.get('Comfy-Desktop.WindowStyle') === 'custom'
-)
-const showTopMenu = computed(
-  () => betaMenuEnabled.value && !workspaceState.focusMode
-)
 
 const menuRight = ref<HTMLDivElement | null>(null)
 // Menu-right holds legacy topbar elements attached by custom scripts
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 9b05eedd77..2959fe2899 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -411,231 +411,223 @@ export class ComfyUI {
       }
     })
 
-    this.menuContainer = $el(
-      'div.comfy-menu.no-drag',
-      { parent: containerElement },
-      [
-        $el(
-          'div.drag-handle.comfy-menu-header',
-          {
-            style: {
-              overflow: 'hidden',
-              position: 'relative',
-              width: '100%',
-              cursor: 'default'
-            }
-          },
-          [
-            $el('span.drag-handle'),
-            $el('span.comfy-menu-queue-size', {
-              $: (q) => (this.queueSize = q)
+    this.menuContainer = $el('div.comfy-menu', { parent: containerElement }, [
+      $el(
+        'div.drag-handle.comfy-menu-header',
+        {
+          style: {
+            overflow: 'hidden',
+            position: 'relative',
+            width: '100%',
+            cursor: 'default'
+          }
+        },
+        [
+          $el('span.drag-handle'),
+          $el('span.comfy-menu-queue-size', { $: (q) => (this.queueSize = q) }),
+          $el('div.comfy-menu-actions', [
+            $el('button.comfy-settings-btn', {
+              textContent: '⚙️',
+              onclick: () => {
+                useDialogService().showSettingsDialog()
+              }
             }),
-            $el('div.comfy-menu-actions', [
-              $el('button.comfy-settings-btn', {
-                textContent: '⚙️',
-                onclick: () => {
-                  useDialogService().showSettingsDialog()
-                }
-              }),
-              $el('button.comfy-close-menu-btn', {
-                textContent: '\u00d7',
-                onclick: () => {
-                  useWorkspaceStore().focusMode = true
-                }
-              })
-            ])
-          ]
-        ),
-        $el('button.comfy-queue-btn', {
-          id: 'queue-button',
-          textContent: 'Queue Prompt',
-          onclick: () => app.queuePrompt(0, this.batchCount)
-        }),
-        $el('div', {}, [
-          $el('label', { innerHTML: 'Extra options' }, [
-            $el('input', {
-              type: 'checkbox',
-              onchange: (i) => {
-                document.getElementById('extraOptions').style.display = i
-                  .srcElement.checked
-                  ? 'block'
-                  : 'none'
-                this.batchCount = i.srcElement.checked
-                  ? Number.parseInt(
-                      (
-                        document.getElementById(
-                          'batchCountInputRange'
-                        ) as HTMLInputElement
-                      ).value
-                    )
-                  : 1
-                ;(
-                  document.getElementById(
-                    'autoQueueCheckbox'
-                  ) as HTMLInputElement
-                ).checked = false
-                this.autoQueueEnabled = false
+            $el('button.comfy-close-menu-btn', {
+              textContent: '\u00d7',
+              onclick: () => {
+                useWorkspaceStore().focusMode = true
               }
             })
           ])
-        ]),
-        $el(
-          'div',
-          { id: 'extraOptions', style: { width: '100%', display: 'none' } },
-          [
-            $el('div', [
-              $el('label', { innerHTML: 'Batch count' }),
-              $el('input', {
-                id: 'batchCountInputNumber',
-                type: 'number',
-                value: this.batchCount,
-                min: '1',
-                style: { width: '35%', marginLeft: '0.4em' },
-                oninput: (i) => {
-                  this.batchCount = i.target.value
-                  /* Even though an <input> element with a type of range logically represents a number (since
+        ]
+      ),
+      $el('button.comfy-queue-btn', {
+        id: 'queue-button',
+        textContent: 'Queue Prompt',
+        onclick: () => app.queuePrompt(0, this.batchCount)
+      }),
+      $el('div', {}, [
+        $el('label', { innerHTML: 'Extra options' }, [
+          $el('input', {
+            type: 'checkbox',
+            onchange: (i) => {
+              document.getElementById('extraOptions').style.display = i
+                .srcElement.checked
+                ? 'block'
+                : 'none'
+              this.batchCount = i.srcElement.checked
+                ? Number.parseInt(
+                    (
+                      document.getElementById(
+                        'batchCountInputRange'
+                      ) as HTMLInputElement
+                    ).value
+                  )
+                : 1
+              ;(
+                document.getElementById('autoQueueCheckbox') as HTMLInputElement
+              ).checked = false
+              this.autoQueueEnabled = false
+            }
+          })
+        ])
+      ]),
+      $el(
+        'div',
+        { id: 'extraOptions', style: { width: '100%', display: 'none' } },
+        [
+          $el('div', [
+            $el('label', { innerHTML: 'Batch count' }),
+            $el('input', {
+              id: 'batchCountInputNumber',
+              type: 'number',
+              value: this.batchCount,
+              min: '1',
+              style: { width: '35%', marginLeft: '0.4em' },
+              oninput: (i) => {
+                this.batchCount = i.target.value
+                /* Even though an <input> element with a type of range logically represents a number (since
               it's used for numeric input), the value it holds is still treated as a string in HTML and
               JavaScript. This behavior is consistent across all <input> elements regardless of their type
               (like text, number, or range), where the .value property is always a string. */
-                  ;(
-                    document.getElementById(
-                      'batchCountInputRange'
-                    ) as HTMLInputElement
-                  ).value = this.batchCount.toString()
-                }
-              }),
-              $el('input', {
-                id: 'batchCountInputRange',
-                type: 'range',
-                min: '1',
-                max: '100',
-                value: this.batchCount,
-                oninput: (i) => {
-                  this.batchCount = i.srcElement.value
-                  // Note
-                  ;(
-                    document.getElementById(
-                      'batchCountInputNumber'
-                    ) as HTMLInputElement
-                  ).value = i.srcElement.value
-                }
-              })
-            ]),
-            $el('div', [
-              $el('label', {
-                for: 'autoQueueCheckbox',
-                innerHTML: 'Auto Queue'
-              }),
-              $el('input', {
-                id: 'autoQueueCheckbox',
-                type: 'checkbox',
-                checked: false,
-                title: 'Automatically queue prompt when the queue size hits 0',
-                onchange: (e) => {
-                  this.autoQueueEnabled = e.target.checked
-                  autoQueueModeEl.style.display = this.autoQueueEnabled
-                    ? ''
-                    : 'none'
-                }
-              }),
-              autoQueueModeEl
-            ])
-          ]
-        ),
-        $el('div.comfy-menu-btns', [
-          $el('button', {
-            id: 'queue-front-button',
-            textContent: 'Queue Front',
-            onclick: () => app.queuePrompt(-1, this.batchCount)
-          }),
-          $el('button', {
-            $: (b) => (this.queue.button = b as HTMLButtonElement),
-            id: 'comfy-view-queue-button',
-            textContent: 'View Queue',
-            onclick: () => {
-              this.history.hide()
-              this.queue.toggle()
-            }
-          }),
-          $el('button', {
-            $: (b) => (this.history.button = b as HTMLButtonElement),
-            id: 'comfy-view-history-button',
-            textContent: 'View History',
-            onclick: () => {
-              this.queue.hide()
-              this.history.toggle()
-            }
-          })
-        ]),
-        this.queue.element,
-        this.history.element,
+                ;(
+                  document.getElementById(
+                    'batchCountInputRange'
+                  ) as HTMLInputElement
+                ).value = this.batchCount.toString()
+              }
+            }),
+            $el('input', {
+              id: 'batchCountInputRange',
+              type: 'range',
+              min: '1',
+              max: '100',
+              value: this.batchCount,
+              oninput: (i) => {
+                this.batchCount = i.srcElement.value
+                // Note
+                ;(
+                  document.getElementById(
+                    'batchCountInputNumber'
+                  ) as HTMLInputElement
+                ).value = i.srcElement.value
+              }
+            })
+          ]),
+          $el('div', [
+            $el('label', {
+              for: 'autoQueueCheckbox',
+              innerHTML: 'Auto Queue'
+            }),
+            $el('input', {
+              id: 'autoQueueCheckbox',
+              type: 'checkbox',
+              checked: false,
+              title: 'Automatically queue prompt when the queue size hits 0',
+              onchange: (e) => {
+                this.autoQueueEnabled = e.target.checked
+                autoQueueModeEl.style.display = this.autoQueueEnabled
+                  ? ''
+                  : 'none'
+              }
+            }),
+            autoQueueModeEl
+          ])
+        ]
+      ),
+      $el('div.comfy-menu-btns', [
         $el('button', {
-          id: 'comfy-save-button',
-          textContent: 'Save',
+          id: 'queue-front-button',
+          textContent: 'Queue Front',
+          onclick: () => app.queuePrompt(-1, this.batchCount)
+        }),
+        $el('button', {
+          $: (b) => (this.queue.button = b as HTMLButtonElement),
+          id: 'comfy-view-queue-button',
+          textContent: 'View Queue',
           onclick: () => {
-            useCommandStore().execute('Comfy.ExportWorkflow')
+            this.history.hide()
+            this.queue.toggle()
           }
         }),
         $el('button', {
-          id: 'comfy-dev-save-api-button',
-          textContent: 'Save (API Format)',
-          style: { width: '100%', display: 'none' },
+          $: (b) => (this.history.button = b as HTMLButtonElement),
+          id: 'comfy-view-history-button',
+          textContent: 'View History',
           onclick: () => {
-            useCommandStore().execute('Comfy.ExportWorkflowAPI')
-          }
-        }),
-        $el('button', {
-          id: 'comfy-load-button',
-          textContent: 'Load',
-          onclick: () => fileInput.click()
-        }),
-        $el('button', {
-          id: 'comfy-refresh-button',
-          textContent: 'Refresh',
-          onclick: () => app.refreshComboInNodes()
-        }),
-        $el('button', {
-          id: 'comfy-clipspace-button',
-          textContent: 'Clipspace',
-          onclick: () => app.openClipspace()
-        }),
-        $el('button', {
-          id: 'comfy-clear-button',
-          textContent: 'Clear',
-          onclick: () => {
-            if (
-              !useSettingStore().get('Comfy.ConfirmClear') ||
-              confirm('Clear workflow?')
-            ) {
-              app.clean()
-              app.graph.clear()
-              app.resetView()
-              api.dispatchCustomEvent('graphCleared')
-            }
-          }
-        }),
-        $el('button', {
-          id: 'comfy-load-default-button',
-          textContent: 'Load Default',
-          onclick: async () => {
-            if (
-              !useSettingStore().get('Comfy.ConfirmClear') ||
-              confirm('Load default workflow?')
-            ) {
-              app.resetView()
-              await app.loadGraphData()
-            }
-          }
-        }),
-        $el('button', {
-          id: 'comfy-reset-view-button',
-          textContent: 'Reset View',
-          onclick: async () => {
-            app.resetView()
+            this.queue.hide()
+            this.history.toggle()
           }
         })
-      ]
-    ) as HTMLDivElement
+      ]),
+      this.queue.element,
+      this.history.element,
+      $el('button', {
+        id: 'comfy-save-button',
+        textContent: 'Save',
+        onclick: () => {
+          useCommandStore().execute('Comfy.ExportWorkflow')
+        }
+      }),
+      $el('button', {
+        id: 'comfy-dev-save-api-button',
+        textContent: 'Save (API Format)',
+        style: { width: '100%', display: 'none' },
+        onclick: () => {
+          useCommandStore().execute('Comfy.ExportWorkflowAPI')
+        }
+      }),
+      $el('button', {
+        id: 'comfy-load-button',
+        textContent: 'Load',
+        onclick: () => fileInput.click()
+      }),
+      $el('button', {
+        id: 'comfy-refresh-button',
+        textContent: 'Refresh',
+        onclick: () => app.refreshComboInNodes()
+      }),
+      $el('button', {
+        id: 'comfy-clipspace-button',
+        textContent: 'Clipspace',
+        onclick: () => app.openClipspace()
+      }),
+      $el('button', {
+        id: 'comfy-clear-button',
+        textContent: 'Clear',
+        onclick: () => {
+          if (
+            !useSettingStore().get('Comfy.ConfirmClear') ||
+            confirm('Clear workflow?')
+          ) {
+            app.clean()
+            app.graph.clear()
+            app.resetView()
+            api.dispatchCustomEvent('graphCleared')
+          }
+        }
+      }),
+      $el('button', {
+        id: 'comfy-load-default-button',
+        textContent: 'Load Default',
+        onclick: async () => {
+          if (
+            !useSettingStore().get('Comfy.ConfirmClear') ||
+            confirm('Load default workflow?')
+          ) {
+            app.resetView()
+            await app.loadGraphData()
+          }
+        }
+      }),
+      $el('button', {
+        id: 'comfy-reset-view-button',
+        textContent: 'Reset View',
+        onclick: async () => {
+          app.resetView()
+        }
+      })
+    ]) as HTMLDivElement
     // Hide by default on construction so it does not interfere with other views.
     this.menuContainer.style.display = 'none'