Select machine type in design dialog and save importable machine GLB

2026-09-21 17:41:46 +08:00
parent 8f1a22485d
commit 338500dfc2
32 changed files with 10364 additions and 32 deletions
--- a/web/react/src/MachineManagerPanel.tsx
+++ b/web/react/src/MachineManagerPanel.tsx
@@ -8,9 +8,9 @@ import { disposeMachineScene, type ImportedMachine } from "./imported-machine";
 import { configureMachinePartScene, draftNodeDof, makeJointAssembly, reparentMachineNode, buildManagedMachine, expectedParentRole, loadMachinePart, machinePartTree, MACHINE_PART_ROLES, roleLabel, type MachinePartDraft, type MachinePartRole, type MachineTreeNode, type PhysicalZero } from "./machine-manager";
 import { driveJoint, jointZero, defaultDof, isLinear, type JointDof, type CncAxis } from "./machine-joints";
 import { projectXyzacVisual, type XyzacVisualSource } from "./xyzac-visual-adapter";
-import { useMachineDraft, draftFingerprint } from "./machine-manager-history";
+import { useMachineDraft, draftFingerprint, changeMachineType } from "./machine-manager-history";
 import { MachineNumberInput } from "./MachineManagerInputs";
-import type { Vec3 } from "./machine-urdf";
+import { inspectMachineGlb, MAX_MACHINE_BYTES, type Vec3 } from "./machine-urdf";

 type Props = { snapshot?: XyzacVisualSource | null; coordinates: "XYZAC" | "XYZBC"; disabled: boolean; onApply: (machine: ImportedMachine) => Promise<void> };
 type TestPose = { x: number; y: number; z: number; a: number; b: number; c: number };
@@ -146,10 +146,10 @@ function TreeNode({ part, node, selected, onSelect, onDrop, extra, query, expans
  </li>;
 }

-export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }: Props) {
+export function MachineManagerPanel({ coordinates: controllerCoordinates, disabled, onApply, snapshot }: Props) {
  const [open, setOpen] = useState(false), [pending, setPending] = useState(false), [message, setMessage] = useState("");
-  const { history, draft, edit, undo, redo, clearHistory } = useMachineDraft();
-  const { parts, cOriginMm, tiltOffsetMm, physicalZero } = draft;
+  const { history, draft, edit, undo, redo } = useMachineDraft(controllerCoordinates);
+  const { coordinates, parts, cOriginMm, tiltOffsetMm, physicalZero } = draft;
  const setParts = (change: (current: MachinePartDraft[]) => MachinePartDraft[]) => edit((current) => ({ ...current, parts: change(current.parts) }));
  const setCOriginMm = (value: Vec3) => edit((current) => ({ ...current, cOriginMm: value }));
  const setTiltOffsetMm = (value: Vec3) => edit((current) => ({ ...current, tiltOffsetMm: value }));
@@ -174,7 +174,7 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
  useEffect(() => () => { retainedScenes.current.forEach(disposeMachineScene); }, []);
  const [testPose, setTestPose] = useState<TestPose>({ x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 });
  const [motionState, setMotionState] = useState<Record<string, MotionTransform>>({}); const motionStateHash = useRef("");
-  useEffect(() => { setMessage(""); setTestPose({ x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 }); setFollowLive(false); clearHistory(); }, [coordinates, clearHistory]);
+  useEffect(() => { setTestPose({ x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 }); setFollowLive(false); }, [coordinates]);
  useEffect(() => { if (selectedId && !parts.some((part) => part.id === selectedId)) { setSelectedId(parts[0]?.id ?? null); setSelectedNodePath("scene"); } }, [parts, selectedId]);
  const selected = parts.find((part) => part.id === selectedId) ?? null;
  const trees = useMemo(() => new Map(parts.map((part) => [part.id, machinePartTree(part)])), [parts]);
@@ -190,22 +190,25 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
      const loaded = results.flatMap((result) => result.status === "fulfilled" ? [result.value] : []);
      const failure = results.find((result) => result.status === "rejected");
      if (failure?.status === "rejected") { loaded.forEach((source) => disposeMachineScene(source.scene)); throw failure.reason; }
-      if (loaded.some((source) => source.restoredModel && source.restoredModel.coordinates !== coordinates)) {
+      const restoredSources = loaded.filter((source) => source.restoredModel);
+      const restored = restoredSources[0]?.restoredModel;
+      // A saved machine is opened as one document, not appended to another
+      // machine. Raw component imports continue to append to this draft.
+      if (restored && loaded.length !== 1) {
        loaded.forEach((source) => disposeMachineScene(source.scene));
-        throw new Error(`导入机型不同，请先切换到 ${loaded.find((source) => source.restoredModel?.coordinates !== coordinates && source.restoredModel)?.restoredModel?.coordinates}`);
+        throw new Error("完整机床 GLB 请单独打开；普通部件可批量导入");
      }
-      const restored = loaded.find((source) => source.restoredModel)?.restoredModel;
      edit((draft) => {
-        const next = [...draft.parts];
+        const next = restored ? [] : [...draft.parts];
        for (const source of loaded) {
          const role = MACHINE_PART_ROLES.find((candidate) => !next.some((part) => part.role === candidate)) ?? "";
          const parentRole = role ? expectedParentRole(role) : null;
          const parentId = parentRole ? next.find((part) => part.role === parentRole)?.id ?? null : null;
          next.push({ ...source, role, parentId, visible: true, showOrigin: true, originMm: zero3(), translationMm: zero3(), rotationDeg: zero3(), nodeParents: {}, nodeTransforms: {}, nodeJoints: source.restoredJoints ?? {}, nodeRoles: source.restoredRoles ?? {} });
        }
-        return { ...draft, parts: next, ...(restored ? { cOriginMm: restored.calibration.cOriginMm, tiltOffsetMm: restored.calibration.tiltOffsetMm, physicalZero: restored.calibration.physicalZero as PhysicalZero } : {}) };
+        return { ...draft, parts: next, ...(restored ? { coordinates: restored.coordinates, cOriginMm: restored.calibration.cOriginMm, tiltOffsetMm: restored.calibration.tiltOffsetMm, physicalZero: restored.calibration.physicalZero as PhysicalZero } : {}) };
      });
-      setTab("structure"); setQuery(""); setSelectedId(loaded[0].id); setSelectedNodePath("scene"); setMessage(restored ? `已恢复 ${restored.coordinates} 关节配置和物理零点` : `已导入 ${loaded.length} 个部件`);
+      setTab("structure"); setQuery(""); setSelectedId(loaded[0].id); setSelectedNodePath("scene"); setMessage(restored ? `已打开 ${restored.coordinates} 完整机床，恢复层级、关节和标定；原草稿可撤销恢复` : `已导入 ${loaded.length} 个部件`);
    } catch (error) { setMessage(error instanceof Error ? error.message : String(error)); }
    finally { setPending(false); }
  };
@@ -243,9 +246,12 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
      const exportScene = new THREE.Scene(); exportScene.name = machine.scene.name; exportScene.userData = machine.scene.userData;
      for (const child of machine.scene.children) exportScene.add(child.clone(true));
      const bytes = await new GLTFExporter().parseAsync(exportScene, { binary: true, trs: true, onlyVisible: false });
+      if (!(bytes instanceof ArrayBuffer) || bytes.byteLength > MAX_MACHINE_BYTES) throw new Error("保存文件超过控制面板支持的 32 MiB，请减小模型后重试");
+      const saved = inspectMachineGlb(bytes);
+      if (saved.structure.coordinates !== coordinates) throw new Error("保存模型的机型与当前配置不一致");
      const url = URL.createObjectURL(new Blob([bytes as ArrayBuffer], { type: "model/gltf-binary" }));
      const link = document.createElement("a"); link.href = url; link.download = machine.filename; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
-      setExported(signature); setMessage("组合 GLB 已导出，底座和整机场景包含机床标定 userData");
+      setExported(signature); setMessage(`已保存 managed-${coordinates.toLowerCase()}.glb，可在控制面板“导入机床模型”中加载，自动识别 ${coordinates} 和轴配置`);
    } catch (error) { setMessage(error instanceof Error ? error.message : String(error)); }
    finally { if (machine) disposeMachineScene(machine.scene); setPending(false); }
  };
@@ -275,7 +281,7 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
  const exportJson = () => {
    if (!validation.model || pending || invalidFields.length) return;
    const url = URL.createObjectURL(new Blob([JSON.stringify(validation.model, null, 2)], { type: "application/json" }));
-    const a = document.createElement("a"); a.href = url; a.download = `machine-joints-${coordinates.toLowerCase()}.json`; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); setMessage("关节 JSON 已导出；恢复完整模型请使用组合 GLB");
+    const a = document.createElement("a"); a.href = url; a.download = `machine-joints-${coordinates.toLowerCase()}.json`; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); setMessage("关节 JSON 已导出；恢复完整模型请使用“保存机床模型 GLB”");
  };
  const poseInput = (axis: keyof TestPose, unit: string) => <label key={axis}>{axis.toUpperCase()}<MachineNumberInput fieldId={`test-${axis}`} control={`machine-test-${axis}`} onValidity={validity} disabled={pending || followLive || !bindings.some((b) => b.dof.axis.toLowerCase() === axis)} value={effectivePose[axis]} onChange={(value) => setTestPose((pose) => ({ ...pose, [axis]: value }))} /><small>{unit}</small></label>;
  const receiveMotionState = (state: Record<string, MotionTransform>) => { const hash = JSON.stringify(state); if (hash !== motionStateHash.current) { motionStateHash.current = hash; setMotionState(state); } };
@@ -286,12 +292,17 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
    <button type="button" data-axis-control="machine-manager-settings" aria-haspopup="dialog" onClick={() => setOpen(true)}>三维机床管理</button>
    <DraggableDialog open={open} title={`三维机床管理 · ${coordinates}`} className="machine-manager-dialog" onClose={() => setOpen(false)}>
      <div className="machine-manager-workbench" aria-busy={pending}>
+      <div className="machine-type-step"><label><strong>1 · 机床类型</strong><select data-axis-control="machine-manager-type" aria-label="设计机床类型" value={coordinates} disabled={pending || followLive} onChange={(event) => {
+        const next = event.target.value as "XYZAC" | "XYZBC";
+        edit((draft) => changeMachineType(draft, next)); setTab("structure");
+        setMessage(`设计机型已选择 ${next}；保留模型层级和 XYZ/C 绑定，请重新配置 ${next[3]} 轴并核对标定。可撤销恢复。`);
+      }}><option value="XYZAC">XYZAC · A/C 五轴转台</option><option value="XYZBC">XYZBC · B/C 五轴转台</option></select></label><div><span>2 · 结构与关节 → 3 · 验证与标定 → 4 · 保存 GLB</span><small data-axis-control="machine-manager-type-note">{coordinates === "XYZAC" ? "A 绕 X 倾转，C 绕 Z 回转" : "B 绕 Y 倾转，C 绕 Z 回转"} · 控制面板当前 {controllerCoordinates}{coordinates !== controllerCoordinates ? "；应用或导入模型时切换" : ""}</small></div></div>
      <div className="machine-manager-toolbar"><button type="button" data-axis-control="machine-manager-import" disabled={pending || followLive} onClick={() => file.current?.click()}>导入 GLB 部件</button><button type="button" data-axis-control="machine-manager-undo" disabled={!history.past.length || pending || followLive} onClick={() => changeHistory("undo")}>撤销</button><button type="button" data-axis-control="machine-manager-redo" disabled={!history.future.length || pending || followLive} onClick={() => changeHistory("redo")}>重做</button><span>{parts.length} 个模型 · {bindings.filter((b) => coordinates.includes(b.dof.axis)).length}/5 轴已绑定</span><span className="machine-save-state" data-axis-control="machine-manager-draft-state">{!parts.length ? "新建机床" : applied === signature ? "已应用当前配置" : exported === signature ? "已导出 · 尚未应用" : "配置尚未应用"}</span></div>
      <div className="machine-axis-overview" aria-label="数控轴绑定总览">{[...coordinates].map((axis) => { const binding = bindings.find((b) => b.dof.axis === axis); return <button type="button" key={axis} data-axis-control={`machine-axis-locate-${axis.toLowerCase()}`} className={binding ? "bound" : "missing"} onClick={() => moveToBinding(axis)} title={binding ? `${binding.name} · 父级 ${binding.dof.direction.toUpperCase()} ${binding.dof.sign > 0 ? "+" : "−"}` : `待绑定 ${axis} 轴`}><strong>{axis}</strong><span>{binding?.name ?? "待绑定"}</span><small>{binding ? `${binding.dof.sign > 0 ? "+" : "−"}${binding.dof.direction.toUpperCase()}` : "选择节点"}</small></button>; })}</div>
      <div className="machine-manager-layout">
        <section className="machine-preview-area" aria-label="机床三维预览"><div className="machine-preview-tools">{([ ["fit", "整机适配"], ["selected", "定位选中"], ["front", "正视"], ["top", "俯视"] ] as const).map(([action, label]) => <button key={action} type="button" data-axis-control={`machine-view-${action}`} disabled={!parts.length || (action === "selected" && !selected)} onClick={() => setCommand((current) => ({ action, serial: current.serial + 1 }))}>{label}</button>)}<small>Z ↑ · X 红 / Y 绿 / Z 蓝</small></div>
        {open && <MachineManagerPanelPreview command={command} coordinates={coordinates} parts={parts} selectedId={selectedId} selectedNodePath={selectedNodePath} testPose={effectivePose} onMotionState={receiveMotionState} />}
-        {!parts.length && <div className="machine-preview-empty"><strong>建立机床的数字装配</strong><p>导入 GLB → 选择关节 → 绑定数控轴 → 验证运动</p><button type="button" disabled={pending} onClick={() => file.current?.click()}>导入机床或部件</button><small>支持完整层级 · 单文件不超过 32 MiB</small></div>}
+        {!parts.length && <div className="machine-preview-empty"><strong>建立机床的数字装配</strong><p>选择机床类型 → 导入 GLB → 绑定关节 → 保存机床模型</p><button type="button" disabled={pending} onClick={() => file.current?.click()}>导入机床或部件</button><small>支持完整层级 · 单文件不超过 32 MiB</small></div>}
        <p className="machine-preview-hint">左键旋转 · 滚轮缩放 · 右键平移 · 选中关节显示局部坐标系</p></section>
        <div className="machine-manager-editor">
          <div className="machine-editor-tabs" role="tablist" aria-label="机床配置步骤">{([ ["structure", "结构与关节"], ["motion", "运动验证"], ["calibration", "机床标定"] ] as const).map(([id, label], index) => <button id={`machine-tab-${id}`} role="tab" aria-selected={tab === id} aria-controls={`machine-panel-${id}`} tabIndex={tab === id ? 0 : -1} data-axis-control={`machine-manager-tab-${id}`} key={id} type="button" onClick={() => setTab(id)} onKeyDown={(event) => { const ids: EditorTab[] = ["structure", "motion", "calibration"]; const next = event.key === "ArrowRight" ? ids[(index + 1) % 3] : event.key === "ArrowLeft" ? ids[(index + 2) % 3] : event.key === "Home" ? ids[0] : event.key === "End" ? ids[2] : null; if (next) { event.preventDefault(); setTab(next); document.getElementById(`machine-tab-${next}`)?.focus(); } }}>{label}</button>)}</div>
