Cache canvas offset

src/renderer/core/layout/dom/canvasRectCache.ts

@@ -0,0 +1,45 @@
+/**
+ * Canvas Rect Cache (VueUse-based)
+ *
+ * Tracks the client-origin and size of the graph canvas container using
+ * useElementBounding, and exposes a small API to read the rect and
+ * subscribe to changes.
+ *
+ * Assumptions:
+ * - Document scrolling is disabled (body overflow: hidden)
+ * - Layout changes are driven by window resize and container/splitter changes
+ */
+import { useElementBounding } from '@vueuse/core'
+import { shallowRef, watch } from 'vue'
+
+// Target container element (covers the canvas fully and shares its origin)
+const containerRef = shallowRef<HTMLElement | null>(null)
+
+// Bind bounding measurement once; element may be resolved later
+const { x, y, width, height, update } = useElementBounding(containerRef, {
+  windowResize: true,
+  windowScroll: false,
+  immediate: true
+})
+
+// Listener registry for external subscribers
+const listeners = new Set<() => void>()
+
+function ensureContainer() {
+  if (!containerRef.value) {
+    containerRef.value = document.getElementById(
+      'graph-canvas-container'
+    ) as HTMLElement | null
+    if (containerRef.value) update()
+  }
+}
+
+// Notify subscribers when the bounding rect changes
+watch([x, y, width, height], () => {
+  if (listeners.size) listeners.forEach((cb) => cb())
+})
+
+export function getCanvasClientOrigin() {
+  ensureContainer()
+  return { left: x.value || 0, top: y.value || 0 }
+}

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts

@@ -8,6 +8,7 @@
 import { type Ref, inject, nextTick, onMounted, onUnmounted, watch } from 'vue'
 
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { getCanvasClientOrigin } from '@/renderer/core/layout/dom/canvasRectCache'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -47,11 +48,8 @@ function scheduleNodeMeasure(nodeId: string) {
 function runBatchedMeasure() {
   if (pendingNodes.size === 0) return
 
-  // Read container origin once
-  const container = document.getElementById('graph-canvas-container')
-  const originRect = container?.getBoundingClientRect()
-  const originLeft = originRect?.left ?? 0
-  const originTop = originRect?.top ?? 0
+  // Read container origin once from cache
+  const { left: originLeft, top: originTop } = getCanvasClientOrigin()
 
   for (const nodeId of Array.from(pendingNodes)) {
     pendingNodes.delete(nodeId)
@@ -74,10 +72,9 @@ function measureNodeSlotsNow(
   let originL = originLeft
   let originT = originTop
   if (originL == null || originT == null) {
-    const container = document.getElementById('graph-canvas-container')
-    const originRect = container?.getBoundingClientRect()
-    originL = originRect?.left ?? 0
-    originT = originRect?.top ?? 0
+    const { left, top } = getCanvasClientOrigin()
+    originL = left
+    originT = top
   }
 
   const batch: Array<{ key: string; layout: SlotLayout }> = []

src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

@@ -11,6 +11,7 @@
 import { getCurrentInstance, inject, onMounted, onUnmounted } from 'vue'
 
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { getCanvasClientOrigin } from '@/renderer/core/layout/dom/canvasRectCache'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Point } from '@/renderer/core/layout/types'
@@ -70,11 +71,8 @@ const resizeObserver = new ResizeObserver((entries) => {
   // Track nodes whose slots should be remeasured after node size changes
   const nodesNeedingSlotRemeasure = new Set<string>()
 
-  // Read container origin once per batch to avoid repeated layout reads
-  const container = document.getElementById('graph-canvas-container')
-  const originRect = container?.getBoundingClientRect()
-  const originLeft = originRect?.left ?? 0
-  const originTop = originRect?.top ?? 0
+  // Read container origin once per batch via cache
+  const { left: originLeft, top: originTop } = getCanvasClientOrigin()
 
   for (const entry of entries) {
     if (!(entry.target instanceof HTMLElement)) continue