From d2d2f0c1f1ace35236e73fa5074e9feb83342773 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Mon, 11 Mar 2024 18:41:00 +0800
Subject: [PATCH 1/2] create invisible temp canvas to copy clipboard from

---
 ui/src/utils.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/ui/src/utils.tsx b/ui/src/utils.tsx
index 1941a05..ea47c94 100644
--- a/ui/src/utils.tsx
+++ b/ui/src/utils.tsx
@@ -14,7 +14,7 @@ import {
 } from "./const";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare let LiteGraph: any, LGraph: any;
+declare let LiteGraph: any, LGraph: any, LGraphCanvas: any;
 
 // copied from app.js
 function sanitizeNodeName(string: string): string {
@@ -198,13 +198,20 @@ export function insertWorkflowToCanvas(json: string, insertPos?: number[]) {
   }
 
   let tempGraph = new LGraph();
-  tempGraph.configure(graphData);
-  const prevClipboard = localStorage.getItem("litegrapheditor_clipboard");
+  const hiddenCanvas = document.createElement("canvas");
+  hiddenCanvas.style.display = "none"; // Make it hidden
+  document.body.appendChild(hiddenCanvas); // Append to the body to make it part of the DOM
+  const tempCanvas = new LGraphCanvas(hiddenCanvas, tempGraph);
 
-  const graph = app.canvas.graph;
-  app.canvas.setGraph(tempGraph);
+  const prevClipboard = localStorage.getItem("litegrapheditor_clipboard");
+  const prevGraph = app.canvas.graph;
+  const prevCanvas = app.canvas;
+  app.canvas = tempCanvas;
+  app.graph = tempGraph;
+  tempGraph.configure(graphData);
   app.canvas.copyToClipboard(tempGraph._nodes);
-  app.canvas.setGraph(graph);
+  app.graph = prevGraph;
+  app.canvas = prevCanvas;
   const priorPos = app.canvas.graph_mouse;
   if (insertPos) {
     insertPos[0] -= 15;

From 02800b95e851caaf7f735e2d4a2d8574ec44aa3c Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Mon, 11 Mar 2024 18:45:48 +0800
Subject: [PATCH 2/2] fix drag drop not working with workflow with reroute
 nodes

---
 ui/src/utils.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/utils.tsx b/ui/src/utils.tsx
index ea47c94..5375011 100644
--- a/ui/src/utils.tsx
+++ b/ui/src/utils.tsx
@@ -201,15 +201,20 @@ export function insertWorkflowToCanvas(json: string, insertPos?: number[]) {
   const hiddenCanvas = document.createElement("canvas");
   hiddenCanvas.style.display = "none"; // Make it hidden
   document.body.appendChild(hiddenCanvas); // Append to the body to make it part of the DOM
-  const tempCanvas = new LGraphCanvas(hiddenCanvas, tempGraph);
+  let tempCanvas = new LGraphCanvas(hiddenCanvas, tempGraph);
 
   const prevClipboard = localStorage.getItem("litegrapheditor_clipboard");
-  const prevGraph = app.canvas.graph;
+  const prevGraph = app.graph;
   const prevCanvas = app.canvas;
   app.canvas = tempCanvas;
   app.graph = tempGraph;
   tempGraph.configure(graphData);
   app.canvas.copyToClipboard(tempGraph._nodes);
+
+  // clear the tempGraph and remove the hiddenCanvas
+  tempCanvas.graph.clear();
+  document.body.removeChild(hiddenCanvas);
+
   app.graph = prevGraph;
   app.canvas = prevCanvas;
   const priorPos = app.canvas.graph_mouse;
@@ -223,8 +228,9 @@ export function insertWorkflowToCanvas(json: string, insertPos?: number[]) {
   if (prevClipboard) {
     localStorage.setItem("litegrapheditor_clipboard", prevClipboard);
   }
-  // Nullify the references to help with garbage collection
+  // Nullify the temporary graph and canvas references for garbage collection
   tempGraph = null;
+  tempCanvas = null;
 }
 
 export const matchShortcut = async (event: KeyboardEvent) => {