[mobile] Show graph

src/lib/ComfyGraphCanvas.ts

@@ -9,7 +9,6 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     constructor(
         app: ComfyApp,
         canvas: HTMLCanvasElement | string,
-        graph?: LGraph,
         options: {
             skip_render?: boolean;
             skip_events?: boolean;
@@ -17,7 +16,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
             viewport?: Vector4;
         } = {}
     ) {
-        super(canvas, graph, options);
+        super(canvas, app.lGraph, options);
         this.app = app;
     }
 

src/lib/GraphSync.ts

@@ -88,11 +88,11 @@ export default class GraphSync {
             this.stores[nodeId].push({ store: wuis.value, unsubscribe: unsub });
         }
 
-        console.log("NEWSTORES", this.stores[nodeId])
+        console.debug("NEWSTORES", this.stores[nodeId])
     }
 
     private removeStores(nodeId: string) {
-        console.log("DELSTORES", this.stores[nodeId])
+        console.debug("DELSTORES", this.stores[nodeId])
         for (const ss of this.stores[nodeId]) {
             ss.unsubscribe();
         }

src/lib/api.ts

@@ -49,8 +49,6 @@ export default class ComfyAPI extends EventTarget {
     private getBackendUrl(): string {
         const hostname = this.hostname || location.hostname;
         const port = this.port || location.port;
-        console.log(hostname)
-        console.log(port)
         return `${window.location.protocol}//${hostname}:${port}`
     }
 

src/lib/components/ComfyApp.svelte

@@ -120,11 +120,11 @@
      });
 
      await app.setup();
-     refreshView();
-
      (window as any).app = app;
      (window as any).appPane = uiPane;
 
+     refreshView();
+
      imageViewer = new ImageViewer(app.rootEl);
 
      let wrappers = containerElem.querySelectorAll<HTMLDivElement>(".pane-wrapper")

src/lib/components/ComfyApp.ts

@@ -88,7 +88,7 @@ export default class ComfyApp {
         this.rootEl = document.getElementById("main") as HTMLDivElement;
         this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
         this.lGraph = new LGraph();
-        this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl, this.lGraph);
+        this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);
         this.canvasCtx = this.canvasEl.getContext("2d");
         this.graphSync = new GraphSync(this);
 
@@ -151,37 +151,37 @@ export default class ComfyApp {
     }
 
     private graphOnConfigure() {
-        console.log("Configured");
+        console.debug("Configured");
         this.eventBus.emit("configured", this.lGraph);
     }
 
     private graphOnBeforeChange(graph: LGraph, info: any) {
-        console.log("BeforeChange", info);
+        console.debug("BeforeChange", info);
         this.eventBus.emit("beforeChange", graph, info);
     }
 
     private graphOnAfterChange(graph: LGraph, info: any) {
-        console.log("AfterChange", info);
+        console.debug("AfterChange", info);
         this.eventBus.emit("afterChange", graph, info);
     }
 
     private graphOnNodeAdded(node: LGraphNode) {
-        console.log("Added", node);
+        console.debug("Added", node);
         this.eventBus.emit("nodeAdded", node);
     }
 
     private graphOnNodeRemoved(node: LGraphNode) {
-        console.log("Removed", node);
+        console.debug("Removed", node);
         this.eventBus.emit("nodeRemoved", node);
     }
 
     private graphOnNodeConnectionChange(kind: LConnectionKind, node: LGraphNode, slot: INodeSlot, targetNode: LGraphNode, targetSlot: INodeSlot) {
-        console.log("ConnectionChange", node);
+        console.debug("ConnectionChange", node);
         this.eventBus.emit("nodeConnectionChanged", kind, node, slot, targetNode, targetSlot);
     }
 
     private canvasOnClear() {
-        console.log("CanvasClear");
+        console.debug("CanvasClear");
         this.eventBus.emit("cleared");
     }
 
@@ -306,11 +306,13 @@ export default class ComfyApp {
     }
 
     private showDropZone() {
-        this.dropZone.style.display = "block";
+        if (this.dropZone)
+            this.dropZone.style.display = "block";
     }
 
     private hideDropZone() {
-        this.dropZone.style.display = "none";
+        if (this.dropZone)
+            this.dropZone.style.display = "none";
     }
 
     private allowDrag(event: DragEvent) {
@@ -334,10 +336,15 @@ export default class ComfyApp {
     private addDropHandler() {
         this.dropZone = document.getElementById("dropzone");
 
-        window.addEventListener('dragenter', this.allowDrag.bind(this));
-        this.dropZone.addEventListener('dragover', this.allowDrag.bind(this));
-        this.dropZone.addEventListener('dragleave', this.hideDropZone.bind(this));
-        this.dropZone.addEventListener('drop', this.handleDrop.bind(this));
+        if (this.dropZone) {
+            window.addEventListener('dragenter', this.allowDrag.bind(this));
+            this.dropZone.addEventListener('dragover', this.allowDrag.bind(this));
+            this.dropZone.addEventListener('dragleave', this.hideDropZone.bind(this));
+            this.dropZone.addEventListener('drop', this.handleDrop.bind(this));
+        }
+        else {
+            console.warn("No dropzone detected (probably on mobile).")
+        }
     }
 
     /**

src/lib/stores/queueState.ts

@@ -7,7 +7,7 @@ export type QueueItem = {
 }
 
 type QueueStateOps = {
-    statusUpdated: (status: ComfyAPIQueueStatus) => void,
+    statusUpdated: (status: ComfyAPIQueueStatus | null) => void,
     executingUpdated: (runningNodeId: string | null) => void,
     progressUpdated: (progress: Progress | null) => void
 }
@@ -21,9 +21,10 @@ type WritableQueueStateStore = Writable<QueueState> & QueueStateOps;
 
 const store: Writable<QueueState> = writable({ queueRemaining: null, runningNodeId: null, progress: null })
 
-function statusUpdated(status: ComfyAPIQueueStatus) {
+function statusUpdated(status: ComfyAPIQueueStatus | null) {
     store.update((s) => {
-        s.queueRemaining = status.exec_info.queue_remaining;
+        if (status !== null)
+            s.queueRemaining = status.exec_info.queue_remaining;
         return s
     })
 }

src/lib/stores/widgetState.ts

@@ -62,7 +62,7 @@ function nodeAdded(node: LGraphNode) {
         }
     }
 
-    console.log("NODEADDED", state)
+    console.debug("NODEADDED", state)
 
     store.set(state);
 }