Queuing from mobile UI

src/mobile/routes/graph.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
  import { Page, Navbar, Block, Tab, BlockHeader, Segmented, Button, Icon } from 'framework7-svelte';
- import { LGraphCanvas } from "@litegraph-ts/core";
+ import { LiteGraph, LGraphCanvas } from "@litegraph-ts/core";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
  import { onMount } from 'svelte';
 
- export let app: ComfyApp = undefined;
+ const app: ComfyApp = ComfyApp.instance;
  let lCanvas: LGraphCanvas | null = null;
  let canvasEl: HTMLCanvasElement | null = null;
 
@@ -21,6 +21,9 @@
      if (!lCanvas) {
          lCanvas = new ComfyGraphCanvas(app, canvasEl);
          lCanvas.allow_interaction = false;
+         LiteGraph.dialog_close_on_mouse_leave = false;
+         LiteGraph.search_hide_on_mouse_leave = false;
+         LiteGraph.pointerevents_method = "pointer";
      }
      resizeCanvas();
  }

src/mobile/routes/home.svelte

@@ -16,7 +16,18 @@
  import queueState from "$lib/stores/queueState";
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 
- let app: ComfyApp = undefined;
+ let app: ComfyApp | null = null;
+
+ function onBackKeyDown(e) {
+     if(f7.view.current.router.currentRoute.path == '/'){
+         // exitApp();
+         e.preventDefault();
+     } else {
+         f7.dialog.close()
+         f7.view.main.router.back()
+         return false;
+     }
+ }
 
  let serializedPaneOrder = {};
 
@@ -43,7 +54,9 @@
  }
 
  onMount(async () => {
-     app = new ComfyApp();
+     if (app)
+         return
+     app = ComfyApp.instance;
 
      // TODO dedup
      app.eventBus.on("nodeAdded", nodeState.nodeAdded);
@@ -64,6 +77,7 @@
 
      await app.setup();
      (window as any).app = app;
+
  });
 
 </script>
@@ -77,14 +91,15 @@
     </Block>
 
     <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/accordion/" title="Accordion">
+        <ListItem link="/subworkflows/" title="Workflows">
             <i class="icon icon-f7" slot="media" />
         </ListItem>
-        <ListItem link="/action-sheet/" title="Action Sheet">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-        <ListItem link="/graph/" title="Show Node Graph" routeProps={{ app: app }}>
+        <ListItem link="/graph/" title="Show Node Graph">
             <i class="icon icon-f7" slot="media" />
         </ListItem>
     </List>
+
+    <div class="canvas-wrapper pane-wrapper" style="display: none">
+        <canvas id="graph-canvas" />
+    </div>
 </Page>

src/mobile/routes/list-subworkflows.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+ import { get } from "svelte/store";
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
+ import { Button } from "@gradio/button";
+ import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import { Checkbox } from "@gradio/form"
+ import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
+ import { ImageViewer } from "$lib/ImageViewer";
+ import { download } from "$lib/utils"
+
+ import { LGraph, LGraphNode } from "@litegraph-ts/core";
+ import type { ComfyAPIStatus } from "$lib/api";
+ import queueState from "$lib/stores/queueState";
+ import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
+
+</script>
+
+<Page name="subworkflows">
+  <Navbar title="Workflows" backLink="Back" />
+
+    <List strong inset dividersIos class="components-list searchbar-found">
+        <ListItem link="/subworkflows/{1}/" title="Workflow 1">
+            <i class="icon icon-f7" slot="media" />
+        </ListItem>
+    </List>
+</Page>

src/mobile/routes/subworkflow.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+ import { get } from "svelte/store";
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
+ import { Button } from "@gradio/button";
+ import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import { Checkbox } from "@gradio/form"
+ import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
+ import { ImageViewer } from "$lib/ImageViewer";
+ import { download } from "$lib/utils"
+
+ import { LGraph, LGraphNode } from "@litegraph-ts/core";
+ import type { ComfyAPIStatus } from "$lib/api";
+ import queueState from "$lib/stores/queueState";
+ import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
+ import { getComponentForWidgetState } from "$lib/utils"
+ import { f7 } from "framework7-svelte"
+
+ export let subworkflowID: number = -1;
+ let app: ComfyApp = undefined;
+
+ $: if (ComfyApp.instance)
+     app = ComfyApp.instance;
+
+
+ function queuePrompt() {
+     app.queuePrompt(0, 1);
+     showNotification();
+ }
+
+ let notification;
+ const showNotification = () => {
+     if (!notification) {
+         notification = f7.notification.create({
+             title: 'Queued',
+             titleRightText: 'now',
+             // subtitle: 'Notification with close on click',
+             text: 'Prompt was queued',
+             closeOnClick: true,
+             closeTimeout: 3000,
+         });
+     }
+     // Open it
+     notification.open();
+ }
+</script>
+
+<Page name="subworkflow">
+    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
+    <Toolbar bottom>
+        <Link on:click={queuePrompt}>Queue Prompt</Link>
+    </Toolbar>
+
+    {#each Object.entries($widgetState) as [id, ws]}
+        {@const node = app.lGraph.getNodeById(id)}
+        <div class:is-executing={$queueState.runningNodeId === node.id}>
+            <Block>
+                <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                    <BlockTitle>
+                        {node.title}
+                    </BlockTitle>
+                </label>
+                {#each $widgetState[id] as item}
+                    <svelte:component this={getComponentForWidgetState(item)} {item} />
+                {/each}
+                {#if $uiState.unlocked}
+                    <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                {/if}
+            </Block>
+        </div>
+    {/each}
+</Page>
+
+<style>
+ .is-executing {
+     border: 5px dashed var(--color-green-600) !important;
+ }
+</style>