Work

src/lib/components/BlockContainer.svelte

@@ -63,7 +63,7 @@
          class:root-container={zIndex === 0}
          class:is-executing={container.isNodeExecuting}
          class:mobile={isMobile}
-         class:edit={edit}>
+         class:edit>
         <Block>
             {#if container.attrs.title && container.attrs.title !== ""}
                 <label for={String(container.id)} class={($uiState.uiUnlocked && $uiState.uiEditMode === "widgets") ? "edit-title-label" : ""}>
@@ -72,7 +72,7 @@
             {/if}
             <div class="v-pane"
                  class:empty={children.length === 0}
-                 class:edit={edit}
+                 class:edit
                  use:dndzone="{{
                      items: children,
                      flipDurationMs,
@@ -85,8 +85,9 @@
                  on:finalize="{handleFinalize}"
             >
                 {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                    {@const hidden = isHidden(item)}
+                    {@const hidden = isHidden(item) && !edit}
                     <div class="animation-wrapper"
+                         class:edit
                          class:hidden={hidden}
                          animate:flip={{duration:flipDurationMs}}
                          style={item?.attrs?.style || ""}
@@ -119,17 +120,18 @@
 
      .edit {
          min-width: 200px;
+         margin: 0.2rem 0;
      }
 
-     &:not(.edit) > .animation-wrapper.hidden {
+     .animation-wrapper.hidden:not(.edit) {
          display: none;
      }
 
      &.empty {
          border-width: 3px;
-         border-color: var(--color-grey-400);
+         border-color: var(--comfy-container-empty-border-color);
          border-radius: 0;
-         background: var(--color-grey-300);
+         background: var(--comfy-container-empty-background-fill);
          min-height: 100px;
          border-style: dashed;
      }
@@ -246,7 +248,7 @@
  }
 
  .handle-hidden {
-     background-color: #40404080;
+     background-color: #303030A0;
  }
 
  .handle-widget:hover {

src/lib/components/ComfyApp.ts

@@ -404,7 +404,7 @@ export default class ComfyApp {
         }
 
         // Distinguish frontend/backend connections
-        const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
+        const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "IMAGE", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE", "UPSCALE_MODEL"]
         for (const type of BACKEND_TYPES) {
             setColor(type, "orange")
         }

src/lib/components/ComfyProperties.svelte

@@ -132,7 +132,7 @@
          value = spec.defaultValue
      else if (spec.serialize)
          value = spec.serialize(value)
-     console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
+     // console.debug("[ComfyProperties] getAttribute", spec.name, value, target, spec)
      return value
  }
 
@@ -166,7 +166,7 @@
          value = spec.defaultValue
      else if (spec.serialize)
          value = spec.serialize(value)
-     console.debug("[ComfyProperties] getProperty", spec, value, node)
+     // console.debug("[ComfyProperties] getProperty", spec, value, node)
      return value
  }
 
@@ -197,7 +197,7 @@
          value = spec.defaultValue
      else if (spec.serialize)
          value = spec.serialize(value)
-     console.debug("[ComfyProperties] getVar", spec, value, node)
+     // console.debug("[ComfyProperties] getVar", spec, value, node)
      return value
  }
 
@@ -229,7 +229,7 @@
          value = spec.defaultValue
      else if (spec.serialize)
          value = spec.serialize(value)
-     console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
+     // console.debug("[ComfyProperties] getWorkflowAttribute", spec.name, value, spec, $layoutState.attrs[spec.name])
      return value
  }
 
@@ -238,7 +238,7 @@
          return;
 
      const name = spec.name
-     console.warn("updateWorkflowAttribute", name, value)
+     console.warn("[ComfyProperties] updateWorkflowAttribute", name, value)
 
      $layoutState.attrs[name] = value
      $layoutState = $layoutState

src/lib/components/ComfyUIPane.svelte

