Progressbar on mobile improvement

2023-05-31 14:28:56 -05:00
parent c537cb71bf
commit 5474687041
10 changed files with 333 additions and 153 deletions
--- 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<void> = 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 <App> 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 <App> 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
+     }
 }
 </script>

-{#if app}
-    <App theme="auto" name="ComfyBox" {...f7params}>
-        <View
-            url="/"
-            main={true}
-            class="safe-areas"
-            masterDetailBreakpoint={768},
-            browserHistory=true,
-            browserHistoryRoot="/mobile/"
-        >
-            <GenToolbar {app} />
-        </View>
-    </App>
-    <div class="canvas-wrapper pane-wrapper" style="display: none">
-        <canvas id="graph-canvas" />
-    </div>
-{/if}
+<App theme="auto" name="ComfyBox" {...f7params}>
+    {#if appSetupPromise}
+        {#await appSetupPromise}
+            <div class="comfy-app-loading">
+                <div>
+                    <Preloader color="blue" size={100} />
+                </div>
+            </div>
+        {:then}
+            <View
+                url="/"
+                main={true}
+                class="safe-areas"
+                masterDetailBreakpoint={768},
+                browserHistory=true,
+                browserHistoryRoot="/mobile/"
+            >
+                <GenToolbar {app} />
+            </View>
+        {:catch error}
+            <div class="comfy-loading-error">
+                <div>
+                    Error loading app
+                </div>
+                <div>{error}</div>
+                {#if error != null && error.stack}
+                    {@const lines = error.stack.split("\n")}
+                    {#each lines as line}
+                        <div style:font-size="16px">{line}</div>
+                    {/each}
+                {/if}
+            </div>
+        {/await}
+    {/if}
+</App>
+<div class="canvas-wrapper pane-wrapper" style="display: none">
+    <canvas id="graph-canvas" />
+</div>
+
+<style lang="scss">
+ .comfy-app-loading, .comfy-loading-error {
+     font-size: 40px;
+     color: var(--body-text-color);
+     justify-content: center;
+     margin: auto;
+     width: 100%;
+     height: 100%;
+     text-align: center;
+     flex-direction: column;
+     display: flex;
+     position: absolute;
+     z-index: 100000000;
+     pointer-events: none;
+     user-select: none;
+     top: 0px;
+ }
+
+ .comfy-app-loading > span {
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+ }
+</style>
--- a/src/lib/components/f7/progressbar.svelte
+++ b/src/lib/components/f7/progressbar.svelte
@@ -0,0 +1,58 @@
+<!--
+Fix a framework7 issue
+https://github.com/framework7io/framework7/issues/4183
+-->
+<script>
+ let className = undefined;
+ export { className as class };
+
+ export let progress = 0;
+ export let infinite = false;
+
+ function colorClasses(props) {
+     const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
+
+     return {
+         dark,
+         [`color-${color}`]: color,
+         [`text-color-${textColor}`]: textColor,
+         [`bg-color-${bgColor}`]: bgColor,
+         [`border-color-${borderColor}`]: borderColor,
+         [`ripple-color-${rippleColor}`]: rippleColor,
+     };
+ }
+
+ function classNames(...args) {
+     const classes = [];
+     args.forEach((arg) => {
+         if (typeof arg === 'object' && arg.constructor === Object) {
+             Object.keys(arg).forEach((key) => {
+                 if (arg[key]) classes.push(key);
+             });
+         } else if (arg) classes.push(arg);
+     });
+     const uniqueClasses = [];
+     classes.forEach((c) => {
+         if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
+     });
+     return uniqueClasses.join(' ');
+ }
+
+ let classes
+ $: classes = classNames(
+     className,
+     'progressbar',
+     {
+         'progressbar-infinite': infinite,
+     },
+     colorClasses($$props),
+ );
+
+ let transformStyle = ""
+ $: transformStyle = progress ? `translate3d(${-100 + progress}%, 0, 0)` : '';
+</script>
+
+<span class={classes}
+      data-progress={progress} >
+    <span style:transform={transformStyle} />
+</span>
--- a/src/lib/nodes/widgets/ComfyMarkdownNode.ts
+++ b/src/lib/nodes/widgets/ComfyMarkdownNode.ts
@@ -42,6 +42,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
            },
            {
                multiline: true,
+
                inputStyle: { fontFamily: "monospace" }
            }
        )
--- 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<any>) {
-     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}>
-            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
+            <div class="comfy-select-list" slot="list"
+                 class:mobile={isMobile}
+                 let:filteredItems
+                 style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                {#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);
--- 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;
--- 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 = "??.?%"
+ }
+
 </script>

 <div class="bottom">
-    {#if $queueState.runningNodeID || $queueState.progress}
-        <div class="node-name">
-            <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
-        </div>
-        <div class="progress-bar">
-            <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
-        </div>
-    {/if}
-    {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
-        <div class="queue-remaining in-progress">
-            <div>
-                Queued prompts: {$queueState.queueRemaining}.
+    <div class="bars">
+        {#if queued}
+            <div class="node-name">
+                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
            </div>
-        </div>
-    {/if}
+        {/if}
+    </div>
+    <div class="wrapper">
+        {#if queued}
+            {#if progress}
+                <Progressbar color="blue" progress={progressPercent} />
+            {:else if running}
+                <Progressbar color="blue" infinite />
+            {/if}
+        {/if}
+    </div>
 </div>
 <Toolbar bottom>
    {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
        <Link on:click={queuePrompt}>
-            {workflow.attrs.queuePromptButtonName}
+        {workflow.attrs.queuePromptButtonName}
        </Link>
    {/if}
    <Link on:click={refreshCombos}>🔄</Link>
@@ -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;
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -1,34 +1,44 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import { f7 } from 'framework7-svelte';
+ import { XCircle } from 'svelte-bootstrap-icons';

 import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"

 export let app: ComfyApp | null = null;

 async function doLoadDefault() {
-     var confirmed = confirm("Would you like to load the default workflow in a new tab?");
-     if (confirmed) {
+     f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
         await app.initDefaultWorkflow();
-     }
+     })
 }
+
+ function onClickDelete(workflow: ComfyBoxWorkflow, e: Event) {
+     e.preventDefault();
+     e.stopImmediatePropagation();
+     f7.dialog.confirm("Are you sure you want to delete this workflow?", workflow.attrs.title || `Workflow: ${workflow.id}`,
+                       () => { app.closeWorkflow(workflow.id); })}
 </script>

 <Page name="home">
    <Navbar title="Home Page" />

-    <BlockTitle>Yo</BlockTitle>
-    <Block>
-        <div>{app} Nodes</div>
-    </Block>
-
-    <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/subworkflows/" title="Workflows">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-        <ListItem link="/graph/" title="Show Node Graph">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-    </List>
+    {#if $workflowState.openedWorkflows}
+        <List strong inset dividersIos class="components-list searchbar-found">
+            {#each $workflowState.openedWorkflows as workflow}
+                <ListItem link="/workflows/{workflow.id}/" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
+                    <svelte:fragment slot="media">
+                        <div on:pointerdown={(e) => onClickDelete(workflow, e)}>
+                            <XCircle width="1.5em" height="1.5em" />
+                        </div>
+                    </svelte:fragment>
+                </ListItem>
+            {/each}
+        </List>
+    {:else}
+        (No workflows opened.)
+    {/if}
    <Block strong outlineIos>
        <Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
    </Block>
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.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;
+ }
 </script>

-<Page name="subworkflow">
-    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
+<Page name="workflow">
+    <Navbar title="{title}" backLink="Back" />

-    {#if layoutState}
-        <div class="container">
-            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
+    {#if workflow}
+        {#if root}
+            <div class="container">
+                <WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
+            </div>
+        {/if}
+    {:else}
+        <div>
+            Workflow not found.
        </div>
    {/if}
 </Page>