feat: refactor deployment code

web-plugin/index.js

@@ -5,6 +5,14 @@ import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.23";
 
 const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg>`;
 
+function sendEventToCD(event, data) {
+  const message = {
+    type: event,
+    data: data,
+  };
+  window.parent.postMessage(JSON.stringify(message), "*");
+}
+
 /** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/
 /** @type {ComfyExtension} */
 const ext = {
@@ -169,9 +177,11 @@ const ext = {
           if (comfyUIWorkflow && app && app.loadGraphData) {
             app.loadGraphData(comfyUIWorkflow);
           }
+        } else if (message.type === "deploy") {
+          deployWorkflow();
         }
       } catch (error) {
-        console.error("Error processing message:", error);
+        // console.error("Error processing message:", error);
       }
 
       // if (!event.data.flow || Object.entries(event.data.flow).length <= 0)
@@ -189,10 +199,16 @@ const ext = {
       //   }
     });
 
-    const message = {
+    app.graph.onAfterChange = ((originalFunction) => async function () {
-      type: "cd_plugin_setup",
+        const prompt = await app.graphToPrompt();
-    };
+        sendEventToCD("cd_plugin_onAfterChange", prompt);
-    window.parent.postMessage(JSON.stringify(message), "*");
+
+        if (typeof originalFunction === "function") {
+          originalFunction.apply(this, arguments);
+        }
+      })(app.graph.onAfterChange);
+
+    sendEventToCD("cd_plugin_setup");
   },
 };
 
@@ -293,14 +309,9 @@ function createDynamicUIHtml(data) {
   return html;
 }
 
-function addButton() {
+async function deployWorkflow() {
-  const menu = document.querySelector(".comfy-menu");
+  const deploy = document.getElementById("deploy-button");
 
-  const deploy = document.createElement("button");
-  deploy.style.position = "relative";
-  deploy.style.display = "block";
-  deploy.innerHTML = "<div id='button-title'>Deploy</div>";
-  deploy.onclick = async () => {
   /** @type {LGraph} */
   const graph = app.graph;
 
@@ -581,6 +592,18 @@ function addButton() {
       title.style.color = "white";
     }, 1000);
   }
+}
+
+function addButton() {
+  const menu = document.querySelector(".comfy-menu");
+
+  const deploy = document.createElement("button");
+  deploy.id = "deploy-button";
+  deploy.style.position = "relative";
+  deploy.style.display = "block";
+  deploy.innerHTML = "<div id='button-title'>Deploy</div>";
+  deploy.onclick = async () => {
+    await deployWorkflow()
   };
 
   const config = document.createElement("img");