selection rectangle for vueNodes

src/components/graph/GraphCanvas.vue

@@ -75,6 +75,9 @@
     />
   </TransformPane>
 
+  <!-- Selection rectangle overlay for Vue nodes mode -->
+  <SelectionRectangle v-if="shouldRenderVueNodes && comfyAppReady" />
+
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
 
@@ -157,6 +160,7 @@ import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 
 import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
+import SelectionRectangle from './SelectionRectangle.vue'
 
 const emit = defineEmits<{
   ready: []

src/components/graph/SelectionRectangle.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="pointer-events-none absolute border border-blue-400 bg-blue-500/20"
+    :style="rectangleStyle"
+  />
+</template>
+
+<script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+const canvasStore = useCanvasStore()
+
+const selectionRect = ref<{
+  x: number
+  y: number
+  w: number
+  h: number
+} | null>(null)
+
+useRafFn(() => {
+  const canvas = canvasStore.canvas
+  if (!canvas) {
+    selectionRect.value = null
+    return
+  }
+
+  const { pointer, dragging_rectangle } = canvas
+
+  if (dragging_rectangle && pointer.eDown && pointer.eMove) {
+    const x = pointer.eDown.safeOffsetX
+    const y = pointer.eDown.safeOffsetY
+    const w = pointer.eMove.safeOffsetX - x
+    const h = pointer.eMove.safeOffsetY - y
+
+    selectionRect.value = { x, y, w, h }
+  } else {
+    selectionRect.value = null
+  }
+})
+
+const isVisible = computed(() => selectionRect.value !== null)
+
+const rectangleStyle = computed(() => {
+  const rect = selectionRect.value
+  if (!rect) return {}
+
+  const left = rect.w >= 0 ? rect.x : rect.x + rect.w
+  const top = rect.h >= 0 ? rect.y : rect.y + rect.h
+  const width = Math.abs(rect.w)
+  const height = Math.abs(rect.h)
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  }
+})
+</script>

src/lib/litegraph/src/LGraphCanvas.ts

@@ -4799,7 +4799,8 @@ export class LGraphCanvas
       }
 
       // Area-selection rectangle
-      if (this.dragging_rectangle) {
+      // In Vue nodes mode, selection rectangle is rendered in DOM layer
+      if (this.dragging_rectangle && !LiteGraph.vueNodesMode) {
         const { eDown, eMove } = this.pointer
         ctx.strokeStyle = '#FFF'