Improve mobile app initialization and range widget corner indicator

src/mobile/GenToolbar.svelte

@@ -7,14 +7,13 @@
 
  import { Link, Toolbar } from "framework7-svelte"
  import ProgressBar from "$lib/components/ProgressBar.svelte";
+	import Indicator from "./Indicator.svelte";
+	import interfaceState from "$lib/stores/interfaceState";
 
  export let subworkflowID: number = -1;
- let app: ComfyApp = undefined;
+ export let app: ComfyApp = undefined;
  let fileInput: HTMLInputElement = undefined;
 
- $: if (!app)
-     app = $uiState.app
-
  function queuePrompt() {
      app.queuePrompt(0, 1);
      notify("Prompt was queued", "Queued");
@@ -56,6 +55,9 @@
     <Link on:click={doLoad}>Load</Link>
     <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>
+{#if $interfaceState.showIndicator}
+    <Indicator value={$interfaceState.indicatorValue} />
+{/if}
 
 <style lang="scss">
  #comfy-file-input {

src/mobile/Indicator.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+ import interfaceState from "$lib/stores/interfaceState";
+
+ export let value: any = null;
+</script>
+
+<div style="position: relative; z-index: 10;">
+    <div class="indicator"
+         class:top={true}
+         class:bottom={false}
+         class:left={!$interfaceState.pointerNearLeft || !$interfaceState.pointerNearTop}
+         class:right={$interfaceState.pointerNearLeft && $interfaceState.pointerNearTop}>
+        <span>
+            {value}
+        </span>
+    </div>
+</div>
+
+<style lang="scss">
+ .indicator {
+     position: fixed;
+
+     align-content: left;
+     padding: 1rem;
+     font-size: xxx-large;
+     background: var(--neutral-300);
+     color: var(--neutral-800);
+     border-radius: 1rem;
+     border: 0.2rem solid var(--neutral-400);
+     z-index: var(--layer-top) !important;
+
+     &.top {
+         top: calc(1rem + var(--f7-navbar-height) + var(--f7-safe-area-top));
+     }
+     &.bottom {
+         bottom: 5rem
+     }
+     &.left {
+         left: 1rem;
+     }
+     &.right {
+         right: 1rem;
+     }
+ }
+</style>

src/mobile/routes/graph.svelte

@@ -6,13 +6,10 @@
  import { onMount } from 'svelte';
  import uiState from "$lib/stores/uiState"
 
- let app: ComfyApp | null = null;
+ export let app: ComfyApp | null = null;
  let lCanvas: ComfyGraphCanvas | null = null;
  let canvasEl: HTMLCanvasElement | null = null;
 
- $: if (!app)
-     app = $uiState.app
-
  function resizeCanvas() {
      canvasEl.width = canvasEl.parentElement.offsetWidth;
      canvasEl.height = canvasEl.parentElement.offsetHeight;
@@ -21,13 +18,10 @@
      lCanvas.draw(true, true);
  }
 
- $: if (app != null && canvasEl != null) {
+ $: if (app != null && app.lGraph && canvasEl != null) {
      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";
          app.lGraph.eventBus.on("afterExecute", () => lCanvas.draw(true))
      }
      resizeCanvas();
@@ -47,5 +41,10 @@
      width: 100%;
      height: 100%;
      background-color: #333;
+
+     > canvas {
+         // Don't try to scroll the page when scrolling on canvas
+         touch-action: none;
+     }
  }
 </style>

src/mobile/routes/home.svelte

@@ -14,22 +14,7 @@
  import queueState from "$lib/stores/queueState";
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 
- let app: ComfyApp | null = null;
-
- onMount(async () => {
-     if (app)
-         return
-
-     app = $uiState.app = new ComfyApp();
-
-     app.api.addEventListener("status", (ev: CustomEvent) => {
-         queueState.statusUpdated(ev.detail as ComfyAPIStatus);
-     });
-
-     await app.setup();
-     (window as any).app = app;
-
- });
+ export let app: ComfyApp | null = null;
 
 </script>
 
@@ -52,8 +37,4 @@
             <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

@@ -1,19 +1,8 @@
 <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 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 ComfyApp from "$lib/components/ComfyApp";
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 
+ export let app: ComfyApp;
 </script>
 
 <Page name="subworkflows">

src/mobile/routes/subworkflow.svelte

@@ -3,8 +3,10 @@
 
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
  import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
 
  export let subworkflowID: number = -1;
+ export let app: ComfyApp
 
 </script>