From 2ea3d283dcbbde38ac7cf7a8bab07902547841b7 Mon Sep 17 00:00:00 2001 From: Glary-Bot Date: Fri, 15 May 2026 21:08:34 +0000 Subject: [PATCH] fix: RAF-batch canvas ResizeObserver to stop link overlay redraw lag The canvas-element ResizeObserver runs resizeCanvas() (which does canvas.width = NaN, getBoundingClientRect, and a full draw(true, true)) on every fire. During an animated bottom-panel splitter open or window drag, the RO fires many times per second, producing visible link overlay redraw lag because the link overlay canvas re-syncs its size via useRafFn the frame after each main canvas resize. Wrap the callback in createRafBatch() so at most one resize+draw runs per animation frame. Multiple RO fires within the same frame coalesce into a single draw using the latest container dimensions. --- src/scripts/app.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 7ebf702211..97c87df3c0 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -8,6 +8,7 @@ import { useCanvasPositionConversion } from '@/composables/element/useCanvasPosi import { layoutStore } from '@/renderer/core/layout/store/layoutStore' import { syncLayoutStoreNodeBoundsFromGraph } from '@/renderer/core/layout/sync/syncLayoutStoreFromGraph' import { flushScheduledSlotLayoutSync } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking' +import { createRafBatch } from '@/utils/rafBatch' import { st, t } from '@/i18n' import { ChangeTracker } from '@/scripts/changeTracker' @@ -949,10 +950,16 @@ export class ComfyApp { this.rootGraph.start() - // Ensure the canvas fills the window + // Coalesce ResizeObserver bursts during splitter / window drags into one + // resize per frame to stop redundant draw(true, true) calls and the link + // overlay redraw lag they cause. + const scheduleCanvasResize = createRafBatch(() => { + const canvasEl = this.canvasElRef.value + if (canvasEl) this.resizeCanvas(canvasEl) + }) useResizeObserver(this.canvasElRef, ([canvasEl]) => { if (canvasEl.target instanceof HTMLCanvasElement) { - this.resizeCanvas(canvasEl.target) + scheduleCanvasResize.schedule() } })