Template saving/loading

src/lib/components/utils.ts

@@ -1,4 +1,7 @@
-import { type ContainerLayout, type IDragItem, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
+import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
+import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
+import type { LGraphCanvas } from "@litegraph-ts/core";
+import { get } from "svelte/store";
 
 export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
     return layoutState.updateChildren(container, evt.detail.items)
@@ -11,9 +14,37 @@ export function handleContainerFinalize(layoutState: WritableLayoutStateStore, c
     const isDroppingTemplate = droppedItem?.type === "template"
 
     if (isDroppingTemplate) {
-        return layoutState.updateChildren(container, dnd.items.filter(i => i.id !== info.id));
+        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 rect = canvas.ds.element.getBoundingClientRect();
+    const width = rect?.width || 1;
+    const height = rect?.height || 1;
+    const center = canvas.convertOffsetToCanvas([width * 0.5, height * 0.5]);
+
+    canvas.insertTemplate(droppedTemplate.template, center, container, templateItemIndex);
+
+    return get(layoutState).allItems[container.id].children;
+}