109 lines
2.9 KiB
Svelte
109 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { get } from "svelte/store";
|
|
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 { App, View, Toolbar, Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
|
|
|
|
import { f7, f7ready } from 'framework7-svelte';
|
|
|
|
import "framework7/css/bundle"
|
|
import "./scss/global.scss";
|
|
|
|
import GenToolbar from './mobile/GenToolbar.svelte'
|
|
|
|
import HomePage from './mobile/routes/home.svelte';
|
|
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';
|
|
|
|
function onBackKeyDown(e) {
|
|
if(f7.view.current.router.currentRoute.path == '/'){
|
|
// exitApp();
|
|
e.preventDefault();
|
|
} else {
|
|
f7.dialog.close()
|
|
f7.view.main.router.back()
|
|
return false;
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
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
|
|
*/
|
|
|
|
let f7params = {
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
component: HomePage,
|
|
},
|
|
{
|
|
path: '/about/',
|
|
component: AboutPage,
|
|
},
|
|
{
|
|
path: '/login/',
|
|
component: LoginPage,
|
|
},
|
|
{
|
|
path: '/graph/',
|
|
component: GraphPage,
|
|
},
|
|
{
|
|
path: '/subworkflows/',
|
|
component: ListSubWorkflowsPage,
|
|
},
|
|
{
|
|
path: '/subworkflows/:subworkflowID/',
|
|
component: SubWorkflowPage,
|
|
},
|
|
],
|
|
popup: {
|
|
closeOnEscape: true,
|
|
},
|
|
sheet: {
|
|
closeOnEscape: true,
|
|
},
|
|
popover: {
|
|
closeOnEscape: true,
|
|
},
|
|
actions: {
|
|
closeOnEscape: true,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
{#if app}
|
|
<App theme="auto" name="ComfyBox" {...f7params}>
|
|
<View
|
|
url="/"
|
|
main={true}
|
|
class="safe-areas"
|
|
masterDetailBreakpoint={768},
|
|
browserHistory=true,
|
|
browserHistoryRoot="/mobile/"
|
|
>
|
|
<GenToolbar/>
|
|
</View>
|
|
</App>
|
|
{/if}
|