Update docs

Author: niknah

docs/CircuitBoardLines.js

@@ -39,11 +39,11 @@ function clipT(num, denom, c) {
 	return 1;
 }
 /**
- * @param  {Point} a
- * @param  {Point} b
- * @param  {BoundingBox} box [xmin, ymin, xmax, ymax]
- * @param  {Point?} [da]
- * @param  {Point?} [db]
+ * @param	{Point} a
+ * @param	{Point} b
+ * @param	{BoundingBox} box [xmin, ymin, xmax, ymax]
+ * @param	{Point?} [da]
+ * @param	{Point?} [db]
  * @return {number}
  */
 function liangBarsky(a, b, box, da, db) {
@@ -714,16 +714,60 @@ class MapLinks {
 	}
 }
 
+class EyeButton {
+	constructor() {
+		this.hidden = null;
+	}
+
+	static getEyeButton() {
+		const eyeButtons = document.querySelectorAll('.pi-eye,.pi-eye-slash');
+		if (eyeButtons.length > 1) {
+			console.log('found too many eye buttons', eyeButtons); // eslint-disable-line no-console
+		}
+		return eyeButtons[0];
+	}
+
+	check() {
+		const eyeButton = EyeButton.getEyeButton();
+		if (!eyeButton) {
+			return;
+		}
+		const hidden = eyeButton.classList.contains('pi-eye-slash');
+		if (this.hidden !== hidden) {
+			this.hidden = hidden;
+			if (this.onChange) {
+				this.onChange(hidden);
+			}
+		}
+	}
+
+	listenEyeButton(onChange) {
+		this.onChange = onChange;
+		const eyeButton = EyeButton.getEyeButton();
+		if (!eyeButton) {
+			setTimeout(() => this.listenEyeButton(onChange), 1000);
+			return;
+		}
+		const eyeDom = eyeButton.parentNode;
+		eyeDom.addEventListener('click', () => this.check());
+		eyeDom.addEventListener('keyup', () => this.check());
+		eyeDom.addEventListener('mouseup', () => this.check());
+	}
+}
+
 export class CircuitBoardLines {
 	constructor() {
 		this.canvas = null;
 		this.mapLinks = null;
 		this.enabled = true;
+		this.eyeHidden = false;
 		this.maxDirectLineDistance = Number.MAX_SAFE_INTEGER;
 	}
 
 	setEnabled(e) { this.enabled = e; }
 
+	isShow() { return this.enabled && !this.eyeHidden; }
+
 	recalcMapLinksTimeout() {
 		// calculate paths when user is idle...
 		if (!this.skipNextRecalcTimeout) {
@@ -798,13 +842,17 @@ export class CircuitBoardLines {
 		LGraphCanvas.prototype.drawConnections = function drawConnections(
 			ctx,
 		) {
-			if (t.canvas && t.enabled) {
+			if (t.canvas && t.isShow()) {
 				return t.drawConnections(
 					ctx,
 				);
 			}
 			return oldDrawConnections.apply(this, arguments);
 		};
+		this.eyeButton = new EyeButton();
+		this.eyeButton.listenEyeButton((hidden) => {
+			this.eyeHidden = hidden;
+		});
 	}
 
 	initOverrides(canvas) {

docs/QuickConnection.js

@@ -11,7 +11,7 @@
 export class QuickConnection {
 	constructor() {
 		this.insideConnection = null;
-		this.enabled = true;
+		this.enabled = false;
 		// use inputs that already have a link to them.
 		this.useInputsWithLinks = false;
 		this.release_link_on_empty_shows_menu = true;
@@ -39,13 +39,25 @@ export class QuickConnection {
 
 			// Let's not popup the release on empty spot menu if we've released the mouse on a dot
 			const origReleaseLink = LiteGraph.release_link_on_empty_shows_menu;
+			const origShowConnectionMenu = t.canvas.showConnectionMenu;
 			if (t.pointerUp()) {
-				LiteGraph.release_link_on_empty_shows_menu = false;
+				if (!t.isComfyUI) {
+					LiteGraph.release_link_on_empty_shows_menu = false;
+				} else {
+					t.canvas.showConnectionMenu = () => {};
+				}
 				t.release_link_on_empty_shows_menu = false;
 			}
 			const ret = origProcessMouseUp.apply(this, arguments);
-			LiteGraph.release_link_on_empty_shows_menu = origReleaseLink;
-			t.release_link_on_empty_shows_menu = true;
+			if (!t.release_link_on_empty_shows_menu) {
+				if (!t.isComfyUI) {
+					LiteGraph.release_link_on_empty_shows_menu = origReleaseLink;
+				} else {
+					t.canvas.showConnectionMenu = origShowConnectionMenu;
+					t.canvas.linkConnector.reset();
+				}
+				t.release_link_on_empty_shows_menu = true;
+			}
 			return ret;
 		};
 
@@ -54,6 +66,7 @@ export class QuickConnection {
 	}
 
 	initListeners(canvas) {
+		this.enabled = true;
 		this.graph = canvas.graph;
 		this.canvas = canvas;
 		if (!this.canvas.canvas) {
@@ -197,9 +210,6 @@ export class QuickConnection {
 			return;
 		}
 
-		ctx.save();
-		this.canvas.ds.toCanvasContext(ctx);
-
 		this.insideConnection = null;
 
 		const connectionInfo = this.getCurrentConnection();
@@ -208,6 +218,13 @@ export class QuickConnection {
 			const {
 				node, input, output, slot,
 			} = connectionInfo;
+			if (!input && !output) {
+				return;
+			}
+
+			ctx.save();
+			this.canvas.ds.toCanvasContext(ctx);
+
 			const slotPos = new Float32Array(2);
 
 			const isInput = input ? true : false;
@@ -435,7 +452,7 @@ export class QuickConnection {
 
 				ctx.font = oldFont;
 			}
+			ctx.restore();
 		}
-		ctx.restore();
 	}
 }