Work

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(1, b)
+        this.triggerSlot(0, 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.setOutputData(0, null)
-            return;
-        }
+        this.setValue(data);
 
-        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"