cleanup: remove useCanvasTransformSync composables. (#5742)

No I am not proud of the new placeholder arguments.

## Summary

Small change to unify the two composables before updating the logic.
Edit: Now unifies them both into the **void**.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5742-cleanup-unify-useCanvasTransformSync-composables-2776d73d36508147ad39d11de8588b2e)
by [Unito](https://www.unito.io)

src/components/graph/selectionToolbox/MoreOptions.vue

@@ -49,11 +49,11 @@
 </template>
 
 <script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
 import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import {
   forceCloseMoreOptionsSignal,
   moreOptionsOpen,
@@ -152,9 +152,7 @@ const repositionPopover = () => {
   }
 }
 
-const { startSync, stopSync } = useCanvasTransformSync(repositionPopover, {
-  autoStart: false
-})
+const { resume: startSync, pause: stopSync } = useRafFn(repositionPopover)
 
 function openPopover(triggerEvent?: Event): boolean {
   const el = getButtonEl()

src/composables/canvas/useCanvasTransformSync.ts

@@ -1,136 +0,0 @@
-import { onUnmounted, ref } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
-interface CanvasTransformSyncOptions {
-  /**
-   * Whether to automatically start syncing when canvas is available
-   * @default true
-   */
-  autoStart?: boolean
-  /**
-   * Called when sync starts
-   */
-  onStart?: () => void
-  /**
-   * Called when sync stops
-   */
-  onStop?: () => void
-}
-
-interface CanvasTransform {
-  scale: number
-  offsetX: number
-  offsetY: number
-}
-
-/**
- * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
- *
- * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
- * on every frame. It handles RAF lifecycle management, and ensures proper cleanup.
- *
- * The sync function typically reads canvas.ds properties like offset and scale to keep
- * Vue components aligned with the canvas coordinate system.
- *
- * @example
- * ```ts
- * const syncWithCanvas = (canvas: LGraphCanvas) => {
- *   canvas.ds.scale
- *   canvas.ds.offset
- * }
- *
- * const { isActive, startSync, stopSync } = useCanvasTransformSync(
- *   syncWithCanvas,
- *   {
- *     autoStart: false,
- *     onStart: () => emit('rafStatusChange', true),
- *     onStop: () => emit('rafStatusChange', false)
- *   }
- * )
- * ```
- */
-export function useCanvasTransformSync(
-  syncFn: (canvas: LGraphCanvas) => void,
-  options: CanvasTransformSyncOptions = {}
-) {
-  const { onStart, onStop, autoStart = true } = options
-  const { getCanvas } = useCanvasStore()
-
-  const isActive = ref(false)
-  let rafId: number | null = null
-  let lastTransform: CanvasTransform = {
-    scale: 0,
-    offsetX: 0,
-    offsetY: 0
-  }
-
-  const hasTransformChanged = (canvas: LGraphCanvas): boolean => {
-    const ds = canvas.ds
-    return (
-      ds.scale !== lastTransform.scale ||
-      ds.offset[0] !== lastTransform.offsetX ||
-      ds.offset[1] !== lastTransform.offsetY
-    )
-  }
-
-  const sync = () => {
-    if (!isActive.value) return
-
-    const canvas = getCanvas()
-    if (!canvas) return
-
-    try {
-      // Only run sync if transform actually changed
-      if (hasTransformChanged(canvas)) {
-        lastTransform = {
-          scale: canvas.ds.scale,
-          offsetX: canvas.ds.offset[0],
-          offsetY: canvas.ds.offset[1]
-        }
-
-        syncFn(canvas)
-      }
-    } catch (error) {
-      console.error('Canvas transform sync error:', error)
-    }
-
-    rafId = requestAnimationFrame(sync)
-  }
-
-  const startSync = () => {
-    if (isActive.value) return
-
-    isActive.value = true
-    onStart?.()
-
-    // Reset last transform to force initial sync
-    lastTransform = { scale: 0, offsetX: 0, offsetY: 0 }
-
-    sync()
-  }
-
-  const stopSync = () => {
-    isActive.value = false
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
-    onStop?.()
-  }
-
-  onUnmounted(stopSync)
-
-  if (autoStart) {
-    startSync()
-  }
-
-  return {
-    isActive,
-    startSync,
-    stopSync
-  }
-}

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -1,7 +1,7 @@
+import { useRafFn } from '@vueuse/core'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
@@ -128,9 +128,7 @@ export function useSelectionToolboxPosition(
   }
 
   // Sync with canvas transform
-  const { startSync, stopSync } = useCanvasTransformSync(updateTransform, {
-    autoStart: false
-  })
+  const { resume: startSync, pause: stopSync } = useRafFn(updateTransform)
 
   // Watch for selection changes
   watch(

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

@@ -16,11 +16,11 @@
 </template>
 
 <script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
 import { computed, provide } from 'vue'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
-import { useCanvasTransformSync } from '@/renderer/core/layout/transform/useCanvasTransformSync'
 import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
@@ -68,14 +68,19 @@ const handlePointerDown = (event: PointerEvent) => {
 
 const emit = defineEmits<{
   rafStatusChange: [active: boolean]
-  transformUpdate: [time: number]
+  transformUpdate: []
 }>()
 
-useCanvasTransformSync(props.canvas, syncWithCanvas, {
-  onStart: () => emit('rafStatusChange', true),
-  onUpdate: (duration) => emit('transformUpdate', duration),
-  onStop: () => emit('rafStatusChange', false)
-})
+useRafFn(
+  () => {
+    if (!props.canvas) {
+      return
+    }
+    syncWithCanvas(props.canvas)
+    emit('transformUpdate')
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>

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

@@ -1,115 +0,0 @@
-import { onUnmounted, ref } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-
-interface CanvasTransformSyncOptions {
-  /**
-   * Whether to automatically start syncing when canvas is available
-   * @default true
-   */
-  autoStart?: boolean
-}
-
-interface CanvasTransformSyncCallbacks {
-  /**
-   * Called when sync starts
-   */
-  onStart?: () => void
-  /**
-   * Called after each sync update with timing information
-   */
-  onUpdate?: (duration: number) => void
-  /**
-   * Called when sync stops
-   */
-  onStop?: () => void
-}
-
-/**
- * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
- *
- * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
- * on every frame. It handles RAF lifecycle management, provides performance timing,
- * and ensures proper cleanup.
- *
- * The sync function typically reads canvas.ds (draw state) properties like offset and scale
- * to keep Vue components aligned with the canvas coordinate system.
- *
- * @example
- * ```ts
- * const { isActive, startSync, stopSync } = useCanvasTransformSync(
- *   canvas,
- *   (canvas) => syncWithCanvas(canvas),
- *   {
- *     onStart: () => emit('rafStatusChange', true),
- *     onUpdate: (time) => emit('transformUpdate', time),
- *     onStop: () => emit('rafStatusChange', false)
- *   }
- * )
- * ```
- */
-export function useCanvasTransformSync(
-  canvas: LGraphCanvas | undefined | null,
-  syncFn: (canvas: LGraphCanvas) => void,
-  callbacks: CanvasTransformSyncCallbacks = {},
-  options: CanvasTransformSyncOptions = {}
-) {
-  const { autoStart = true } = options
-  const { onStart, onUpdate, onStop } = callbacks
-
-  const isActive = ref(false)
-  let rafId: number | null = null
-
-  const startSync = () => {
-    if (isActive.value || !canvas) return
-
-    isActive.value = true
-    onStart?.()
-
-    const sync = () => {
-      if (!isActive.value || !canvas) return
-
-      try {
-        const startTime = performance.now()
-        syncFn(canvas)
-        const endTime = performance.now()
-
-        onUpdate?.(endTime - startTime)
-      } catch (error) {
-        console.warn('Canvas transform sync error:', error)
-      }
-
-      rafId = requestAnimationFrame(sync)
-    }
-
-    sync()
-  }
-
-  const stopSync = () => {
-    if (!isActive.value) return
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
-    isActive.value = false
-    onStop?.()
-  }
-
-  // Auto-start if canvas is available and autoStart is enabled
-  if (autoStart && canvas) {
-    startSync()
-  }
-
-  // Clean up on unmount
-  onUnmounted(() => {
-    stopSync()
-  })
-
-  return {
-    isActive,
-    startSync,
-    stopSync
-  }
-}

src/renderer/extensions/minimap/composables/useMinimapViewport.ts

@@ -1,7 +1,7 @@
+import { useRafFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import {
   calculateMinimapScale,
@@ -124,9 +124,8 @@ export function useMinimapViewport(
 
     c.setDirty(true, true)
   }
-
-  const { startSync: startViewportSync, stopSync: stopViewportSync } =
-    useCanvasTransformSync(updateViewport, { autoStart: false })
+  const { resume: startViewportSync, pause: stopViewportSync } =
+    useRafFn(updateViewport)
 
   return {
     bounds: computed(() => bounds.value),