Mobile gallery

src/lib/components/ComfyApp.ts

@@ -368,7 +368,7 @@ export default class ComfyApp {
         }
     }
 
-    saveStateToLocalStorage() {
+    saveStateToLocalStorage(doNotify: boolean = true) {
         try {
             uiState.update(s => { s.forceSaveUserState = true; return s; })
             const state = get(workflowState)
@@ -380,10 +380,12 @@ export default class ComfyApp {
             for (const workflow of workflows)
                 workflow.isModified = false;
             workflowState.set(get(workflowState));
-            notify("Saved to local storage.")
+            if (doNotify)
+                notify("Saved to local storage.")
         }
         catch (err) {
-            notify(`Failed saving to local storage:\n${err}`, { type: "error" })
+            if (doNotify)
+                notify(`Failed saving to local storage:\n${err}`, { type: "error" })
         }
         finally {
             uiState.update(s => { s.forceSaveUserState = null; return s; })

src/lib/components/utils.ts

@@ -2,6 +2,9 @@ import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
 import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
 import { get } from "svelte/store";
+import { PhotoBrowser, f7 } from "framework7-svelte";
+import { ImageViewer } from "$lib/ImageViewer";
+import interfaceState from "$lib/stores/interfaceState";
 
 export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
     return layoutState.updateChildren(container, evt.detail.items)
@@ -45,3 +48,25 @@ function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate
 
     return get(layoutState).allItems[container.id].children;
 }
+
+let mobileLightbox = null;
+
+export function showMobileLightbox(images: any[], selectedImage: number, options: Partial<PhotoBrowser["params"]> = {}) {
+    if (!f7)
+        return
+
+    if (mobileLightbox) {
+        mobileLightbox.destroy();
+        mobileLightbox = null;
+    }
+
+    history.pushState({ type: "gallery" }, "");
+
+    mobileLightbox = f7.photoBrowser.create({
+        photos: images,
+        theme: get(interfaceState).isDarkMode ? "dark" : "light",
+        type: 'popup',
+        ...options
+    });
+    mobileLightbox.open(selectedImage)
+}