add vue node resizing

Author: christian-byrne

src/renderer/core/layout/injectionKeys.ts

@@ -21,7 +21,7 @@ import type { useTransformState } from '@/renderer/core/layout/transform/useTran
  * const state = inject(TransformStateKey)!
  * const screen = state.canvasToScreen({ x: 100, y: 50 })
  */
-interface TransformState
+export interface TransformState
   extends Pick<
     ReturnType<typeof useTransformState>,
     'screenToCanvas' | 'canvasToScreen' | 'camera' | 'isNodeInViewport'

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

@@ -113,6 +113,13 @@
         </div>
       </div>
     </template>
+
+    <!-- Resize handle -->
+    <div
+      v-if="!readonly"
+      class="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize opacity-0 hover:opacity-20 hover:bg-white transition-opacity duration-200"
+      @pointerdown.stop="startResize"
+    />
   </div>
 </template>
 
@@ -145,6 +152,7 @@ import {
 } from '@/utils/graphTraversalUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+import { useNodeResize } from '../composables/useNodeResize'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
@@ -173,6 +181,11 @@ const { selectedNodeIds } = storeToRefs(useCanvasStore())
 
 // Inject transform state for coordinate conversion
 const transformState = inject(TransformStateKey)
+if (!transformState) {
+  throw new Error(
+    'TransformState must be provided for node resize functionality'
+  )
+}
 
 // Computed selection state - only this node re-evaluates when its selection changes
 const isSelected = computed(() => {
@@ -264,6 +277,19 @@ onMounted(() => {
   }
 })
 
+const { startResize } = useNodeResize(
+  (newSize, element) => {
+    // Apply size directly to DOM element - ResizeObserver will pick this up
+    if (!isCollapsed.value) {
+      element.style.width = `${newSize.width}px`
+      element.style.height = `${newSize.height}px`
+    }
+  },
+  {
+    transformState
+  }
+)
+
 // Track collapsed state
 const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
 

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

@@ -0,0 +1,131 @@
+import { useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+
+import type { TransformState } from '@/renderer/core/layout/injectionKeys'
+
+interface UseNodeResizeOptions {
+  /** Transform state for coordinate conversion */
+  transformState: TransformState
+  /** Callback when resize ends */
+  onEnd?: () => void
+}
+
+/**
+ * Composable for node resizing functionality
+ *
+ * Provides resize handle interaction that integrates with the layout system.
+ * Handles pointer capture, coordinate calculations, and size constraints.
+ */
+export function useNodeResize(
+  resizeCallback: (
+    size: { width: number; height: number },
+    element: HTMLElement
+  ) => void,
+  options: UseNodeResizeOptions
+) {
+  const { transformState } = options
+
+  const isResizing = ref(false)
+  const resizeStartPos = ref<{ x: number; y: number } | null>(null)
+  const resizeStartSize = ref<{ width: number; height: number } | null>(null)
+  const intrinsicMinSize = ref<{ width: number; height: number } | null>(null)
+
+  const startResize = (event: PointerEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement)) return
+
+    // Capture pointer to ensure we get all move/up events
+    target.setPointerCapture(event.pointerId)
+
+    isResizing.value = true
+    resizeStartPos.value = { x: event.clientX, y: event.clientY }
+
+    // Get current node size from the DOM and calculate intrinsic min size
+    const nodeElement = target.closest('[data-node-id]')
+    if (!(nodeElement instanceof HTMLElement)) return
+
+    const rect = nodeElement.getBoundingClientRect()
+
+    // Calculate intrinsic content size once at start
+    const originalWidth = nodeElement.style.width
+    const originalHeight = nodeElement.style.height
+    nodeElement.style.width = 'auto'
+    nodeElement.style.height = 'auto'
+
+    const intrinsicRect = nodeElement.getBoundingClientRect()
+
+    // Restore original size
+    nodeElement.style.width = originalWidth
+    nodeElement.style.height = originalHeight
+
+    // Convert to canvas coordinates using transform state
+    const scale = transformState.camera.z
+    resizeStartSize.value = {
+      width: rect.width / scale,
+      height: rect.height / scale
+    }
+    intrinsicMinSize.value = {
+      width: intrinsicRect.width / scale,
+      height: intrinsicRect.height / scale
+    }
+
+    const handlePointerMove = (moveEvent: PointerEvent) => {
+      if (
+        !isResizing.value ||
+        !resizeStartPos.value ||
+        !resizeStartSize.value ||
+        !intrinsicMinSize.value
+      )
+        return
+
+      const dx = moveEvent.clientX - resizeStartPos.value.x
+      const dy = moveEvent.clientY - resizeStartPos.value.y
+
+      // Apply scale factor from transform state
+      const scale = transformState.camera.z
+      const scaledDx = dx / scale
+      const scaledDy = dy / scale
+
+      // Apply constraints: only minimum size based on content, no maximum
+      const newWidth = Math.max(
+        intrinsicMinSize.value.width,
+        resizeStartSize.value.width + scaledDx
+      )
+      const newHeight = Math.max(
+        intrinsicMinSize.value.height,
+        resizeStartSize.value.height + scaledDy
+      )
+
+      // Get the node element to apply size directly
+      const nodeElement = target.closest('[data-node-id]')
+      if (nodeElement instanceof HTMLElement) {
+        resizeCallback({ width: newWidth, height: newHeight }, nodeElement)
+      }
+    }
+
+    const handlePointerUp = (upEvent: PointerEvent) => {
+      if (isResizing.value) {
+        isResizing.value = false
+        resizeStartPos.value = null
+        resizeStartSize.value = null
+        intrinsicMinSize.value = null
+
+        target.releasePointerCapture(upEvent.pointerId)
+        stopMoveListen()
+        stopUpListen()
+        options.onEnd?.()
+      }
+    }
+
+    const stopMoveListen = useEventListener('pointermove', handlePointerMove)
+    const stopUpListen = useEventListener('pointerup', handlePointerUp)
+  }
+
+  return {
+    startResize,
+    isResizing
+  }
+}

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

@@ -20,6 +20,7 @@ import { useSharedCanvasPositionConversion } from '@/composables/element/useCanv
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
+import { LayoutSource } from '@/renderer/core/layout/types'
 
 import { syncNodeSlotLayoutsFromDOM } from './useSlotElementTracking'
 
@@ -124,10 +125,15 @@ const resizeObserver = new ResizeObserver((entries) => {
     }
   }
 
+  // Set source to Vue before processing DOM-driven updates
+  layoutStore.setSource(LayoutSource.Vue)
+
   // Flush per-type
   for (const [type, updates] of updatesByType) {
     const config = trackingConfigs.get(type)
-    if (config && updates.length) config.updateHandler(updates)
+    if (config && updates.length) {
+      config.updateHandler(updates)
+    }
   }
 
   // After node bounds are updated, refresh slot cached offsets and layouts