Minor: transformState and setting error cleanup (#6841)

## Summary

Fixes the routing of TransformState through the node and the console
error from a setting that ends up being undefined via
useRenderModeSetting.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6841-Minor-transformState-and-setting-error-cleanup-2b46d73d3650817a8da7fca5bc56ea9a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/platform/settings/settingStore.ts

@@ -38,8 +38,9 @@ function onChange(
   }
   // Backward compatibility with old settings dialog.
   // Some extensions still listens event emitted by the old settings dialog.
-  // @ts-expect-error 'setting' is possibly 'undefined'.ts(18048)
+  if (setting) {
-  app.ui.settings.dispatchChange(setting.id, newValue, oldValue)
+    app.ui.settings.dispatchChange(setting.id, newValue, oldValue)
+  }
 }
 
 export const useSettingStore = defineStore('setting', () => {

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -154,7 +154,6 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 import SlotConnectionDot from '@/renderer/extensions/vueNodes/components/SlotConnectionDot.vue'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
@@ -201,13 +200,6 @@ const { bringNodeToFront } = useNodeZIndex()
 
 useVueElementTracking(() => nodeData.id, 'node')
 
-const transformState = useTransformState()
-if (!transformState) {
-  throw new Error(
-    'TransformState must be provided for node resize functionality'
-  )
-}
-
 const { selectedNodeIds } = storeToRefs(useCanvasStore())
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
@@ -364,29 +356,24 @@ const cornerResizeHandles: CornerResizeHandle[] = [
 
 const MIN_NODE_WIDTH = 225
 
-const { startResize } = useNodeResize(
+const { startResize } = useNodeResize((result, element) => {
-  (result, element) => {
+  if (isCollapsed.value) return
-    if (isCollapsed.value) return
 
-    // Clamp width to minimum to avoid conflicts with CSS min-width
+  // Clamp width to minimum to avoid conflicts with CSS min-width
-    const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH)
+  const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH)
 
-    // Apply size directly to DOM element - ResizeObserver will pick this up
+  // Apply size directly to DOM element - ResizeObserver will pick this up
-    element.style.setProperty('--node-width', `${clampedWidth}px`)
+  element.style.setProperty('--node-width', `${clampedWidth}px`)
-    element.style.setProperty('--node-height', `${result.size.height}px`)
+  element.style.setProperty('--node-height', `${result.size.height}px`)
 
-    const currentPosition = position.value
+  const currentPosition = position.value
-    const deltaX = Math.abs(result.position.x - currentPosition.x)
+  const deltaX = Math.abs(result.position.x - currentPosition.x)
-    const deltaY = Math.abs(result.position.y - currentPosition.y)
+  const deltaY = Math.abs(result.position.y - currentPosition.y)
 
-    if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
+  if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
-      moveNodeTo(result.position)
+    moveNodeTo(result.position)
-    }
-  },
-  {
-    transformState
   }
-)
+})
 
 const handleResizePointerDown = (direction: ResizeHandleDirection) => {
   return (event: PointerEvent) => {

src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts

@@ -7,12 +7,7 @@ import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useS
 
 import type { ResizeHandleDirection } from './resizeMath'
 import { createResizeSession, toCanvasDelta } from './resizeMath'
-import type { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
-
-interface UseNodeResizeOptions {
-  /** Transform state for coordinate conversion */
-  transformState: ReturnType<typeof useTransformState>
-}
 
 interface ResizeCallbackPayload {
   size: Size
@@ -26,13 +21,9 @@ interface ResizeCallbackPayload {
  * Handles pointer capture, coordinate calculations, and size constraints.
  */
 export function useNodeResize(
-  resizeCallback: (
+  resizeCallback: (payload: ResizeCallbackPayload, element: HTMLElement) => void
-    payload: ResizeCallbackPayload,
-    element: HTMLElement
-  ) => void,
-  options: UseNodeResizeOptions
 ) {
-  const { transformState } = options
+  const transformState = useTransformState()
 
   const isResizing = ref(false)
   const resizeStartPointer = ref<Point | null>(null)