[Performance] Avoid layout thrashing (#3302)

src/components/graph/widgets/DomWidget.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
 
@@ -63,9 +62,9 @@ const updateDomClipping = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas || !widgetElement.value) return
 
-  const selectedNode = Object.values(
-    lgCanvas.selected_nodes ?? {}
-  )[0] as LGraphNode
+  const selectedNode = Object.values(lgCanvas.selected_nodes ?? {})[0]
+  if (!selectedNode) return
+
   const node = widget.node
   const isSelected = selectedNode === node
   const renderArea = selectedNode?.renderArea

src/composables/element/useCanvasPositionConversion.ts

@@ -0,0 +1,36 @@
+import type { LGraphCanvas, Vector2 } from '@comfyorg/litegraph'
+import { useElementBounding } from '@vueuse/core'
+
+/**
+ * Convert between canvas and client positions
+ * @param canvasElement - The canvas element
+ * @param lgCanvas - The litegraph canvas
+ * @returns The canvas position conversion functions
+ */
+export const useCanvasPositionConversion = (
+  canvasElement: Parameters<typeof useElementBounding>[0],
+  lgCanvas: LGraphCanvas
+) => {
+  const { left, top } = useElementBounding(canvasElement)
+
+  const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
+    const { offset, scale } = lgCanvas.ds
+    return [
+      (pos[0] - left.value) / scale + offset[0],
+      (pos[1] - top.value) / scale + offset[1]
+    ]
+  }
+
+  const canvasPosToClientPos = (pos: Vector2): Vector2 => {
+    const { offset, scale } = lgCanvas.ds
+    return [
+      (pos[0] + offset[0]) * scale + left.value,
+      (pos[1] + offset[1]) * scale + top.value
+    ]
+  }
+
+  return {
+    clientPosToCanvasPos,
+    canvasPosToClientPos
+  }
+}

src/scripts/app.ts

@@ -10,6 +10,7 @@ import _ from 'lodash'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
 
+import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { st, t } from '@/i18n'
 import type {
   ExecutionErrorWsMessage,
@@ -137,6 +138,11 @@ export class ComfyApp {
   // Set by Comfy.Clipspace extension
   openClipspace: () => void = () => {}
 
+  #positionConversion?: {
+    clientPosToCanvasPos: (pos: Vector2) => Vector2
+    canvasPosToClientPos: (pos: Vector2) => Vector2
+  }
+
   /**
    * The node errors from the previous execution.
    * @deprecated Use useExecutionStore().lastNodeErrors instead
@@ -774,6 +780,11 @@ export class ComfyApp {
     this.#addDropHandler()
 
     await useExtensionService().invokeExtensionsAsync('setup')
+
+    this.#positionConversion = useCanvasPositionConversion(
+      this.canvasContainer,
+      this.canvas
+    )
   }
 
   resizeCanvas() {
@@ -1556,21 +1567,17 @@ export class ComfyApp {
   }
 
   clientPosToCanvasPos(pos: Vector2): Vector2 {
-    const rect = this.canvasContainer.getBoundingClientRect()
-    const containerOffsets = [rect.left, rect.top]
-    return _.zip(pos, this.canvas.ds.offset, containerOffsets).map(
-      // @ts-expect-error fixme ts strict error
-      ([p, o1, o2]) => (p - o2) / this.canvas.ds.scale - o1
-    ) as Vector2
+    if (!this.#positionConversion) {
+      throw new Error('clientPosToCanvasPos called before setup')
+    }
+    return this.#positionConversion.clientPosToCanvasPos(pos)
   }
 
   canvasPosToClientPos(pos: Vector2): Vector2 {
-    const rect = this.canvasContainer.getBoundingClientRect()
-    const containerOffsets = [rect.left, rect.top]
-    return _.zip(pos, this.canvas.ds.offset, containerOffsets).map(
-      // @ts-expect-error fixme ts strict error
-      ([p, o1, o2]) => (p + o1) * this.canvas.ds.scale + o2
-    ) as Vector2
+    if (!this.#positionConversion) {
+      throw new Error('canvasPosToClientPos called before setup')
+    }
+    return this.#positionConversion.canvasPosToClientPos(pos)
   }
 }