81 lines
2.6 KiB
Svelte
81 lines
2.6 KiB
Svelte
<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 widgetState from "$lib/stores/widgetState";
|
|
import nodeState from "$lib/stores/nodeState";
|
|
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 { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
|
|
import { getComponentForWidgetState } from "$lib/utils"
|
|
import { f7 } from "framework7-svelte"
|
|
|
|
export let subworkflowID: number = -1;
|
|
let app: ComfyApp = undefined;
|
|
|
|
$: if (ComfyApp.instance)
|
|
app = ComfyApp.instance;
|
|
|
|
|
|
function queuePrompt() {
|
|
app.queuePrompt(0, 1);
|
|
showNotification();
|
|
}
|
|
|
|
let notification;
|
|
const showNotification = () => {
|
|
if (!notification) {
|
|
notification = f7.notification.create({
|
|
title: 'Queued',
|
|
titleRightText: 'now',
|
|
// subtitle: 'Notification with close on click',
|
|
text: 'Prompt was queued',
|
|
closeOnClick: true,
|
|
closeTimeout: 3000,
|
|
});
|
|
}
|
|
// Open it
|
|
notification.open();
|
|
}
|
|
</script>
|
|
|
|
<Page name="subworkflow">
|
|
<Navbar title="Workflow {subworkflowID}" backLink="Back" />
|
|
<Toolbar bottom>
|
|
<Link on:click={queuePrompt}>Queue Prompt</Link>
|
|
</Toolbar>
|
|
|
|
{#each Object.entries($widgetState) as [id, ws]}
|
|
{@const node = app.lGraph.getNodeById(id)}
|
|
<div class:is-executing={$queueState.runningNodeId === node.id}>
|
|
<Block>
|
|
<label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
|
|
<BlockTitle>
|
|
{node.title}
|
|
</BlockTitle>
|
|
</label>
|
|
{#each $widgetState[id] as item}
|
|
<svelte:component this={getComponentForWidgetState(item)} {item} />
|
|
{/each}
|
|
{#if $uiState.unlocked}
|
|
<div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
|
|
{/if}
|
|
</Block>
|
|
</div>
|
|
{/each}
|
|
</Page>
|
|
|
|
<style>
|
|
.is-executing {
|
|
border: 5px dashed var(--color-green-600) !important;
|
|
}
|
|
</style>
|