From bbde11dfc7ef2c89d825077fa9156e0103becdee Mon Sep 17 00:00:00 2001
From: Jose Luis <josele.96@gmail.com>
Date: Fri, 20 Mar 2026 14:10:53 +0100
Subject: [PATCH] fix: BUS_OUT port and cable visual state reading wrong output
 value

Input port rendering on standard gates and components read srcGate.value
to determine active state, but for multi-output gates (BUS_OUT, COMPONENT)
.value only holds port 0's value. Connections from port N>0 always showed
port 0's state visually despite working correctly at the logic level.

Extract getSourcePortValue() helper that checks outputValues[fromPort]
for multi-output sources, and apply it consistently across all three
input port renderers (drawGate, drawBusGate, drawComponentGate).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/renderer.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/js/renderer.js b/js/renderer.js
index a1b1259..71b12f6 100644
--- a/js/renderer.js
+++ b/js/renderer.js
@@ -7,6 +7,20 @@ import { getBusPairs } from './bus.js';
 
 let canvas, ctx;
 
+/**
+ * Read the value arriving at an input port by looking up the source gate/port.
+ * Handles multi-output sources (BUS_OUT, COMPONENT) via outputValues[].
+ */
+function getSourcePortValue(conn) {
+    if (!conn) return 0;
+    const srcGate = state.gates.find(g => g.id === conn.from);
+    if (!srcGate) return 0;
+    if (srcGate.outputValues && conn.fromPort < srcGate.outputValues.length) {
+        return srcGate.outputValues[conn.fromPort] || 0;
+    }
+    return srcGate.value || 0;
+}
+
 export function initRenderer() {
     canvas = document.getElementById('canvas');
     ctx = canvas.getContext('2d');
@@ -117,7 +131,7 @@ function drawGate(gate) {
             state.hoveredPort.index === p.index &&
             state.hoveredPort.type === 'input';
         const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-        const portActive = conn ? state.gates.find(g => g.id === conn.from)?.value : 0;
+        const portActive = getSourcePortValue(conn);
 
         ctx.beginPath();
         ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
@@ -201,8 +215,7 @@ function drawBusGate(gate) {
                 state.hoveredPort.index === p.index &&
                 state.hoveredPort.type === 'input';
             const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-            const srcGate = conn ? state.gates.find(g => g.id === conn.from) : null;
-            const portActive = srcGate ? (srcGate.outputValues ? (srcGate.outputValues[conn.fromPort] || 0) : srcGate.value) : 0;
+            const portActive = getSourcePortValue(conn);
 
             ctx.beginPath();
             ctx.arc(p.x, p.y, PORT_R - 1, 0, Math.PI * 2);
@@ -351,7 +364,7 @@ function drawComponentGate(gate) {
             state.hoveredPort.index === p.index &&
             state.hoveredPort.type === 'input';
         const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-        const portActive = conn ? state.gates.find(g => g.id === conn.from)?.value : 0;
+        const portActive = getSourcePortValue(conn);
 
         ctx.beginPath();
         ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);