Fixes for subgraph page #24

Author: niknah

.eslintrc.js

@@ -15,5 +15,7 @@ module.exports = {
 		'no-tabs': 'off',
 		'import/extensions': 'off',
 		'prefer-rest-params': 'off', // allow use of arguments
+		'no-continue': 'off',
+		'no-restricted-syntax': 'off',
 	},
 };

README.md

@@ -28,5 +28,6 @@ python -m http.server
 
 ## Changelog
 
+2025-07-15 v1.0.17: Draw connections in subgraph mode.  https://github.com/niknah/quick-connections/issues/24
 2025-07-04 v1.0.16: Problem with the enable/disable toggle not working.  https://github.com/niknah/quick-connections/issues/19
 2024-11-03: It defaults to mostly 90 or 45 degree lines now.  This can be changed in the options back to the old way(connect any angle when nothing is blocking).

docs/CircuitBoardLines.js

@@ -18,6 +18,7 @@
 const EPSILON = 1e-6;
 const INSIDE = 1;
 const OUTSIDE = 0;
+
 function clipT(num, denom, c) {
 	/* eslint-disable one-var,no-param-reassign,prefer-destructuring,operator-linebreak */
 	/* eslint-disable one-var-declaration-per-line,nonblock-statement-body-position,curly */
@@ -828,14 +829,90 @@ export class CircuitBoardLines {
 			return false;
 		}
 
-		this.recalcMapLinksCheck();
+		try {
+			this.recalcMapLinksCheck();
+
+			this.mapLinks.drawLinks(ctx);
 
-		this.mapLinks.drawLinks(ctx);
-		this.lastDrawConnections = new Date().getTime();
+			if (this.canvas.subgraph) {
+				this.drawSubgraphConnections(ctx, this.canvas.graph, this.canvas.subgraph);
+			}
+		} catch(e) {
+			console.error('drawConnections crash', e);
+		} finally {
+			this.lastDrawConnections = new Date().getTime();
+		}
 
 		return true;
 	}
 
+	drawSubgraphConnections(
+		ctx,
+		graph,
+		subgraph,
+	) {
+		for (const output of subgraph.inputNode.slots) { // eslint-disable-line no-restricted-syntax
+			if (!output.linkIds.length) {
+				continue;
+			}
+
+			// find link info
+			for (const linkId of output.linkIds) { // eslint-disable-line no-restricted-syntax
+				const resolved = LiteGraph.LLink.resolve(linkId, graph);
+				if (!resolved) continue;
+
+				const { link, inputNode, input } = resolved;
+				if (!inputNode || !input)
+					continue;
+
+				const endPos = inputNode.getInputPos(link.target_slot);
+
+				const startDir = input.dir || LiteGraph.RIGHT;
+				const endDir = input.dir || LiteGraph.LEFT;
+
+				this.canvas.renderLink(
+					ctx,
+					output.pos,
+					endPos,
+					link,
+					false,
+					0,
+					null,
+					startDir,
+					endDir,
+				);
+			}
+		}
+
+		for (const input of subgraph.outputNode.slots) { // eslint-disable-line no-restricted-syntax
+			if (!input.linkIds.length) continue;
+
+			// find link info
+			const resolved = LiteGraph.LLink.resolve(input.linkIds[0], graph);
+			if (!resolved) continue;
+
+			const { link, outputNode, output } = resolved;
+			if (!outputNode || !output) continue;
+
+			const startPos = outputNode.getOutputPos(link.origin_slot);
+
+			const startDir = output.dir || LiteGraph.RIGHT;
+			const endDir = input.dir || LiteGraph.LEFT;
+
+			this.canvas.renderLink(
+				ctx,
+				startPos,
+				input.pos,
+				link,
+				false,
+				0,
+				null,
+				startDir,
+				endDir,
+			);
+		}
+	}
+
 	init() {
 		const oldDrawConnections = LGraphCanvas.prototype.drawConnections;
 		const t = this;

js/CircuitBoardLines.js

@@ -18,6 +18,7 @@
 const EPSILON = 1e-6;
 const INSIDE = 1;
 const OUTSIDE = 0;
+
 function clipT(num, denom, c) {
 	/* eslint-disable one-var,no-param-reassign,prefer-destructuring,operator-linebreak */
 	/* eslint-disable one-var-declaration-per-line,nonblock-statement-body-position,curly */
@@ -828,14 +829,88 @@ export class CircuitBoardLines {
 			return false;
 		}
 
-		this.recalcMapLinksCheck();
+		try {
+			this.recalcMapLinksCheck();
+
+			this.mapLinks.drawLinks(ctx);
 
-		this.mapLinks.drawLinks(ctx);
-		this.lastDrawConnections = new Date().getTime();
+			if (this.canvas.subgraph) {
+				this.drawSubgraphConnections(ctx, this.canvas.graph, this.canvas.subgraph);
+			}
+		} finally {
+			this.lastDrawConnections = new Date().getTime();
+		}
 
 		return true;
 	}
 
+	drawSubgraphConnections(
+		ctx,
+		graph,
+		subgraph,
+	) {
+		for (const output of subgraph.inputNode.slots) { // eslint-disable-line no-restricted-syntax
+			if (!output.linkIds.length) {
+				continue;
+			}
+
+			// find link info
+			for (const linkId of output.linkIds) { // eslint-disable-line no-restricted-syntax
+				const resolved = LiteGraph.LLink.resolve(linkId, graph);
+				if (!resolved) continue;
+
+				const { link, inputNode, input } = resolved;
+				if (!inputNode || !input)
+					continue;
+
+				const endPos = inputNode.getInputPos(link.target_slot);
+
+				const startDir = input.dir || LiteGraph.RIGHT;
+				const endDir = input.dir || LiteGraph.LEFT;
+
+				this.canvas.renderLink(
+					ctx,
+					output.pos,
+					endPos,
+					link,
+					false,
+					0,
+					null,
+					startDir,
+					endDir,
+				);
+			}
+		}
+
+		for (const input of subgraph.outputNode.slots) { // eslint-disable-line no-restricted-syntax
+			if (!input.linkIds.length) continue;
+
+			// find link info
+			const resolved = LiteGraph.LLink.resolve(input.linkIds[0], graph);
+			if (!resolved) continue;
+
+			const { link, outputNode, output } = resolved;
+			if (!outputNode || !output) continue;
+
+			const startPos = outputNode.getOutputPos(link.origin_slot);
+
+			const startDir = output.dir || LiteGraph.RIGHT;
+			const endDir = input.dir || LiteGraph.LEFT;
+
+			this.canvas.renderLink(
+				ctx,
+				startPos,
+				input.pos,
+				link,
+				false,
+				0,
+				null,
+				startDir,
+				endDir,
+			);
+		}
+	}
+
 	init() {
 		const oldDrawConnections = LGraphCanvas.prototype.drawConnections;
 		const t = this;

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "quick-connections"
 description = "Quick connections, Circuit board connections"
-version = "1.0.17"
+version = "1.0.18"
 license = {text = "MIT License"}
 
 [project.urls]