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)
+}

src/lib/notify.ts

@@ -18,6 +18,7 @@ function notifyf7(text: string, options: NotifyOptions) {
     if (!f7)
         return;
 
+    console.error(options)
     let closeTimeout = options.timeout
     if (closeTimeout === undefined)
         closeTimeout = 3000;
@@ -27,6 +28,11 @@ function notifyf7(text: string, options: NotifyOptions) {
         on.click = () => options.onClick();
     }
 
+    let icon = null;
+    if (options.imageUrl) {
+        icon = `<img src="${options.imageUrl}"/>`
+    }
+
     const notification = f7.notification.create({
         title: options.title,
         titleRightText: 'now',
@@ -35,7 +41,7 @@ function notifyf7(text: string, options: NotifyOptions) {
         closeOnClick: true,
         closeTimeout,
         on,
-        icon: options.imageUrl
+        icon
     });
     notification.open();
 }

src/lib/utils.ts

@@ -721,3 +721,16 @@ export async function getSafetensorsMetadata(folder: string, filename: string):
 
     return fetch(new Request(url + `/view_metadata/${folder}?` + params)).then(r => r.json())
 }
+
+export function partition<T>(myArray: T[], chunkSize: number): T[] {
+    let index = 0;
+    const arrayLength = myArray.length;
+    const tempArray = [];
+
+    for (index = 0; index < arrayLength; index += chunkSize) {
+        const myChunk = myArray.slice(index, index + chunkSize);
+        tempArray.push(myChunk);
+    }
+
+    return tempArray;
+}

src/lib/widgets/GalleryWidget.svelte

@@ -11,6 +11,7 @@
  import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
  import { f7 } from "framework7-svelte";
  import type { ComfyGalleryNode } from "$lib/nodes/widgets";
+	import { showMobileLightbox } from "$lib/components/utils";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -47,19 +48,8 @@
      object_fit: "cover",
      // preview: true
  }
- let element: HTMLDivElement;
-
- let mobileLightbox = null;
-
- function showMobileLightbox(source: HTMLImageElement) {
-     if (!f7)
-         return
-
-     if (mobileLightbox) {
-         mobileLightbox.destroy();
-         mobileLightbox = null;
-     }
 
+ function showMobileLightbox_(source: HTMLImageElement, selectedImage: number) {
      const galleryElem = source.closest<HTMLDivElement>("div.block")
      console.debug("[ImageViewer] showModal", source, galleryElem);
      if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
@@ -72,23 +62,16 @@
      const images = allGalleryButtons.map(button => {
          return {
              url: (button.children[0] as HTMLImageElement).src,
-             caption: "Image"
+             // caption: "Image"
          }
      })
 
-     history.pushState({ type: "gallery" }, "");
-
-     mobileLightbox = f7.photoBrowser.create({
-         photos: images,
-         thumbs: images.map(i => i.url),
-         type: 'popup',
-     });
-     mobileLightbox.open($selected_image)
+     showMobileLightbox(images, selectedImage, { thumbs: images });
  }
 
  function onClicked(e: CustomEvent<HTMLImageElement>) {
      if (isMobile) {
-         showMobileLightbox(e.detail)
+         showMobileLightbox_(e.detail, $selected_image)
      }
      else {
          ImageViewer.instance.showLightbox(e.detail)
@@ -103,7 +86,7 @@
 
 {#if widget && node && nodeValue && $nodeValue}
     {#if widget.attrs.variant === "image"}
-        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""}>
             <Block variant="solid" padding={false}>
                 {#if $nodeValue && $nodeValue.length > 0}
                     {@const value = $nodeValue[$nodeValue.length-1]}
@@ -122,7 +105,7 @@
         </div>
     {:else}
         {@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
-        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
             <Block variant="solid" padding={false}>
                 <div class="padding">
                     <Gallery