Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-03 04:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add visual indicators for widget slot drag hover and connected state

Browse Source 
Add ring highlight when dragging a compatible link over a widget's input
slot, and a left border when a widget has an active link connected.
Drag hover indicator takes priority over connected border to avoid
visual conflict.

- Add --component-node-widget-linked design token (azure-400/600)
- Import useSlotLinkDragUIState in NodeWidgets.vue
- Precompute isDragHoverTarget in processedWidgets computed
- Add 6 tests covering drag hover and connected state indicators

Amp-Thread-ID: https://ampcode.com/threads/T-019c7956-9ecf-722c-89f0-1151094e5851
This commit is contained in:
bymyself
2026-02-19 20:39:18 -08:00
parent 38edba7024
commit 010b7eefd8
3 changed files with 207 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/design-system/src/css/style.css
View File

@@ -286,6 +286,7 @@
--component-node-widget-background-highlighted: var(--color-ash-500);
--component-node-widget-promoted: var(--color-purple-700);
--component-node-widget-advanced: var(--color-azure-400);
--component-node-widget-linked: var(--color-azure-400);
/* Default UI element color palette variables */
--palette-contrast-mix-color: #fff;
@@ -450,6 +451,7 @@
--component-node-widget-background-highlighted: var(--color-graphite-400);
--component-node-widget-promoted: var(--color-purple-700);
--component-node-widget-advanced: var(--color-azure-600);
--component-node-widget-linked: var(--color-azure-600);
--modal-card-background: var(--secondary-background);
--modal-card-background-hovered: var(--secondary-background-hover);
@@ -573,6 +575,7 @@
);
--color-component-node-widget-promoted: var(--component-node-widget-promoted);
--color-component-node-widget-advanced: var(--component-node-widget-advanced);
--color-component-node-widget-linked: var(--component-node-widget-linked);
/* Semantic tokens */
--color-base-foreground: var(--base-foreground);