live selection (#7465)

## Summary

Add real-time selection feedback during marquee drag, matching the
behavior users expect from other applications.

## Changes

- Nodes and groups are now selected/deselected instantly as the
selection rectangle moves
- Supports all modifier keys (Shift to add, Alt to subtract) during drag
- Added Comfy.Graph.LiveSelection setting (off by default)

## Rationale

This interaction pattern is standard across virtually all design and
productivity software:
- Operating Systems: Windows Explorer, macOS Finder, and Linux file
managers all show live selection feedback when dragging
- Design Tools: Figma, Sketch, Adobe Illustrator, Photoshop, and Blender
use real-time selection
- IDEs: VS Code, JetBrains IDEs show live selection in file explorers
- Node Editors: Unreal Engine Blueprints, Unity Shader Graph, and
Houdini all support live selection

## Screenshots

https://github.com/user-attachments/assets/8b0c2217-47f9-4422-9cab-cb39e145310c

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7465-live-selection-2c96d73d36508133a4a6f917955d55b3)
by [Unito](https://www.unito.io)
This commit is contained in:
Terry Jia
2025-12-15 19:22:39 -05:00
committed by GitHub
parent 18ce8e940a
commit dec929909b
4 changed files with 154 additions and 41 deletions

View File

@@ -93,6 +93,12 @@ export const useLitegraphSettings = () => {
if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
})
watchEffect(() => {
const liveSelection = settingStore.get('Comfy.Graph.LiveSelection')
const { canvas } = canvasStore
if (canvas) canvas.liveSelection = liveSelection
})
watchEffect(() => {
CanvasPointer.doubleClickTime = settingStore.get(
'Comfy.Pointer.DoubleClickTime'

View File

@@ -706,6 +706,16 @@ export const CORE_SETTINGS: SettingParams[] = [
defaultValue: true,
versionAdded: '1.4.0'
},
{
id: 'Comfy.Graph.LiveSelection',
category: ['LiteGraph', 'Canvas', 'LiveSelection'],
name: 'Live selection',
tooltip:
'When enabled, nodes are selected/deselected in real-time as you drag the selection rectangle, similar to other design tools.',
type: 'boolean',
defaultValue: false,
versionAdded: '1.36.1'
},
{
id: 'Comfy.Pointer.ClickDrift',
category: ['LiteGraph', 'Pointer', 'ClickDrift'],