From 0626baba2e4cf22948dd4b44ff6706cb936ebb10 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Tue, 16 May 2023 21:08:43 -0500
Subject: [PATCH] Light up refreshed combo boxes

---
 src/lib/components/BlockContainer.svelte |  2 +-
 src/lib/components/ComfyApp.ts           |  2 +-
 src/lib/nodes/widgets/ComfyComboNode.ts  |  9 +++++++--
 src/lib/widgets/ComboWidget.svelte       | 21 ++++++++-------------
 src/scss/global.scss                     | 15 ++++-----------
 5 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 05d5882..9d14cba 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/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;
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index aff7964..f2f3be7 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/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])
             }
diff --git a/src/lib/nodes/widgets/ComfyComboNode.ts b/src/lib/nodes/widgets/ComfyComboNode.ts
index e44a800..fd21274 100644
--- a/src/lib/nodes/widgets/ComfyComboNode.ts
+++ b/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)
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index d7dc56d..ec384a0 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/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);
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 79302c8..0f9ade1 100644
--- a/src/scss/global.scss
+++ b/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;