Image output fixes

src/lib/components/BlockContainer.svelte

@@ -41,13 +41,14 @@
 </script>
 
 {#if container && children}
+    {@const edit = $uiState.uiEditMode === "widgets" && zIndex > 1}
     {#key $attrsChanged}
         <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
              class:hide-block={container.attrs.blockVariant === "hidden"}
              class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
              class:root-container={zIndex === 0}
              class:is-executing={container.isNodeExecuting}
-             class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+             class:edit={edit}>
             <Block>
                 {#if container.attrs.title !== ""}
                     <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
@@ -56,7 +57,7 @@
                 {/if}
                 <div class="v-pane"
                      class:empty={children.length === 0}
-                     class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
+                     class:edit={edit}
                     use:dndzone="{{
                                  items: children,
                                  flipDurationMs,
@@ -82,6 +83,9 @@
                         </div>
                     {/each}
                 </div>
+                {#if container.attrs.hidden && edit}
+                    <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
+                {/if}
                 {#if showHandles}
                     <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
                 {/if}

src/lib/components/ComfyApp.ts

@@ -318,12 +318,12 @@ export default class ComfyApp {
         }
 
         // Distinguish frontend/backend connections
-        const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "IMAGE", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE"]
+        const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE"]
         for (const type of BACKEND_TYPES) {
             setColor(type, "orange")
         }
 
-        setColor("OUTPUT", "rebeccapurple")
+        setColor("IMAGE", "rebeccapurple")
         setColor(BuiltInSlotType.EVENT, "lightseagreen")
         setColor(BuiltInSlotType.ACTION, "lightseagreen")
     }

src/lib/nodes/ComfyActionNodes.ts

@@ -2,6 +2,7 @@ import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnec
 import ComfyGraphNode from "./ComfyGraphNode";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
+import { toast } from '@zerodevx/svelte-toast'
 
 export interface ComfyAfterQueuedEventProperties extends Record<any, any> {
     prompt: SerializedPrompt
@@ -47,6 +48,40 @@ LiteGraph.registerNodeType({
     type: "actions/after_queued"
 })
 
+export interface ComfyOnExecutedEventProperties extends Record<any, any> {
+}
+
+export class ComfyOnExecutedEvent extends ComfyGraphNode {
+    override properties: ComfyOnExecutedEventProperties = {
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "images", type: "IMAGE" }
+        ],
+        outputs: [
+            { name: "onExecuted", type: BuiltInSlotType.EVENT },
+        ],
+    }
+
+    private _output: any = null;
+
+    override receiveOutput(output: any) {
+        if (this._output !== output) {
+            console.error(output)
+            this.triggerSlot(0, "bang")
+            this._output = output
+        }
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyOnExecutedEvent,
+    title: "Comfy.OnExecutedEvent",
+    desc: "Triggers a 'bang' event when a prompt output is received.",
+    type: "actions/on_executed"
+})
+
 export interface ComfyCopyActionProperties extends Record<any, any> {
     value: any
 }
@@ -130,3 +165,34 @@ LiteGraph.registerNodeType({
     desc: "Swaps two inputs when triggered",
     type: "actions/swap"
 })
+
+export interface ComfyNotifyActionProperties extends Record<any, any> {
+    message: string
+}
+
+export class ComfyNotifyAction extends ComfyGraphNode {
+    override properties: ComfyNotifyActionProperties = {
+        message: "Nya."
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "message", type: "string" },
+            { name: "trigger", type: BuiltInSlotType.ACTION }
+        ],
+    }
+
+    override onAction(action: any, param: any) {
+        const message = this.getInputData(0);
+        if (message) {
+            toast.push(message);
+        }
+    };
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyNotifyAction,
+    title: "Comfy.NotifyAction",
+    desc: "Displays a message.",
+    type: "actions/notify"
+})

src/lib/nodes/ComfyBackendNode.ts

