JS fixes and features

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);
+          }
+    },
 });

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 },
+				],
+			});
 }
 });

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;

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
+      navigator.clipboard.writeText(JSON.stringify(points));
-      console.log('Option 2 clicked');
+      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 = () => {
@@ -406,7 +407,6 @@ function createSplineEditor(context, reset=false) {
       })
     .textStyle("orange")
   
-    
     vis.render();
     var svgElement = vis.canvas();
     svgElement.style['zIndex'] = "2"