mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-28 10:12:11 +00:00
fix: render selection rectangle in DOM layer to appear above DOM widgets (#7474)
## 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)
This commit is contained in:
@@ -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 &&
|
||||
|
||||
Reference in New Issue
Block a user