Mobile haptic feedback

src/lib/components/ComfyApp.svelte

@@ -25,7 +25,6 @@
 	import notify from "$lib/notify";
 
  export let app: ComfyApp = undefined;
- let imageViewer: ImageViewer;
  let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
  let uiPane: ComfyUIPane = undefined;
@@ -175,10 +174,6 @@
      })
  }
 
- $: if (app.rootEl && !imageViewer) {
-     imageViewer = new ImageViewer(app.rootEl);
- }
-
  $: if (containerElem) {
      const canvas = containerElem.querySelector<HTMLDivElement>("#graph-canvas")
      if (canvas) {

src/lib/components/ComfyApp.ts

@@ -98,7 +98,7 @@ export default class ComfyApp {
             return;
         }
 
-        this.rootEl = document.getElementById("main") as HTMLDivElement;
+        this.rootEl = document.getElementById("app") as HTMLDivElement;
         this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
         this.lGraph = new ComfyGraph();
         this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);

src/lib/widgets/ButtonWidget.svelte

@@ -22,6 +22,7 @@
 
  function onClick(e: MouseEvent) {
      node.onClick();
+     navigator.vibrate(20)
  }
 
  const style = {

src/lib/widgets/CheckboxWidget.svelte

@@ -20,6 +20,10 @@
          attrsChanged = widget.attrsChanged;
      }
  };
+
+ function onSelect() {
+     navigator.vibrate(20)
+ }
 </script>
 
 <div class="wrapper gradio-checkbox">
@@ -27,7 +31,7 @@
         {#key $attrsChanged}
             {#if node !== null}
                 <Block>
-                    <Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} />
+                    <Checkbox disabled={widget.attrs.disabled} label={widget.attrs.title} bind:value={$nodeValue} on:select={onSelect} />
                 </Block>
             {/if}
         {/key}

src/lib/widgets/ComboWidget.svelte

@@ -55,9 +55,14 @@
      return links[0].data
  }
 
+ function onFocus() {
+     navigator.vibrate(20)
+ }
+
  function onSelect() {
      if (input)
          input.blur();
+     navigator.vibrate(20)
  }
 
  let lastPropsChanged: number = 0;
@@ -86,6 +91,7 @@
                     inputAttributes={{ autocomplete: 'off' }}
                     bind:input
                     on:change
+                    on:focus={onFocus}
                     on:select={onSelect}
                     on:filter
                     on:blur

src/lib/widgets/GalleryWidget.svelte

@@ -9,6 +9,7 @@
  import type { FileData as GradioFileData } from "@gradio/upload";
  import type { SelectData as GradioSelectData } from "@gradio/utils";
 	import { clamp } from "$lib/utils";
+	import { f7 } from "framework7-svelte";
 
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
@@ -39,14 +40,79 @@
  }
  let element: HTMLDivElement;
 
+ let mobileLightbox = null;
+
+ function showMobileLightbox(event: Event) {
+     if (!f7)
+         return
+
+     if (mobileLightbox) {
+         mobileLightbox.destroy();
+         mobileLightbox = null;
+     }
+
+     const source = (event.target || event.srcElement) as HTMLImageElement;
+     const galleryElem = source.closest<HTMLDivElement>("div.block")
+     console.debug("[ImageViewer] showModal", event, source, galleryElem);
+     if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
+         console.error("No buttons found on gallery element!", galleryElem)
+         return;
+     }
+
+     const allGalleryButtons = ImageViewer.all_gallery_buttons(galleryElem);
+     const selectedSource = source.src
+
+     const images = allGalleryButtons.map(button => {
+         return {
+             url: (button.children[0] as HTMLImageElement).src,
+             caption: "Image"
+         }
+     })
+
+
+     mobileLightbox = f7.photoBrowser.create({
+         photos: images,
+         thumbs: images.map(i => i.url),
+         type: 'popup',
+     });
+     mobileLightbox.open()
+
+     event.stopPropagation()
+ }
+
+ function setupImageForMobileLightbox(e: HTMLImageElement) {
+     if (e.dataset.modded === "true")
+         return;
+
+     e.dataset.modded = "true";
+     e.style.cursor = "pointer";
+     e.style.userSelect = "none";
+
+     var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+     // For Firefox, listening on click first switched to next image then shows the lightbox.
+     // If you know how to fix this without switching to mousedown event, please.
+     // For other browsers the event is click to make it possiblr to drag picture.
+     var event = isFirefox ? 'mousedown' : 'click'
+
+     e.addEventListener(event, (evt) => {
+         evt.preventDefault()
+         showMobileLightbox(evt)
+     }, true);
+ }
+
  function onSelect(e: CustomEvent<GradioSelectData>) {
      // Setup lightbox
      // Wait for gradio gallery to show the large preview image, if no timeout then
      // the event might fire too early
+
+     const callback = isMobile ? setupImageForMobileLightbox
+                    : ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance)
+
      setTimeout(() => {
          const images = element.querySelectorAll<HTMLImageElement>('div.block div > img')
          if (images != null) {
-             images.forEach(ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance));
+             images.forEach(callback);
          }
          ImageViewer.instance.updateOnBackgroundChange();
      }, 200)
@@ -54,8 +120,8 @@
      // Update index
      node.setProperty("index", e.detail.index as number)
  }
-
 </script>
+
 <div class="wrapper comfy-gallery-widget gradio-gallery" bind:this={element}>
     {#if widget && node && nodeValue}
         <Block variant="solid" padding={false}>

src/lib/widgets/RangeWidget.svelte

@@ -57,7 +57,6 @@
  function onRelease(e: Event) {
      if (nodeValue && option) {
          $nodeValue = option
-         navigator.vibrate(100)
      }
  }
 
@@ -78,11 +77,26 @@
  }
 
  function onPointerDown(e: PointerEvent) {
+     if (!isMobile)
+         return;
+
      interfaceState.showIndicator(e.clientX, e.clientY, option);
  }
 
+ let canVibrate = true;
+ let lastDisplayValue = null;
+
  function onPointerMove(e: PointerEvent) {
+     if (!isMobile)
+         return;
      interfaceState.showIndicator(e.clientX, e.clientY, option);
+
+     if (canVibrate && lastDisplayValue != option) {
+         lastDisplayValue = option;
+         canVibrate = false;
+         setTimeout(() => { canVibrate = true }, 30)
+         navigator.vibrate(10)
+     }
  }
 </script>
 

src/mobile/GenToolbar.svelte

@@ -9,6 +9,7 @@
  import ProgressBar from "$lib/components/ProgressBar.svelte";
 	import Indicator from "./Indicator.svelte";
 	import interfaceState from "$lib/stores/interfaceState";
+	import LightboxModal from "$lib/components/LightboxModal.svelte";
 
  export let subworkflowID: number = -1;
  export let app: ComfyApp = undefined;