@@ -305,12 +316,12 @@ export function MachineManagerPanel({ coordinates, disabled, onApply, snapshot }
          </section>}
          {!selected && <p className="machine-selection-empty">选择层级节点，配置其唯一自由度。</p>}
          </div>
-      <section id="machine-panel-motion" role="tabpanel" aria-labelledby="machine-tab-motion" hidden={tab !== "motion"} className="machine-motion-test"><label><input data-axis-control="machine-joint-follow-live" type="checkbox" checked={followLive} disabled={pending || (!liveReady && !followLive)} onChange={(event) => setFollowLive(event.target.checked)} />跟随数控系统实时关节位置</label><output data-axis-control="machine-joint-live-state">{followLive ? liveReady ? `WASM tick ${visual.tick}` : "实时数据暂不可用，已保持最后姿态；可取消跟随" : "手动验证（相对物理零点）"}</output><header><h3>层级运动测试</h3><button type="button" data-axis-control="machine-test-reset" disabled={pending || followLive} onClick={() => setTestPose({ x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 })}>复位</button></header><div>{(["x", "y", "z"] as const).map((axis) => poseInput(axis, "mm"))}{poseInput(coordinates === "XYZBC" ? "b" : "a", "deg")}{poseInput("c", "deg")}</div><p>这些输入仅验证模型运动，不向数控系统发送运动命令。</p><details><summary>诊断数据</summary><output data-axis-control="machine-test-state">{JSON.stringify(effectivePose)}</output></details></section>
+      <section id="machine-panel-motion" role="tabpanel" aria-labelledby="machine-tab-motion" hidden={tab !== "motion"} className="machine-motion-test"><label><input data-axis-control="machine-joint-follow-live" type="checkbox" checked={followLive} disabled={pending || (!liveReady && !followLive)} onChange={(event) => setFollowLive(event.target.checked)} />跟随数控系统实时关节位置</label><output data-axis-control="machine-joint-live-state">{followLive ? liveReady ? `WASM tick ${visual.tick}` : "实时数据暂不可用，已保持最后姿态；可取消跟随" : coordinates !== controllerCoordinates ? `设计机型 ${coordinates} 与控制面板 ${controllerCoordinates} 不同；应用或导入后可实时跟随` : "手动验证（相对物理零点）"}</output><header><h3>层级运动测试</h3><button type="button" data-axis-control="machine-test-reset" disabled={pending || followLive} onClick={() => setTestPose({ x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 })}>复位</button></header><div>{(["x", "y", "z"] as const).map((axis) => poseInput(axis, "mm"))}{poseInput(coordinates === "XYZBC" ? "b" : "a", "deg")}{poseInput("c", "deg")}</div><p>这些输入仅验证模型运动，不向数控系统发送运动命令。</p><details><summary>诊断数据</summary><output data-axis-control="machine-test-state">{JSON.stringify(effectivePose)}</output></details></section>
      <section id="machine-panel-calibration" role="tabpanel" aria-labelledby="machine-tab-calibration" hidden={tab !== "calibration"} className="machine-manager-calibration"><h3>机床标定</h3>{vectorInput("C 轴原点", cOriginMm, setCOriginMm, "mm")}{vectorInput(`${coordinates === "XYZBC" ? "B" : "A"} 到 C 轴偏置`, tiltOffsetMm, setTiltOffsetMm, "mm")}<fieldset className="machine-vector machine-zero"><legend>机床物理零点 (XYZ mm / ABC deg)</legend>{["x", "y", "z", coordinates === "XYZBC" ? "b" : "a", "c"].map((axis) => <label key={axis}>{axis.toUpperCase()}<MachineNumberInput fieldId={`zero-${axis}`} onValidity={validity} disabled={pending || followLive} value={physicalZero[axis as keyof PhysicalZero]} onChange={(value) => setPhysicalZero({ ...physicalZero, [axis]: value })} /></label>)}</fieldset></section>
        </div>
      </div>
      <div className={`machine-validation ${blockingReason ? "needs-attention" : "ready"}`} data-axis-control="machine-manager-validation" role="status">{blockingReason ? `配置检查：${blockingReason}` : "配置检查通过 · 五轴绑定完整"}{disabled && !blockingReason && " · 关机且程序空闲后可应用"}{followLive && " · 实时跟随中，配置编辑已锁定"}{invalidFields.length > 0 && <button type="button" onClick={() => { const id = invalidFields[0]; setTab(id.startsWith("joint-") ? "structure" : id.startsWith("test-") ? "motion" : "calibration"); requestAnimationFrame(() => document.querySelector<HTMLInputElement>('.machine-manager-dialog input[aria-invalid="true"]')?.focus()); }}>定位无效输入</button>}</div>
