Node hidden property

src/lib/components/WidgetContainer.svelte

@@ -6,12 +6,14 @@
  import { startDrag, stopDrag } from "$lib/utils"
  import BlockContainer from "./BlockContainer.svelte"
  import { type Writable } from "svelte/store"
+ import type { ComfyWidgetNode } from "$lib/nodes";
 
  export let dragItem: IDragItem | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
  let container: ContainerLayout | null = null;
  let attrsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let widget: WidgetLayout | null = null;
  let showHandles: boolean = false;
 
@@ -20,16 +22,22 @@
      container = null;
      widget = null;
      attrsChanged = null;
+     propsChanged = null;
  }
  else if (dragItem.type === "container") {
      container = dragItem as ContainerLayout;
      attrsChanged = container.attrsChanged;
      widget = null;
+     propsChanged = null;
  }
  else if (dragItem.type === "widget") {
      widget = dragItem as WidgetLayout;
      attrsChanged = widget.attrsChanged;
      container = null;
+     if (widget.node && "propsChanged" in widget.node)
+         propsChanged = (widget.node as ComfyWidgetNode).propsChanged
+     else
+         propsChanged = null;
  }
 
  $: showHandles = $uiState.uiEditMode === "widgets" // TODO
@@ -53,17 +61,24 @@
         <BlockContainer {container} {classes} {zIndex} {showHandles} />
     {/key}
 {:else if widget && widget.node}
+    {@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
     {#key $attrsChanged}
-        <div class="widget {widget.attrs.classes} {getWidgetClass()}"
-             class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
-            class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
-            class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
-            >
-            <svelte:component this={widget.node.svelteComponentType} {widget} />
-        </div>
-        {#if showHandles}
-            <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-        {/if}
+        {#key $propsChanged}
+            <div class="widget {widget.attrs.classes} {getWidgetClass()}"
+                 class:edit={edit}
+                class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
+                class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
+                class:hidden={widget.node.properties.hidden}
+                >
+                <svelte:component this={widget.node.svelteComponentType} {widget} />
+            </div>
+            {#if widget.node.properties.hidden && edit}
+                <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+            {/if}
+            {#if showHandles}
+                <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+            {/if}
+        {/key}
     {/key}
 {/if}
 
@@ -81,6 +96,10 @@
      padding: 0.2em;
  }
 
+ .hidden:not(.edit) {
+     display: none;
+ }
+
  .handle {
      cursor: grab;
      z-index: 99999;
@@ -91,6 +110,10 @@
      height: 100%;
  }
 
+ .handle-hidden {
+     background-color: #40404080;
+ }
+
  .handle-widget:hover {
      background-color: #add8e680;
  }
@@ -100,7 +123,7 @@
      color: var(--neutral-400);
  }
 
- .widget-edit-outline {
+ .edit {
      border: 2px dashed var(--color-blue-400);
      margin: 0.2em;
      padding: 0.2em;