Component additions & lock graph

src/lib/components/ComfyApp.svelte

@@ -49,14 +49,15 @@
      resizeTimeout = setTimeout(app.resizeCanvas.bind(app), 250);
  }
 
- function queuePrompt() {
-     console.log("Queuing!");
-     const workflow = $layoutState.attrs.defaultSubgraph;
-     app.queuePrompt(0, 1, workflow);
- }
+ $: if (app?.lCanvas) {
+     app.lCanvas.allow_dragnodes = $uiState.uiUnlocked;
+     app.lCanvas.allow_interaction = $uiState.uiUnlocked;
 
- $: if (app?.lCanvas) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
- $: if (app?.lCanvas) app.lCanvas.allow_interaction = !$uiState.graphLocked;
+     if (!$uiState.uiUnlocked) {
+         app.lCanvas.deselectAllNodes();
+         $layoutState.currentSelectionNodes = []
+     }
+ }
 
  $: if ($uiState.uiEditMode)
      $layoutState.currentSelection = []
@@ -240,9 +241,6 @@
     </div>
     <div id="bottombar">
         <div class="left">
-            <Button variant="primary" on:click={queuePrompt}>
-                Queue Prompt
-            </Button>
             <Button variant="secondary" on:click={toggleGraph}>
                 Toggle Graph
             </Button>

src/lib/components/ComfyApp.ts

@@ -131,6 +131,10 @@ export default class ComfyApp {
         LiteGraph.release_link_on_empty_shows_menu = true;
         LiteGraph.alt_drag_do_clone_nodes = true;
 
+        const uiUnlocked = get(uiState).uiUnlocked;
+        this.lCanvas.allow_dragnodes = uiUnlocked;
+        this.lCanvas.allow_interaction = uiUnlocked;
+
         (window as any).LiteGraph = LiteGraph;
 
         // await this.#invokeExtensionsAsync("init");
@@ -542,6 +546,11 @@ export default class ComfyApp {
                     // nodes have conditional logic that determines which link
                     // to follow backwards.
                     while (isFrontendParent(parent)) {
+                        if (!("getUpstreamLink" in parent)) {
+                            console.warn("[graphToPrompt] Node does not support getUpstreamLink", parent.type)
+                            break;
+                        }
+
                         const nextLink = parent.getUpstreamLink()
                         if (nextLink == null) {
                             console.warn("[graphToPrompt] No upstream link found in frontend node", parent)

src/lib/components/gradio/gallery/Gallery.svelte

@@ -48,7 +48,7 @@
 			  );
 
 	let prevValue: string[] | FileData[] | null = value;
-	let selected_image: number | null = null;
+	export let selected_image: number | null = null;
 	let old_selected_image: number | null = null;
 
 	$: if (prevValue !== value) {

src/lib/nodes/ComfyWidgetNodes.ts

@@ -283,7 +283,8 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     }
 
     override onConfigure(o: SerializedLGraphNode) {
-        this.value.set((o as any).comfyValue);
+        const value = (o as any).comfyValue || LiteGraph.cloneObject(this.defaultValue);
+        this.value.set(value);
         this.shownOutputProperties = (o as any).shownOutputProperties;
     }
 
@@ -537,6 +538,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
         outputs: [
             { name: "selected_index", type: "number" },
             { name: "width", type: "number" },
+            { name: "height", type: "number" },
             { name: "any_selected", type: "boolean" },
         ]
     }
@@ -551,6 +553,8 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override saveUserState = false;
     override outputIndex = null;
     override changedIndex = null;
+
+    anyImageSelected: boolean = false;
 
     modeWidget: IComboWidget;
 
@@ -570,6 +574,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override onExecute() {
         this.setOutputData(0, this.properties.index)
         this.setOutputData(1, this.imageSize[0])
+        this.setOutputData(2, this.imageSize[1])
         this.setOutputData(3, this.anyImageSelected)
     }
 
@@ -592,6 +597,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
                     this.setValue(galleryItems)
                 }
             }
+            this.setProperty("index", 0)
             this.anyImageSelected = false;
         }
     }
@@ -608,6 +614,9 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
         else {
             super.setValue([])
         }
+
+        if (!get(this.value))
+            this.anyImageSelected = false
 
         const len = get(this.value).length
         if (this.properties.index < 0 || this.properties.index >= len) {
@@ -793,9 +802,10 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<Array<GradioFileData>>
         ]
     }
 
-    override svelteComponentType = ImageUploadWidget;
+    override svelteComponentType = ImageUploadWidget;
     override defaultValue = [];
     override outputIndex = null;
+    override changedIndex = 3;
     override saveUserState = false;
 
     imageSize: Vector2 = [1, 1];
@@ -820,7 +830,7 @@ export class ComfyImageUploadNode extends ComfyWidgetNode<Array<GradioFileData>>
         }
     }
 
-    override formatValue(value: GradioFileData[]): string {
+    override formatValue(value: GradioFileData[]): string {
         return `Images: ${value?.length || 0}`
     }
 }

src/lib/stores/layoutState.ts

@@ -424,6 +424,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 serialize: (s) => s === NodeMode.ALWAYS ? "ALWAYS" : "NEVER",
                 deserialize: (m) => m === "ALWAYS" ? NodeMode.ALWAYS : NodeMode.NEVER
             },
+            {
+                name: "horizontal",
+                type: "boolean",
+                location: "nodeVars",
+                editable: true,
+                defaultValue: false
+            },
 
             // Node properties
             {

src/lib/widgets/GalleryWidget.svelte

@@ -21,6 +21,7 @@
  let option: number | null = null;
  let imageWidth: number = 1;
  let imageHeight: number = 1;
+ let selected_image: number | null = null;
 
  $: widget && setNodeValue(widget);
 
@@ -29,6 +30,7 @@
          node = widget.node as ComfyGalleryNode
          nodeValue = node.value;
          propsChanged = node.propsChanged;
+         node.anyImageSelected = false;
 
          if ($nodeValue != null) {
              if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) {
@@ -132,7 +134,22 @@
 
      // Update index
      node.setProperty("index", e.detail.index as number)
+     node.anyImageSelected = true;
  }
+
+ $: if ($propsChanged > -1 && widget && $nodeValue) {
+     if (widget.attrs.variant === "image") {
+         selected_image = $nodeValue.length - 1
+         node.setProperty("index", selected_image)
+         node.anyImageSelected = true;
+     }
+ }
+ else {
+     node.setProperty("index", null)
+     node.anyImageSelected = false;
+ }
+
+ $: node.anyImageSelected = selected_image != null;
 </script>
 
 {#if widget && node && nodeValue}
@@ -166,6 +183,7 @@
                         on:select={onSelect}
                         bind:imageWidth
                         bind:imageHeight
+                        bind:selected_image
                     />
                 </div>
             </Block>

src/mobile/GenToolbar.svelte

@@ -51,7 +51,6 @@
     {/if}
 </div>
 <Toolbar bottom>
-    <Link on:click={queuePrompt}>Queue Prompt</Link>
     <Link on:click={() => app.refreshComboInNodes()}>🔄</Link>
     <Link on:click={doLoad}>Load</Link>
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />