推进 INI 面板 control view renderer helper

This commit is contained in:
2026-06-14 22:52:21 +08:00
parent 74617cc3fa
commit 27d2316f78
7 changed files with 263 additions and 41 deletions

View File

@@ -6,12 +6,10 @@
</head>
<body>
<pre id="status">running</pre>
<div id="control-view">
<div id="control-status"></div>
<div id="control-sections"></div>
</div>
<div id="control-view"></div>
<script type="module">
import { createLinuxCncIniSdk } from "../../runtime/sdk/src/index.js";
import { renderMachineSessionControlView } from "../../runtime/ui/ini-panel/control-view-renderer.js";
import { loadTextFile, saveTextFile } from "../../runtime/opfs/file-service.js";
import {
gcodeProgramPath,
@@ -80,34 +78,6 @@
return frame.contentDocument;
}
function renderControlView(containerDocument, view) {
const statusNode = containerDocument.getElementById("control-status");
const sectionsNode = containerDocument.getElementById("control-sections");
statusNode.textContent = [
view.status.lastAction ?? "-",
view.status.runStatus ?? "-",
view.status.error ?? "-",
].join(" | ");
sectionsNode.textContent = "";
for (const section of view.sections) {
const sectionNode = containerDocument.createElement("section");
sectionNode.dataset.sectionId = section.id;
const heading = containerDocument.createElement("h2");
heading.textContent = section.title;
sectionNode.appendChild(heading);
const list = containerDocument.createElement("dl");
for (const row of section.rows) {
const term = containerDocument.createElement("dt");
term.textContent = row.label;
const def = containerDocument.createElement("dd");
def.textContent = String(row.value ?? "-");
list.append(term, def);
}
sectionNode.appendChild(list);
sectionsNode.appendChild(sectionNode);
}
}
try {
const ini = await createLinuxCncIniSdk();
const wasmPath = "/work/browser-smoke.ini";
@@ -405,7 +375,8 @@ TOOL_TABLE = browser-tool.tbl
!uiApi?.getMachineSessionStateBundle ||
!uiApi?.getMachineSessionStateReport ||
!uiApi?.getMachineSessionStateReportExport ||
!uiApi?.getMachineSessionWorkflowStatus
!uiApi?.getMachineSessionWorkflowStatus ||
!uiApi?.renderMachineSessionControlView
) {
throw new Error("INI panel API namespace did not expose state getters");
}
@@ -864,7 +835,10 @@ TOOL_TABLE = browser-tool.tbl
"UI legacy machine session state bundle getter matches API namespace",
);
const machineSessionControlView = uiApi.getMachineSessionControlView();
renderControlView(document, machineSessionControlView);
const renderedControlView = renderMachineSessionControlView(
document.getElementById("control-view"),
machineSessionControlView,
);
assertEqual(
machineSessionControlView.status.runStatus,
"ok",
@@ -886,20 +860,33 @@ TOOL_TABLE = browser-tool.tbl
"UI machine session control view canonical event row",
);
assertEqual(
document.getElementById("control-status").textContent,
renderedControlView.statusNode.textContent,
"run-gcode | ok | -",
"UI machine session control view DOM status",
);
assertEqual(
document.getElementById("control-sections").querySelectorAll("section").length,
renderedControlView.sectionsNode.querySelectorAll("section").length,
3,
"UI machine session control view DOM section count",
);
assertEqual(
document.getElementById("control-sections").querySelector('section[data-section-id=\"run\"] dd:nth-of-type(2)').textContent,
renderedControlView.sectionsNode.querySelector('section[data-section-id=\"run\"] dd:nth-of-type(2)').textContent,
"2",
"UI machine session control view DOM canonical event row",
);
const uiRenderedControlView = uiApi.renderMachineSessionControlView(
uiDocument.getElementById("machine-session-control-view"),
);
assertEqual(
uiRenderedControlView.statusNode.textContent,
"run-gcode | ok | -",
"UI machine session built-in control view DOM status",
);
assertEqual(
uiRenderedControlView.sectionsNode.querySelector('section[data-section-id=\"run\"] dd:nth-of-type(2)').textContent,
"2",
"UI machine session built-in control view canonical event row",
);
assertEqual(
uiDocument.defaultView.getMachineSessionControlView().status.lastAction,
machineSessionControlView.status.lastAction,

View File

@@ -9,6 +9,9 @@ import {
createMachineSessionStateReportExport,
createMachineSessionWorkflowStatus,
} from "../../../runtime/ui/ini-panel/panel-state-summary.js";
import {
renderMachineSessionControlView,
} from "../../../runtime/ui/ini-panel/control-view-renderer.js";
const summary = createIniPanelStateSummary({
badges: {
@@ -546,9 +549,52 @@ assert.deepEqual(
},
);
function createElement(tagName) {
const node = {
tagName,
children: [],
dataset: {},
textContent: "",
ownerDocument: null,
append(...children) {
this.children.push(...children);
},
appendChild(child) {
this.children.push(child);
return child;
},
};
node.ownerDocument = { createElement };
return node;
}
const controlViewContainer = createElement("div");
const renderedControlView = renderMachineSessionControlView(
controlViewContainer,
createMachineSessionControlView({
report: expectedBundleReport,
workflowStatus: {
readiness: expectedBundleReport.readiness,
lastAction: "run-gcode",
error: null,
session: expectedBundleReport.session,
run: expectedBundleReport.run,
},
}),
);
assert.equal(renderedControlView.statusNode.textContent, "run-gcode | ok | -");
assert.equal(renderedControlView.sectionNodes.length, 3);
assert.equal(renderedControlView.sectionNodes[2].dataset.sectionId, "run");
assert.equal(
renderedControlView.sectionNodes[2].children[1].children[3].textContent,
"2",
);
assert.deepEqual(
{
getMachineSessionControlView: typeof globalThis.window?.linuxCncIniPanelApi?.getMachineSessionControlView,
renderMachineSessionControlView: typeof globalThis.window?.linuxCncIniPanelApi?.renderMachineSessionControlView,
getMachineSessionStateBundle: typeof globalThis.window?.linuxCncIniPanelApi?.getMachineSessionStateBundle,
getMachineSessionStateReport: typeof globalThis.window?.linuxCncIniPanelApi?.getMachineSessionStateReport,
getMachineSessionStateReportExport: typeof globalThis.window?.linuxCncIniPanelApi?.getMachineSessionStateReportExport,
@@ -556,6 +602,7 @@ assert.deepEqual(
},
{
getMachineSessionControlView: "undefined",
renderMachineSessionControlView: "undefined",
getMachineSessionStateBundle: "undefined",
getMachineSessionStateReport: "undefined",
getMachineSessionStateReportExport: "undefined",