fix: simplify ensureCorrectLayoutScale and fix link sync during Vue node drag (#9680)

## Summary

Fix node layout drift from repeated `ensureCorrectLayoutScale` scaling,
simplify it to a pure one-time normalizer, and fix links not following
Vue nodes during drag.

## Changes

- **What**:
- `ensureCorrectLayoutScale` simplified to a one-time normalizer:
unprojects legacy Vue-scaled coordinates back to canonical LiteGraph
coordinates, marks the graph as corrected, and does nothing else. No
longer touches the layout store, syncs reroutes, or changes canvas
scale.
- Removed no-op calls from `useVueNodeLifecycle.ts` (a renderer version
string was passed where an `LGraph` was expected).
- `layoutStore.finalizeOperation` now calls `notifyChange` synchronously
instead of via `setTimeout`. This ensures `useLayoutSync`'s `onChange`
callback pushes positions to LiteGraph `node.pos` and calls
`canvas.setDirty()` within the same RAF frame as a drag update, fixing
links not following Vue nodes during drag.
- **Tests**: Added tests for `ensureCorrectLayoutScale` (idempotency,
round-trip, unknown-renderer no-op) and `graphRenderTransform`
(project/unproject round-trips, anchor caching).

## Review Focus

- The `setTimeout(() => this.notifyChange(change), 0)` →
`this.notifyChange(change)` change in `layoutStore.ts` is the key fix
for the drag-link-sync bug. The listener (`useLayoutSync`) only writes
to LiteGraph, not back to the layout store, so synchronous notification
is safe.
- `ensureCorrectLayoutScale` no longer has any side effects beyond
normalizing coordinates and setting `workflowRendererVersion` metadata.

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>
Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Hunter <huntcsg@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>

src/components/TopMenuSection.test.ts

@@ -78,6 +78,14 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
+vi.mock('@/scripts/app', () => ({
+  app: {
+    menu: {
+      element: document.createElement('div')
+    }
+  }
+}))
+
 type WrapperOptions = {
   pinia?: ReturnType<typeof createTestingPinia>
   stubs?: Record<string, boolean | Component>
@@ -131,6 +139,18 @@ function createWrapper({
   })
 }
 
+function getLegacyCommandsContainer(
+  wrapper: ReturnType<typeof createWrapper>
+): HTMLElement {
+  const legacyContainer = wrapper.find(
+    '[data-testid="legacy-topbar-container"]'
+  ).element
+  if (!(legacyContainer instanceof HTMLElement)) {
+    throw new Error('Expected legacy commands container to be present')
+  }
+  return legacyContainer
+}
+
 function createJob(id: string, status: JobStatus): JobListItem {
   return {
     id,
@@ -515,4 +535,69 @@ describe('TopMenuSection', () => {
 
     expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
   })
+
+  it('coalesces legacy topbar mutation scans to one check per frame', async () => {
+    localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
+
+    const rafCallbacks: FrameRequestCallback[] = []
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      rafCallbacks.push(cb)
+      return rafCallbacks.length
+    })
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+
+    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) => {
+      if (key === 'Comfy.UseNewMenu') return 'Top'
+      if (key === 'Comfy.UI.TabBarLayout') return 'Integrated'
+      if (key === 'Comfy.RightSidePanel.IsOpen') return true
+      return undefined
+    })
+
+    const wrapper = createWrapper({ pinia, attachTo: document.body })
+
+    try {
+      await nextTick()
+
+      const actionbarContainer = wrapper.find('.actionbar-container')
+      expect(actionbarContainer.classes()).toContain('w-0')
+
+      const legacyContainer = getLegacyCommandsContainer(wrapper)
+      const querySpy = vi.spyOn(legacyContainer, 'querySelector')
+
+      if (rafCallbacks.length > 0) {
+        const initialCallbacks = [...rafCallbacks]
+        rafCallbacks.length = 0
+        initialCallbacks.forEach((callback) => callback(0))
+        await nextTick()
+      }
+      querySpy.mockClear()
+      querySpy.mockReturnValue(document.createElement('div'))
+
+      for (let index = 0; index < 3; index++) {
+        const outer = document.createElement('div')
+        const inner = document.createElement('div')
+        inner.textContent = `legacy-${index}`
+        outer.appendChild(inner)
+        legacyContainer.appendChild(outer)
+      }
+
+      await vi.waitFor(() => {
+        expect(rafCallbacks.length).toBeGreaterThan(0)
+      })
+      expect(querySpy).not.toHaveBeenCalled()
+
+      const callbacks = [...rafCallbacks]
+      rafCallbacks.length = 0
+      callbacks.forEach((callback) => callback(0))
+      await nextTick()
+
+      expect(querySpy).toHaveBeenCalledTimes(1)
+      expect(actionbarContainer.classes()).toContain('px-2')
+    } finally {
+      wrapper.unmount()
+      vi.unstubAllGlobals()
+    }
+  })
 })

src/components/TopMenuSection.vue

@@ -39,6 +39,7 @@
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
               ref="legacyCommandsContainerRef"
+              data-testid="legacy-topbar-container"
               class="[&:not(:has(*>*:not(:empty)))]:hidden"
             ></div>
 
@@ -116,7 +117,7 @@
 <script setup lang="ts">
 import { useLocalStorage, useMutationObserver } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
@@ -264,6 +265,7 @@ const rightSidePanelTooltipConfig = computed(() =>
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 const hasLegacyContent = ref(false)
+let legacyContentCheckRafId: number | null = null
 
 function checkLegacyContent() {
   const el = legacyCommandsContainerRef.value
@@ -276,19 +278,35 @@ function checkLegacyContent() {
     el.querySelector(':scope > * > *:not(:empty)') !== null
 }
 
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
+function scheduleLegacyContentCheck() {
+  if (legacyContentCheckRafId !== null) return
+
+  legacyContentCheckRafId = requestAnimationFrame(() => {
+    legacyContentCheckRafId = null
+    checkLegacyContent()
+  })
+}
+
+useMutationObserver(legacyCommandsContainerRef, scheduleLegacyContentCheck, {
   childList: true,
-  subtree: true,
-  characterData: true
+  subtree: true
 })
 
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
+    checkLegacyContent()
   }
 })
 
+onBeforeUnmount(() => {
+  if (legacyContentCheckRafId === null) return
+
+  cancelAnimationFrame(legacyContentCheckRafId)
+  legacyContentCheckRafId = null
+})
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({