Random fixes

src/lib/components/ComfyApp.svelte

@@ -29,7 +29,7 @@
  let containerElem: HTMLDivElement;
  let resizeTimeout: NodeJS.Timeout | null;
  let hasShownUIHelpToast: boolean = false;
- let uiTheme: string = "";
+ let uiTheme: string = "anapnoe";
 
  let debugLayout: boolean = false;
 
@@ -47,7 +47,8 @@
 
  function queuePrompt() {
      console.log("Queuing!");
-     app.queuePrompt(0, 1);
+     const workflow = $layoutState.attrs.defaultSubgraph;
+     app.queuePrompt(0, 1, workflow);
  }
 
  $: if (app?.lCanvas) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
@@ -56,11 +57,11 @@
  $: if ($uiState.uiEditMode)
      $layoutState.currentSelection = []
 
- let graphSize = null;
+ let graphSize = 0;
 
  function toggleGraph() {
      if (graphSize == 0) {
-         graphSize = 100;
+         graphSize = 50;
          app.resizeCanvas();
      }
      else {
@@ -68,7 +69,7 @@
      }
  }
 
- let propsSidebarSize = 15;
+ let propsSidebarSize = 0; //15;
 
  function toggleProps() {
      if (propsSidebarSize == 0) {
@@ -157,6 +158,8 @@
      (window as any).app = app;
      (window as any).appPane = uiPane;
 
+     await import('../../scss/ux.scss');
+
      refreshView();
  })
 
@@ -201,7 +204,7 @@
     </div>
     <div id="bottombar">
         <Button variant="primary" on:click={queuePrompt}>
-            Run
+            Queue Prompt
         </Button>
         <Button variant="secondary" on:click={toggleGraph}>
             Toggle Graph
@@ -252,7 +255,7 @@
 
 <style lang="scss">
  #container {
-     height: calc(100vh - 60px);
+     height: calc(100vh - 70px);
      max-width: 100vw;
      display: grid;
      width: 100%;
@@ -332,7 +335,7 @@
  }
 
  :global(.splitpanes.comfy) {
-     max-height: calc(100vh - 60px);
+     max-height: calc(100vh - 70px);
      max-width: 100vw;
  }
 

src/lib/components/ComfyApp.ts

@@ -576,6 +576,9 @@ export default class ComfyApp {
             return;
         }
 
