fix(flash): fix text widget flash in Vue mode, add fade and hover dismissal

- Fix Vue mode: text widgets (CLIPTextEncode, Prompt LM) had no
  [data-testid=widget-layout-field-label], so findRowEl never matched.
  Added fallback strategies: bare <label> text match and widget index match.
- Fix Vue mode: flash background pulse was never applied — @keyframes was
  defined but no rule bound it to .lm-flash. Replaced with CSS transition
  on .lm-flash-host class for value text color fade-in/fade-out.
- Fix Vue mode: -webkit-text-fill-color set by ComfyUI overrode
  even with !important. Added -webkit-text-fill-color override to .lm-flash.
- Fix canvas mode: highlight rect was double-offset because onDrawForeground
  ctx is pre-translated to node.pos. Removed background rect entirely per
  design decision; kept text_color + inline color only.
- Add fade-in (250ms) / fade-out (400ms) for text color in both modes.
  Canvas-drawn widgets use rAF color interpolation; DOM widgets use CSS
  transition. Fixed hexToRgb to handle 3-digit hex shorthand (#DDD).
- Add hover dismissal to canvas mode via app.canvas.getWidgetAtCursor().
  Vue mode already had it via mouseover listener.
- Replace 60fps rAF poll with 100ms setInterval for hover detection.
- Fix batch cleanup closure bug: isDomWidget evaluated per-widget instead
  of per-call; fade rAF cancellers tracked per-widget in _lmFadeCancels map.
- Unify flash color from #66B3FF to LM brand accent #4299E0.
- Fix Vue fade-out: keep .lm-flash-host 300ms after removing .lm-flash so
  CSS transition persists. Canvas DOM widgets: keep inline transition 300ms
  after clearing color.
This commit is contained in:
Will Miao
2026-06-24 19:35:30 +08:00
parent 609dc5d783
commit 845815b9b7
2 changed files with 324 additions and 114 deletions

View File

@@ -726,3 +726,25 @@ body.lm-lora-reordering * {
font-size: 12px;
color: rgba(226, 232, 240, 0.6);
}
/* ---- Widget flash highlight (visual cue after a value is sent to a node) ---- */
/* Applied to a widget row element when its value is updated by LoRA Manager.
Shifts the value text color to the LM brand accent with a CSS transition
for fade-in/fade-out. Removal (timeout / hover) is handled by JS.
The transition is declared on .lm-flash-host (added alongside .lm-flash)
rather than on ComfyUI's .lg-node-widget, so we don't impose a global
color transition on every widget input. The host class persists until
cleanup so fade-out still applies after .lm-flash is removed. */
.lm-flash-host input,
.lm-flash-host textarea,
.lm-flash-host [role="combobox"] {
transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease;
}
.lm-flash input,
.lm-flash textarea,
.lm-flash [role="combobox"] {
color: #4299E0 !important;
-webkit-text-fill-color: #4299E0 !important;
}