948 lines
32 KiB
HTML
948 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Logic Gates — MontLab</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
background: #0a0a0f;
|
|
color: #e0e0e0;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Toolbar */
|
|
#toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 48px;
|
|
background: #12121a;
|
|
border-bottom: 1px solid #2a2a3a;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 6px;
|
|
z-index: 100;
|
|
}
|
|
#toolbar .logo {
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
color: #00e599;
|
|
margin-right: 12px;
|
|
}
|
|
.gate-btn {
|
|
padding: 5px 12px;
|
|
background: #1a1a2e;
|
|
border: 1px solid #2a2a3a;
|
|
border-radius: 6px;
|
|
color: #ccc;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
transition: all 0.15s;
|
|
user-select: none;
|
|
}
|
|
.gate-btn:hover { background: #252540; border-color: #00e599; color: #fff; }
|
|
.gate-btn.input-btn { border-color: #3388ff; }
|
|
.gate-btn.input-btn:hover { border-color: #55aaff; }
|
|
.gate-btn.output-btn { border-color: #ff8833; }
|
|
.gate-btn.output-btn:hover { border-color: #ffaa55; }
|
|
.separator { width: 1px; height: 24px; background: #2a2a3a; margin: 0 6px; }
|
|
.toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
|
|
.action-btn {
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
color: #888;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
transition: all 0.15s;
|
|
}
|
|
.action-btn:hover { border-color: #ff4444; color: #ff4444; }
|
|
.action-btn.help-btn:hover { border-color: #00e599; color: #00e599; }
|
|
.action-btn.sim-btn { border-color: #ff44aa; color: #ff44aa; }
|
|
.action-btn.sim-btn:hover { background: #ff44aa22; }
|
|
.action-btn.sim-btn.active { background: #ff44aa33; border-color: #ff66cc; color: #ff66cc; }
|
|
|
|
/* Canvas */
|
|
#canvas {
|
|
position: fixed;
|
|
top: 48px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Waveform panel */
|
|
#waveform-panel {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 220px;
|
|
background: #0c0c14;
|
|
border-top: 2px solid #00e599;
|
|
z-index: 90;
|
|
flex-direction: column;
|
|
}
|
|
#waveform-panel.visible { display: flex; }
|
|
|
|
#wave-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
gap: 8px;
|
|
background: #10101a;
|
|
border-bottom: 1px solid #1a1a2a;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
}
|
|
#wave-toolbar span.wave-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #00e599;
|
|
margin-right: 8px;
|
|
}
|
|
.wave-btn {
|
|
padding: 3px 10px;
|
|
background: #1a1a2e;
|
|
border: 1px solid #2a2a3a;
|
|
border-radius: 4px;
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
transition: all 0.15s;
|
|
}
|
|
.wave-btn:hover { border-color: #00e599; color: #fff; }
|
|
.wave-btn.active { background: #00e59933; border-color: #00e599; color: #00e599; }
|
|
.wave-btn.record { border-color: #ff4444; }
|
|
.wave-btn.record.active { background: #ff444433; border-color: #ff4444; color: #ff4444; }
|
|
.wave-info {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
color: #555;
|
|
}
|
|
|
|
#wave-container {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#wave-labels {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
background: #0e0e18;
|
|
border-right: 1px solid #1a1a2a;
|
|
}
|
|
.wave-label {
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid #111;
|
|
color: #888;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.wave-label.input-label { color: #3388ff; }
|
|
.wave-label.output-label { color: #ff8833; }
|
|
.wave-label.gate-label { color: #00e599; }
|
|
|
|
#wave-canvas {
|
|
flex: 1;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
/* Help modal */
|
|
#help-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.7);
|
|
z-index: 200;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#help-modal.visible { display: flex; }
|
|
#help-content {
|
|
background: #12121a;
|
|
border: 1px solid #2a2a3a;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 520px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
#help-content h2 { color: #00e599; margin-bottom: 12px; font-size: 18px; }
|
|
#help-content h3 { color: #ff44aa; margin: 12px 0 8px; font-size: 14px; }
|
|
#help-content p, #help-content li {
|
|
color: #aaa; font-size: 13px; line-height: 1.5; margin-bottom: 6px;
|
|
}
|
|
#help-content ul { padding-left: 20px; }
|
|
#help-content kbd {
|
|
background: #1a1a2e;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-size: 11px;
|
|
color: #ddd;
|
|
}
|
|
#help-close {
|
|
margin-top: 12px;
|
|
padding: 6px 18px;
|
|
background: #00e599;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: #000;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Resize handle */
|
|
#wave-resize {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8px;
|
|
cursor: ns-resize;
|
|
z-index: 91;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toolbar">
|
|
<span class="logo">⚡ Logic Lab</span>
|
|
<button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
|
|
<button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
|
|
<div class="separator"></div>
|
|
<button class="gate-btn" data-gate="AND">AND</button>
|
|
<button class="gate-btn" data-gate="OR">OR</button>
|
|
<button class="gate-btn" data-gate="NOT">NOT</button>
|
|
<button class="gate-btn" data-gate="NAND">NAND</button>
|
|
<button class="gate-btn" data-gate="NOR">NOR</button>
|
|
<button class="gate-btn" data-gate="XOR">XOR</button>
|
|
<div class="separator"></div>
|
|
<button class="action-btn sim-btn" id="sim-btn">📊 Waveform</button>
|
|
<div class="toolbar-right">
|
|
<button class="action-btn help-btn" id="help-btn">? Help</button>
|
|
<button class="action-btn" id="clear-btn">Clear All</button>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="canvas"></canvas>
|
|
|
|
<div id="waveform-panel">
|
|
<div id="wave-resize"></div>
|
|
<div id="wave-toolbar">
|
|
<span class="wave-title">📊 Waveform Viewer</span>
|
|
<button class="wave-btn record active" id="wave-record">⏺ Record</button>
|
|
<button class="wave-btn" id="wave-clear">Clear</button>
|
|
<button class="wave-btn" id="wave-step">Step ▶</button>
|
|
<button class="wave-btn" id="wave-zoom-in">Zoom +</button>
|
|
<button class="wave-btn" id="wave-zoom-out">Zoom -</button>
|
|
<span class="wave-info" id="wave-info">T=0 | 0 samples</span>
|
|
</div>
|
|
<div id="wave-container">
|
|
<div id="wave-labels"></div>
|
|
<canvas id="wave-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="help-modal">
|
|
<div id="help-content">
|
|
<h2>Logic Gate Simulator</h2>
|
|
<ul>
|
|
<li>Click a gate button, then click on the canvas to place it</li>
|
|
<li>Drag gates to move them around</li>
|
|
<li>Click on an <strong>output port</strong> (right), then an <strong>input port</strong> (left) to connect</li>
|
|
<li>Click an <kbd>INPUT</kbd> gate to toggle its value (0/1)</li>
|
|
<li><kbd>Delete</kbd> while hovering a gate to remove it</li>
|
|
<li>Right-click a port to delete its connections</li>
|
|
<li><kbd>Escape</kbd> to cancel placing/connecting</li>
|
|
</ul>
|
|
<h3>Waveform Viewer (GTKWave-style)</h3>
|
|
<ul>
|
|
<li>Click <kbd>📊 Waveform</kbd> to toggle the signal viewer</li>
|
|
<li><kbd>⏺ Record</kbd> captures signal changes automatically</li>
|
|
<li><kbd>Step ▶</kbd> manually advances one time step</li>
|
|
<li>Toggle inputs to see signals change in real-time</li>
|
|
<li>Drag the top border to resize the panel</li>
|
|
<li>All INPUT, OUTPUT, and gate signals are tracked</li>
|
|
</ul>
|
|
<p style="margin-top: 12px; color: #666;">Built with ❤️ at MontLab</p>
|
|
<button id="help-close">Got it</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// State
|
|
let gates = [];
|
|
let connections = [];
|
|
let placingGate = null;
|
|
let dragging = null;
|
|
let dragOffset = { x: 0, y: 0 };
|
|
let connecting = null;
|
|
let hoveredGate = null;
|
|
let hoveredPort = null;
|
|
let mouseX = 0, mouseY = 0;
|
|
let nextId = 1;
|
|
|
|
// Gate definitions
|
|
const GATE_W = 100, GATE_H = 60;
|
|
const PORT_R = 7;
|
|
const GATE_COLORS = {
|
|
AND: '#00e599', OR: '#3388ff', NOT: '#ff6644',
|
|
NAND: '#e5cc00', NOR: '#cc44ff', XOR: '#ff44aa',
|
|
INPUT: '#3388ff', OUTPUT: '#ff8833'
|
|
};
|
|
|
|
const SIGNAL_COLORS = [
|
|
'#00e599', '#3388ff', '#ff6644', '#e5cc00',
|
|
'#cc44ff', '#ff44aa', '#ff8833', '#44ddff',
|
|
'#88ff44', '#ff4488', '#44ffaa', '#ffaa44'
|
|
];
|
|
|
|
// Waveform state
|
|
let waveformVisible = false;
|
|
let waveformHeight = 220;
|
|
let recording = true;
|
|
let waveData = {}; // { gateId: [{ t, value }] }
|
|
let timeStep = 0;
|
|
let waveZoom = 20; // pixels per time step
|
|
let waveScroll = 0;
|
|
let resizingWave = false;
|
|
|
|
function gateInputCount(type) {
|
|
if (type === 'NOT' || type === 'INPUT' || type === 'OUTPUT') return type === 'INPUT' ? 0 : 1;
|
|
return 2;
|
|
}
|
|
function gateOutputCount(type) {
|
|
return type === 'OUTPUT' ? 0 : 1;
|
|
}
|
|
|
|
function evaluate(gate, visited = new Set()) {
|
|
if (visited.has(gate.id)) return gate.value || 0;
|
|
visited.add(gate.id);
|
|
if (gate.type === 'INPUT') return gate.value;
|
|
|
|
const inputCount = gateInputCount(gate.type);
|
|
const inputs = [];
|
|
for (let i = 0; i < inputCount; i++) {
|
|
const conn = connections.find(c => c.to === gate.id && c.toPort === i);
|
|
if (conn) {
|
|
const srcGate = gates.find(g => g.id === conn.from);
|
|
inputs.push(srcGate ? evaluate(srcGate, visited) : 0);
|
|
} else {
|
|
inputs.push(0);
|
|
}
|
|
}
|
|
|
|
let result = 0;
|
|
switch (gate.type) {
|
|
case 'AND': result = (inputs[0] && inputs[1]) ? 1 : 0; break;
|
|
case 'OR': result = (inputs[0] || inputs[1]) ? 1 : 0; break;
|
|
case 'NOT': result = inputs[0] ? 0 : 1; break;
|
|
case 'NAND': result = (inputs[0] && inputs[1]) ? 0 : 1; break;
|
|
case 'NOR': result = (inputs[0] || inputs[1]) ? 0 : 1; break;
|
|
case 'XOR': result = (inputs[0] !== inputs[1]) ? 1 : 0; break;
|
|
case 'OUTPUT': result = inputs[0] || 0; break;
|
|
}
|
|
gate.value = result;
|
|
return result;
|
|
}
|
|
|
|
function evaluateAll() {
|
|
gates.forEach(g => { if (g.type !== 'INPUT') g.value = 0; });
|
|
gates.forEach(g => evaluate(g));
|
|
if (recording && waveformVisible) recordSample();
|
|
}
|
|
|
|
// ==================== WAVEFORM ====================
|
|
function recordSample() {
|
|
const changed = gates.some(g => {
|
|
const data = waveData[g.id];
|
|
if (!data || data.length === 0) return true;
|
|
return data[data.length - 1].value !== g.value;
|
|
});
|
|
|
|
if (!changed && timeStep > 0) return;
|
|
|
|
timeStep++;
|
|
gates.forEach(g => {
|
|
if (!waveData[g.id]) waveData[g.id] = [];
|
|
const arr = waveData[g.id];
|
|
// Only record if value changed or first sample
|
|
if (arr.length === 0 || arr[arr.length - 1].value !== g.value) {
|
|
arr.push({ t: timeStep, value: g.value });
|
|
}
|
|
});
|
|
updateWaveInfo();
|
|
}
|
|
|
|
function manualStep() {
|
|
timeStep++;
|
|
gates.forEach(g => {
|
|
if (!waveData[g.id]) waveData[g.id] = [];
|
|
waveData[g.id].push({ t: timeStep, value: g.value });
|
|
});
|
|
updateWaveInfo();
|
|
}
|
|
|
|
function updateWaveInfo() {
|
|
const totalSamples = Object.values(waveData).reduce((sum, arr) => sum + arr.length, 0);
|
|
document.getElementById('wave-info').textContent = `T=${timeStep} | ${totalSamples} samples`;
|
|
}
|
|
|
|
function getTrackedGates() {
|
|
// Order: inputs first, then gates, then outputs
|
|
const inputs = gates.filter(g => g.type === 'INPUT');
|
|
const outputs = gates.filter(g => g.type === 'OUTPUT');
|
|
const logic = gates.filter(g => g.type !== 'INPUT' && g.type !== 'OUTPUT');
|
|
return [...inputs, ...logic, ...outputs];
|
|
}
|
|
|
|
function getGateLabel(gate) {
|
|
const sameType = gates.filter(g => g.type === gate.type);
|
|
const idx = sameType.indexOf(gate);
|
|
if (gate.type === 'INPUT') return `IN_${idx}`;
|
|
if (gate.type === 'OUTPUT') return `OUT_${idx}`;
|
|
return `${gate.type}_${idx}`;
|
|
}
|
|
|
|
function drawWaveLabels() {
|
|
const labelsEl = document.getElementById('wave-labels');
|
|
labelsEl.innerHTML = '';
|
|
const tracked = getTrackedGates();
|
|
tracked.forEach((gate, i) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'wave-label';
|
|
if (gate.type === 'INPUT') div.classList.add('input-label');
|
|
else if (gate.type === 'OUTPUT') div.classList.add('output-label');
|
|
else div.classList.add('gate-label');
|
|
div.textContent = getGateLabel(gate);
|
|
div.style.color = SIGNAL_COLORS[i % SIGNAL_COLORS.length];
|
|
labelsEl.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function drawWaveforms() {
|
|
const wc = document.getElementById('wave-canvas');
|
|
const wctx = wc.getContext('2d');
|
|
const container = document.getElementById('wave-container');
|
|
|
|
wc.width = container.clientWidth - 100;
|
|
wc.height = container.clientHeight;
|
|
|
|
wctx.fillStyle = '#0c0c14';
|
|
wctx.fillRect(0, 0, wc.width, wc.height);
|
|
|
|
const tracked = getTrackedGates();
|
|
const rowH = 30;
|
|
const sigH = 20;
|
|
const margin = (rowH - sigH) / 2;
|
|
|
|
if (timeStep === 0) {
|
|
wctx.fillStyle = '#333';
|
|
wctx.font = '12px "Segoe UI", system-ui';
|
|
wctx.textAlign = 'center';
|
|
wctx.fillText('Toggle inputs to record signals...', wc.width / 2, wc.height / 2);
|
|
return;
|
|
}
|
|
|
|
// Auto-scroll to show latest
|
|
const maxVisible = Math.floor(wc.width / waveZoom);
|
|
if (timeStep > maxVisible) {
|
|
waveScroll = timeStep - maxVisible;
|
|
}
|
|
|
|
// Draw time grid
|
|
wctx.strokeStyle = '#151520';
|
|
wctx.lineWidth = 1;
|
|
for (let t = Math.ceil(waveScroll); t <= timeStep; t++) {
|
|
const x = (t - waveScroll) * waveZoom;
|
|
if (x < 0 || x > wc.width) continue;
|
|
wctx.beginPath();
|
|
wctx.moveTo(x, 0);
|
|
wctx.lineTo(x, wc.height);
|
|
wctx.stroke();
|
|
|
|
// Time labels
|
|
if (t % 5 === 0 || waveZoom > 30) {
|
|
wctx.fillStyle = '#333';
|
|
wctx.font = '9px monospace';
|
|
wctx.textAlign = 'center';
|
|
wctx.fillText(`${t}`, x, 10);
|
|
}
|
|
}
|
|
|
|
// Row dividers
|
|
tracked.forEach((_, i) => {
|
|
const y = i * rowH + rowH;
|
|
wctx.strokeStyle = '#111118';
|
|
wctx.beginPath();
|
|
wctx.moveTo(0, y);
|
|
wctx.lineTo(wc.width, y);
|
|
wctx.stroke();
|
|
});
|
|
|
|
// Draw signals
|
|
tracked.forEach((gate, i) => {
|
|
const data = waveData[gate.id] || [];
|
|
if (data.length === 0) return;
|
|
|
|
const color = SIGNAL_COLORS[i % SIGNAL_COLORS.length];
|
|
const y0 = i * rowH + margin;
|
|
const yHigh = y0 + 2;
|
|
const yLow = y0 + sigH;
|
|
|
|
wctx.strokeStyle = color;
|
|
wctx.lineWidth = 1.5;
|
|
wctx.beginPath();
|
|
|
|
let lastVal = 0;
|
|
let lastX = 0;
|
|
let started = false;
|
|
|
|
// Build complete signal timeline
|
|
const timeline = [];
|
|
for (let t = 1; t <= timeStep; t++) {
|
|
const sample = data.filter(s => s.t <= t).pop();
|
|
timeline.push(sample ? sample.value : 0);
|
|
}
|
|
|
|
for (let t = 0; t < timeline.length; t++) {
|
|
const x = (t + 1 - waveScroll) * waveZoom;
|
|
const val = timeline[t];
|
|
const y = val ? yHigh : yLow;
|
|
|
|
if (!started) {
|
|
wctx.moveTo(x, y);
|
|
started = true;
|
|
} else {
|
|
// Vertical transition
|
|
if (val !== lastVal) {
|
|
wctx.lineTo(x, lastVal ? yHigh : yLow);
|
|
wctx.lineTo(x, y);
|
|
}
|
|
wctx.lineTo(x + waveZoom, y);
|
|
}
|
|
lastVal = val;
|
|
lastX = x + waveZoom;
|
|
}
|
|
|
|
wctx.stroke();
|
|
|
|
// Fill area under signal
|
|
wctx.globalAlpha = 0.08;
|
|
wctx.fillStyle = color;
|
|
// Simple fill
|
|
for (let t = 0; t < timeline.length; t++) {
|
|
const x = (t + 1 - waveScroll) * waveZoom;
|
|
if (timeline[t]) {
|
|
wctx.fillRect(x, yHigh, waveZoom, sigH);
|
|
}
|
|
}
|
|
wctx.globalAlpha = 1;
|
|
});
|
|
|
|
// Cursor line at current time
|
|
const cursorX = (timeStep - waveScroll) * waveZoom;
|
|
if (cursorX >= 0 && cursorX <= wc.width) {
|
|
wctx.strokeStyle = '#00e59966';
|
|
wctx.lineWidth = 1;
|
|
wctx.setLineDash([4, 3]);
|
|
wctx.beginPath();
|
|
wctx.moveTo(cursorX, 0);
|
|
wctx.lineTo(cursorX, wc.height);
|
|
wctx.stroke();
|
|
wctx.setLineDash([]);
|
|
}
|
|
}
|
|
|
|
// ==================== DRAWING ====================
|
|
function getInputPorts(gate) {
|
|
const count = gateInputCount(gate.type);
|
|
const ports = [];
|
|
for (let i = 0; i < count; i++) {
|
|
const spacing = GATE_H / (count + 1);
|
|
ports.push({ x: gate.x, y: gate.y + spacing * (i + 1), index: i, type: 'input' });
|
|
}
|
|
return ports;
|
|
}
|
|
|
|
function getOutputPorts(gate) {
|
|
const count = gateOutputCount(gate.type);
|
|
const ports = [];
|
|
for (let i = 0; i < count; i++) {
|
|
ports.push({ x: gate.x + GATE_W, y: gate.y + GATE_H / 2, index: i, type: 'output' });
|
|
}
|
|
return ports;
|
|
}
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
const waveH = waveformVisible ? waveformHeight : 0;
|
|
canvas.height = window.innerHeight - 48 - waveH;
|
|
}
|
|
window.addEventListener('resize', resize);
|
|
resize();
|
|
|
|
function drawGate(gate) {
|
|
const color = GATE_COLORS[gate.type];
|
|
const isHovered = hoveredGate === gate;
|
|
const isActive = gate.value === 1;
|
|
|
|
if (isActive) {
|
|
ctx.shadowColor = color;
|
|
ctx.shadowBlur = 20;
|
|
}
|
|
|
|
ctx.fillStyle = isActive ? color + '22' : '#14141e';
|
|
ctx.strokeStyle = isHovered ? '#fff' : color;
|
|
ctx.lineWidth = isHovered ? 2.5 : 1.5;
|
|
|
|
ctx.beginPath();
|
|
ctx.roundRect(gate.x, gate.y, GATE_W, GATE_H, 8);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.shadowBlur = 0;
|
|
|
|
// Label
|
|
ctx.fillStyle = isActive ? '#fff' : color;
|
|
ctx.font = 'bold 14px "Segoe UI", system-ui, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
|
|
const label = getGateLabel(gate);
|
|
ctx.fillText(gate.type, gate.x + GATE_W / 2, gate.y + GATE_H / 2 - (gate.type === 'INPUT' || gate.type === 'OUTPUT' ? 8 : 0));
|
|
|
|
// Small ID label
|
|
ctx.font = '9px monospace';
|
|
ctx.fillStyle = '#444';
|
|
ctx.fillText(label, gate.x + GATE_W / 2, gate.y + GATE_H - 6);
|
|
|
|
// Value for INPUT/OUTPUT
|
|
if (gate.type === 'INPUT' || gate.type === 'OUTPUT') {
|
|
ctx.font = 'bold 16px monospace';
|
|
ctx.fillStyle = gate.value ? '#00ff88' : '#ff4444';
|
|
ctx.fillText(gate.value ? '1' : '0', gate.x + GATE_W / 2, gate.y + GATE_H / 2 + 10);
|
|
}
|
|
|
|
// Ports
|
|
getInputPorts(gate).forEach(p => {
|
|
const isPortHovered = hoveredPort && hoveredPort.gate === gate && hoveredPort.index === p.index && hoveredPort.type === 'input';
|
|
const conn = connections.find(c => c.to === gate.id && c.toPort === p.index);
|
|
const portActive = conn ? gates.find(g => g.id === conn.from)?.value : 0;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
|
|
ctx.fillStyle = isPortHovered ? '#fff' : (portActive ? '#00ff88' : '#1a1a2e');
|
|
ctx.fill();
|
|
ctx.strokeStyle = isPortHovered ? '#fff' : '#555';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
});
|
|
|
|
getOutputPorts(gate).forEach(p => {
|
|
const isPortHovered = hoveredPort && hoveredPort.gate === gate && hoveredPort.index === p.index && hoveredPort.type === 'output';
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
|
|
ctx.fillStyle = isPortHovered ? '#fff' : (gate.value ? '#00ff88' : '#1a1a2e');
|
|
ctx.fill();
|
|
ctx.strokeStyle = isPortHovered ? '#fff' : '#555';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
});
|
|
}
|
|
|
|
function drawConnection(conn) {
|
|
const fromGate = gates.find(g => g.id === conn.from);
|
|
const toGate = gates.find(g => g.id === conn.to);
|
|
if (!fromGate || !toGate) return;
|
|
|
|
const fromPort = getOutputPorts(fromGate)[conn.fromPort];
|
|
const toPort = getInputPorts(toGate)[conn.toPort];
|
|
if (!fromPort || !toPort) return;
|
|
|
|
const active = fromGate.value === 1;
|
|
const midX = (fromPort.x + toPort.x) / 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(fromPort.x, fromPort.y);
|
|
ctx.bezierCurveTo(midX, fromPort.y, midX, toPort.y, toPort.x, toPort.y);
|
|
ctx.strokeStyle = active ? '#00ff88' : '#333';
|
|
ctx.lineWidth = active ? 2.5 : 1.5;
|
|
ctx.stroke();
|
|
|
|
if (active) {
|
|
ctx.strokeStyle = '#00ff8844';
|
|
ctx.lineWidth = 6;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Grid
|
|
ctx.strokeStyle = '#111118';
|
|
ctx.lineWidth = 1;
|
|
for (let x = 0; x < canvas.width; x += 40) {
|
|
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
|
|
}
|
|
for (let y = 0; y < canvas.height; y += 40) {
|
|
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
|
|
}
|
|
|
|
connections.forEach(drawConnection);
|
|
gates.forEach(drawGate);
|
|
|
|
// Drawing connection wire
|
|
if (connecting) {
|
|
const gate = connecting.gate;
|
|
const port = connecting.portType === 'output'
|
|
? getOutputPorts(gate)[connecting.portIndex]
|
|
: getInputPorts(gate)[connecting.portIndex];
|
|
if (port) {
|
|
const midX = (port.x + mouseX) / 2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(port.x, port.y);
|
|
ctx.bezierCurveTo(midX, port.y, midX, mouseY, mouseX, mouseY);
|
|
ctx.strokeStyle = '#00e59988';
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash([6, 4]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
}
|
|
|
|
// Placing ghost
|
|
if (placingGate) {
|
|
ctx.globalAlpha = 0.5;
|
|
const ghost = { x: mouseX - GATE_W/2, y: mouseY - GATE_H/2, type: placingGate, value: 0, id: -1 };
|
|
drawGate(ghost);
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
|
|
// Draw waveform
|
|
if (waveformVisible) {
|
|
drawWaveLabels();
|
|
drawWaveforms();
|
|
}
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
function findGateAt(x, y) {
|
|
return gates.find(g => x >= g.x && x <= g.x + GATE_W && y >= g.y && y <= g.y + GATE_H);
|
|
}
|
|
|
|
function findPortAt(x, y) {
|
|
for (const gate of gates) {
|
|
for (const p of getInputPorts(gate)) {
|
|
if (Math.hypot(x - p.x, y - p.y) < PORT_R + 4) return { gate, index: p.index, type: 'input' };
|
|
}
|
|
for (const p of getOutputPorts(gate)) {
|
|
if (Math.hypot(x - p.x, y - p.y) < PORT_R + 4) return { gate, index: p.index, type: 'output' };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// ==================== EVENTS ====================
|
|
canvas.addEventListener('mousemove', e => {
|
|
mouseX = e.offsetX;
|
|
mouseY = e.offsetY;
|
|
hoveredPort = findPortAt(mouseX, mouseY);
|
|
hoveredGate = hoveredPort ? hoveredPort.gate : findGateAt(mouseX, mouseY);
|
|
|
|
if (dragging) {
|
|
dragging.x = mouseX - dragOffset.x;
|
|
dragging.y = mouseY - dragOffset.y;
|
|
evaluateAll();
|
|
}
|
|
|
|
canvas.style.cursor = placingGate ? 'crosshair'
|
|
: hoveredPort ? 'pointer'
|
|
: hoveredGate ? 'grab'
|
|
: 'default';
|
|
});
|
|
|
|
canvas.addEventListener('mousedown', e => {
|
|
if (e.button !== 0) return;
|
|
const x = e.offsetX, y = e.offsetY;
|
|
|
|
if (placingGate) {
|
|
gates.push({ id: nextId++, type: placingGate, x: x - GATE_W / 2, y: y - GATE_H / 2, value: 0 });
|
|
evaluateAll();
|
|
placingGate = null;
|
|
return;
|
|
}
|
|
|
|
const port = findPortAt(x, y);
|
|
if (port) {
|
|
if (connecting) {
|
|
if (connecting.portType === 'output' && port.type === 'input') {
|
|
connections = connections.filter(c => !(c.to === port.gate.id && c.toPort === port.index));
|
|
connections.push({ from: connecting.gate.id, fromPort: connecting.portIndex, to: port.gate.id, toPort: port.index });
|
|
evaluateAll();
|
|
} else if (connecting.portType === 'input' && port.type === 'output') {
|
|
connections = connections.filter(c => !(c.to === connecting.gate.id && c.toPort === connecting.portIndex));
|
|
connections.push({ from: port.gate.id, fromPort: port.index, to: connecting.gate.id, toPort: connecting.portIndex });
|
|
evaluateAll();
|
|
}
|
|
connecting = null;
|
|
} else {
|
|
connecting = { gate: port.gate, portIndex: port.index, portType: port.type };
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (connecting) { connecting = null; return; }
|
|
|
|
const gate = findGateAt(x, y);
|
|
if (gate && gate.type === 'INPUT') {
|
|
gate.value = gate.value ? 0 : 1;
|
|
evaluateAll();
|
|
return;
|
|
}
|
|
|
|
if (gate) {
|
|
dragging = gate;
|
|
dragOffset = { x: x - gate.x, y: y - gate.y };
|
|
canvas.style.cursor = 'grabbing';
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener('mouseup', () => { dragging = null; });
|
|
|
|
canvas.addEventListener('contextmenu', e => {
|
|
e.preventDefault();
|
|
const x = e.offsetX, y = e.offsetY;
|
|
const port = findPortAt(x, y);
|
|
if (port && port.type === 'input') {
|
|
connections = connections.filter(c => !(c.to === port.gate.id && c.toPort === port.index));
|
|
evaluateAll();
|
|
} else if (port && port.type === 'output') {
|
|
connections = connections.filter(c => !(c.from === port.gate.id && c.fromPort === port.index));
|
|
evaluateAll();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
if (hoveredGate && document.activeElement === document.body) {
|
|
e.preventDefault();
|
|
const gateId = hoveredGate.id;
|
|
connections = connections.filter(c => c.from !== gateId && c.to !== gateId);
|
|
gates = gates.filter(g => g.id !== gateId);
|
|
delete waveData[gateId];
|
|
hoveredGate = null;
|
|
evaluateAll();
|
|
}
|
|
}
|
|
if (e.key === 'Escape') { placingGate = null; connecting = null; }
|
|
});
|
|
|
|
// Toolbar
|
|
document.querySelectorAll('.gate-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => { placingGate = btn.dataset.gate; });
|
|
});
|
|
|
|
document.getElementById('clear-btn').addEventListener('click', () => {
|
|
if (gates.length === 0 || confirm('Clear all gates and connections?')) {
|
|
gates = [];
|
|
connections = [];
|
|
connecting = null;
|
|
placingGate = null;
|
|
waveData = {};
|
|
timeStep = 0;
|
|
updateWaveInfo();
|
|
}
|
|
});
|
|
|
|
// Help
|
|
document.getElementById('help-btn').addEventListener('click', () => {
|
|
document.getElementById('help-modal').classList.add('visible');
|
|
});
|
|
document.getElementById('help-close').addEventListener('click', () => {
|
|
document.getElementById('help-modal').classList.remove('visible');
|
|
});
|
|
document.getElementById('help-modal').addEventListener('click', e => {
|
|
if (e.target === e.currentTarget) document.getElementById('help-modal').classList.remove('visible');
|
|
});
|
|
|
|
// Waveform toggle
|
|
document.getElementById('sim-btn').addEventListener('click', () => {
|
|
waveformVisible = !waveformVisible;
|
|
document.getElementById('waveform-panel').classList.toggle('visible', waveformVisible);
|
|
document.getElementById('sim-btn').classList.toggle('active', waveformVisible);
|
|
resize();
|
|
});
|
|
|
|
// Waveform controls
|
|
document.getElementById('wave-record').addEventListener('click', function() {
|
|
recording = !recording;
|
|
this.classList.toggle('active', recording);
|
|
this.textContent = recording ? '⏺ Record' : '⏸ Paused';
|
|
});
|
|
|
|
document.getElementById('wave-clear').addEventListener('click', () => {
|
|
waveData = {};
|
|
timeStep = 0;
|
|
waveScroll = 0;
|
|
updateWaveInfo();
|
|
});
|
|
|
|
document.getElementById('wave-step').addEventListener('click', () => {
|
|
manualStep();
|
|
});
|
|
|
|
document.getElementById('wave-zoom-in').addEventListener('click', () => {
|
|
waveZoom = Math.min(60, waveZoom + 5);
|
|
});
|
|
|
|
document.getElementById('wave-zoom-out').addEventListener('click', () => {
|
|
waveZoom = Math.max(5, waveZoom - 5);
|
|
});
|
|
|
|
// Resize waveform panel
|
|
const resizeHandle = document.getElementById('wave-resize');
|
|
resizeHandle.addEventListener('mousedown', e => {
|
|
resizingWave = true;
|
|
e.preventDefault();
|
|
});
|
|
document.addEventListener('mousemove', e => {
|
|
if (resizingWave) {
|
|
waveformHeight = Math.max(100, Math.min(500, window.innerHeight - e.clientY));
|
|
document.getElementById('waveform-panel').style.height = waveformHeight + 'px';
|
|
resize();
|
|
}
|
|
});
|
|
document.addEventListener('mouseup', () => { resizingWave = false; });
|
|
|
|
// Start
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!-- v2 -->
|