Mobile queue

src/lib/stores/interfaceState.ts

@@ -1,7 +1,12 @@
-import { debounce } from '$lib/utils';
+import { debounce, isMobileBrowser } from '$lib/utils';
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
-import type { WorkflowInstID } from './workflowState';
+import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
+import modalState, { type ModalData } from './modalState';
+import type { SlotType } from '@litegraph-ts/core';
+import type ComfyApp from '$lib/components/ComfyApp';
+import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import workflowState from './workflowState';
 
 export type InterfaceState = {
     // Show a large indicator of the currently editing number value for mobile
@@ -15,13 +20,16 @@ export type InterfaceState = {
     isJumpingToNode: boolean,
 
     selectedWorkflowIndex: number | null
-    showingWorkflow: boolean
+    showingWorkflow: boolean,
+    selectedTab: number,
+    showSheet: boolean,
 
     isDarkMode: boolean
 }
 
 type InterfaceStateOps = {
     showIndicator: (pointerX: number, pointerY: number, value: any) => void,
+    querySendOutput: (value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) => void,
 }
 
 export type WritableInterfaceStateStore = Writable<InterfaceState> & InterfaceStateOps;
@@ -34,6 +42,8 @@ const store: Writable<InterfaceState> = writable(
 
         graphTransitioning: false,
         isJumpingToNode: false,
+        selectedTab: 1,
+        showSheet: false,
 
         selectedWorkflowIndex: null,
         showingWorkflow: false,
@@ -57,9 +67,49 @@ function showIndicator(pointerX: number, pointerY: number, value: any) {
     debounceDrag();
 }
 
+function querySendOutput(value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) {
+    if (isMobileBrowser(navigator.userAgent)) {
+        store.update(s => { s.showSheet = true; return s; })
+    }
+    else {
+        const doSend = (modal: ModalData) => {
+            cb(modal)
+
+            const { workflow, targetNode } = get(modal.state) as SendOutputModalResult;
+            console.warn("send", workflow, targetNode);
+
+            if (workflow == null || targetNode == null)
+                return
+
+            const app = (window as any).app as ComfyApp;
+            if (app == null) {
+                console.error("Couldn't get app!")
+                return
+            }
+
+            targetNode.receiveOutput(value);
+            workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
+        }
+
+        modalState.pushModal({
+            title: "Send Output",
+            closeOnClick: true,
+            showCloseButton: true,
+            svelteComponent: SendOutputModal,
+            svelteProps: {
+                value,
+                type,
+                receiveTargets
+            },
+            onClose: doSend
+        })
+    }
+}
+
 const interfaceStateStore: WritableInterfaceStateStore =
 {
     ...store,
-    showIndicator
+    showIndicator,
+    querySendOutput
 }
 export default interfaceStateStore;