diff --git a/package.json b/package.json index 670e59f..a258134 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "prettier-plugin-svelte": "^2.10.0", "rollup-plugin-visualizer": "^5.9.0", "sass": "^1.61.0", - "svelte": "^3.58.0", + "svelte": "^3.59.0", "svelte-check": "^3.2.0", "svelte-dnd-action": "^0.9.22", "typescript": "^5.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f8345e..b3a1120 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,7 +27,7 @@ importers: version: 6.11.0 '@dogagenc/svelte-markdown': specifier: ^0.2.4 - version: 0.2.4(svelte@3.58.0) + version: 0.2.4(svelte@3.59.1) '@gradio/accordion': specifier: workspace:* version: link:gradio/js/accordion @@ -93,7 +93,7 @@ importers: version: link:litegraph/packages/tsconfig '@sveltejs/vite-plugin-svelte': specifier: ^2.1.1 - version: 2.1.1(svelte@3.58.0)(vite@4.3.8) + version: 2.1.1(svelte@3.59.1)(vite@4.3.8) '@tsconfig/svelte': specifier: ^4.0.1 version: 4.0.1 @@ -156,13 +156,13 @@ importers: version: 1.5.2 svelte-preprocess: specifier: ^5.0.3 - version: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3) + version: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3) svelte-select: specifier: ^5.5.3 version: 5.5.3 svelte-splitpanes: specifier: ^0.7.13 - version: 0.7.13(svelte@3.58.0) + version: 0.7.13(svelte@3.59.1) svelte-tiny-virtual-list: specifier: ^2.0.5 version: 2.0.5 @@ -190,7 +190,7 @@ importers: version: 1.2.8 '@zerodevx/svelte-toast': specifier: ^0.9.3 - version: 0.9.3(svelte@3.58.0) + version: 0.9.3(svelte@3.59.1) eslint: specifier: ^8.37.0 version: 8.37.0 @@ -199,7 +199,7 @@ importers: version: 8.8.0(eslint@8.37.0) eslint-plugin-svelte3: specifier: ^4.0.0 - version: 4.0.0(eslint@8.37.0)(svelte@3.58.0) + version: 4.0.0(eslint@8.37.0)(svelte@3.59.1) happy-dom: specifier: ^9.18.3 version: 9.18.3 @@ -211,7 +211,7 @@ importers: version: 2.8.7 prettier-plugin-svelte: specifier: ^2.10.0 - version: 2.10.0(prettier@2.8.7)(svelte@3.58.0) + version: 2.10.0(prettier@2.8.7)(svelte@3.59.1) rollup-plugin-visualizer: specifier: ^5.9.0 version: 5.9.0 @@ -219,14 +219,14 @@ importers: specifier: ^1.61.0 version: 1.61.0 svelte: - specifier: ^3.58.0 - version: 3.58.0 + specifier: ^3.59.0 + version: 3.59.1 svelte-check: specifier: ^3.2.0 - version: 3.2.0(sass@1.61.0)(svelte@3.58.0) + version: 3.2.0(sass@1.61.0)(svelte@3.59.1) svelte-dnd-action: specifier: ^0.9.22 - version: 0.9.22(svelte@3.58.0) + version: 0.9.22(svelte@3.59.1) typescript: specifier: ^5.0.3 version: 5.0.3 @@ -1363,6 +1363,7 @@ packages: '@codemirror/language': ^6.0.0 '@codemirror/state': ^6.0.0 '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 dependencies: '@codemirror/language': 6.6.0 '@codemirror/state': 6.2.0 @@ -1506,14 +1507,14 @@ packages: w3c-keyname: 2.2.6 dev: false - /@dogagenc/svelte-markdown@0.2.4(svelte@3.58.0): + /@dogagenc/svelte-markdown@0.2.4(svelte@3.59.1): resolution: {integrity: sha512-UmmHHZ7rilAbBYiNsxuL5d8Ac79EhFXrhjsUNr30BPzn+T7ohJR8kHMFjDYDQc0tOQOfKbICvkPAQ6cprqS3Eg==} peerDependencies: svelte: ^3.0.0 dependencies: '@types/marked': 4.3.1 marked: 4.3.0 - svelte: 3.58.0 + svelte: 3.59.1 dev: false /@esbuild/android-arm64@0.17.18: @@ -2275,7 +2276,7 @@ packages: - supports-color dev: true - /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.8): + /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.59.1)(vite@4.3.8): resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==} engines: {node: ^14.18.0 || >= 16} peerDependencies: @@ -2286,8 +2287,8 @@ packages: deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.0 - svelte: 3.58.0 - svelte-hmr: 0.15.1(svelte@3.58.0) + svelte: 3.59.1 + svelte-hmr: 0.15.1(svelte@3.59.1) vite: 4.3.8(sass@1.61.0) vitefu: 0.2.4(vite@4.3.8) transitivePeerDependencies: @@ -2604,12 +2605,12 @@ packages: pretty-format: 27.5.1 dev: false - /@zerodevx/svelte-toast@0.9.3(svelte@3.58.0): + /@zerodevx/svelte-toast@0.9.3(svelte@3.59.1): resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==} peerDependencies: svelte: ^3.57.0 dependencies: - svelte: 3.58.0 + svelte: 3.59.1 dev: true /abab@2.0.6: @@ -3117,6 +3118,8 @@ packages: '@codemirror/search': 6.4.0 '@codemirror/state': 6.2.0 '@codemirror/view': 6.11.0 + transitivePeerDependencies: + - '@lezer/common' dev: false /codemirror@6.0.1(@lezer/common@1.0.2): @@ -3941,14 +3944,14 @@ packages: - typescript dev: true - /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.58.0): + /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.59.1): resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} peerDependencies: eslint: '>=8.0.0' svelte: ^3.2.0 dependencies: eslint: 8.37.0 - svelte: 3.58.0 + svelte: 3.59.1 dev: true /eslint-scope@5.1.1: @@ -5988,14 +5991,14 @@ packages: engines: {node: '>= 0.8.0'} dev: true - /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.58.0): + /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.59.1): resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==} peerDependencies: prettier: ^1.16.4 || ^2.0.0 svelte: ^3.2.0 dependencies: prettier: 2.8.7 - svelte: 3.58.0 + svelte: 3.59.1 dev: true /prettier@2.8.7: @@ -6656,7 +6659,7 @@ packages: - sugarss dev: true - /svelte-check@3.2.0(sass@1.61.0)(svelte@3.58.0): + /svelte-check@3.2.0(sass@1.61.0)(svelte@3.59.1): resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==} hasBin: true peerDependencies: @@ -6668,8 +6671,8 @@ packages: import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 - svelte: 3.58.0 - svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3) + svelte: 3.59.1 + svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3) typescript: 5.0.3 transitivePeerDependencies: - '@babel/core' @@ -6683,18 +6686,18 @@ packages: - sugarss dev: true - /svelte-dnd-action@0.9.22(svelte@3.58.0): + /svelte-dnd-action@0.9.22(svelte@3.59.1): resolution: {integrity: sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==} peerDependencies: svelte: '>=3.23.0' dependencies: - svelte: 3.58.0 + svelte: 3.59.1 dev: true /svelte-feather-icons@4.0.0: resolution: {integrity: sha512-4ieUsjp+VYa1r6y80jDt9zRiRUZyJNbESpRdHdJJhiBubyuXX96A7f1UZSK4olxzP6Qsg5ZAuyZlnmvD+/swAA==} dependencies: - svelte: 3.58.0 + svelte: 3.59.1 dev: false /svelte-floating-ui@1.2.8: @@ -6718,6 +6721,16 @@ packages: svelte: '>=3.19.0' dependencies: svelte: 3.58.0 + dev: true + + /svelte-hmr@0.15.1(svelte@3.59.1): + resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==} + engines: {node: ^12.20 || ^14.13.1 || >= 16} + peerDependencies: + svelte: '>=3.19.0' + dependencies: + svelte: 3.59.1 + dev: false /svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4): resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==} @@ -6825,7 +6838,7 @@ packages: typescript: 5.0.3 dev: true - /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3): + /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3): resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==} engines: {node: '>= 14.10.0'} requiresBuild: true @@ -6869,7 +6882,7 @@ packages: sass: 1.61.0 sorcery: 0.11.0 strip-indent: 3.0.0 - svelte: 3.58.0 + svelte: 3.59.1 typescript: 5.0.3 /svelte-range-slider-pips@2.0.1: @@ -6883,13 +6896,13 @@ packages: svelte-floating-ui: 1.2.8 dev: false - /svelte-splitpanes@0.7.13(svelte@3.58.0): + /svelte-splitpanes@0.7.13(svelte@3.59.1): resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==} peerDependencies: svelte: ^3.54.0 dependencies: esm-env-robust: 0.0.3 - svelte: 3.58.0 + svelte: 3.59.1 dev: false /svelte-tiny-virtual-list@2.0.5: @@ -6912,6 +6925,10 @@ packages: resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==} engines: {node: '>= 8'} + /svelte@3.59.1: + resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==} + engines: {node: '>= 8'} + /swiper@9.2.4: resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==} engines: {node: '>= 4.7.0'} diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte index a120c51..85de615 100644 --- a/src/AppMobile.svelte +++ b/src/AppMobile.svelte @@ -2,7 +2,7 @@ import { onMount } from "svelte"; import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp"; - import { App, View } from "framework7-svelte" + import { App, View, Preloader } from "framework7-svelte" import { f7, f7ready } from 'framework7-svelte'; @@ -15,8 +15,7 @@ import AboutPage from './mobile/routes/about.svelte'; import LoginPage from './mobile/routes/login.svelte'; import GraphPage from './mobile/routes/graph.svelte'; - import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte'; - import SubWorkflowPage from './mobile/routes/subworkflow.svelte'; + import WorkflowPage from './mobile/routes/workflow.svelte'; import type { Framework7Parameters, Modal } from "framework7/types"; export let app: ComfyApp; @@ -51,18 +50,35 @@ } } + let appSetupPromise: Promise = null; + let loading = true; + let lastSize = Number.POSITIVE_INFINITY; + onMount(async () => { - await app.setup(); + appSetupPromise = app.setup().then(() => { + loading = false + }); window.addEventListener("backbutton", onBackKeyDown, false); window.addEventListener("popstate", onBackKeyDown, false); - }); - /* - Now we need to map components to routes. - We need to pass them along with the F7 app parameters to component - */ + // Blur any input elements when the virtual keyboard closes + // Otherwise tapping on other input events can refocus the input from way + // off the screen + window.visualViewport.addEventListener("resize", function(e) { + if (e.target.height > lastSize) { + // Assume keyboard was hidden + (document.activeElement as HTMLElement)?.blur(); + } + lastSize = e.target.height + }) + }) - let f7params: Framework7Parameters = { + /* + Now we need to map components to routes. + We need to pass them along with the F7 app parameters to component + */ + + let f7params: Framework7Parameters = { routes: [ { path: '/', @@ -79,23 +95,16 @@ path: '/login/', component: LoginPage, }, + // { + // path: '/graph/', + // component: GraphPage, + // options: { + // props: { app } + // } + // }, { - path: '/graph/', - component: GraphPage, - options: { - props: { app } - } - }, - { - path: '/subworkflows/', - component: ListSubWorkflowsPage, - options: { - props: { app } - } - }, - { - path: '/subworkflows/:subworkflowID/', - component: SubWorkflowPage, + path: '/workflows/:workflowID/', + component: WorkflowPage, options: { props: { app } } @@ -113,23 +122,72 @@ actions: { closeOnEscape: true, }, + touch: { + tapHold: true + } } -{#if app} - - - - - - -{/if} + + {#if appSetupPromise} + {#await appSetupPromise} +
+
+ +
+
+ {:then} + + + + {:catch error} +
+
+ Error loading app +
+
{error}
+ {#if error != null && error.stack} + {@const lines = error.stack.split("\n")} + {#each lines as line} +
{line}
+ {/each} + {/if} +
+ {/await} + {/if} + + + + diff --git a/src/lib/components/f7/progressbar.svelte b/src/lib/components/f7/progressbar.svelte new file mode 100644 index 0000000..367f7ef --- /dev/null +++ b/src/lib/components/f7/progressbar.svelte @@ -0,0 +1,58 @@ + + + + + + diff --git a/src/lib/nodes/widgets/ComfyMarkdownNode.ts b/src/lib/nodes/widgets/ComfyMarkdownNode.ts index 8d41bf5..27de2f0 100644 --- a/src/lib/nodes/widgets/ComfyMarkdownNode.ts +++ b/src/lib/nodes/widgets/ComfyMarkdownNode.ts @@ -42,6 +42,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode { }, { multiline: true, + inputStyle: { fontFamily: "monospace" } } ) diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte index ef04d9a..672f926 100644 --- a/src/lib/widgets/ComboWidget.svelte +++ b/src/lib/widgets/ComboWidget.svelte @@ -8,7 +8,7 @@ import { type WidgetLayout } from "$lib/stores/layoutStates"; import { get, writable, type Writable } from "svelte/store"; import { isDisabled } from "./utils" - import { getSafetensorsMetadata } from '$lib/utils'; + import { getSafetensorsMetadata } from '$lib/utils'; export let widget: WidgetLayout | null = null; export let isMobile: boolean = false; let node: ComfyComboNode | null = null; @@ -74,26 +74,10 @@ } } - function onSelect(e: CustomEvent) { - if (input) - input.blur(); - navigator.vibrate(20) - - const item = e.detail - - console.debug("[ComboWidget] SELECT", item, item.index) - $nodeValue = item.value; - activeIndex = item.index; - listOpen = false; - } - let activeIndex = null; let hoverItemIndex = null; let filterText = ""; let listOpen = null; - let scrollToIndex = null; - let start = 0; - let end = 0; function handleHover(index: number) { // console.warn("HOV", index) @@ -108,7 +92,9 @@ $nodeValue = item.value listOpen = false; filterText = "" - input?.blur() + setTimeout(() => { + input?.blur(); + }, 100) } function onFilter() { @@ -174,7 +160,10 @@ on:select={(e) => handleSelect(e.detail.index)} on:blur on:filter={onFilter}> -
+
{#if filteredItems.length > 0} {@const itemSize = isMobile ? 50 : 25} {@const itemsToShow = isMobile ? 10 : 30} @@ -292,9 +281,14 @@ .comfy-select-list { --maxLabelWidth: 100; + --maxListWidth: 50vw; + &.mobile { + --maxListWidth: 80vw; + } + font-size: 14px; - width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw); color: var(--item-color); + width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth)); > :global(.virtual-list-wrapper) { box-shadow: var(--block-shadow); diff --git a/src/lib/widgets/MarkdownWidget.svelte b/src/lib/widgets/MarkdownWidget.svelte index f99524b..a42acaa 100644 --- a/src/lib/widgets/MarkdownWidget.svelte +++ b/src/lib/widgets/MarkdownWidget.svelte @@ -5,7 +5,7 @@ import type { ComfyMarkdownNode } from "$lib/nodes/widgets"; import SvelteMarkdown from "@dogagenc/svelte-markdown" import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte" - import { SvelteComponentDev } from "svelte/internal"; + import { SvelteComponentDev } from "svelte/internal"; export let widget: WidgetLayout | null = null; export let isMobile: boolean = false; @@ -69,7 +69,7 @@ } /* headings - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose h1, .prose h2, @@ -107,7 +107,7 @@ } /* lists - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose ul { list-style: circle inside; } @@ -136,7 +136,7 @@ } /* code - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose code { border: 1px solid var(--border-color-primary); border-radius: var(--radius-sm); @@ -153,7 +153,7 @@ } /* tables - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose th, .prose td { border-bottom: 1px solid #e1e1e1; @@ -170,7 +170,7 @@ } /* spacing - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose button, .prose .button { margin-bottom: var(--spacing-sm); @@ -194,7 +194,7 @@ } /* links - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose a { color: var(--link-text-color); text-decoration: underline; @@ -212,7 +212,7 @@ } /* misc - –––––––––––––––––––––––––––––––––––––––––––––––––– */ + –––––––––––––––––––––––––––––––––––––––––––––––––– */ .prose hr { margin-top: 3em; diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte index 22063c3..ded4825 100644 --- a/src/mobile/GenToolbar.svelte +++ b/src/mobile/GenToolbar.svelte @@ -6,6 +6,7 @@ import { Link, Toolbar } from "framework7-svelte" import ProgressBar from "$lib/components/ProgressBar.svelte"; + import Progressbar from "$lib/components/f7/progressbar.svelte"; import Indicator from "./Indicator.svelte"; import interfaceState from "$lib/stores/interfaceState"; import type { WritableLayoutStateStore } from "$lib/stores/layoutStates"; @@ -53,29 +54,50 @@ navigator.vibrate(20) app.saveStateToLocalStorage(); } + + let queued: false; + $: queued = Boolean($queueState.runningNodeID || $queueState.progress) + + let running = false; + $: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0; + + let progress; + $: progress = $queueState.progress + + let progressPercent = 0 + let progressText = "" + $: if (progress) { + progressPercent = (progress.value / progress.max) * 100; + progressText = progressPercent.toFixed(1) + "%"; + } else { + progressPercent = 0 + progressText = "??.?%" + } +
- {#if $queueState.runningNodeID || $queueState.progress} -
- Node: {getNodeInfo($queueState.runningNodeID)} -
-
- -
- {/if} - {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0} -
-
- Queued prompts: {$queueState.queueRemaining}. +
+ {#if queued} +
+ Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})
-
- {/if} + {/if} +
+
+ {#if queued} + {#if progress} + + {:else if running} + + {/if} + {/if} +
{#if workflow != null && workflow.attrs.queuePromptButtonName != ""} - {workflow.attrs.queuePromptButtonName} + {workflow.attrs.queuePromptButtonName} {/if} 🔄 @@ -94,19 +116,26 @@ } .bottom { - display: flex; - flex-direction: row; position: absolute; text-align: center; width: 100%; - height: 2rem; - bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom)); + font-size: 13pt; + bottom: calc(var(--f7-toolbar-height)); z-index: var(--layer-top); - background-color: grey; + } + + .bars { + display: flex; + flex-direction: row; + + .bars { + display: flex; + flex-direction: row; + } .node-name { flex-grow: 1; - background-color: var(--color-red-300); + background-color: var(--secondary-300); padding: 0.2em; display: flex; justify-content: center; diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte index 71c64d8..ec7fe31 100644 --- a/src/mobile/routes/home.svelte +++ b/src/mobile/routes/home.svelte @@ -1,34 +1,44 @@ - Yo - -
{app} Nodes
- - - - - - - - - - + {#if $workflowState.openedWorkflows} + + {#each $workflowState.openedWorkflows as workflow} + + +
onClickDelete(workflow, e)}> + +
+ + + {/each} + + {:else} + (No workflows opened.) + {/if} diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/workflow.svelte similarity index 50% rename from src/mobile/routes/subworkflow.svelte rename to src/mobile/routes/workflow.svelte index a302ada..908839c 100644 --- a/src/mobile/routes/subworkflow.svelte +++ b/src/mobile/routes/workflow.svelte @@ -4,25 +4,38 @@ import type ComfyApp from "$lib/components/ComfyApp"; import { writable, type Writable } from "svelte/store"; import type { WritableLayoutStateStore } from "$lib/stores/layoutStates"; - import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState"; + import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState"; - export let subworkflowID: number = -1; + export let workflowID: WorkflowInstID; export let app: ComfyApp - // TODO move - let workflow: ComfyBoxWorkflow | null = null - let layoutState: WritableLayoutStateStore | null = null; + let workflow: ComfyBoxWorkflow; + let root: IDragItem | null; + let title = "" - $: workflow = $workflowState.activeWorkflow; - $: layoutState = workflow ? workflow.layout : null; + $: workflow = workflowState.getWorkflow(workflowID); + $: layoutState = workflow?.layout; + $: title = workflow?.attrs?.title || `Workflow: ${workflowID}`; + + $: if (layoutState && $layoutState.root) { + root = $layoutState.root + } else { + root = null; + } - - + + - {#if layoutState} -
- + {#if workflow} + {#if root} +
+ +
+ {/if} + {:else} +
+ Workflow not found.
{/if}