diff --git a/README.md b/README.md index 902a150..402cc67 100644 --- a/README.md +++ b/README.md @@ -65,17 +65,24 @@ Provides basic support for touch screen devices, its not perfect but better than Moved to: https://github.com/pythongosssss/ComfyUI-WD14-Tagger --- +
# Changelog ## 2023-06-18 -- ♻️ Reworked folder structure +### Major Changes - ✨ Added auto installation of scripts and `__init__` with thanks to @TashaSkyUp +- ♻️ Reworked folder structure - 🚨 Renamed a number of nodes to include `pysssss` to prevent name conflicts -- 🐛 Fix Manage Widget Defaults to work with new ComfyUI settings dialog +- 🚨 Remove Latent Upscale By as it is now a built in node in ComfyUI +- 🚨 Removed Anime Segmentation to own repo +### New - ✨ Add Link Render Mode setting to choose how links are rendered - ✨ Add Constrain Image node for resizing nodes to a min/max resolution with optional cropping -- 🚨 Remove Latent Upscale By as it is now a built in node in ComfyUI +- ✨ Add Show Image On Menu to include the latest image output on the menu + +### Other - ♻️ Include [canvas2svg](https://gliffy.github.io/canvas2svg/) for SVG export in assets to prevent downloading at runtime -- 🎨 Add background color to exported SVG +- 🎨 Add background color (using theme color) to exported SVG +- 🐛 Fix Manage Widget Defaults to work with new ComfyUI settings dialog - 🐛 Increase Image Feed z-index to prevent node text overlapping \ No newline at end of file diff --git a/js/showImageOnMenu.js b/js/showImageOnMenu.js new file mode 100644 index 0000000..4091235 --- /dev/null +++ b/js/showImageOnMenu.js @@ -0,0 +1,80 @@ +import { app } from "/scripts/app.js"; +import { api } from "/scripts/api.js"; +import { $el } from "/scripts/ui.js"; + +const id = "pysssss.ShowImageOnMenu"; +const ext = { + name: id, + async setup(app) { + let enabled = true; + let nodeId = null; + const img = $el("img", { + style: { + width: "100%", + height: "150px", + objectFit: "contain", + }, + }); + const link = $el( + "a", + { + style: { + position: "absolute", + bottom: 0, + width: "100%", + height: "150px", + }, + href: "#", + onclick: (e) => { + e.stopPropagation(); + e.preventDefault(); + const node = app.graph.getNodeById(nodeId); + if (!node) return; + app.canvas.centerOnNode(node); + app.canvas.setZoom(1); + }, + }, + [img] + ); + + const show = (src, node) => { + img.src = src; + nodeId = +node; + if (!link.parentNode) { + app.ui.menuContainer.style.paddingBottom = "150px"; + app.ui.menuContainer.append(link); + } + }; + + api.addEventListener("executed", ({ detail }) => { + if (!enabled) return; + const images = detail?.output?.images; + if (!images) return; + const format = app.getPreviewFormatParam(); + const src = `/view?filename=${encodeURIComponent(images[0].filename)}&type=${ + images[0].type + }&subfolder=${encodeURIComponent(images[0].subfolder)}&t=${+new Date()}${format}`; + show(src, detail.node); + }); + + api.addEventListener("b_preview", ({ detail }) => { + show(URL.createObjectURL(detail), app.runningNodeId); + }); + + app.ui.settings.addSetting({ + id, + name: "🐍 Show Image On Menu", + defaultValue: true, + type: "boolean", + onChange(value) { + enabled = value; + if (!value) { + app.ui.menuContainer.style.removeProperty("padding-bottom"); + app.ui.menuContainer.removeChild(link); + } + }, + }); + }, +}; + +app.registerExtension(ext);