Updates for mobile

src/mobile/routes/graph.svelte

@@ -7,7 +7,7 @@
  import uiState from "$lib/stores/uiState"
 
  let app: ComfyApp | null = null;
- let lCanvas: LGraphCanvas | null = null;
+ let lCanvas: ComfyGraphCanvas | null = null;
  let canvasEl: HTMLCanvasElement | null = null;
 
  $: if (!app)
@@ -21,13 +21,14 @@
      lCanvas.draw(true, true);
  }
 
- $: if (app && canvasEl) {
+ $: if (app != null && 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();
  }

src/mobile/routes/subworkflow.svelte

@@ -1,26 +1,22 @@
 <script lang="ts">
- import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
- import uiState from "$lib/stores/uiState";
+ import layoutState, { type IDragItem } from "$lib/stores/layoutState";
 
- import queueState from "$lib/stores/queueState";
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
 
  export let subworkflowID: number = -1;
- let app: ComfyApp = undefined;
-
- $: if (!app)
-     app = $uiState.app
 
 </script>
 
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
 
-    <div>Workflow!</div>
+    <WidgetContainer bind:dragItem={$layoutState.root} classes={["root-container", "mobile"]} />
 </Page>
 
-<style>
- .is-executing {
-     border: 5px dashed var(--color-green-600) !important;
+<style lang="scss">
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
  }
 </style>