From 4ec4da785b90259788d97f18951e4d4a8d311d0a Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Mon, 15 Dec 2025 13:41:10 -0500
Subject: [PATCH] fix: render selection rectangle in DOM layer to appear above
 DOM widgets (#7474)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Selection box was being drawn on canvas which appeared below DOM widgets
like images and textareas.

Now rendered via SelectionRectangle.vue with high z-index to ensure
visibility during drag selection.

## Screenshots (if applicable)
before
<img width="1268" height="1258" alt="image"
src="https://github.com/user-attachments/assets/7cb1271c-9ce6-4fac-83a9-ac783a309d97"
/>

after
<img width="1509" height="1129" alt="image"
src="https://github.com/user-attachments/assets/55dd698f-1213-4e60-ae46-9ed292ecd70c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7474-fix-render-selection-rectangle-in-DOM-layer-to-appear-above-DOM-widgets-2c96d73d36508142bc2ac0d0943043c5)
by [Unito](https://www.unito.io)
---
 src/components/graph/GraphCanvas.vue        |  4 ++--
 src/components/graph/SelectionRectangle.vue |  2 +-
 src/lib/litegraph/src/LGraphCanvas.ts       | 24 ---------------------
 3 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 67d3ed3919..06c46da354 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -76,8 +76,8 @@
     />
   </TransformPane>
 
-  <!-- Selection rectangle overlay for Vue nodes mode -->
-  <SelectionRectangle v-if="shouldRenderVueNodes && comfyAppReady" />
+  <!-- Selection rectangle overlay - rendered in DOM layer to appear above DOM widgets -->
+  <SelectionRectangle v-if="comfyAppReady" />
 
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
diff --git a/src/components/graph/SelectionRectangle.vue b/src/components/graph/SelectionRectangle.vue
index 512e70c06d..4078279e68 100644
--- a/src/components/graph/SelectionRectangle.vue
+++ b/src/components/graph/SelectionRectangle.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isVisible"
-    class="pointer-events-none absolute border border-blue-400 bg-blue-500/20"
+    class="pointer-events-none absolute z-9999 border border-blue-400 bg-blue-500/20"
     :style="rectangleStyle"
   />
 </template>
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index af0da27ca7..64c78797d0 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -4796,30 +4796,6 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         this.#renderSnapHighlight(ctx, highlightPos)
       }
 
-      // Area-selection 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'
-
-        if (eDown && eMove) {
-          // Do not scale the selection box
-          const transform = ctx.getTransform()
-          const ratio = Math.max(1, window.devicePixelRatio)
-          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
-
-          const x = eDown.safeOffsetX
-          const y = eDown.safeOffsetY
-          ctx.strokeRect(x, y, eMove.safeOffsetX - x, eMove.safeOffsetY - y)
-
-          ctx.setTransform(transform)
-        } else {
-          // Fallback to legacy behaviour
-          const [x, y, w, h] = this.dragging_rectangle
-          ctx.strokeRect(x, y, w, h)
-        }
-      }
-
       // on top of link center
       if (
         !this.isDragging &&