@@ -41,8 +41,11 @@
  $: {
      canUngroup = false;
      if ($selectionState.currentSelection.length === 1) {
-         const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
+         const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
-         canUngroup = item.type === "container"
+         if (entry != null) {
+             const item = entry.dragItem;
+             canUngroup = item.type === "container"
+         }
      }
  }
  $: if (canUngroup) {
@@ -59,7 +62,11 @@
      if (itemID == null)
          return;
 
-     const item = $layoutState.allItems[$selectionState.currentSelection[0]].dragItem;
+     const entry = $layoutState.allItems[$selectionState.currentSelection[0]]
+     if (entry == null)
+         return
+
+     const item = entry.dragItem;
      if(item.type !== "container")
          return
 

src/lib/components/Container.svelte

@@ -15,8 +15,8 @@
  import { flip } from 'svelte/animate';
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
  import { startDrag, stopDrag } from "$lib/utils"
-	import type { Writable } from "svelte/store";
+ import type { Writable } from "svelte/store";
-	import { isHidden } from "$lib/widgets/utils";
+ import { isHidden } from "$lib/widgets/utils";
 
  export let container: ContainerLayout | null = null;
  export let zIndex: number = 0;
@@ -34,7 +34,7 @@
 </script>
 
 {#if container}
-    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
+    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
     {@const dragDisabled = zIndex === 0 || $selectionState.currentSelection.length > 2 || !$uiState.uiUnlocked}
     {#key $attrsChanged}
         {#if edit || !isHidden(container)}

src/lib/components/WidgetContainer.svelte

@@ -65,7 +65,7 @@
         <Container {container} {classes} {zIndex} {showHandles} {isMobile} />
     {/key}
 {:else if widget && widget.node}
-    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
+    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
     {@const hidden = isHidden(widget)}
     {@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
@@ -136,7 +136,5 @@
 
  .edit {
      border: 2px dashed var(--color-blue-400);
-     margin: 0.2em;
-     padding: 0.2em;
  }
 </style>

src/lib/nodes/ComfyActionNodes.ts

@@ -177,8 +177,8 @@ export class ComfySwapAction extends ComfyGraphNode {
     override onAction(action: any, param: any) {
         const a = this.getInputData(0)
         const b = this.getInputData(1)
-        this.triggerSlot(0, a)
+        this.triggerSlot(0, b)
-        this.triggerSlot(1, b)
+        this.triggerSlot(1, a)
     };
 }
 

src/lib/nodes/ComfyImageToFilepathNode.ts

@@ -1,33 +0,0 @@
-import { LiteGraph, type SlotLayout } from "@litegraph-ts/core";
-import ComfyGraphNode from "./ComfyGraphNode";
-import { comfyFileToAnnotatedFilepath, isComfyBoxImageMetadata, parseWhateverIntoImageMetadata } from "$lib/utils";
-
-export default class ComfyImageToFilepathNode extends ComfyGraphNode {
-    static slotLayout: SlotLayout = {
-        inputs: [
-            { name: "image", type: "COMFYBOX_IMAGES,COMFYBOX_IMAGE" },
-        ],
-        outputs: [
-            { name: "filepath", type: "string" },
-        ]
-    }
-
-    override onExecute() {
-        const data = this.getInputData(0)
-        const meta = parseWhateverIntoImageMetadata(data);
-        if (meta == null || meta.length === 0) {
-            this.setOutputData(0, null)
-            return;
-        }
-
-        const path = comfyFileToAnnotatedFilepath(meta[0].comfyUIFile);
-        this.setOutputData(0, path);
-    }
-}
-
-LiteGraph.registerNodeType({
-    class: ComfyImageToFilepathNode,
-    title: "Comfy.ImageToFilepath",
-    desc: "Converts ComfyBox image metadata to an annotated filepath like \"image.png[output]\" for use with ComfyUI.",
-    type: "image/file_to_filepath"
-})

src/lib/nodes/ComfyPickImageNode.ts

@@ -1,11 +1,7 @@
-import { LiteGraph, type SlotLayout } from "@litegraph-ts/core";
+import { LiteGraph, type ITextWidget, type SlotLayout, type INumberWidget } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
-import { isComfyBoxImageMetadataArray } from "$lib/utils";
+import { comfyFileToAnnotatedFilepath, type ComfyBoxImageMetadata } from "$lib/utils";
 
-/*
- * TODO: This is just a temporary workaround until litegraph can handle typed
- * array arguments.
- */
 export default class ComfyPickImageNode extends ComfyGraphNode {
     static slotLayout: SlotLayout = {
         inputs: [
@@ -13,23 +9,77 @@ export default class ComfyPickImageNode extends ComfyGraphNode {
         ],
         outputs: [
             { name: "image", type: "COMFYBOX_IMAGE" },
+            { name: "filename", type: "string" },
+            { name: "width", type: "number" },
+            { name: "height", type: "number" },
         ]
     }
 
+    filepathWidget: ITextWidget;
+    folderWidget: ITextWidget;
+    widthWidget: INumberWidget;
+    heightWidget: INumberWidget;
+
+    constructor(title?: string) {
+        super(title)
+        this.filepathWidget = this.addWidget("text", "File", "")
+        this.folderWidget = this.addWidget("text", "Folder", "")
+        this.widthWidget = this.addWidget("number", "Width", 0)
+        this.heightWidget = this.addWidget("number", "Height", 0)
+        for (const widget of this.widgets)
+            widget.disabled = true;
+    }
+
+    _value: ComfyBoxImageMetadata[] | null = null;
+    _image: ComfyBoxImageMetadata | null = null;
+    _path: string | null = null;
+    _index: number = 0;
+
+    private setValue(value: ComfyBoxImageMetadata[] | null) {
+        const changed = this._value != value;
+        this._value = value;
+        if (changed) {
+            if (value && value[this._index] != null) {
+                this._image = value[this._index]
+                this._path = comfyFileToAnnotatedFilepath(this._image.comfyUIFile);
+                this.filepathWidget.value = this._image.comfyUIFile.filename
+                this.folderWidget.value = this._image.comfyUIFile.type
+                this.widthWidget.value = this._image.width
+                this.heightWidget.value = this._image.height
+            }
+            else {
+                this._image = null;
+                this._path = null;
+                this.filepathWidget.value = "(None)"
+                this.folderWidget.value = ""
+                this.widthWidget.value = 0
+                this.heightWidget.value = 0
+            }
+        }
+    }
+
     override onExecute() {
         const data = this.getInputData(0)
-        if (data == null || !isComfyBoxImageMetadataArray(data)) {
+        this.setValue(data);
-            this.setOutputData(0, null)
-            return;
-        }
 
-        this.setOutputData(0, data[0]);
+        if (this._image == null) {
+            this.setOutputData(0, null)
+            this.setOutputData(1, null)
+            this.setOutputData(2, 0)
+            this.setOutputData(3, 0)
+        }
+        else {
+            this.setOutputData(0, this._image);
+            this.setOutputData(1, this._path);
+            this.setOutputData(2, this._image.width);
+            this.setOutputData(3, this._image.height);
+        }
     }
 }
 
 LiteGraph.registerNodeType({
     class: ComfyPickImageNode,
     title: "Comfy.PickImage",
-    desc: "Picks out the first image from an array of ComfyBox images.",
+    desc: "Selects an image from an array of ComfyBox images and returns its properties.",
     type: "image/pick_image"
 })

src/lib/nodes/index.ts

@@ -16,4 +16,3 @@ export { default as ComfySelector } from "./ComfySelector"
 export { default as ComfyTriggerNewEventNode } from "./ComfyTriggerNewEventNode"
 export { default as ComfyConfigureQueuePromptButton } from "./ComfyConfigureQueuePromptButton"
 export { default as ComfyPickImageNode } from "./ComfyPickImageNode"
-export { default as ComfyImageToFilepathNode } from "./ComfyImageToFilepathNode"

src/lib/nodes/widgets/ComfyNumberNode.ts

@@ -2,7 +2,7 @@ import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import { clamp } from "$lib/utils";
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 
-import RangeWidget from "$lib/widgets/RangeWidget.svelte";
+import NumberWidget from "$lib/widgets/NumberWidget.svelte";
 import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
 import ComfyWidgetNode from "./ComfyWidgetNode";
 
@@ -23,7 +23,7 @@ export default class ComfyNumberNode extends ComfyWidgetNode<number> {
         precision: 1
     }
 
-    override svelteComponentType = RangeWidget
+    override svelteComponentType = NumberWidget
     override defaultValue = 0;
 
     static slotLayout: SlotLayout = {

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -23,7 +23,7 @@ export type AutoConfigOptions = {
  *
  * - Go to layoutState, look for `ALL_ATTRIBUTES,` insert or find a "variant"
  *   attribute and set `validNodeTypes` to the type of the litegraph node
- * - Add a new entry in the `values` array, like "knob" or "dial" for ComfySliderWidget
+ * - Add a new entry in the `values` array, like "knob" or "dial" for ComfyNumberWidget
  * - Add an {#if widget.attrs.variant === <...>} statement in the existing Svelte component
  *
  * Also, BEWARE of calling setOutputData() and triggerSlot() on the same frame!

src/lib/nodes/widgets/index.ts

@@ -3,7 +3,7 @@ export { default as ComfyButtonNode } from "./ComfyButtonNode"
 export { default as ComfyCheckboxNode } from "./ComfyCheckboxNode"
 export { default as ComfyComboNode } from "./ComfyComboNode"
 export { default as ComfyGalleryNode } from "./ComfyGalleryNode"
-export { default as ComfyImageEditorNode } from "./ComfyImageEditorNode"
+export { default as ComfyImageUploadNode } from "./ComfyImageUploadNode"
 export { default as ComfyRadioNode } from "./ComfyRadioNode"
 export { default as ComfyNumberNode } from "./ComfyNumberNode"
 export { default as ComfyTextNode } from "./ComfyTextNode"

src/lib/stores/layoutState.ts

@@ -185,7 +185,7 @@ export type AttributesSpec = {
     location: "widget" | "nodeProps" | "nodeVars" | "workflow"
 
     /*
-     * Can this attribute be edited in the properties pane.
+     * Can this attribute be edited in the properties pane?
      */
     editable: boolean,
 
@@ -332,7 +332,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "widget",
                 editable: true,
                 values: ["visible", "disabled", "hidden"],
-                defaultValue: "disabled",
+                defaultValue: "hidden",
                 canShow: (di: IDragItem) => di.type === "widget"
             },
 
@@ -353,7 +353,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "widget",
                 editable: true,
                 values: ["block", "hidden"],
-                defaultValue: "block",
+                defaultValue: "hidden",
                 canShow: (di: IDragItem) => di.type === "container"
             },
 
@@ -484,7 +484,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: 0,
                 min: -2 ^ 16,
                 max: 2 ^ 16,
-                validNodeTypes: ["ui/slider"],
+                validNodeTypes: ["ui/number"],
             },
             {
                 name: "max",
@@ -494,7 +494,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: 10,
                 min: -2 ^ 16,
                 max: 2 ^ 16,
-                validNodeTypes: ["ui/slider"],
+                validNodeTypes: ["ui/number"],
             },
             {
                 name: "step",
@@ -504,7 +504,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: 1,
                 min: -2 ^ 16,
                 max: 2 ^ 16,
-                validNodeTypes: ["ui/slider"],
+                validNodeTypes: ["ui/number"],
             },
 
             // Button
@@ -707,6 +707,8 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
         }
     }
     const entry: DragItemEntry = { dragItem, children: [], parent: null };
+    if (state.allItemsByNode[dragItem.id] !== null)
+        throw new Error(`Container with ID ${dragItem.id} already registered!!!`)
     state.allItems[dragItem.id] = entry;
     if (parent) {
         moveItem(dragItem, parent, index)
@@ -733,7 +735,11 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
     }
     const parentEntry = state.allItems[parent.id]
     const entry: DragItemEntry = { dragItem, children: [], parent: null };
+    if (state.allItemsByNode[dragItem.id] !== null)
+        throw new Error(`Widget with ID ${dragItem.id} already registered!!!`)
     state.allItems[dragItem.id] = entry;
+    if (state.allItemsByNode[node.id] !== null)
+        throw new Error(`Widget's node with ID ${node.id} already registered!!!`)
     state.allItemsByNode[node.id] = entry;
     console.debug("[layoutState] addWidget", state)
     moveItem(dragItem, parent, index)
@@ -863,9 +869,7 @@ function groupItems(dragItemIDs: DragItemID[], attrs: Partial<Attributes> = {}):
             index = indexFound
     }
 
-    const title = dragItemIDs.length <= 1 ? "" : "Group";
+    const container = addContainer(parent as ContainerLayout, { title: "", containerVariant: "block", ...attrs }, index)
-
-    const container = addContainer(parent as ContainerLayout, { title, ...attrs }, index)
 
     for (const itemID of dragItemIDs) {
         const item = state.allItems[itemID].dragItem;

src/lib/utils.ts

@@ -1,14 +1,10 @@
-import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
+import layoutState, { type WidgetLayout } from "$lib/stores/layoutState";
-import ComboWidget from "$lib/widgets/ComboWidget.svelte";
+import selectionState from "$lib/stores/selectionState";
-import RangeWidget from "$lib/widgets/RangeWidget.svelte";
-import TextWidget from "$lib/widgets/TextWidget.svelte";
-import { get } from "svelte/store"
-import layoutState, { type WidgetLayout } from "$lib/stores/layoutState"
-import selectionState from "$lib/stores/selectionState"
-import type { SvelteComponentDev } from "svelte/internal";
-import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, GraphInput } from "@litegraph-ts/core";
 import type { FileData as GradioFileData } from "@gradio/upload";
+import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID } from "@litegraph-ts/core";
+import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
+import { type SerializedPrompt } from "./components/ComfyApp";
 
 export function clamp(n: number, min: number, max: number): number {
     return Math.min(Math.max(n, min), max)

src/lib/widgets/utils.ts

@@ -1,14 +1,24 @@
 import type { IDragItem } from "$lib/stores/layoutState";
 import layoutState from "$lib/stores/layoutState";
-import { NodeMode } from "@litegraph-ts/core";
+import { LGraphNode, NodeMode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 
+export function isNodeDisabled(node: LGraphNode): boolean {
+    while (node != null) {
+        if (node.mode !== NodeMode.ALWAYS) {
+            return true;
+        }
+        node = node.graph._subgraph_node;
+    }
+    return false;
+}
+
 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 widget.attrs.nodeDisabledState === "disabled" && isNodeDisabled(widget.node)
     }
 
     return false;
@@ -19,7 +29,7 @@ export function isHidden(widget: IDragItem) {
         return true;
 
     if (widget.type === "widget") {
-        return widget.attrs.nodeDisabledState === "hidden" && widget.node.mode === NodeMode.NEVER
+        return widget.attrs.nodeDisabledState === "hidden" && isNodeDisabled(widget.node)
     }
 
     return false;

src/scss/global.scss

@@ -21,6 +21,8 @@ body {
     --comfy-widget-hovered-background-fill: var(--secondary-200);
     --comfy-container-selected-background-fill: var(--color-yellow-300);
     --comfy-container-hovered-background-fill: var(--secondary-300);
+    --comfy-container-empty-background-fill: var(--color-grey-300);
+    --comfy-container-empty-border-color: var(--color-grey-400);
     --comfy-disabled-label-color: var(--neutral-400);
     --comfy-disabled-textbox-background-fill: var(--neutral-200);
     --comfy-disabled-textbox-border-color: var(--neutral-300);
@@ -50,6 +52,8 @@ body {
     --comfy-widget-hovered-background-fill: var(--neutral-600);
     --comfy-container-selected-background-fill: var(--primary-700);
     --comfy-container-hovered-background-fill: var(--neutral-500);
+    --comfy-container-empty-background-fill: var(--color-grey-800);
+    --comfy-container-empty-border-color: var(--color-grey-600);
     --comfy-disabled-label-color: var(--neutral-500);
     --comfy-disabled-textbox-background-fill: var(--neutral-800);
     --comfy-disabled-textbox-border-color: var(--neutral-700);