-      <footer className="machine-manager-footer"><button type="button" data-axis-control="machine-manager-apply" disabled={disabled || pending || followLive || Boolean(blockingReason)} title={disabled ? "关机且程序空闲后可应用" : undefined} onClick={() => void apply()}>应用到 Web LinuxCNC</button><button type="button" data-axis-control="machine-manager-export" disabled={pending || followLive || Boolean(blockingReason)} onClick={() => void exportGlb()}>导出组合 GLB</button><button type="button" data-axis-control="machine-manager-export-json" disabled={!validation.model || pending || invalidFields.length > 0} onClick={exportJson}>导出关节 JSON</button><output role="status" aria-live="polite">{message || "关闭对话框保留本次草稿；导出组合 GLB 可保存并在下次导入恢复。"}</output>{message && <button type="button" aria-label="清除操作消息" onClick={() => setMessage("")}>×</button>}</footer>
+      <footer className="machine-manager-footer"><button type="button" data-axis-control="machine-manager-apply" disabled={disabled || pending || followLive || Boolean(blockingReason)} title={disabled ? "关机且程序空闲后可应用" : undefined} onClick={() => void apply()}>应用到 Web LinuxCNC</button><button type="button" data-axis-control="machine-manager-export" disabled={pending || followLive || Boolean(blockingReason)} onClick={() => void exportGlb()}>保存机床模型 GLB</button><button type="button" data-axis-control="machine-manager-export-json" disabled={!validation.model || pending || invalidFields.length > 0} onClick={exportJson}>导出关节 JSON</button><output role="status" aria-live="polite">{message || "关闭对话框保留本次草稿；保存机床模型 GLB 后，可在控制面板“导入机床模型”中使用。"}</output>{message && <button type="button" aria-label="清除操作消息" onClick={() => setMessage("")}>×</button>}</footer>
      </div>
      <input ref={file} data-axis-control="machine-manager-files" hidden multiple type="file" accept=".glb,model/gltf-binary" onChange={(event) => { const files = event.target.files ? [...event.target.files] : []; event.target.value = ""; void importFiles(files); }} />
    </DraggableDialog>
--- a/web/react/src/machine-manager-history.ts
+++ b/web/react/src/machine-manager-history.ts
@@ -2,10 +2,10 @@ import { useCallback, useReducer } from "react";
 import type { MachinePartDraft, PhysicalZero } from "./machine-manager";
 import type { Vec3 } from "./machine-urdf";

-export type MachineDraft = { parts: MachinePartDraft[]; cOriginMm: Vec3; tiltOffsetMm: Vec3; physicalZero: PhysicalZero };
+export type MachineDraft = { coordinates: "XYZAC" | "XYZBC"; parts: MachinePartDraft[]; cOriginMm: Vec3; tiltOffsetMm: Vec3; physicalZero: PhysicalZero };
 type History = { current: MachineDraft; past: MachineDraft[]; future: MachineDraft[] };
 type Action = { type: "edit"; change: (draft: MachineDraft) => MachineDraft } | { type: "undo" | "redo" | "clear" };
