From 467cd18afec68a78e248a67bb24e3a2190cb0075 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 08:57:34 +0900
Subject: [PATCH 1/8] Basic draggable

---
 src/components/appMenu/AppMenu.vue | 50 ++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index 4af2cd84..9074c673 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -1,6 +1,13 @@
 <template>
-  <Panel v-if="visible" class="app-menu">
-    <div class="app-menu-content flex align-center">
+  <Panel
+    v-show="visible"
+    class="app-menu w-fit"
+    :style="style"
+    :class="{ 'is-dragging': isDragging }"
+  >
+    <div class="app-menu-content flex items-center" ref="panelRef">
+      <span class="drag-handle cursor-move mr-2 p-0!" ref="dragHandleRef">
+      </span>
       <div class="queue-button-group flex">
         <SplitButton
           class="comfyui-queue-button"
@@ -66,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import Panel from 'primevue/panel'
 import Divider from 'primevue/divider'
 import SplitButton from 'primevue/splitbutton'
@@ -84,6 +91,7 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { MenuItem } from 'primevue/menuitem'
 import { useI18n } from 'vue-i18n'
+import { useDraggable } from '@vueuse/core'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
@@ -138,18 +146,48 @@ const hasPendingTasks = computed(() => queueCountStore.count.value > 1)
 const queuePrompt = (e: MouseEvent) => {
   app.queuePrompt(e.shiftKey ? -1 : 0, batchCount.value)
 }
+
+const panelRef = ref<HTMLElement | null>(null)
+const dragHandleRef = ref<HTMLElement | null>(null)
+const { x, y, style, isDragging } = useDraggable(panelRef, {
+  initialValue: { x: 0, y: 0 },
+  handle: dragHandleRef,
+  containerElement: document.body
+})
+
+// Set initial position to bottom center
+const setInitialPosition = () => {
+  if (panelRef.value) {
+    const screenWidth = window.innerWidth
+    const screenHeight = window.innerHeight
+    const menuWidth = panelRef.value.offsetWidth
+    const menuHeight = panelRef.value.offsetHeight
+
+    console.log(menuWidth, menuHeight)
+
+    x.value = (screenWidth - menuWidth) / 2
+    y.value = screenHeight - menuHeight - 10 // 10px margin from bottom
+  }
+}
+onMounted(setInitialPosition)
+watch(visible, (newVisible) => {
+  if (newVisible) {
+    nextTick(setInitialPosition)
+  }
+})
 </script>
 
 <style scoped>
 .app-menu {
   pointer-events: all;
   position: fixed;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 1000;
 }
 
+.app-menu.is-dragging {
+  user-select: none;
+}
+
 :deep(.p-panel-content) {
   padding: 10px;
 }

From 34feced9a481d26b6f42866c24131b800590c20e Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:00:20 +0900
Subject: [PATCH 2/8] Nowrap

---
 src/components/appMenu/AppMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index 9074c673..a1dbaa22 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -30,7 +30,7 @@
           </template>
         </SplitButton>
         <BatchCountEdit />
-        <ButtonGroup class="execution-actions ml-2">
+        <ButtonGroup class="execution-actions ml-2 flex flex-nowrap">
           <Button
             v-tooltip.bottom="$t('menu.interrupt')"
             icon="pi pi-times"
@@ -51,7 +51,7 @@
         </ButtonGroup>
       </div>
       <Divider layout="vertical" class="mx-2" />
-      <ButtonGroup>
+      <ButtonGroup class="flex flex-nowrap">
         <Button
           v-tooltip.bottom="$t('menu.refresh')"
           icon="pi pi-refresh"

From 4818a722335266a2f3a7f2b188d8838c278f2322 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:02:18 +0900
Subject: [PATCH 3/8] Prevent double reset

---
 src/components/appMenu/AppMenu.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index a1dbaa22..6460521e 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -157,13 +157,18 @@ const { x, y, style, isDragging } = useDraggable(panelRef, {
 
 // Set initial position to bottom center
 const setInitialPosition = () => {
+  if (x.value !== 0 || y.value !== 0) {
+    return
+  }
   if (panelRef.value) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
     const menuWidth = panelRef.value.offsetWidth
     const menuHeight = panelRef.value.offsetHeight
 
-    console.log(menuWidth, menuHeight)
+    if (menuWidth === 0 || menuHeight === 0) {
+      return
+    }
 
     x.value = (screenWidth - menuWidth) / 2
     y.value = screenHeight - menuHeight - 10 // 10px margin from bottom

From 6e5bc48bd50802ef2d915e8193a5ae741d00c3bc Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:11:04 +0900
Subject: [PATCH 4/8] Persist position

---
 src/components/appMenu/AppMenu.vue | 20 +++++++++++++++++++-
 src/scripts/ui.ts                  |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index 6460521e..d18abc0e 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -91,7 +91,8 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { MenuItem } from 'primevue/menuitem'
 import { useI18n } from 'vue-i18n'
-import { useDraggable } from '@vueuse/core'
+import { useDraggable, useLocalStorage } from '@vueuse/core'
+import { debounce } from 'lodash'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
@@ -149,17 +150,34 @@ const queuePrompt = (e: MouseEvent) => {
 
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
+const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
+  x: 0,
+  y: 0
+})
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
   containerElement: document.body
 })
 
