From 59d11b615db1004d659e01bf78f8fbd0be41297d Mon Sep 17 00:00:00 2001 From: kijai <40791699+kijai@users.noreply.github.com> Date: Sat, 27 Apr 2024 02:08:17 +0300 Subject: [PATCH] JS fixes and features --- web/js/browserstatus.js | 20 ++++++++++++++++---- web/js/contextmenu.js | 16 ++++++++++------ web/js/help_popup.js | 22 ++++++++++++++++++---- web/js/spline_editor.js | 10 +++++----- 4 files changed, 49 insertions(+), 19 deletions(-) diff --git a/web/js/browserstatus.js b/web/js/browserstatus.js index c796b6f..fd377e7 100644 --- a/web/js/browserstatus.js +++ b/web/js/browserstatus.js @@ -4,6 +4,9 @@ import { app } from "../../../scripts/app.js"; app.registerExtension({ name: "KJNodes.browserstatus", setup() { + if (!app.ui.settings.getSettingValue("KJNodes.browserStatus")) { + return; + } api.addEventListener("status", ({ detail }) => { let title = "ComfyUI"; let favicon = "green"; @@ -11,7 +14,6 @@ app.registerExtension({ if (queueRemaining) { favicon = "red"; - title = `00% - ${queueRemaining} | ${title}`; } let link = document.querySelector("link[rel~='icon']"); @@ -22,9 +24,8 @@ app.registerExtension({ } link.href = new URL(`../${favicon}.png`, import.meta.url); document.title = title; - }); -//add progress to the title + //add progress to the title api.addEventListener("progress", ({ detail }) => { const { value, max } = detail; const progress = Math.floor((value / max) * 100); @@ -34,8 +35,19 @@ app.registerExtension({ const paddedProgress = String(progress).padStart(2, '0'); title = `${paddedProgress}% ${title.replace(/^\d+%\s/, '')}`; } - document.title = title; }); }, + init() { + if (!app.ui.settings.getSettingValue("KJNodes.browserStatus")) { + return; + } + const pythongossFeed = app.extensions.find( + (e) => e.name === 'pysssss.FaviconStatus', + ) + if (pythongossFeed) { + console.warn("KJNodes - Overriding pysssss.FaviconStatus") + app.extensions = app.extensions.filter(item => item !== pythongossFeed); + } + }, }); \ No newline at end of file diff --git a/web/js/contextmenu.js b/web/js/contextmenu.js index 0b05d7d..636358e 100644 --- a/web/js/contextmenu.js +++ b/web/js/contextmenu.js @@ -1,7 +1,5 @@ import { app } from "../../../scripts/app.js"; - -var nodeAutoColor = true // Adds context menu entries, code partly from pyssssscustom-scripts function addMenuHandler(nodeType, cb) { @@ -45,13 +43,9 @@ app.registerExtension({ content: "Add SetNode", callback: () => {addNode("SetNode", this, { side:"right", offset: 30 }); }, - }); }); - } - - }, async setup(app) { const onChange = (value) => { @@ -144,5 +138,15 @@ app.registerExtension({ { value: false, text: "Off", selected: value === false }, ], }); + app.ui.settings.addSetting({ + id: "KJNodes.browserStatus", + name: "🦛 KJNodes: 🟢 Stoplight browser status icon 🔴", + defaultValue: false, + type: "boolean", + options: (value) => [ + { value: true, text: "On", selected: value === true }, + { value: false, text: "Off", selected: value === false }, + ], + }); } }); diff --git a/web/js/help_popup.js b/web/js/help_popup.js index c4620e5..00f21bf 100644 --- a/web/js/help_popup.js +++ b/web/js/help_popup.js @@ -182,13 +182,16 @@ const create_documentation_stylesheet = () => { let startX, startY, startWidth, startHeight resizeHandle.addEventListener('mousedown', function (e) { + e.preventDefault(); e.stopPropagation(); isResizing = true; startX = e.clientX; startY = e.clientY; startWidth = parseInt(document.defaultView.getComputedStyle(docElement).width, 10); startHeight = parseInt(document.defaultView.getComputedStyle(docElement).height, 10); - }); + }, + { signal: this.docCtrl.signal }, + ); // close button const closeButton = document.createElement('div'); @@ -208,7 +211,9 @@ const create_documentation_stylesheet = () => { this.show_doc = !this.show_doc docElement.parentNode.removeChild(docElement) docElement = null - }); + }, + { signal: this.docCtrl.signal }, + ); document.addEventListener('mousemove', function (e) { if (!isResizing) return; @@ -216,11 +221,15 @@ const create_documentation_stylesheet = () => { const newHeight = startHeight + e.clientY - startY; docElement.style.width = `${newWidth}px`; docElement.style.height = `${newHeight}px`; - }); + }, + { signal: this.docCtrl.signal }, + ); document.addEventListener('mouseup', function () { isResizing = false - }) + }, + { signal: this.docCtrl.signal }, + ) document.body.appendChild(docElement) } @@ -283,6 +292,11 @@ const create_documentation_stylesheet = () => { } else { this.show_doc = !this.show_doc } + if (this.show_doc) { + this.docCtrl = new AbortController() + } else { + this.docCtrl.abort() + } return true; } return r; diff --git a/web/js/spline_editor.js b/web/js/spline_editor.js index 78f42d2..420eeeb 100644 --- a/web/js/spline_editor.js +++ b/web/js/spline_editor.js @@ -144,7 +144,7 @@ app.registerExtension({ this.menuItem2 = document.createElement("a"); this.menuItem2.href = "#"; this.menuItem2.id = "menu-item-2"; - this.menuItem2.textContent = "Placeholder"; + this.menuItem2.textContent = "Copy coordinates to clipboard"; styleMenuItem(this.menuItem2); // Add hover effect to menu items this.menuItem1.addEventListener('mouseover', function() { @@ -243,8 +243,8 @@ function createSplineEditor(context, reset=false) { context.menuItem2.addEventListener('click', function(e) { e.preventDefault(); - // Add functionality for menu item 2 - console.log('Option 2 clicked'); + navigator.clipboard.writeText(JSON.stringify(points)); + console.log('Copied coordinates to clipboard'); }); @@ -275,6 +275,7 @@ function createSplineEditor(context, reset=false) { var points_to_sample = pointsWidget.value interpolationWidget.callback = () => { interpolation = interpolationWidget.value + updatePath(); } tensionWidget.callback = () => { @@ -405,8 +406,7 @@ function createSplineEditor(context, reset=false) { return `F: ${frame}, X: ${normalizedX.toFixed(2)}, Y: ${normalizedY.toFixed(2)}`; }) .textStyle("orange") - - + vis.render(); var svgElement = vis.canvas(); svgElement.style['zIndex'] = "2"