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>
This commit is contained in:
Jose Luis
2026-03-20 14:10:53 +01:00
parent a1cc631406
commit bbde11dfc7

View File

@@ -7,6 +7,20 @@ import { getBusPairs } from './bus.js';
let canvas, ctx; 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() { export function initRenderer() {
canvas = document.getElementById('canvas'); canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
@@ -117,7 +131,7 @@ function drawGate(gate) {
state.hoveredPort.index === p.index && state.hoveredPort.index === p.index &&
state.hoveredPort.type === 'input'; state.hoveredPort.type === 'input';
const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index); 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.beginPath();
ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2); 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.index === p.index &&
state.hoveredPort.type === 'input'; state.hoveredPort.type === 'input';
const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index); 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 = getSourcePortValue(conn);
const portActive = srcGate ? (srcGate.outputValues ? (srcGate.outputValues[conn.fromPort] || 0) : srcGate.value) : 0;
ctx.beginPath(); ctx.beginPath();
ctx.arc(p.x, p.y, PORT_R - 1, 0, Math.PI * 2); 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.index === p.index &&
state.hoveredPort.type === 'input'; state.hoveredPort.type === 'input';
const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index); 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.beginPath();
ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2); ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);