Various fixes/features

src/lib/components/AccordionContainer.svelte

@@ -61,7 +61,7 @@
  }
 </script>
 
-{#if container && children}
+{#if container && Array.isArray(children)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(container.id)}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
          class:hide-block={container.attrs.containerVariant === "hidden"}

src/lib/components/BlockContainer.svelte

@@ -55,7 +55,7 @@
  };
 </script>
 
-{#if container && children}
+{#if container && Array.isArray(children)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(container.id)}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
          class:hide-block={container.attrs.containerVariant === "hidden"}

src/lib/components/ComfyApp.ts

@@ -554,7 +554,7 @@ export default class ComfyApp {
     }
 
     runDefaultQueueAction() {
-        for (const node of this.lGraph.iterateNodesInOrder()) {
+        for (const node of this.lGraph.iterateNodesInOrderRecursive()) {
             if ("onDefaultQueueAction" in node) {
                 (node as ComfyGraphNode).onDefaultQueueAction()
             }
@@ -684,8 +684,7 @@ export default class ComfyApp {
                         break;
                     }
 
-                    for (const n of p.workflow.nodes) {
-                        const node = this.lGraph.getNodeByIdRecursive(n.id);
+                    for (const node of this.lGraph.iterateNodesInOrderRecursive()) {
                         if ("afterQueued" in node) {
                             (node as ComfyGraphNode).afterQueued(p, tag);
                         }

src/lib/components/ComfyPromptSerializer.ts

@@ -9,11 +9,16 @@ function hasTag(node: LGraphNode, tag: string): boolean {
     return "tags" in node.properties && node.properties.tags.indexOf(tag) !== -1
 }
 
+function isGraphInputOutput(node: LGraphNode): boolean {
+    return node.is(GraphInput) || node.is(GraphOutput)
+}
+
 export function isActiveNode(node: LGraphNode, tag: string | null = null): boolean {
     if (!node)
         return false;
 
-    if (tag && !hasTag(node, tag)) {
+    // Check tags but not on graph inputs/outputs
+    if (!isGraphInputOutput(node) && (tag && !hasTag(node, tag))) {
         console.debug("Skipping tagged node", tag, node.properties.tags, node)
         return false;
     }

src/lib/components/ComfyUIPane.svelte

@@ -30,6 +30,51 @@
      // TODO
  }
 
+ function moveTo(delta: number | ((cur: number, total: number) => number)) {
+     const dragItemID = $selectionState.currentSelection[0];
+     const entry = $layoutState.allItems[dragItemID];
+     if (!entry) {
+         return
+     }
+
+     const dragItem = entry.dragItem;
+     const containing = entry.parent
+     if (containing == null || containing.type !== "container") {
+         return
+     }
+
+     const containingEntry = $layoutState.allItems[containing.id];
+     const oldIndex = containingEntry.children.findIndex(c => c.id === dragItem.id)
+     if (oldIndex === -1) {
+         return;
+     }
+
+     let newIndex: number;
+     if (typeof delta === "number")
+         newIndex = oldIndex + delta;
+     else
+         newIndex = delta(oldIndex, containingEntry.children.length);
+
+     layoutState.moveItem(dragItem, containing as ContainerLayout, newIndex)
+     $layoutState = $layoutState
+ }
+
+ function moveUp() {
+     moveTo(-1)
+ }
+
+ function moveDown() {
+     moveTo(1)
+ }
+
+ function sendToTop() {
+     moveTo(() => 0)
+ }
+
+ function sendToBottom() {
+     moveTo((cur: number, total: number) => total - 1)
+ }
+
  function groupWidgets(horizontal: boolean) {
      const items = $selectionState.currentSelection
      $selectionState.currentSelection = []
@@ -110,6 +155,23 @@
 
 {#if showMenu}
     <Menu {...menuPos} on:click={closeMenu} on:clickoutside={closeMenu}>
+        <MenuOption
+            isDisabled={$selectionState.currentSelection.length !== 1}
+            on:click={() => moveUp()}
+            text="Move Up" />
+        <MenuOption
+            isDisabled={$selectionState.currentSelection.length !== 1}
+            on:click={() => moveDown()}
+            text="Move Down" />
+        <MenuOption
+            isDisabled={$selectionState.currentSelection.length !== 1}
+            on:click={() => sendToTop()}
+            text="Send to Top" />
+        <MenuOption
+            isDisabled={$selectionState.currentSelection.length !== 1}
+            on:click={() => sendToBottom()}
+            text="Send to Bottom" />
+        <MenuDivider/>
         <MenuOption
             isDisabled={$selectionState.currentSelection.length === 0}
             on:click={() => groupWidgets(false)}

src/lib/components/Container.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
- import { Block, BlockTitle } from "@gradio/atoms";
  import uiState from "$lib/stores/uiState";
  import selectionState from "$lib/stores/selectionState";
- import WidgetContainer from "./WidgetContainer.svelte"
  import BlockContainer from "./BlockContainer.svelte"
  import AccordionContainer from "./AccordionContainer.svelte"
  import TabsContainer from "./TabsContainer.svelte"
 
- import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
-
- import {fade} from 'svelte/transition';
  // notice - fade in works fine but don't add svelte's fade-out (known issue)
- import {cubicIn} from 'svelte/easing';
- 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 ContainerLayout } from "$lib/stores/layoutState";
  import type { Writable } from "svelte/store";
  import { isHidden } from "$lib/widgets/utils";
 
@@ -23,7 +15,7 @@
  export let classes: string[] = [];
  export let showHandles: boolean = false;
  export let isMobile: boolean = false
- let attrsChanged: Writable<boolean> | null = null;
+ let attrsChanged: Writable<number> | null = null;
 
  $: if (container) {
      attrsChanged = container.attrsChanged

src/lib/components/ImageUpload.svelte

@@ -42,11 +42,6 @@
          imgElem.src = convertComfyOutputToComfyURL(value[0])
  }
 
- $: if (!(_value && _value.length > 0 && imgElem)) {
-     imgWidth = 1
-     imgHeight = 1
- }
-
  function onChange() {
      dispatch("change", value)
  }
@@ -119,6 +114,8 @@
          uploaded = false;
          pending_upload = true;
 
+         imgWidth = 0;
+         imgHeight = 0;
          old_value = _value;
 
          if (_value == null)
@@ -177,9 +174,13 @@
      uploaded = true;
  }
 
+ $: console.warn(imgWidth, imgHeight, "IMGSIZE!!")
+
  function handle_clear(_e: CustomEvent<null>) {
      _value = null;
      value = [];
+     imgWidth = 0;
+     imgHeight = 0;
      dispatch("change", value)
      dispatch("clear")
  }

src/lib/components/TabsContainer.svelte

@@ -68,7 +68,7 @@
  }
 </script>
 
-{#if container && children}
+{#if container && Array.isArray(children)}
     {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(container.id)}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
          class:hide-block={container.attrs.containerVariant === "hidden"}