137 lines
3.6 KiB
Svelte
137 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
|
|
|
import { App, View } 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';
|
|
import type { Framework7Parameters, Modal } from "framework7/types";
|
|
|
|
export let app: ComfyApp;
|
|
|
|
function onBackKeyDown(e) {
|
|
if(f7.view.current.router.currentRoute.path == '/'){
|
|
// exitApp();
|
|
e.preventDefault();
|
|
} else {
|
|
const $ = f7.$
|
|
const modalIn = $('.modal-in');
|
|
if (modalIn.length && "f7Modal" in modalIn[0]) {
|
|
(modalIn[0].f7Modal as Modal.Modal).close(true);
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
if ($('.panel-active').length) {
|
|
f7.panel.close();
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
const photoBrowserClose = $('.photo-browser-page a.link.popup-close')
|
|
if (photoBrowserClose.length > 0) {
|
|
(photoBrowserClose[0] as HTMLElement).click();
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
f7.dialog.close()
|
|
f7.view.main.router.back()
|
|
return false;
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
await app.setup();
|
|
(window as any).app = app;
|
|
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: Framework7Parameters = {
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
component: HomePage,
|
|
options: {
|
|
props: { app }
|
|
}
|
|
},
|
|
{
|
|
path: '/about/',
|
|
component: AboutPage,
|
|
},
|
|
{
|
|
path: '/login/',
|
|
component: LoginPage,
|
|
},
|
|
{
|
|
path: '/graph/',
|
|
component: GraphPage,
|
|
options: {
|
|
props: { app }
|
|
}
|
|
},
|
|
{
|
|
path: '/subworkflows/',
|
|
component: ListSubWorkflowsPage,
|
|
options: {
|
|
props: { app }
|
|
}
|
|
},
|
|
{
|
|
path: '/subworkflows/:subworkflowID/',
|
|
component: SubWorkflowPage,
|
|
options: {
|
|
props: { app }
|
|
}
|
|
},
|
|
],
|
|
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 {app} />
|
|
</View>
|
|
</App>
|
|
<div class="canvas-wrapper pane-wrapper" style="display: none">
|
|
<canvas id="graph-canvas" />
|
|
</div>
|
|
{/if}
|