alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Updates to canvas of logic gate simulator:
All checks were successful
Pre-release on non-main branches / prerelease (push) Successful in 29s
Details

Browse Source 
- Addition of zoom feature

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2026-03-01 16:37:02 +00:00
parent e0e72c17e8
commit 7ecd065305
5 changed files with 183 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/logic-gates.astro
View File

@@ -14,38 +14,41 @@ import "../styles/logic-gates.css";
<div class="lg-top-header">
<div class="lg-title">Interactive Logic Circuit Builder</div>
<div class="lg-subtitle">
Drag items from the toolbox to the board. Drag from output ports to input ports to wire. Click a wire or node and press <kbd>Delete</kbd> to remove it.
Drag items from the toolbox. Drag from output ports to input ports to wire. Click a wire/node and press <kbd>Delete</kbd>. Scroll to Zoom.
</div>
</div>
<div class="lg-workspace" id="workspace">
<svg class="lg-svg-layer" id="wireLayer"></svg>
</div>
<aside id="toolboxPanel" class="lg-toolbox" aria-label="Toolbox">
<div class="card">
<div class="cardTitle">Components</div>
<div class="tb-icon-grid" id="toolboxGrid">
</div>
<div class="lg-zoom-controls">
<button class="lg-zoom-btn" id="btnZoomIn" title="Zoom In">+</button>
<button class="lg-zoom-btn" id="btnZoomOut" title="Zoom Out">−</button>
<button class="lg-zoom-btn" id="btnZoomReset" title="Reset View" style="font-size: 16px;">⌂</button>
</div>
<div class="lg-viewport" id="viewport">
<svg class="lg-svg-layer" id="wireLayer"></svg>
</div>
</div>
<aside id="toolboxPanel" class="lg-toolbox" aria-label="Toolbox">
<div class="card">
<div class="cardTitle">Components</div>
<div class="tb-icon-grid" id="toolboxGrid"></div>
</div>
<div class="card">
<div class="cardTitle">Live Truth Table</div>
<details open>
<summary class="tt-summary">Show / Hide Table</summary>
<div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Auto-generates based on current wiring. (Max 6 inputs)</div>
<div class="tt-table-wrap" id="truthTableContainer">
</div>
<div class="tt-table-wrap" id="truthTableContainer"></div>
</details>
</div>
<div class="card">
<div class="cardTitle">Tools</div>
<button class="btn btnReset btnWide" id="btnClearBoard" type="button" style="margin-bottom:0;">Clear Board</button>
</div>
</aside>
</div>