diff --git a/js/save-as-script.js b/js/save-as-script.js index 4ab2bed..11164f0 100644 --- a/js/save-as-script.js +++ b/js/save-as-script.js @@ -10,6 +10,37 @@ app.registerExtension({ }); }, async setup() { + function savePythonScript() { + var filename = prompt("Save script as:"); + if(filename === undefined || filename === null || filename === "") { + return + } + + app.graphToPrompt().then(async (p) => { + const json = JSON.stringify({name: filename + ".json", workflow: JSON.stringify(p.output, null, 2)}, null, 2); // convert the data to a JSON string + var response = await api.fetchApi(`/saveasscript`, { method: "POST", body: json }); + if(response.status == 200) { + const blob = new Blob([await response.text()], {type: "text/python;charset=utf-8"}); + const url = URL.createObjectURL(blob); + if(!filename.endsWith(".py")) { + filename += ".py"; + } + + const a = $el("a", { + href: url, + download: filename, + style: {display: "none"}, + parent: document.body, + }); + a.click(); + setTimeout(function () { + a.remove(); + window.URL.revokeObjectURL(url); + }, 0); + } + }); + } + const menu = document.querySelector(".comfy-menu"); const separator = document.createElement("hr"); @@ -19,37 +50,61 @@ app.registerExtension({ const saveButton = document.createElement("button"); saveButton.textContent = "Save as Script"; - saveButton.onclick = () => { - var filename = prompt("Save script as:"); - if(filename === undefined || filename === null || filename === "") { - return - } - - app.graphToPrompt().then(async (p) => { - const json = JSON.stringify({name: filename + ".json", workflow: JSON.stringify(p.output, null, 2)}, null, 2); // convert the data to a JSON string - var response = await api.fetchApi(`/saveasscript`, { method: "POST", body: json }); - if(response.status == 200) { - const blob = new Blob([await response.text()], {type: "text/python;charset=utf-8"}); - const url = URL.createObjectURL(blob); - if(!filename.endsWith(".py")) { - filename += ".py"; - } - - const a = $el("a", { - href: url, - download: filename, - style: {display: "none"}, - parent: document.body, - }); - a.click(); - setTimeout(function () { - a.remove(); - window.URL.revokeObjectURL(url); - }, 0); - } - }); - } + saveButton.onclick = () => savePythonScript(); menu.append(saveButton); + + + // Also load to new style menu + const dropdownMenu = document.querySelectorAll(".p-menubar-submenu ")[0]; + // Get submenu items + const listItems = dropdownMenu.querySelectorAll("li"); + let newSetsize = listItems.length; + + const separatorMenu = document.createElement("li"); + separatorMenu.setAttribute("id", "pv_id_8_0_" + (newSetsize - 1).toString()); + separatorMenu.setAttribute("class", "p-menubar-separator"); + separatorMenu.setAttribute("role", "separator"); + separatorMenu.setAttribute("data-pc-section", "separator"); + + dropdownMenu.append(separatorMenu); + + // Adjust list items within to increase setsize + listItems.forEach((item) => { + // First check if it's a separator + if(item.getAttribute("data-pc-section") !== "separator") { + item.setAttribute("aria-setsize", newSetsize); + } + }); + + console.log(newSetsize); + + // Here's the format of list items + const saveButtonText = document.createElement("li"); + saveButtonText.setAttribute("id", "pv_id_8_0_" + newSetsize.toString()); + saveButtonText.setAttribute("class", "p-menubar-item relative"); + saveButtonText.setAttribute("role", "menuitem"); + saveButtonText.setAttribute("aria-label", "Save as Script"); + saveButtonText.setAttribute("aria-level", "2"); + saveButtonText.setAttribute("aria-setsize", newSetsize.toString()); + saveButtonText.setAttribute("aria-posinset", newSetsize.toString()); + saveButtonText.setAttribute("data-pc-section", "item"); + saveButtonText.setAttribute("data-p-active", "false"); + saveButtonText.setAttribute("data-p-focused", "false"); + + saveButtonText.innerHTML = ` +
+ ` + + saveButtonText.onclick = () => savePythonScript(); + + dropdownMenu.append(saveButtonText); + + console.log("SaveAsScript loaded"); }