-const initial: MachineDraft = { parts: [], cOriginMm: [0, 0, 0], tiltOffsetMm: [0, 0, 0], physicalZero: { x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 } };
+const initial: MachineDraft = { coordinates: "XYZAC", parts: [], cOriginMm: [0, 0, 0], tiltOffsetMm: [0, 0, 0], physicalZero: { x: 0, y: 0, z: 0, a: 0, b: 0, c: 0 } };
 export function machineDraftHistory(state: History, action: Action): History {
  if (action.type === "clear") return { current: state.current, past: [], future: [] };
  if (action.type === "undo") { const current = state.past.at(-1); return current ? { current, past: state.past.slice(0, -1), future: [state.current, ...state.future] } : state; }
@@ -15,11 +15,20 @@ export function machineDraftHistory(state: History, action: Action): History {
  if (current === state.current || (draftFingerprint(current) === draftFingerprint(state.current) && current.parts.every((part, i) => part.showOrigin === state.current.parts[i]?.showOrigin))) return state;
  return { current, past: [...state.past, state.current].slice(-30), future: [] };
 }
-export function useMachineDraft() {
-  const [history, dispatch] = useReducer(machineDraftHistory, { current: initial, past: [], future: [] });
+export function useMachineDraft(coordinates: MachineDraft["coordinates"] = "XYZAC") {
+  const [history, dispatch] = useReducer(machineDraftHistory, { current: { ...initial, coordinates }, past: [], future: [] });
  const edit = useCallback((change: (draft: MachineDraft) => MachineDraft) => dispatch({ type: "edit", change }), []);
  return { history, draft: history.current, edit, undo: () => dispatch({ type: "undo" }), redo: () => dispatch({ type: "redo" }), clearHistory: useCallback(() => dispatch({ type: "clear" }), []) };
 }
 export function draftFingerprint(draft: MachineDraft) {
  return JSON.stringify({ ...draft, parts: draft.parts.map(({ id, filename, hash, role, parentId, visible, originMm, translationMm, rotationDeg, nodeParents, nodeRoles, nodeTransforms, nodeJoints }) => ({ id, filename, hash, role, parentId, visible, originMm, translationMm, rotationDeg, nodeParents, nodeRoles, nodeTransforms, nodeJoints })) });
 }
+
+// A different tilt axis requires an explicit new binding: never relabel a physical
+// A joint as B or copy its axis direction/calibration silently.
+export function changeMachineType(draft: MachineDraft, coordinates: MachineDraft["coordinates"]): MachineDraft {
+  if (draft.coordinates === coordinates) return draft;
+  return { ...draft, coordinates, parts: draft.parts.map((part) => ({ ...part,
+    nodeJoints: Object.fromEntries(Object.entries(part.nodeJoints ?? {}).filter(([, joint]) => coordinates.includes(joint.axis))),
+  })) };
+}
--- a/web/react/src/styles.css
+++ b/web/react/src/styles.css
@@ -510,3 +510,10 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
 .machine-joint-step { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
 .machine-joint-step > label { display: flex; align-items: center; gap: 6px; }
 .machine-joint-step button { padding: 5px 9px; border: 1px solid #9babad; border-radius: 3px; background: #fff; }
+.machine-type-step { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px 10px; background: #e1efed; border: 1px solid #90b4ad; border-radius: 5px; }
+.machine-type-step > label { display: flex; align-items: center; gap: 10px; }
+.machine-type-step strong { color: #27585d; white-space: nowrap; }
+.machine-type-step select { min-height: 32px; max-width: 100%; }
+.machine-type-step > div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
+.machine-type-step small { color: #536467; }
+@media(max-width:850px) { .machine-type-step { gap: 5px; padding: 6px; } .machine-type-step > div > span { display: none; } }