JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sectioned toolbar + custom component editor

Browse Source 
- Redesigned toolbar with I/O, Gates, and Components sections
- Component editor: sub-canvas mode to design reusable chips
  - Save/Cancel with main circuit state preservation
  - Components persist in localStorage
- Custom components render as purple chips with dynamic I/O ports
- Component evaluation simulates internal circuit as black box
- Toolbar height increased to 56px for section labels
- All height references updated consistently

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 02:54:04 +01:00
parent 3bff1fd4b4
commit 268013d053
8 changed files with 472 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@@ -9,17 +9,39 @@
<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 clock-btn" data-gate="CLOCK">CLOCK</button>
<button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
<!-- I/O Section -->
<div class="toolbar-section">
<div class="section-label">I/O</div>
<button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
<button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button>
<button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
</div>
<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>
<!-- Gates Section -->
<div class="toolbar-section">
<div class="section-label">Gates</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>
<div class="separator"></div>
<!-- Components Section -->
<div class="toolbar-section" id="components-section">
<div class="section-label">Components</div>
<button class="gate-btn create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button>
<div id="saved-components"></div>
</div>
<div class="separator"></div>
<button class="action-btn sim-btn" id="sim-btn">Waveform</button>
<div class="toolbar-right">
<button class="action-btn export-btn" id="export-btn" title="Export circuit">↓ Export</button>
@@ -32,6 +54,15 @@
<!-- Hidden file input for import -->
<input type="file" id="import-file" accept=".json" style="display:none">
<!-- Component Editor Overlay -->
<div id="component-editor-overlay" style="display:none;">
<div id="component-editor-bar">
<span id="component-editor-title">Editing Component: </span>
<button id="component-editor-save">Save</button>
<button id="component-editor-cancel">Cancel</button>
</div>
</div>
<!-- Mode toggle will be inserted here by puzzleUI.js -->
<canvas id="canvas"></canvas>