Add ShowImageOnMenu

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
 
 ---
+<br>
 
 # 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

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);