Toggle nodes/containers on and off by tags

src/lib/widgets/ButtonWidget.svelte

@@ -4,6 +4,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Button } from "@gradio/button";
  import { get, type Writable, writable } from "svelte/store";
+ import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyButtonNode | null = null;
@@ -32,9 +33,9 @@
 
 <div class="wrapper gradio-button">
     {#key $attrsChanged}
-        {#if node !== null}
+        {#if widget !== null && node !== null}
             <Button
-                disabled={widget.attrs.disabled}
+                disabled={isDisabled(widget)}
                 on:click={onClick}
                 variant={widget.attrs.buttonVariant || "primary"}
                 size={widget.attrs.buttonSize === "small" ? "sm" : "lg"}

src/lib/widgets/CheckboxWidget.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
  import type { ComfyCheckboxNode } from "$lib/nodes/ComfyWidgetNodes";
  import { type WidgetLayout } from "$lib/stores/layoutState";
-	import { Block } from "@gradio/atoms";
+ import { Block } from "@gradio/atoms";
  import { Checkbox } from "@gradio/form";
  import { get, type Writable, writable } from "svelte/store";
+ import { isDisabled } from "./utils"
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -31,7 +32,7 @@
         {#key $attrsChanged}
             {#if node !== null}
                 <Block>
-                    <Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} on:select={onSelect} />
+                    <Checkbox disabled={isDisabled(widget)} label={widget.attrs.title} bind:value={$nodeValue} on:select={onSelect} />
                 </Block>
             {/if}
         {/key}

src/lib/widgets/ComboWidget.svelte

@@ -4,11 +4,14 @@
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { get, type Writable } from "svelte/store";
+ import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
  let propsChanged: Writable<number> | null = null;
+ let comboRefreshed: Writable<boolean> | null = null;
+ let wasComboRefreshed: boolean = false;
  let option: any
 
  export let debug: boolean = false;
@@ -34,6 +37,9 @@
          node = widget.node as ComfyComboNode
          nodeValue = node.value;
          propsChanged = node.propsChanged;
+         comboRefreshed = node.comboRefreshed;
+         if ($comboRefreshed)
+             flashOnRefreshed();
          setOption($nodeValue) // don't react on option
      }
  }
@@ -46,6 +52,12 @@
      $nodeValue = option.value;
  }
 
+ $: $comboRefreshed && flashOnRefreshed();
+
+ function flashOnRefreshed() {
+     setTimeout(() => ($comboRefreshed = false), 1000);
+ }
+
  function getLinkValue() {
      if (!node)
          return "???";
@@ -64,46 +76,39 @@
          input.blur();
      navigator.vibrate(20)
  }
-
- let lastPropsChanged: number = 0;
- let werePropsChanged: boolean = false;
-
- $: if ($propsChanged !== lastPropsChanged) {
-     werePropsChanged = true;
-     lastPropsChanged = $propsChanged;
-     setTimeout(() => (werePropsChanged = false), 2000);
- }
 </script>
 
-<div class="wrapper comfy-combo" class:updated={werePropsChanged}>
+<div class="wrapper comfy-combo" class:updated={$comboRefreshed}>
     {#key $propsChanged}
-        {#if node !== null && nodeValue !== null}
-            <label>
-                {#if widget.attrs.title !== ""}
-                    <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
-                {/if}
-                <Select
-                    bind:value={option}
-                    items={node.properties.values}
-                    disabled={widget.attrs.disabled || node.properties.values.length === 0}
-                    clearable={false}
-                    showChevron={true}
-                    inputAttributes={{ autocomplete: 'off' }}
-                    bind:input
-                    on:change
-                    on:focus={onFocus}
-                    on:select={onSelect}
-                    on:filter
-                    on:blur
-                />
-                {#if debug}
-                    <div>Value: {option?.value}</div>
-                    <div>Items: {node.properties.values}</div>
-                    <div>NodeValue: {$nodeValue}</div>
-                    <div>LinkValue: {getLinkValue()}</div>
-                {/if}
-            </label>
-        {/if}
+        {#key $comboRefreshed}
+            {#if node !== null && nodeValue !== null}
+                <label>
+                    {#if widget.attrs.title !== ""}
+                        <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
+                    {/if}
+                    <Select
+                        bind:value={option}
+                        items={node.properties.values}
+                        disabled={isDisabled(widget) || node.properties.values.length === 0}
+                        clearable={false}
+                        showChevron={true}
+                        inputAttributes={{ autocomplete: 'off' }}
+                        bind:input
+                        on:change
+                        on:focus={onFocus}
+                        on:select={onSelect}
+                        on:filter
+                        on:blur
+                    />
+                    {#if debug}
+                        <div>Value: {option?.value}</div>
+                        <div>Items: {node.properties.values}</div>
+                        <div>NodeValue: {$nodeValue}</div>
+                        <div>LinkValue: {getLinkValue()}</div>
+                    {/if}
+                </label>
+            {/if}
+        {/key}
     {/key}
 </div>
 

src/lib/widgets/RangeWidget.svelte

@@ -5,6 +5,7 @@
  import { get, type Writable } from "svelte/store";
 	import { debounce } from "$lib/utils";
 	import interfaceState from "$lib/stores/interfaceState";
+ import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfySliderNode | null = null;
@@ -104,7 +105,7 @@
     {#if node !== null && option !== null}
         <Range
             bind:value={option}
-            disabled={widget.attrs.disabled}
+            disabled={isDisabled(widget)}
             minimum={node.properties.min}
             maximum={node.properties.max}
             step={node.properties.step}

src/lib/widgets/TextWidget.svelte

@@ -3,6 +3,7 @@
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { get, type Writable } from "svelte/store";
+ import { isDisabled } from "./utils"
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
@@ -33,7 +34,7 @@
         <TextBox
             bind:value={$nodeValue}
             label={widget.attrs.title}
-            disabled={widget.attrs.disabled}
+            disabled={isDisabled(widget)}
             lines={node.properties.multiline ? 5 : 1}
             max_lines={node.properties.multiline ? 5 : 1}
             show_label={widget.attrs.title !== ""}

src/lib/widgets/utils.ts

@@ -0,0 +1,26 @@
+import type { IDragItem } from "$lib/stores/layoutState";
+import layoutState from "$lib/stores/layoutState";
+import { NodeMode } from "@litegraph-ts/core";
+import { get } from "svelte/store";
+
+export function isDisabled(widget: IDragItem) {
+    if (widget.attrs.disabled)
+        return true;
+
+    if (widget.type === "widget") {
+        return widget.attrs.nodeDisabledState === "disabled" && widget.node.mode === NodeMode.NEVER
+    }
+
+    return false;
+}
+
+export function isHidden(widget: IDragItem) {
+    if (widget.attrs.hidden)
+        return true;
+
+    if (widget.type === "widget") {
+        return widget.attrs.nodeDisabledState === "hidden" && widget.node.mode === NodeMode.NEVER
+    }
+
+    return false;
+}