a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): multi-board primary Run runs all boards (split-menu for active-only) 

In a multi-board project the wired boards are one system, so running just
the active board almost never matches intent (a cross-wired UART pair only
comes alive when both run). The primary Run button now runs ALL boards when
there is more than one, with a split caret-menu to still run only the active
board. Single-board and board-less behaviour is unchanged, and the separate
Run-All double-triangle button is kept only for board+chip / chips-only
projects where the primary Run is not already a run-all.
This commit is contained in:
David Montero 2026-07-03 01:22:17 +02:00
parent 1fa43b380d
commit 1ad669fae9
4 changed files with 205 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/editor/EditorToolbar.css
View File

@ -459,6 +459,62 @@
color: var(--color-fg-default);
}
/* ── Run split-button (multi-board: primary Run = all boards + menu) ──── */
.tb-run-split {
position: relative;
display: inline-flex;
align-items: center;
}
.tb-btn-run-caret {
width: 16px;
color: var(--color-feedback-success);
}
.tb-btn-run-caret:hover:not(:disabled) {
background: rgba(48, 209, 88, 0.14);
color: var(--color-feedback-success);
}
.tb-run-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 200;
background: #2a2a2c;
border: 1px solid #3a3a3c;
border-radius: 10px;
padding: 6px;
min-width: 200px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
gap: 2px;
}
.tb-run-menu-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 7px;
color: #ccc;
font-size: 13px;
font-family: inherit;
cursor: pointer;
text-align: left;
white-space: nowrap;
transition:
background 0.12s,
color 0.12s;
}
.tb-run-menu-item:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.tb-run-menu-item:disabled {
opacity: 0.5;
cursor: default;
}
.tb-overflow-label {
flex: 1;
text-align: left;

196
frontend/src/components/editor/EditorToolbar.tsx
View File

@ -196,6 +196,10 @@ export const EditorToolbar = ({
// Run-All / Stop buttons (the flat `running` flag only tracks the ACTIVE
// board, so it misreports a multi-board or non-active-board run).
const anyBoardRunning = boards.some((b) => b.running);
// Multi-board: the primary Run button runs ALL boards (the whole wired
// project is one system — running a subset is almost never intended), with a
// split-menu to still run just the active board. Single-board is unchanged.
const isMultiBoard = boards.length > 1;
// A "run target" is a board OR a programmable custom-chip (a CPU that runs a
// ROM). When there is more than one target — two boards, a board + a chip, or
@ -252,6 +256,9 @@ export const EditorToolbar = ({
const [missingLibHint, setMissingLibHint] = useState(false);
const [moreMenuOpen, setMoreMenuOpen] = useState(false);
const moreMenuRef = useRef<HTMLDivElement>(null);
// Split-button menu for the multi-board Run control ("Run all" / "Run active only").
const [runMenuOpen, setRunMenuOpen] = useState(false);
const runMenuRef = useRef<HTMLDivElement>(null);
// Open the Library Manager when another component (e.g. the velxio.json entry
// in the FileExplorer) asks for it via a window event. Avoids prop-drilling
@ -301,6 +308,25 @@ export const EditorToolbar = ({
};
}, [moreMenuOpen]);
// Close the Run split-menu on outside click / Escape (mirrors the more-menu).
useEffect(() => {
if (!runMenuOpen) return;
const onClickOutside = (e: MouseEvent) => {
if (runMenuRef.current && !runMenuRef.current.contains(e.target as Node)) {
setRunMenuOpen(false);
}
};
const onEsc = (e: KeyboardEvent) => {
if (e.key === 'Escape') setRunMenuOpen(false);
};
document.addEventListener('mousedown', onClickOutside);
document.addEventListener('keydown', onEsc);
return () => {
document.removeEventListener('mousedown', onClickOutside);
document.removeEventListener('keydown', onEsc);
};
}, [runMenuOpen]);
// Compile All / Run All — runs sequentially, logs to console (no dialog)
const [compileAllRunning, setCompileAllRunning] = useState(false);
@ -1461,49 +1487,109 @@ export const EditorToolbar = ({
<div className="tb-divider" />
{/* Run */}
<button
onClick={() => handleRun()}
disabled={
isBoardless
? digitalRunning || verifying
: running || compiling || verifying || !activeBoard
}
className="tb-btn tb-btn-run"
title={
verifying
? t('editor.toolbar.run.verifying', 'Checking circuit...')
: isBoardless
? digitalRunning
? 'Digital simulation running'
: 'Resume digital simulation'
: !activeBoard
? t('editor.toolbar.run.addBoard')
: activeBoard?.languageMode === 'micropython'
? t('editor.toolbar.run.runMicropython')
: t('editor.toolbar.run.run')
}
>
{verifying || compiling ? (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="spin"
{/* Run — in a multi-board project this runs ALL boards (the wired
boards are one system; running a subset is almost never
intended), with a split-menu to still run only the active board.
Single-board / board-less behaviour is unchanged. */}
<div className="tb-run-split" ref={runMenuRef}>
<button
onClick={() => (isMultiBoard ? handleRunAll() : handleRun())}
disabled={
isBoardless
? digitalRunning || verifying
: isMultiBoard
? compileAllRunning || anyBoardRunning || verifying
: running || compiling || verifying || !activeBoard
}
className="tb-btn tb-btn-run"
title={
verifying
? t('editor.toolbar.run.verifying', 'Checking circuit...')
: isBoardless
? digitalRunning
? 'Digital simulation running'
: 'Resume digital simulation'
: isMultiBoard
? t('editor.toolbar.runAll')
: !activeBoard
? t('editor.toolbar.run.addBoard')
: activeBoard?.languageMode === 'micropython'
? t('editor.toolbar.run.runMicropython')
: t('editor.toolbar.run.run')
}
>
{verifying || compiling ? (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="spin"
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
) : (
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="5,3 19,12 5,21" />
</svg>
)}
</button>
{isMultiBoard && (
<button
className="tb-btn tb-btn-run-caret"
onClick={() => setRunMenuOpen((o) => !o)}
disabled={compileAllRunning || anyBoardRunning || verifying}
title={t('editor.toolbar.run.options', 'Run options')}
aria-haspopup="true"
aria-expanded={runMenuOpen}
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
) : (
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="5,3 19,12 5,21" />
</svg>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
)}
</button>
{isMultiBoard && runMenuOpen && (
<div className="tb-run-menu" role="menu">
<button
role="menuitem"
className="tb-run-menu-item"
onClick={() => {
setRunMenuOpen(false);
handleRunAll();
}}
>
{t('editor.toolbar.runAll')}
</button>
<button
role="menuitem"
className="tb-run-menu-item"
disabled={!activeBoard}
onClick={() => {
setRunMenuOpen(false);
handleRun();
}}
>
{t('editor.toolbar.run.runActiveOnly', {
name: activeBoard ? boardDisplayName(activeBoard) : '',
defaultValue: `Run only ${activeBoard ? boardDisplayName(activeBoard) : ''}`,
})}
</button>
</div>
)}
</div>
{/* Stop */}
<button
@ -1565,18 +1651,22 @@ export const EditorToolbar = ({
</svg>
</button>
{/* Run All */}
<button
onClick={() => handleRunAll()}
disabled={compileAllRunning || anyBoardRunning || digitalRunning}
className="tb-btn tb-btn-run-all"
title={t('editor.toolbar.runAll')}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="3,3 11,12 3,21" />
<polygon points="13,3 21,12 13,21" />
</svg>
</button>
{/* Run All — only when the primary Run isn't already the
"run all boards" action (i.e. board + chip or chips-only
projects). For 2+ boards the split Run button covers it. */}
{!isMultiBoard && (
<button
onClick={() => handleRunAll()}
disabled={compileAllRunning || anyBoardRunning || digitalRunning}
className="tb-btn tb-btn-run-all"
title={t('editor.toolbar.runAll')}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="3,3 11,12 3,21" />
<polygon points="13,3 21,12 13,21" />
</svg>
</button>
)}
</>
)}
</div>

4
frontend/src/i18n/locales/en/common2.json
View File

@ -11,7 +11,9 @@
"run": {
"addBoard": "Add a board to run",
"runMicropython": "Run MicroPython",
"run": "Run (auto-compiles if needed)"
"run": "Run (auto-compiles if needed)",
"runActiveOnly": "Run only {{name}}",
"options": "Run options"
},
"stop": "Stop",
"reset": "Reset",

4
frontend/src/i18n/locales/es/common2.json
View File

@ -11,7 +11,9 @@
"run": {
"addBoard": "Añadir una placa para ejecutar",
"runMicropython": "Ejecutar MicroPython",
"run": "Ejecutar (compila automáticamente si es necesario)"
"run": "Ejecutar (compila automáticamente si es necesario)",
"runActiveOnly": "Ejecutar solo {{name}}",
"options": "Opciones de ejecución"
},
"stop": "Detener",
"reset": "Reiniciar",