+        if (tag === "")
+            tag = null;
+
         this.processingQueue = true;
         try {
             while (this.queueItems.length) {

src/lib/components/ComfyQueue.svelte

@@ -57,18 +57,18 @@
 
  $: if (entries) {
      _entries = []
-     for (const entry of entries) {
-         for (const outputs of Object.values(entry.outputs)) {
-             const allImages = outputs.images.map(r => {
-                 // TODO configure backend URL
-                 const url = "http://localhost:8188/view?"
-                 const params = new URLSearchParams(r)
-                 return url + params
-             });
-
-             _entries.push({ allImages, name: "Output" })
-         }
-     }
+     // for (const entry of entries) {
+     //     for (const outputs of Object.values(entry.outputs)) {
+     //         const allImages = outputs.images.map(r => {
+     //             // TODO configure backend URL
+     //             const url = "http://localhost:8188/view?"
+     //             const params = new URLSearchParams(r)
+     //             return url + params
+     //         });
+     //
+     //         _entries.push({ allImages, name: "Output" })
+     //     }
+     // }
  }
 </script>
 

src/lib/nodes/ComfyImageCacheNode.ts

@@ -99,10 +99,7 @@ export default class ComfyImageCacheNode extends ComfyGraphNode {
         if (newIndex === this.properties.index && !force)
             return;
 
-        console.debug("[ComfyImageCacheNode] setIndex", newIndex, force)
-
         if (!this.properties.images || newIndex < 0 || newIndex >= this.properties.images.images.length) {
-            console.debug("[ComfyImageCacheNode] invalid indexes", newIndex, this.properties.images)
             return
         }
 

src/lib/nodes/ComfySelector.ts

@@ -94,9 +94,9 @@ export class ComfySelectorTwo extends ComfyGraphNode {
         ctx.fillStyle = "#AFB";
         var y = (this.selected + 1) * LiteGraph.NODE_SLOT_HEIGHT + 6;
         ctx.beginPath();
-        ctx.moveTo(50, y);
-        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
-        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+        ctx.moveTo(65, y);
+        ctx.lineTo(65, y + LiteGraph.NODE_SLOT_HEIGHT);
+        ctx.lineTo(49, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
         ctx.fill();
     };
 

src/lib/nodes/ComfyWidgetNodes.ts

@@ -141,7 +141,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         inputNode: LGraphNode,
         inputIndex: number
     ): boolean {
-        if (this.autoConfig && "config" in input) {
+        if (this.autoConfig && "config" in input && this.outputs.length === 0) {
             this.doAutoConfig(input as IComfyInputSlot)
         }
 
@@ -397,11 +397,13 @@ export type GalleryOutputEntry = {
 }
 
 export interface ComfyGalleryProperties extends ComfyWidgetProperties {
+    index: number
 }
 
 export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override properties: ComfyGalleryProperties = {
-        defaultValue: []
+        defaultValue: [],
+        index: 0
     }
 
     static slotLayout: SlotLayout = {
@@ -420,14 +422,12 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     override outputIndex = null;
     override changedIndex = null;
 
-    index: number = 0;
-
     constructor(name?: string) {
         super(name, [])
     }
 
     override onExecute() {
-        this.setOutputData(0, this.index)
+        this.setOutputData(0, this.properties.index)
     }
 
     override onAction(action: any) {
@@ -446,6 +446,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
                 // this.setValue(currentValue.concat(galleryItems))
                 this.setValue(galleryItems)
             }
+            this.setProperty("index", 0)
         }
     }
 
@@ -472,7 +473,11 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
         else {
             super.setValue([])
         }
-        this.index = 0;
+
+        const len = get(this.value).length
+        if (this.properties.index < 0 || this.properties.index >= len) {
+            this.setProperty("index", clamp(this.properties.index, 0, len))
+        }
     }
 }
 

src/lib/stores/layoutState.ts

@@ -12,7 +12,7 @@ type DragItemEntry = {
 }
 
 export type LayoutAttributes = {
-    defaultWorkflow: string
+    defaultSubgraph: string
 }
 
 export type LayoutState = {
@@ -160,7 +160,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
 
             // Workflow
             {
-                name: "defaultWorkflow",
+                name: "defaultSubgraph",
                 type: "string",
                 location: "workflow",
                 editable: true
@@ -217,7 +217,7 @@ const store: Writable<LayoutState> = writable({
     isMenuOpen: false,
     isConfiguring: true,
     attrs: {
-        defaultWorkflow: ""
+        defaultSubgraph: ""
     }
 })
 

src/lib/widgets/GalleryWidget.svelte

@@ -8,6 +8,7 @@
  import type { ComfyGalleryNode } from "$lib/nodes/ComfyWidgetNodes";
  import type { FileData as GradioFileData } from "@gradio/upload";
  import type { SelectData as GradioSelectData } from "@gradio/utils";
+	import { clamp } from "$lib/utils";
 
  export let widget: WidgetLayout | null = null;
  let node: ComfyGalleryNode | null = null;
@@ -22,7 +23,11 @@
          node = widget.node as ComfyGalleryNode
          nodeValue = node.value;
          propsChanged = node.propsChanged;
-         node.index = 0;
+
+         const len = $nodeValue.length
+         if (node.properties.index < 0 || node.properties.index >= len) {
+             node.setProperty("index", clamp(node.properties.index, 0, len))
+         }
      }
  };
 
@@ -46,7 +51,7 @@
      }, 200)
 
      // Update index
-     node.index = e.detail.index as number;
+     node.setProperty("index", e.detail.index as number)
  }
 
 </script>

src/scss/global.scss

@@ -1 +1,5 @@
 @import "gradio";
+
+body {
+    overflow: hidden;
+}

src/scss/ux.scss

@@ -504,7 +504,7 @@ input[type=number],
 input[type=text],
 input[type=password],
 input[type=email] {
-	height:34px !important;
+	height: 34px;
 }
 .gradio-slider input[type=range] {
 	align-self: flex-start;
@@ -742,9 +742,10 @@ input[type=range]::-ms-fill-upper {
 
 .widget > .wrapper.comfy-combo .svelte-select {
     --font-size: 13px;
-    --height: 32px;
+    --height: 24px;
     --input-padding: 0px;
-    --chevron-height: 32px;
+    --chevron-width: 24px;
+    --chevron-height: 24px;
     --padding: 0 0 0 8px;
 
     background: var(--ae-input-bg-color) !important;