+// Update storedPosition when x or y changes
+watch(
+  [x, y],
+  debounce(([newX, newY]) => {
+    storedPosition.value = { x: newX, y: newY }
+  }, 300)
+)
+
 // Set initial position to bottom center
 const setInitialPosition = () => {
   if (x.value !== 0 || y.value !== 0) {
     return
   }
+  if (storedPosition.value.x !== 0 || storedPosition.value.y !== 0) {
+    x.value = storedPosition.value.x
+    y.value = storedPosition.value.y
+    return
+  }
   if (panelRef.value) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 8367da21..5fd8f8a8 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -172,7 +172,7 @@ function dragElement(dragEl, settings): () => void {
   settings.addSetting({
     id: 'Comfy.MenuPosition',
     category: ['Comfy', 'Menu', 'MenuPosition'],
-    name: "Save legacy menu's position",
+    name: "Save menu's position",
     type: 'boolean',
     defaultValue: savePos,
     onChange(value) {

From 0f707d131bf3b4711eeb2c503230cb1174d28f81 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:13:14 +0900
Subject: [PATCH 5/8] nit

---
 src/components/appMenu/AppMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index d18abc0e..c8740282 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -212,7 +212,7 @@ watch(visible, (newVisible) => {
 }
 
 :deep(.p-panel-content) {
-  padding: 10px;
+  @apply p-2;
 }
 
 :deep(.p-panel-header) {

From a062d257e0fd76be2796e4a819d0203d0dc8ff2d Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:16:19 +0900
Subject: [PATCH 6/8] nit

---
 src/scripts/ui.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 5fd8f8a8..8367da21 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -172,7 +172,7 @@ function dragElement(dragEl, settings): () => void {
   settings.addSetting({
     id: 'Comfy.MenuPosition',
     category: ['Comfy', 'Menu', 'MenuPosition'],
-    name: "Save menu's position",
+    name: "Save legacy menu's position",
     type: 'boolean',
     defaultValue: savePos,
     onChange(value) {

From aa1d17901886104a76b8a962fd09de5c8fc0a6eb Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:28:56 +0900
Subject: [PATCH 7/8] Window resize adjustment

---
 src/components/appMenu/AppMenu.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/appMenu/AppMenu.vue b/src/components/appMenu/AppMenu.vue
index c8740282..ac5c189c 100644
--- a/src/components/appMenu/AppMenu.vue
+++ b/src/components/appMenu/AppMenu.vue
@@ -91,8 +91,8 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { MenuItem } from 'primevue/menuitem'
 import { useI18n } from 'vue-i18n'
-import { useDraggable, useLocalStorage } from '@vueuse/core'
-import { debounce } from 'lodash'
+import { useDraggable, useEventListener, useLocalStorage } from '@vueuse/core'
+import { debounce, clamp } from 'lodash'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
@@ -198,6 +198,23 @@ watch(visible, (newVisible) => {
     nextTick(setInitialPosition)
   }
 })
+
+const adjustMenuPosition = () => {
+  if (panelRef.value) {
+    const screenWidth = window.innerWidth
+    const screenHeight = window.innerHeight
+    const menuWidth = panelRef.value.offsetWidth
+    const menuHeight = panelRef.value.offsetHeight
+
+    // Adjust x position if menu is off-screen horizontally
+    x.value = clamp(x.value, 0, screenWidth - menuWidth)
+
+    // Adjust y position if menu is off-screen vertically
+    y.value = clamp(y.value, 0, screenHeight - menuHeight)
+  }
+}
+
+useEventListener(window, 'resize', adjustMenuPosition)
 </script>
 
 <style scoped>

From 9a5c5c8e7af5d1d57ae1910da44e338fc40bd26d Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 28 Sep 2024 09:39:51 +0900
Subject: [PATCH 8/8] Fix playwright test

---
 browser_tests/ComfyPage.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 93ce9355..7426b082 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -640,9 +640,10 @@ export class ComfyPage {
         y: 645
       }
     })
-    await page.locator('input[type="text"]').click()
-    await page.locator('input[type="text"]').fill('128')
-    await page.locator('input[type="text"]').press('Enter')
+    const dialogInput = page.locator('.graphdialog input[type="text"]')
+    await dialogInput.click()
+    await dialogInput.fill('128')
+    await dialogInput.press('Enter')
     await this.nextFrame()
   }