73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
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)
|
|
};
|
|
|
|
export function handleContainerFinalize(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
|
|
const dnd = evt.detail
|
|
const info = dnd.info;
|
|
const droppedItem = dnd.items.find(i => i.id === info.id);
|
|
const isDroppingTemplate = droppedItem?.type === "template"
|
|
|
|
if (isDroppingTemplate) {
|
|
return doInsertTemplate(layoutState, droppedItem as TemplateLayout, container, dnd.items)
|
|
}
|
|
else {
|
|
return layoutState.updateChildren(container, dnd.items)
|
|
}
|
|
};
|
|
|
|
function isComfyGraphCanvas(canvas: LGraphCanvas): canvas is ComfyGraphCanvas {
|
|
return "insertTemplate" in canvas;
|
|
}
|
|
|
|
function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate: TemplateLayout, container: ContainerLayout, items: IDragItem[]): IDragItem[] {
|
|
const workflow = layoutState.workflow;
|
|
const templateItemIndex = items.findIndex(i => i.id === droppedTemplate.id)
|
|
|
|
const newChildren = items.filter(i => i.id !== droppedTemplate.id);
|
|
|
|
const canvas = workflow.canvases["app"]?.canvas
|
|
if (canvas == null || !isComfyGraphCanvas(canvas) || canvas.graph !== workflow.graph) {
|
|
console.error("Couldn't get main graph canvas!")
|
|
return newChildren;
|
|
}
|
|
|
|
layoutState.updateChildren(container, newChildren);
|
|
|
|
const newPos: Vector2 = [canvas.visible_area[0] + canvas.visible_area[2] / 2, canvas.visible_area[1] + canvas.visible_area[3] / 2]
|
|
|
|
canvas.insertTemplate(droppedTemplate.template, newPos, container, templateItemIndex);
|
|
|
|
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)
|
|
}
|