Light up refreshed combo boxes

src/lib/components/BlockContainer.svelte

@@ -128,7 +128,7 @@
      &.empty {
          border-width: 3px;
          border-color: var(--color-grey-400);
-         border-radius: var(--block-radius);
+         border-radius: 0;
          background: var(--color-grey-300);
          min-height: 100px;
          border-style: dashed;

src/lib/components/ComfyApp.ts

@@ -807,7 +807,7 @@ export default class ComfyApp {
             console.debug("[ComfyApp] Reconfiguring combo widget", backendNode.type, "=>", comboNode.type, rawValues.length)
             comboNode.doAutoConfig(comfyInput, { includeProperties: new Set(["values"]), setWidgetTitle: false })
 
-            comboNode.formatValues(rawValues as string[])
+            comboNode.formatValues(rawValues as string[], true)
             if (!rawValues?.includes(get(comboNode.value))) {
                 comboNode.setValue(rawValues[0])
             }

src/lib/nodes/widgets/ComfyComboNode.ts

@@ -1,6 +1,6 @@
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import { BuiltInSlotType, LiteGraph, type INodeInputSlot, type LGraphNode, type SerializedLGraphNode, type SlotLayout } from "@litegraph-ts/core";
-import { writable, type Writable } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
@@ -39,11 +39,13 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
     // True if at least one combo box refresh has taken place
     // Wait until the initial graph load for combo to be valid.
     firstLoad: Writable<boolean>;
+    lightUp: Writable<boolean>;
     valuesForCombo: Writable<any[] | null>; // Changed when the combo box has values.
 
     constructor(name?: string) {
         super(name, "A")
         this.firstLoad = writable(false)
+        this.lightUp = writable(true)
         this.valuesForCombo = writable(null)
     }
 
@@ -53,11 +55,14 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
         }
     }
 
-    formatValues(values: string[]) {
+    formatValues(values: string[], lightUp: boolean = false) {
         if (values == null)
             return;
 
+        const changed = this.properties.values != values;
         this.properties.values = values;
+        if (lightUp && get(this.firstLoad) && changed)
+            this.lightUp.set(true)
 
         let formatter: any;
         if (this.properties.convertValueToLabelCode)

src/lib/widgets/ComboWidget.svelte

@@ -13,6 +13,7 @@
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
  let propsChanged: Writable<number> | null = null;
+ let lightUp: Writable<boolean> = writable(false);
  let valuesForCombo: Writable<any[]> | null = null;
  let lastConfigured: any = null;
  let option: any = null;
@@ -40,6 +41,7 @@
          node = widget.node as ComfyComboNode
          nodeValue = node.value;
          propsChanged = node.propsChanged;
+         lightUp = node.lightUp;
          valuesForCombo = node.valuesForCombo;
          lastConfigured = $valuesForCombo
      }
@@ -52,16 +54,8 @@
      activeIndex = values.findIndex(v => v.value === value);
  }
 
- $: $valuesForCombo != lastConfigured && flashOnRefreshed();
- let lightUp = false;
-
- function flashOnRefreshed() {
-     lastConfigured = $valuesForCombo
-     if (lastConfigured != null) {
-         lightUp = true;
-         setTimeout(() => (lightUp = false), 1000);
-     }
- }
+ $: if ($lightUp)
+     setTimeout(() => ($lightUp = false), 1000);
 
  function getLinkValue() {
      if (!node)
@@ -137,7 +131,7 @@
 
 </script>
 
-<div class="wrapper comfy-combo" class:mobile={isMobile} class:updated={lightUp}>
+<div class="wrapper comfy-combo" class:mobile={isMobile} class:updated={$lightUp}>
     {#key $valuesForCombo}
         {#if node !== null && nodeValue !== null}
             {#if $valuesForCombo == null}
@@ -172,10 +166,11 @@
                         <div class="comfy-select-list" slot="list" let:filteredItems>
                             {#if filteredItems.length > 0}
                                 {@const itemSize = isMobile ? 50 : 25}
+                                {@const itemsToShow = isMobile ? 10 : 30}
                                 <VirtualList
                                     items={filteredItems}
                                     width="100%"
-                                    height={Math.min(filteredItems.length, 10) * itemSize}
+                                    height={Math.min(filteredItems.length, itemsToShow) * itemSize}
                                     itemCount={filteredItems.length}
                                     {itemSize}
                                     overscanCount={5}
@@ -252,7 +247,7 @@
      --chevron-color: var(--body-text-color);
      --border: 1px solid var(--input-border-color);
      --border-hover: 1px solid var(--input-border-color-hover);
-     --border-focused: 1px solid var(--input-border-color-focus);
+     --border-focused: 1px solid var(--neutral-400);
      --border-radius-focused: 0px;
      --border-radius: 0px;
      --list-background: var(--comfy-dropdown-list-background);

src/scss/global.scss

@@ -14,6 +14,8 @@ body {
 :root {
     --color-blue-500: #3985f5;
 
+    --input-border-color-focus: var(--neutral-400);
+
     --comfy-accent-soft: var(--neutral-300);
     --comfy-widget-selected-background-fill: var(--color-yellow-100);
     --comfy-widget-hovered-background-fill: var(--secondary-200);
@@ -41,6 +43,8 @@ body {
 .dark {
     color-scheme: dark;
 
+    --input-border-color-focus: var(--neutral-500);
+
     --comfy-accent-soft: var(--neutral-600);
     --comfy-widget-selected-background-fill: var(--primary-500);
     --comfy-widget-hovered-background-fill: var(--neutral-600);
@@ -138,17 +142,6 @@ select {
     // }
 }
 
-// button {
-//     filter: none;
-//     &.primary:active {
-//         filter: brightness(80%)
-//     }
-//     &.secondary:active {
-//         filter: brightness(80%)
-//     }
-// }
-
-
 button {
     &.primary:active {
         border-color: var(--button-primary-border-color-active) !important;