mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-22 21:38:52 +00:00
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.
This commit is contained in:
@@ -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()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user