diff --git a/frontend/src/components/simulator/SimulatorCanvas.css b/frontend/src/components/simulator/SimulatorCanvas.css index f2c55206..7f5c6f5c 100644 --- a/frontend/src/components/simulator/SimulatorCanvas.css +++ b/frontend/src/components/simulator/SimulatorCanvas.css @@ -137,6 +137,36 @@ color: #4fc3f7; } +/* ── Canvas icon-only buttons (undo/redo, …) ─────── */ +.canvas-icon-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background: transparent; + border: 1px solid #3a4a5a; + border-radius: 5px; + color: #9d9d9d; + cursor: pointer; + transition: + border-color 0.15s, + background 0.15s, + color 0.15s, + opacity 0.15s; + flex-shrink: 0; +} + +.canvas-icon-btn:hover:not(:disabled) { + border-color: #007acc; + color: #ccc; +} + +.canvas-icon-btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} + /* ── Component count ─────────────────────────────── */ .component-count { display: flex; diff --git a/frontend/src/components/simulator/SimulatorCanvas.tsx b/frontend/src/components/simulator/SimulatorCanvas.tsx index 5e1390a6..240f5219 100644 --- a/frontend/src/components/simulator/SimulatorCanvas.tsx +++ b/frontend/src/components/simulator/SimulatorCanvas.tsx @@ -143,6 +143,12 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => { const recordRotate = useSimulatorStore((s) => s.recordRotate); const recordSetProperty = useSimulatorStore((s) => s.recordSetProperty); const recordRemoveWire = useSimulatorStore((s) => s.recordRemoveWire); + // Subscribe to history shape so the undo/redo buttons reactively + // enable/disable and their tooltips reflect the next command. + const history = useSimulatorStore((s) => s.history); + const historyIndex = useSimulatorStore((s) => s.historyIndex); + const undo = useSimulatorStore((s) => s.undo); + const redo = useSimulatorStore((s) => s.redo); // Oscilloscope const oscilloscopeOpen = useOscilloscopeStore((s) => s.open); @@ -1901,6 +1907,61 @@ export const SimulatorCanvas = ({ headerSlot }: SimulatorCanvasProps = {}) => { )} + {/* Undo / Redo — canvas-scoped, mirrors the Ctrl+Z / Ctrl+Y + handler in EditorPage. Tooltip surfaces the description of + the command that would be applied. Disabled when the stack + is exhausted in that direction. */} + + + {/* Serial Monitor toggle */}