perf: add gpu hint and transform settle to prevent rasterizing while zooming (scale transform)

packages/design-system/src/css/style.css

@@ -1328,6 +1328,15 @@ audio.comfy-audio.empty-audio-widget {
     font-size 0.1s ease;
 }
 
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {

src/renderer/core/layout/__tests__/TransformPane.test.ts

@@ -117,6 +117,73 @@ describe('TransformPane', () => {
     })
   })
 
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      const mockCanvas = createMockCanvas()
+      mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
   describe('interaction state management', () => {
     it('should apply interacting class during interactions', async () => {
       const mockCanvas = createMockCanvas()
@@ -131,7 +198,9 @@ describe('TransformPane', () => {
       const transformPane = wrapper.find('[data-testid="transform-pane"]')
 
       // Initially should not have interacting class
-      expect(transformPane.classes()).not.toContain('will-change-transform')
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
     })
 
     it('should handle pointer events for node delegation', async () => {

src/renderer/core/layout/transform/TransformPane.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     data-testid="transform-pane"
-    class="absolute inset-0 w-full h-full pointer-events-none"
+    :class="
+      cn(
+        'absolute inset-0 w-full h-full pointer-events-none',
+        isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
+      )
+    "
     :style="transformStyle"
   >
     <!-- Vue nodes will be rendered here -->
@@ -11,9 +16,12 @@
 
 <script setup lang="ts">
 import { useRafFn } from '@vueuse/core'
+import { computed } from 'vue'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import { cn } from '@/utils/tailwindUtil'
 
 interface TransformPaneProps {
   canvas?: LGraphCanvas
@@ -23,6 +31,11 @@ const props = defineProps<TransformPaneProps>()
 
 const { transformStyle, syncWithCanvas } = useTransformState()
 
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
+  settleDelay: 16
+})
+
 useRafFn(
   () => {
     if (!props.canvas) {
@@ -33,3 +46,9 @@ useRafFn(
   { immediate: true }
 )
 </script>
+
+<style scoped>
+.transform-pane--interacting {
+  will-change: transform;
+}
+</style>

src/renderer/core/layout/transform/useTransformSettling.ts

@@ -0,0 +1,84 @@
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface TransformSettlingOptions {
+  /**
+   * Delay in ms before transform is considered "settled" after last interaction
+   * @default 200
+   */
+  settleDelay?: number
+  /**
+   * Whether to use passive event listeners (better performance but can't preventDefault)
+   * @default true
+   */
+  passive?: boolean
+}
+
+/**
+ * Tracks when canvas zoom transforms are actively changing vs settled.
+ *
+ * This composable helps optimize rendering quality during zoom transformations.
+ * When the user is actively zooming, we can reduce rendering quality
+ * for better performance. Once the transform "settles" (stops changing), we can
+ * trigger high-quality re-rasterization.
+ *
+ * The settling concept prevents constant quality switching during interactions
+ * by waiting for a period of inactivity before considering the transform complete.
+ *
+ * Uses VueUse's useEventListener for automatic cleanup and useDebounceFn for
+ * efficient settle detection.
+ *
+ * @example
+ * ```ts
+ * const { isTransforming } = useTransformSettling(canvasRef, {
+ *   settleDelay: 200
+ * })
+ *
+ * // Use in CSS classes or rendering logic
+ * const cssClass = computed(() => ({
+ *   'low-quality': isTransforming.value,
+ *   'high-quality': !isTransforming.value
+ * }))
+ * ```
+ */
+export function useTransformSettling(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options: TransformSettlingOptions = {}
+) {
+  const { settleDelay = 256, passive = true } = options
+
+  const isTransforming = ref(false)
+
+  /**
+   * Mark transform as active
+   */
+  const markTransformActive = () => {
+    isTransforming.value = true
+  }
+
+  /**
+   * Mark transform as settled (debounced)
+   */
+  const markTransformSettled = useDebounceFn(() => {
+    isTransforming.value = false
+  }, settleDelay)
+
+  /**
+   * Handle zoom transform event - mark active then queue settle
+   */
+  const handleWheel = () => {
+    markTransformActive()
+    void markTransformSettled()
+  }
+
+  // Register wheel event listener with auto-cleanup
+  useEventListener(target, 'wheel', handleWheel, {
+    capture: true,
+    passive
+  })
+
+  return {
+    isTransforming
+  }
+}