Improve mobile app initialization and range widget corner indicator

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>