Refactor vue slot tracking (#5463)

* add dom element resize observer registry for vue node components

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

Co-authored-by: AustinMroz <[email protected]>

* refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates

* chore: make TransformState interface non-exported to satisfy knip pre-push

* Revert "chore: make TransformState interface non-exported to satisfy knip pre-push"

This reverts commit 110ecf3.

* Revert "refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates"

This reverts commit 4287526.

* [refactor] Improve resize tracking composable documentation and test utilities

- Rename parameters in useVueElementTracking for clarity (appIdentifier, trackingType)
- Add comprehensive docstring with examples to prevent DOM attribute confusion
- Extract mountLGraphNode test utility to eliminate repetitive mock setup
- Add technical implementation notes documenting optimization decisions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* remove typo comment

* convert to functional bounds collection

* remove inline import

* add interfaces for bounds mutations

* remove change log

* fix bounds collection when vue nodes turned off

* fix title offset on y

* move from resize observer to selection toolbox bounds

* refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates

* Fix conversion

* Readd padding

* revert churn reducings from layoutStore.ts

* Rely on RO for resize, and batch

* Improve churn

* Cache canvas offset

* rename from measure

* remove unused

* address review comments

* Update legacy injection

* nit

* Split into store

* nit

* perf improvement

---------

Co-authored-by: bymyself <[email protected]>
Co-authored-by: AustinMroz <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 4 people

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -102,6 +102,8 @@ export function useSelectionToolboxPosition(
 
     worldPosition.value = {
       x: unionBounds.x + unionBounds.width / 2,
+      // createBounds() applied a default padding of 10px
+      // so adjust Y to maintain visual consistency
       y: unionBounds.y - 10
     }
 

src/composables/element/useCanvasPositionConversion.ts

@@ -1,6 +1,10 @@
 import { useElementBounding } from '@vueuse/core'
 
-import type { LGraphCanvas, Vector2 } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, Point } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+let sharedConverter: ReturnType<typeof useCanvasPositionConversion> | null =
+  null
 
 /**
  * Convert between canvas and client positions
@@ -14,15 +18,15 @@ export const useCanvasPositionConversion = (
 ) => {
   const { left, top, update } = useElementBounding(canvasElement)
 
-  const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
+  const clientPosToCanvasPos = (pos: Point): Point => {
     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 canvasPosToClientPos = (pos: Point): Point => {
     const { offset, scale } = lgCanvas.ds
     return [
       (pos[0] + offset[0]) * scale + left.value,
@@ -36,3 +40,10 @@ export const useCanvasPositionConversion = (
     update
   }
 }
+
+export function useSharedCanvasPositionConversion() {
+  if (sharedConverter) return sharedConverter
+  const lgCanvas = useCanvasStore().getCanvas()
+  sharedConverter = useCanvasPositionConversion(lgCanvas.canvas, lgCanvas)
+  return sharedConverter
+}

src/composables/useCanvasDrop.ts

@@ -1,5 +1,6 @@
 import { Ref } from 'vue'
 
+import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -27,16 +28,19 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
 
       if (dndData.type === 'tree-explorer-node') {
         const node = dndData.data as RenderedTreeExplorerNode
+        const conv = useSharedCanvasPositionConversion()
+        const basePos = conv.clientPosToCanvasPos([loc.clientX, loc.clientY])
+
         if (node.data instanceof ComfyNodeDefImpl) {
           const nodeDef = node.data
-          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          const pos = [...basePos]
           // Add an offset on y to make sure after adding the node, the cursor
           // is on the node (top left corner)
           pos[1] += LiteGraph.NODE_TITLE_HEIGHT
           litegraphService.addNodeOnGraph(nodeDef, { pos })
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
-          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          const pos = basePos
           const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
           let targetProvider: ModelNodeProvider | null = null
           let targetGraphNode: LGraphNode | null = null
@@ -73,11 +77,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
           }
         } else if (node.data instanceof ComfyWorkflow) {
           const workflow = node.data
-          const position = comfyApp.clientPosToCanvasPos([
-            loc.clientX,
-            loc.clientY
-          ])
-          await workflowService.insertWorkflow(workflow, { position })
+          await workflowService.insertWorkflow(workflow, { position: basePos })
         }
       }
     }

src/extensions/core/widgetInputs.ts

@@ -8,7 +8,7 @@ import type {
   INodeOutputSlot,
   ISlotType,
   LLink,
-  Vector2
+  Point
 } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -557,7 +557,7 @@ app.registerExtension({
       }
     )
 
-    function isNodeAtPos(pos: Vector2) {
+    function isNodeAtPos(pos: Point) {
       for (const n of app.graph.nodes) {
         if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
           return true

src/platform/workflow/core/services/workflowService.ts

@@ -2,7 +2,7 @@ import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
 import { LGraph, LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import type { SerialisableGraph, Vector2 } from '@/lib/litegraph/src/litegraph'
+import type { Point, SerialisableGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import {
@@ -346,7 +346,7 @@ export const useWorkflowService = () => {
    */
   const insertWorkflow = async (
     workflow: ComfyWorkflow,
-    options: { position?: Vector2 } = {}
+    options: { position?: Point } = {}
   ) => {
     const loadedWorkflow = await workflow.load()
     const workflowJSON = toRaw(loadedWorkflow.initialState)

src/renderer/core/layout/injectionKeys.ts

@@ -0,0 +1,49 @@
+import type { InjectionKey } from 'vue'
+
+import type { Point } from '@/renderer/core/layout/types'
+
+/**
+ * Lightweight, injectable transform state used by layout-aware components.
+ *
+ * Consumers use this interface to convert coordinates between LiteGraph's
+ * canvas space and the DOM's screen space, access the current pan/zoom
+ * (camera), and perform basic viewport culling checks.
+ *
+ * Coordinate mapping:
+ * - screen = (canvas + offset) * scale
+ * - canvas = screen / scale - offset
+ *
+ * The full implementation and additional helpers live in
+ * `useTransformState()`. This interface deliberately exposes only the
+ * minimal surface needed outside that composable.
+ *
+ * @example
+ * const state = inject(TransformStateKey)!
+ * const screen = state.canvasToScreen({ x: 100, y: 50 })
+ */
+interface TransformState {
+  /** Convert a screen-space point (CSS pixels) to canvas space. */
+  screenToCanvas: (p: Point) => Point
+  /** Convert a canvas-space point to screen space (CSS pixels). */
+  canvasToScreen: (p: Point) => Point
+  /** Current pan/zoom; `x`/`y` are offsets, `z` is scale. */
+  camera?: { x: number; y: number; z: number }
+  /**
+   * Test whether a node's rectangle intersects the (expanded) viewport.
+   * Handy for viewport culling and lazy work.
+   *
+   * @param nodePos Top-left in canvas space `[x, y]`
+   * @param nodeSize Size in canvas units `[width, height]`
+   * @param viewport Screen-space viewport `{ width, height }`
+   * @param margin Optional fractional margin (e.g. `0.2` = 20%)
+   */
+  isNodeInViewport?: (
+    nodePos: ArrayLike<number>,
+    nodeSize: ArrayLike<number>,
+    viewport: { width: number; height: number },
+    margin?: number
+  ) => boolean
+}
+
+export const TransformStateKey: InjectionKey<TransformState> =
+  Symbol('transformState')