feat: sectioned toolbar + custom component editor

- 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

View File

@@ -1,6 +1,7 @@
// Gate dimensions and rendering constants
export const GATE_W = 100;
export const GATE_H = 60;
export const COMP_W = 120;
export const PORT_R = 7;
export const GATE_COLORS = {
@@ -18,9 +19,18 @@ export const SIGNAL_COLORS = [
export function gateInputCount(type) {
if (type === 'CLOCK' || type === 'INPUT') return 0;
if (type === 'NOT' || type === 'OUTPUT') return 1;
if (type.startsWith('COMPONENT:')) {
// Component types look up their input count from state
return 0; // Will be overridden by lookup in gates.js
}
return 2;
}
export function gateOutputCount(type) {
return type === 'OUTPUT' ? 0 : 1;
if (type === 'OUTPUT') return 0;
if (type.startsWith('COMPONENT:')) {
// Component types look up their output count from state
return 0; // Will be overridden by lookup in gates.js
}
return 1;
}