admin/PACS
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refine STL visibility and pose panels

Browse Source
This commit is contained in:
Codex
2026-05-30 16:51:44 +08:00
parent cad4257a4b
commit b13715ac4e
3 changed files with 488 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
DICOM_and_UPP配准/static/app.js
View File

@@ -65,6 +65,12 @@ const AUTO_PROGRESS_STEPS = [
{ id: "score", label: "评分" },
{ id: "apply", label: "应用" },
];
const STL_DISPLAY_MODES = ["hidden", "solid", "translucent"];
const STL_DISPLAY_LABELS = {
hidden: "取消显示",
solid: "实体显示",
translucent: "半透明",
};
const state = {
token: localStorage.getItem("dicom_upp_registration_token") || "",
@@ -92,6 +98,8 @@ const state = {
registrationSeriesUid: "",
stlFiles: [],
selectedStlIds: new Set(),
stlDisplayModes: {},
collapsedStlFamilies: new Set(),
algorithmModel: "",
registrationStatus: "unregistered",
pose: { ...DEFAULT_POSE },
@@ -109,6 +117,7 @@ const state = {
autoDeltaBaseline: null,
autoFineRunning: false,
poseControlsLocked: false,
collapsedPoseSections: { manual: false, auto: false },
dirty: false,
dirtyReason: "",
savedPoseSignature: "",
@@ -533,7 +542,7 @@ function stlSelectionSignature() {
}
function visibleModelRecords() {
return state.modelMeshes.filter((record) => state.selectedStlIds.has(Number(record.file?.id)) && record.mesh?.visible !== false);
return state.modelMeshes.filter((record) => stlMode(record.file) !== "hidden" && record.mesh?.visible !== false);
}
function modelPoseMatrix() {
@@ -609,6 +618,8 @@ function clearDetail() {
state.series = [];
state.stlFiles = [];
state.selectedStlIds = new Set();
state.stlDisplayModes = {};
state.collapsedStlFamilies = new Set();
state.selectedSeriesUid = "";
state.registrationSeriesUid = "";
$("activeTitle").textContent = "未选择 CT";
@@ -662,6 +673,8 @@ async function selectCase(ctNumber, algorithmModel = "未指定模型") {
const savedIds = new Set((registration.selected_stl_files || []).map((item) => Number(item.id)).filter(Number.isFinite));
state.selectedStlIds = savedIds.size ? savedIds : pickDefaultStlIds(state.stlFiles);
state.stlDisplayModes = initStlDisplayModes(state.stlFiles, state.selectedStlIds, registration.module_styles || {});
state.collapsedStlFamilies = new Set();
const defaultSeries = pickDefaultSeries(state.series);
const savedSeries = state.series.find((item) => item.series_uid === registration.series_instance_uid);
const shouldUseSavedSeries = registration.registration_status === "registered" && savedSeries;
@@ -728,6 +741,101 @@ function pickDefaultStlIds(files) {
return new Set(ranked.slice(0, Math.min(6, ranked.length)).map((file) => Number(file.id)));
}
function normalizedStlId(fileOrId) {
const id = typeof fileOrId === "object" ? Number(fileOrId?.id) : Number(fileOrId);
return Number.isFinite(id) ? id : null;
}
function validStlDisplayMode(mode) {
return STL_DISPLAY_MODES.includes(mode) ? mode : "";
}
function stlMode(fileOrId) {
const id = normalizedStlId(fileOrId);
if (id == null || !state.selectedStlIds.has(id)) return "hidden";
return validStlDisplayMode(state.stlDisplayModes[id]) || "translucent";
}
function stlFamilyLabel(file) {
return String(file.family || "未分类");
}
function stlFileIndex(file) {
const id = normalizedStlId(file);
const index = state.stlFiles.findIndex((item) => normalizedStlId(item) === id);
return index >= 0 ? index : 0;
}
function stlColor(file, fallbackIndex = 0) {
const index = stlFileIndex(file);
return cssColor(index >= 0 ? index : fallbackIndex);
}
function syncStlDisplayModesForSelection(defaultMode = "translucent") {
const next = {};
state.stlFiles.forEach((file) => {
const id = normalizedStlId(file);
if (id == null || !state.selectedStlIds.has(id)) return;
next[id] = validStlDisplayMode(state.stlDisplayModes[id]) || defaultMode;
});
state.stlDisplayModes = next;
}
function initStlDisplayModes(files, selectedIds, moduleStyles = {}) {
const modes = {};
files.forEach((file) => {
const id = normalizedStlId(file);
if (id == null || !selectedIds.has(id)) return;
const style = moduleStyles?.[file.file_name] || moduleStyles?.[file.segment_name] || {};
const savedMode = validStlDisplayMode(style.mode);
if (savedMode && savedMode !== "hidden") {
modes[id] = savedMode;
return;
}
modes[id] = Number(style.opacity) >= 0.95 ? "solid" : "translucent";
});
return modes;
}
async function setStlMode(fileOrId, mode) {
const id = normalizedStlId(fileOrId);
const nextMode = validStlDisplayMode(mode);
if (id == null || !nextMode) return;
if (nextMode === "hidden") {
state.selectedStlIds.delete(id);
delete state.stlDisplayModes[id];
} else {
state.selectedStlIds.add(id);
state.stlDisplayModes[id] = nextMode;
}
await applyStlSelectionChange();
}
async function cycleStlMode(file) {
const next = {
hidden: "solid",
solid: "translucent",
translucent: "hidden",
}[stlMode(file)] || "translucent";
await setStlMode(file, next);
}
async function setAllStlMode(mode) {
const nextMode = validStlDisplayMode(mode);
if (!state.stlFiles.length || !nextMode) return;
if (nextMode === "hidden") {
state.selectedStlIds = new Set();
state.stlDisplayModes = {};
} else {
state.selectedStlIds = new Set(state.stlFiles.map((file) => normalizedStlId(file)).filter((id) => id != null));
state.stlDisplayModes = {};
state.selectedStlIds.forEach((id) => {
state.stlDisplayModes[id] = nextMode;
});
}
await applyStlSelectionChange();
}
function currentSeries() {
return state.series.find((item) => item.series_uid === state.selectedSeriesUid) || null;
}
@@ -829,56 +937,91 @@ async function selectSeries(uid, options = {}) {
}
function renderStl() {
$("stlCount").textContent = state.stlFiles.length;
$("stlCount").textContent = state.stlFiles.length ? `${state.selectedStlIds.size}/${state.stlFiles.length}` : "0";
const models = [...new Set(state.stlFiles.map((item) => item.algorithm_model || state.algorithmModel || "未指定模型"))];
$("modelRail").innerHTML = models.map((model) => `<span class="chip active">${escapeHtml(model)}</span>`).join("");
$("stlList").innerHTML = state.stlFiles.length
? state.stlFiles
.map((file, index) => {
const checked = state.selectedStlIds.has(Number(file.id));
if (!state.stlFiles.length) {
$("stlList").innerHTML = `<div class="empty-state">当前算法模型没有 STL 文件</div>`;
renderAutoBoneOptions();
return;
}
const grouped = new Map();
state.stlFiles.forEach((file, index) => {
const family = stlFamilyLabel(file);
if (!grouped.has(family)) grouped.set(family, []);
grouped.get(family).push({ file, index });
});
$("stlList").innerHTML = [...grouped.entries()].map(([family, rows]) => {
const visibleCount = rows.filter(({ file }) => stlMode(file) !== "hidden").length;
const collapsed = state.collapsedStlFamilies.has(family);
return `
<label class="stl-row ${checked ? "active" : ""}" title="${escapeHtml(file.file_name)}">
<input type="checkbox" data-stl="${Number(file.id)}" ${checked ? "checked" : ""} />
<span>
<section class="stl-family ${collapsed ? "collapsed" : ""}">
<button class="stl-family-head" type="button" data-family-toggle="${escapeHtml(family)}" title="收起/展开 ${escapeHtml(family)}">
<span>${escapeHtml(family)}</span>
<em>${visibleCount}/${rows.length}</em>
<i></i>
</button>
<div class="stl-family-list">
${rows.map(({ file, index }) => {
const id = normalizedStlId(file);
const mode = stlMode(file);
const color = stlColor(file, index);
return `
<button class="stl-row stl-mode-${mode} ${mode !== "hidden" ? "active" : ""}" type="button" data-stl-mode="${id}" style="--stl-color:${escapeHtml(color)}" title="${escapeHtml(file.file_name)}">
<span class="stl-row-main">
<strong>${escapeHtml(file.segment_name || file.file_name)}</strong>
<small>${escapeHtml(file.family || "未分类")} · ${escapeHtml(file.category || "")} · ${formatBytes(file.size_bytes)}</small>
<small style="color:${cssColor(index)}">${escapeHtml(file.file_name)}</small>
<small class="stl-file-name">${escapeHtml(file.file_name)}</small>
</span>
</label>
<span class="stl-visibility-swatch ${mode}" aria-label="${escapeHtml(STL_DISPLAY_LABELS[mode])}"></span>
</button>
`;
})
.join("")
: `<div class="empty-state">当前算法模型没有 STL 文件</div>`;
$("stlList").querySelectorAll("input[data-stl]").forEach((input) => {
input.addEventListener("change", async () => {
const id = Number(input.dataset.stl);
if (input.checked) state.selectedStlIds.add(id);
else state.selectedStlIds.delete(id);
await applyStlSelectionChange();
}).join("")}
</div>
</section>
`;
}).join("");
$("stlList").querySelectorAll("[data-family-toggle]").forEach((button) => {
button.addEventListener("click", () => {
const family = button.dataset.familyToggle;
if (state.collapsedStlFamilies.has(family)) state.collapsedStlFamilies.delete(family);
else state.collapsedStlFamilies.add(family);
renderStl();
});
});
$("stlList").querySelectorAll("[data-stl-mode]").forEach((button) => {
button.addEventListener("click", async () => {
const id = Number(button.dataset.stlMode);
const file = state.stlFiles.find((item) => normalizedStlId(item) === id);
if (file) await cycleStlMode(file);
});
});
renderAutoBoneOptions();
}
async function selectAllStl() {
if (!state.stlFiles.length) return;
state.selectedStlIds = new Set(state.stlFiles.map((file) => Number(file.id)).filter(Number.isFinite));
await applyStlSelectionChange();
await setAllStlMode("translucent");
}
async function invertStlSelection() {
if (!state.stlFiles.length) return;
const next = new Set();
const nextSelected = new Set();
const nextModes = {};
state.stlFiles.forEach((file) => {
const id = Number(file.id);
if (Number.isFinite(id) && !state.selectedStlIds.has(id)) next.add(id);
const id = normalizedStlId(file);
if (id != null && !state.selectedStlIds.has(id)) {
nextSelected.add(id);
nextModes[id] = "translucent";
}
});
state.selectedStlIds = next;
state.selectedStlIds = nextSelected;
state.stlDisplayModes = nextModes;
await applyStlSelectionChange();
}
async function applyStlSelectionChange() {
markDirty("stl");
syncStlDisplayModesForSelection();
renderStl();
const loadedIds = new Set(state.modelMeshes.map((record) => Number(record.file?.id)).filter(Number.isFinite));
const needsLoad = [...state.selectedStlIds].some((id) => !loadedIds.has(Number(id)));
@@ -1090,6 +1233,15 @@ function updateStretchButtons() {
});
}
function renderPoseSectionCollapse() {
const manualCollapsed = Boolean(state.collapsedPoseSections.manual);
const autoCollapsed = Boolean(state.collapsedPoseSections.auto);
$("poseManualBody")?.classList.toggle("collapsed", manualCollapsed);
$("poseAutoBody")?.classList.toggle("collapsed", autoCollapsed);
$("poseManualToggle")?.classList.toggle("collapsed", manualCollapsed);
$("poseAutoToggle")?.classList.toggle("collapsed", autoCollapsed);
}
function applyPoseLockState() {
const locked = Boolean(state.poseControlsLocked);
const selectors = [
@@ -1099,6 +1251,7 @@ function applyPoseLockState() {
"#resetRotationBtn",
"#resetTransformBtn",
"#resetFlipBtn",
"#openAutoModalBtn",
"#autoSettingsPanel input",
"#autoSettingsPanel button",
"#savePoseBtn",
@@ -1518,9 +1671,11 @@ function applyModelDetail() {
state.modelMeshes.forEach((record) => {
const material = record.mesh.material;
if (!material) return;
material.opacity = detail.opacity;
material.transparent = detail.opacity < 1;
material.depthWrite = detail.depthWrite;
const mode = stlMode(record.file);
const opacity = mode === "solid" ? 1 : Math.min(0.52, detail.opacity);
material.opacity = opacity;
material.transparent = opacity < 1;
material.depthWrite = mode === "solid" ? true : false;
material.wireframe = detail.wireframe;
material.metalness = detail.metalness;
material.roughness = detail.roughness;
@@ -1530,9 +1685,8 @@ function applyModelDetail() {
}
function applyStlVisibility() {
const selected = state.selectedStlIds;
state.modelMeshes.forEach((record) => {
record.mesh.visible = selected.has(Number(record.file?.id));
record.mesh.visible = stlMode(record.file) !== "hidden";
});
if (state.modelBoundsFrame) state.modelBoundsFrame.visible = state.modelMeshes.some((record) => record.mesh.visible);
if (state.dicomGroup) state.dicomGroup.visible = state.fusionMode !== "model";
@@ -2325,8 +2479,9 @@ async function buildStlModels(volume, onProgress = null) {
const geometry = await loader.loadAsync(`/api/stl/file?${params.toString()}`);
geometry.computeVertexNormals();
geometry.computeBoundingBox();
const color = stlColor(file, index);
const material = new THREE.MeshStandardMaterial({
color: STL_COLORS[index % STL_COLORS.length],
color,
metalness: detail.metalness,
roughness: detail.roughness,
transparent: true,
@@ -2338,9 +2493,9 @@ async function buildStlModels(volume, onProgress = null) {
const mesh = new THREE.Mesh(geometry, material);
mesh.name = file.segment_name || file.file_name;
mesh.userData.file = file;
mesh.userData.color = cssColor(index);
mesh.userData.color = color;
state.rawModelGroup.add(mesh);
const record = { mesh, file, color: cssColor(Number(file.id) || index), index: Number(file.id) || index };
const record = { mesh, file, color, index };
state.modelMeshes.push(record);
freshRecords.push(record);
onProgress?.(((index + 1) / Math.max(files.length, 1)) * 100);
@@ -2385,6 +2540,7 @@ async function buildStlModels(volume, onProgress = null) {
updateBaseModelScaleFromBounds();
if (size.x || size.y || size.z) addModelBoundsFrame(size);
applyStlVisibility();
applyModelDetail();
applyPose();
scheduleMappingDraw();
onProgress?.(100);
@@ -2524,6 +2680,39 @@ function readAutoSettings() {
};
}
function resetAutoSettings() {
if (state.poseControlsLocked) return;
const checkedDefaults = {
autoX: true,
autoY: true,
autoZ: true,
autoScale: true,
};
Object.entries(checkedDefaults).forEach(([id, value]) => {
const input = $(id);
if (input) input.checked = value;
});
const valueDefaults = {
autoSampleSlices: 9,
autoSampleSlicesNumber: 9,
autoBoneReward: 1,
autoOutsidePenalty: 0.1,
autoMovePenalty: 0,
autoScalePenalty: 0,
autoIterations: 30,
autoCandidates: 36,
};
Object.entries(valueDefaults).forEach(([id, value]) => {
const input = $(id);
if (input) input.value = value;
});
renderAutoBoneOptions();
state.autoResult = null;
setAutoProgress(false);
setAutoState("已恢复", "ok");
$("autoResult").textContent = "迭代参数已恢复初始设置。";
}
function poseDelta(from, to) {
return {
rotateX: Number(((to.rotateX || 0) - (from.rotateX || 0)).toFixed(3)),
@@ -2999,7 +3188,15 @@ async function saveRegistration(nextStatus = null) {
algorithm_model: file.algorithm_model,
})),
transform: state.pose,
module_styles: Object.fromEntries(selectedFiles.map((file, index) => [file.file_name, { color: cssColor(index), opacity: modelDetailSettings().opacity, detail: state.modelDetail }])),
module_styles: Object.fromEntries(selectedFiles.map((file, index) => {
const mode = stlMode(file);
return [file.file_name, {
color: stlColor(file, index),
opacity: mode === "solid" ? 1 : 0.52,
detail: state.modelDetail,
mode,
}];
})),
dicom_reference: {
series_uid: selectedSeries.series_uid,
series_number: selectedSeries.series_number,
@@ -3128,17 +3325,24 @@ function wireEvents() {
$("saveBtn").addEventListener("click", () => saveRegistration());
$("statusBtn").addEventListener("click", () => saveRegistration(state.registrationStatus === "registered" ? "unregistered" : "registered"));
$("notes").addEventListener("input", () => markDirty("notes"));
$("selectAllStlBtn").addEventListener("click", selectAllStl);
$("invertStlBtn").addEventListener("click", invertStlSelection);
$("hideAllStlBtn").addEventListener("click", () => setAllStlMode("hidden"));
$("solidAllStlBtn").addEventListener("click", () => setAllStlMode("solid"));
$("translucentAllStlBtn").addEventListener("click", () => setAllStlMode("translucent"));
$("resetRotationBtn").addEventListener("click", () => resetPose("rotation"));
$("resetTransformBtn").addEventListener("click", () => resetPose("transform"));
$("resetFlipBtn").addEventListener("click", () => resetPose("flip"));
$("poseManualToggle").addEventListener("click", () => {
state.collapsedPoseSections.manual = !state.collapsedPoseSections.manual;
renderPoseSectionCollapse();
});
$("poseAutoToggle").addEventListener("click", () => {
state.collapsedPoseSections.auto = !state.collapsedPoseSections.auto;
renderPoseSectionCollapse();
});
$("stretchXBtn").addEventListener("click", () => stretchAxis("x"));
$("stretchYBtn").addEventListener("click", () => stretchAxis("y"));
$("stretchZBtn").addEventListener("click", () => stretchAxis("z"));
$("openAutoModalBtn").addEventListener("click", () => {
$("autoSettingsPanel").scrollIntoView({ block: "nearest", behavior: "smooth" });
});
$("openAutoModalBtn").addEventListener("click", resetAutoSettings);
$("suggestBoneBtn").addEventListener("click", suggestBoneSelection);
$("autoCoarseBtn")?.addEventListener("click", runAutoCoarse);
$("autoFineBtn")?.addEventListener("click", runAutoFine);
@@ -3308,6 +3512,7 @@ function wireEvents() {
}
wireEvents();
renderPoseSectionCollapse();
if (state.token) {
bootstrap();

20
DICOM_and_UPP配准/static/index.html
View File

@@ -169,9 +169,10 @@
</div>
<div class="tool-section-title compact-title">
<span>STL</span>
<div class="title-actions">
<button id="selectAllStlBtn" type="button">全选</button>
<button id="invertStlBtn" type="button">反选</button>
<div class="title-actions model-visibility-actions">
<button id="hideAllStlBtn" class="model-eye-btn hidden-eye" type="button" title="全部取消显示" aria-label="全部取消显示"><span></span></button>
<button id="solidAllStlBtn" class="model-eye-btn solid-eye" type="button" title="全部实显" aria-label="全部实显"><span></span></button>
<button id="translucentAllStlBtn" class="model-eye-btn translucent-eye" type="button" title="全部半透明" aria-label="全部半透明"><span></span></button>
</div>
<em id="stlCount">0</em>
</div>
@@ -182,8 +183,10 @@
<section class="tool-pane" data-tool-pane="pose">
<div class="tool-section-title">
<span>位姿手动调整</span>
<button id="poseManualToggle" class="section-toggle" type="button" title="收起/展开位姿手动调整" aria-label="收起或展开位姿手动调整"><span></span></button>
<em id="saveState">未保存</em>
</div>
<div id="poseManualBody" class="pose-section-body">
<div class="pose-actions">
<button id="resetRotationBtn" type="button">重置旋转</button>
<button id="resetTransformBtn" type="button">重置平移缩放</button>
@@ -195,13 +198,15 @@
<button data-flip="flipZ">镜像 Z</button>
</div>
<div id="poseGrid" class="pose-grid"></div>
</div>
<div class="tool-section-title">
<span>位姿自动调整</span>
<button id="poseAutoToggle" class="section-toggle" type="button" title="收起/展开位姿自动调整" aria-label="收起或展开位姿自动调整"><span></span></button>
<em id="autoState">未运行</em>
</div>
<div class="auto-box compact-auto">
<button id="openAutoModalBtn" class="wide-action" type="button">自动调整设置</button>
<div id="poseAutoBody" class="pose-section-body auto-box compact-auto">
<button id="openAutoModalBtn" class="wide-action" type="button">恢复初始设置</button>
<div id="autoSettingsPanel" class="auto-settings-panel">
<div class="auto-options modal-options">
<label><input id="autoX" type="checkbox" checked /> X 方向</label>
@@ -228,6 +233,7 @@
</div>
</section>
</div>
<div class="iteration-section-title">迭代参数</div>
<div class="auto-weight-grid">
<label>命中奖励<input id="autoBoneReward" type="number" step="0.1" value="1" /></label>
<label>区域惩罚<input id="autoOutsidePenalty" type="number" step="0.05" value="0.1" /></label>
@@ -236,9 +242,7 @@
<label>迭代轮次<input id="autoIterations" type="number" min="1" max="100" value="30" /></label>
<label>每轮候选<input id="autoCandidates" type="number" min="6" max="96" value="36" /></label>
</div>
<div class="registration-operation-hint">
下方为配准操作区：保存当前位姿、保存并迭代自动微调，或退回上次自动调整前位姿。
</div>
<div class="iteration-section-title">迭代操作区</div>
<div class="pose-actions modal-actions save-pose-actions">
<button id="savePoseBtn" type="button">保存位姿</button>
<button id="saveIterateBtn" type="button">保存并迭代</button>

243
DICOM_and_UPP配准/static/styles.css
View File

@@ -812,6 +812,89 @@ button {
margin-left: auto;
}
.model-visibility-actions {
gap: 5px;
}
.tool-section-title button.model-eye-btn {
width: 30px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.model-eye-btn span {
position: relative;
width: 18px;
height: 13px;
display: block;
}
.model-eye-btn span::before {
content: "";
position: absolute;
inset: 1px 0;
border: 2px solid #c8f7ff;
border-radius: 50% / 60%;
}
.model-eye-btn span::after {
content: "";
position: absolute;
top: 5px;
left: 7px;
width: 5px;
height: 5px;
border-radius: 999px;
background: #c8f7ff;
}
.solid-eye span::before {
background: rgba(45, 212, 191, 0.28);
}
.translucent-eye span::before {
background:
linear-gradient(45deg, rgba(15, 23, 42, 0.82) 25%, transparent 25% 50%, rgba(15, 23, 42, 0.82) 50% 75%, transparent 75%) 0 0 / 5px 5px,
rgba(45, 212, 191, 0.22);
}
.hidden-eye span::after {
top: 5px;
left: -2px;
width: 22px;
height: 2px;
border-radius: 99px;
background: #cbd5e1;
transform: rotate(-38deg);
}
.section-toggle {
width: 30px;
height: 28px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
padding: 0 !important;
}
.section-toggle span {
width: 8px;
height: 8px;
border-right: 2px solid #c8f7ff;
border-bottom: 2px solid #c8f7ff;
transform: rotate(45deg);
transition: transform 0.16s ease;
}
.section-toggle.collapsed span {
transform: rotate(-45deg);
}
.tool-section-title em {
color: var(--muted);
font-size: 12px;
@@ -1486,17 +1569,18 @@ button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
justify-content: flex-start;
gap: 0;
border-left: 1px solid rgba(148, 163, 184, 0.18);
background: #0f172a;
padding: 12px 0 38px;
}
.mapping-slice-rail::before {
content: "";
position: absolute;
top: 26px;
bottom: 56px;
top: 12px;
bottom: 38px;
left: 50%;
width: 8px;
transform: translateX(-50%);
@@ -1507,15 +1591,19 @@ button {
#mappingSliceSlider {
position: relative;
z-index: 1;
width: min(66vh, 520px);
height: 34px;
transform: rotate(-90deg);
width: 34px;
height: 100%;
min-height: 180px;
transform: none;
writing-mode: vertical-lr;
direction: rtl;
appearance: none;
background: transparent;
}
#mappingSliceSlider::-webkit-slider-runnable-track {
height: 8px;
width: 8px;
height: 100%;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
}
@@ -1524,7 +1612,8 @@ button {
appearance: none;
width: 25px;
height: 25px;
margin-top: -8.5px;
margin-left: -8.5px;
margin-top: 0;
border: 3px solid #93c5fd;
border-radius: 7px;
background: #60a5fa;
@@ -1532,7 +1621,8 @@ button {
}
#mappingSliceSlider::-moz-range-track {
height: 8px;
width: 8px;
height: 100%;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
}
@@ -1711,15 +1801,17 @@ input[type="range"] {
.stl-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 12px;
align-items: center;
padding: 10px;
cursor: pointer;
transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}
.stl-row input {
margin-top: 3px;
accent-color: var(--cyan);
.stl-row.stl-mode-hidden {
opacity: 0.62;
background: rgba(8, 12, 18, 0.78);
}
.stl-row strong {
@@ -1731,6 +1823,101 @@ input[type="range"] {
white-space: nowrap;
}
.stl-file-name {
color: var(--stl-color) !important;
}
.stl-family {
margin-bottom: 10px;
}
.stl-family-head {
width: 100%;
min-height: 32px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 14px;
align-items: center;
gap: 8px;
margin: 0 0 7px;
border: 1px solid rgba(45, 212, 191, 0.35);
border-radius: 10px;
background: rgba(20, 184, 166, 0.08);
color: #dffcff;
font-size: 12px;
font-weight: 950;
text-align: left;
padding: 0 10px;
cursor: pointer;
}
.stl-family-head span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stl-family-head em {
color: #9debf4;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
font-style: normal;
}
.stl-family-head i {
width: 8px;
height: 8px;
border-right: 2px solid #9debf4;
border-bottom: 2px solid #9debf4;
transform: rotate(45deg);
transition: transform 0.16s ease;
}
.stl-family.collapsed .stl-family-list {
display: none;
}
.stl-family.collapsed .stl-family-head i {
transform: rotate(-45deg);
}
.stl-visibility-swatch {
width: 24px;
height: 24px;
justify-self: end;
border: 2px solid rgba(226, 232, 240, 0.68);
border-radius: 5px;
background: transparent;
box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.78);
}
.stl-visibility-swatch.solid {
border-color: color-mix(in srgb, var(--stl-color) 78%, #ffffff 22%);
background: var(--stl-color);
}
.stl-visibility-swatch.translucent {
border-color: color-mix(in srgb, var(--stl-color) 72%, #ffffff 28%);
background:
linear-gradient(45deg, rgba(2, 6, 23, 0.82) 25%, transparent 25% 50%, rgba(2, 6, 23, 0.82) 50% 75%, transparent 75%) 0 0 / 8px 8px,
color-mix(in srgb, var(--stl-color) 48%, transparent);
}
.stl-visibility-swatch.hidden {
border-color: rgba(148, 163, 184, 0.66);
background: rgba(15, 23, 42, 0.5);
}
.stl-visibility-swatch.hidden::after {
content: "";
display: block;
width: 26px;
height: 2px;
margin: 9px 0 0 -3px;
border-radius: 99px;
background: rgba(226, 232, 240, 0.76);
transform: rotate(-45deg);
}
.pose-grid {
display: grid;
gap: 10px;
@@ -1830,6 +2017,18 @@ input[type="range"] {
gap: 8px;
}
.pose-section-body.collapsed {
display: none;
}
.iteration-section-title {
margin: 2px 0 -2px;
color: #9debf4;
font-size: 12px;
font-weight: 950;
letter-spacing: 0;
}
.auto-settings-panel {
display: grid;
gap: 10px;
@@ -2039,18 +2238,6 @@ input[type="range"] {
margin: 12px 0 0;
}
.registration-operation-hint {
border: 1px solid rgba(25, 214, 195, 0.26);
border-radius: 8px;
background: rgba(20, 184, 166, 0.08);
color: #a7f3d0;
font-size: 11px;
font-weight: 900;
line-height: 1.45;
margin-top: 12px;
padding: 9px 10px;
}
.auto-config-grid {
display: grid;
grid-template-columns: minmax(240px, 0.85fr) minmax(300px, 1.15fr);