Huge refactoring for multiple workflows

src/mobile/GenToolbar.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
-	import notify from "$lib/notify";
- import uiState from "$lib/stores/uiState";
- import layoutState from "$lib/stores/layoutState";
  import queueState from "$lib/stores/queueState";
+ import workflowState from "$lib/stores/workflowState";
  import { getNodeInfo } from "$lib/utils"
 
  import { Link, Toolbar } from "framework7-svelte"
  import ProgressBar from "$lib/components/ProgressBar.svelte";
 	import Indicator from "./Indicator.svelte";
 	import interfaceState from "$lib/stores/interfaceState";
-	import LightboxModal from "$lib/components/LightboxModal.svelte";
+	import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
 
  export let subworkflowID: number = -1;
  export let app: ComfyApp = undefined;
+ let layoutState: WritableLayoutStateStore = null;
  let fileInput: HTMLInputElement = undefined;
 
+ $: layoutState = $workflowState.activeWorkflow?.layout;
+
  function queuePrompt() {
      navigator.vibrate(20)
      app.runDefaultQueueAction()

src/mobile/routes/graph.svelte

@@ -18,21 +18,22 @@
      lCanvas.draw(true, true);
  }
 
- $: if (app?.activeGraph != null && canvasEl != null) {
-     if (!lCanvas) {
-         lCanvas = new ComfyGraphCanvas(app, app.activeGraph, canvasEl);
-         lCanvas.allow_interaction = false;
-         app.activeGraph.eventBus.on("afterExecute", () => lCanvas.draw(true))
-     }
-     resizeCanvas();
- }
+ // TODO
+ // $: if (app?.activeGraph != null && canvasEl != null) {
+ //     if (!lCanvas) {
+ //         lCanvas = new ComfyGraphCanvas(app, app.activeGraph, canvasEl);
+ //         lCanvas.allow_interaction = false;
+ //         app.activeGraph.eventBus.on("afterExecute", () => lCanvas.draw(true))
+ //     }
+ //     resizeCanvas();
+ // }
 
 </script>
 
 <Page>
   <Navbar title="Node Graph" backLink="Back" />
   <div class="canvas-wrapper pane-wrapper">
-      <canvas bind:this={canvasEl} id="extra-canvas" />
+      <!-- <canvas bind:this={canvasEl} id="extra-canvas" /> -->
   </div>
 </Page>
 

src/mobile/routes/subworkflow.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
- import layoutState, { type IDragItem } from "$lib/stores/layoutState";
-
  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";
+ import type { ComfyWorkflow } from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
 
  export let subworkflowID: number = -1;
  export let app: ComfyApp
 
+ // TODO move
+ let workflow: ComfyWorkflow | null = null
+ let layoutState: WritableLayoutStateStore | null = null;
+
+ $: layoutState = workflow ? workflow.layout : null;
 </script>
 
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
 
-    <div class="container">
-        <WidgetContainer bind:dragItem={$layoutState.root} isMobile={true} classes={["root-container", "mobile"]} />
-    </div>
+    {#if layoutState}
+        <div class="container">
+            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
+        </div>
+    {/if}
 </Page>
 
 <style lang="scss">