@@ -25,7 +25,7 @@ export class ComfyBackendNode extends ComfyGraphNode {
         // It just returns a hash like { "ui": { "images": results } } internally.
         // So this will need to be hardcoded for now.
         if (["PreviewImage", "SaveImage"].indexOf(comfyClass) !== -1) {
-            this.addOutput("output", "OUTPUT");
+            this.addOutput("output", "IMAGE");
         }
     }
 
@@ -78,12 +78,13 @@ export class ComfyBackendNode extends ComfyGraphNode {
         console.warn("onExecuted outputs", outputData)
         for (let index = 0; index < this.outputs.length; index++) {
             const output = this.outputs[index]
-            if (output.type === "OUTPUT") {
+            if (output.type === "IMAGE") {
                 this.setOutputData(index, outputData)
                 for (const node of this.getOutputNodes(index)) {
+                    console.warn(node)
                     if ("receiveOutput" in node) {
-                        const widgetNode = node as ComfyWidgetNode;
+                        const widgetNode = node as ComfyGraphNode;
-                        widgetNode.receiveOutput();
+                        widgetNode.receiveOutput(outputData);
                     }
                 }
             }

src/lib/nodes/ComfyGraphNode.ts

@@ -23,6 +23,10 @@ export default class ComfyGraphNode extends LGraphNode {
 
     defaultWidgets?: DefaultWidgetLayout
 
+    /** Called when a backend node sends a ComfyUI output over a link */
+    receiveOutput(output: any) {
+    }
+
     override onSerialize(o: SerializedLGraphNode) {
         for (let index = 0; index < this.inputs.length; index++) {
             const input = this.inputs[index]

src/lib/nodes/ComfyWidgetNodes.ts

@@ -135,10 +135,6 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         }
     }
 
-    /** Called when a backend node sends a ComfyUI output over a link */
-    receiveOutput() {
-    }
-
     onConnectOutput(
         outputIndex: number,
         inputType: INodeInputSlot["type"],
@@ -411,7 +407,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
 
     static slotLayout: SlotLayout = {
         inputs: [
-            { name: "images", type: "OUTPUT" }
+            { name: "images", type: "IMAGE" }
         ]
     }
 

src/lib/nodes/index.ts

@@ -1,5 +1,5 @@
 export { default as ComfyReroute } from "./ComfyReroute"
 export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"
-export { ComfyCopyAction, ComfySwapAction } from "./ComfyActionNodes"
+export { ComfyAfterQueuedEvent, ComfyCopyAction, ComfySwapAction, ComfyNotifyAction, ComfyOnExecutedEvent } from "./ComfyActionNodes"
 export { default as ComfyValueControl } from "./ComfyValueControl"
 export { default as ComfySelector } from "./ComfySelector"

src/scss/ux.scss

@@ -113,6 +113,12 @@ body {
 
 .v-pane {
     gap: var(--ae-outside-gap-size) !important;
+
+    &.empty {
+        border-color: var(--ae-subpanel-border-color) !important;
+        border-radius: 0 !important;
+        background: var(--ae-subpanel-bg-color) !important;
+    }
 }
 
 .container {
@@ -133,13 +139,18 @@ body {
     }
     &.z-index1, &.z-index2 {
         // padding: var(--ae-outside-gap-size);
-        border: 1px solid var(--ae-panel-border-color);
+        // border: 1px solid var(--ae-panel-border-color);
         > .block {
             background: var(--ae-frame-bg-color) !important;
         }
     }
 
     &:not(.edit) {
+        &.z-index1 > .block {
+            padding: calc(var(--ae-outside-gap-size) / 2) !important;
+            border-width: 0px !important;
+        }
+
         > .block {
             border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
         }
@@ -236,11 +247,11 @@ div.float {
 }
 
 .target-name {
-    background: var(--ae-subpanel-bg-color);
+    background: var(--ae-subpanel-bg-color) !important;
-    border-color: var(--ae-subpanel-border-color);
+    border-color: var(--ae-subpanel-border-color) !important;
 
     .title, .type {
-        color: var(--ae-label-color)
+        color: var(--ae-label-color) !important;
     }
 }