Refine BIM glass theming and panel scroll layout
This commit is contained in:
CODEX
+124
-58
@@ -64,6 +64,69 @@
|
||||
const lum = 0.2126 * toLinear(rgb[0]) + 0.7152 * toLinear(rgb[1]) + 0.0722 * toLinear(rgb[2]);
|
||||
return (lum + 0.05) / 0.05 >= 1.05 / (lum + 0.05) ? "#15170f" : "#f5f5fa";
|
||||
};
|
||||
const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
|
||||
const colorParts = (value, fallback) => {
|
||||
const parsed = parseColor(value);
|
||||
if (parsed && parsed.every((channel) => Number.isFinite(channel))) return parsed;
|
||||
const parsedFallback = parseColor(fallback);
|
||||
if (parsedFallback && parsedFallback.every((channel) => Number.isFinite(channel))) return parsedFallback;
|
||||
return [28, 28, 28];
|
||||
};
|
||||
const alphaValue = (value, fallback) => {
|
||||
const numeric = Number(value);
|
||||
return Number.isFinite(numeric) ? clamp(numeric, 0, 1) : fallback;
|
||||
};
|
||||
const rgba = (parts, alpha) => {
|
||||
const [r, g, b] = parts.map((channel) => Math.round(clamp(channel, 0, 255)));
|
||||
return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1).toFixed(3)})`;
|
||||
};
|
||||
const applyGlassSettings = () => {
|
||||
const panelColor = colorParts(s.modalBg, "#1c1c1c");
|
||||
const focusColor = colorParts(s.modalFocus, "#292929");
|
||||
const controlColor = colorParts(s.modalElement, s.modalFocus || "#262626");
|
||||
const outlineColor = colorParts(s.modalBorder, s.modalElementOutline || "#1c1c1c");
|
||||
const controlOutlineColor = colorParts(s.modalElementOutline, s.modalBorder || "#262626");
|
||||
const modalBgAlpha = alphaValue(s.modalBgAlpha, 1);
|
||||
const modalFocusAlpha = alphaValue(s.modalFocusAlpha, 0.35);
|
||||
const panelAlpha = clamp(0.24 + modalBgAlpha * 0.48, 0.32, 0.88);
|
||||
const panelStrongAlpha = clamp(panelAlpha + 0.1, 0.42, 0.92);
|
||||
const panelSoftAlpha = clamp(panelAlpha - 0.16, 0.2, 0.72);
|
||||
const sectionAlpha = clamp(modalFocusAlpha * 0.6, 0.04, 0.42);
|
||||
const controlAlpha = clamp(0.12 + modalFocusAlpha * 0.9, 0.16, 0.66);
|
||||
const controlHoverAlpha = clamp(controlAlpha + 0.08, 0.22, 0.74);
|
||||
const outlineAlpha = clamp(0.055 + modalFocusAlpha * 0.18, 0.065, 0.2);
|
||||
const controlOutlineAlpha = clamp(0.045 + modalFocusAlpha * 0.12, 0.055, 0.16);
|
||||
|
||||
const panelBg = rgba(panelColor, panelAlpha);
|
||||
const panelBgStrong = rgba(panelColor, panelStrongAlpha);
|
||||
const panelBgSoft = rgba(panelColor, panelSoftAlpha);
|
||||
const sectionBg = rgba(focusColor, sectionAlpha);
|
||||
const outline = rgba(outlineColor, outlineAlpha);
|
||||
const outlineBright = rgba(outlineColor, clamp(outlineAlpha + 0.05, 0.08, 0.26));
|
||||
const outlineMid = rgba(outlineColor, clamp(outlineAlpha + 0.015, 0.07, 0.22));
|
||||
const outlineDim = rgba(outlineColor, clamp(outlineAlpha * 0.62, 0.04, 0.16));
|
||||
const controlBg = rgba(controlColor, controlAlpha);
|
||||
const controlHover = rgba(focusColor, controlHoverAlpha);
|
||||
const controlShadow = rgba(controlOutlineColor, controlOutlineAlpha);
|
||||
|
||||
set("--nodedc-glass-panel-bg", panelBg);
|
||||
set("--nodedc-glass-panel-bg-strong", panelBgStrong);
|
||||
set("--nodedc-glass-panel-bg-soft", panelBgSoft);
|
||||
set("--nodedc-glass-panel-surface", `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.014) 100%), ${panelBg}`);
|
||||
set("--nodedc-glass-panel-surface-strong", `linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.016) 100%), ${panelBgStrong}`);
|
||||
set("--nodedc-glass-section-bg", `linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.01) 100%), ${sectionBg}`);
|
||||
set("--nodedc-glass-outline", outline);
|
||||
set("--nodedc-glass-outline-gradient", `linear-gradient(180deg, ${outlineBright} 0%, ${outlineMid} 56%, ${outlineDim} 100%)`);
|
||||
set("--nodedc-glass-panel-shadow", `inset 0 1px 0 ${outlineDim}, 0 22px 72px rgba(0, 0, 0, 0.42)`);
|
||||
set("--nodedc-glass-control-bg", `linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%), ${controlBg}`);
|
||||
set("--nodedc-glass-control-hover", `linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.026) 100%), ${controlHover}`);
|
||||
set("--nodedc-glass-control-shadow", `inset 0 1px 0 ${controlShadow}`);
|
||||
set("--nodedc-header-dropdown-bg", panelBgStrong);
|
||||
set("--nodedc-header-dropdown-item-bg", controlBg);
|
||||
set("--nodedc-header-dropdown-item-hover-bg", controlHover);
|
||||
set("--nodedc-header-dropdown-item-active-bg", s.toolbarBgActive);
|
||||
set("--nodedc-header-dropdown-item-active-color", s.toolbarBgActive ? readableTextColor(s.toolbarBgActive) : undefined);
|
||||
};
|
||||
set("--bg-outer", s.bgOuter);
|
||||
set("--canvas-top", s.canvasTop);
|
||||
set("--canvas-bottom", s.canvasBottom);
|
||||
@@ -88,6 +151,7 @@
|
||||
set("--modal-element", s.modalElement);
|
||||
set("--modal-element-outline", s.modalElementOutline);
|
||||
set("--modal-radius", s.modalRadius);
|
||||
applyGlassSettings();
|
||||
set("--project-btn-fill", s.projectBtnFill);
|
||||
set("--project-btn-border", s.projectBtnBorder);
|
||||
set("--project-btn-hover", s.projectBtnHover);
|
||||
@@ -134,7 +198,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=30">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=32">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@@ -186,68 +250,70 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-section inspector-main-section">
|
||||
<div id="treeContainer" class="tree"></div>
|
||||
<div class="inspector-controls">
|
||||
<div class="inspector-control-row inspector-control-row--half" id="displayModeControl">
|
||||
<div class="inspector-control-label">Режим отображения</div>
|
||||
<div class="inspector-select-host" id="displayModeSelect"></div>
|
||||
<div class="inspector-panel-body">
|
||||
<div class="panel-section inspector-main-section">
|
||||
<div id="treeContainer" class="tree"></div>
|
||||
<div class="inspector-controls">
|
||||
<div class="inspector-control-row inspector-control-row--half" id="displayModeControl">
|
||||
<div class="inspector-control-label">Режим отображения</div>
|
||||
<div class="inspector-select-host" id="displayModeSelect"></div>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--half" id="lightingModeControl">
|
||||
<div class="inspector-control-label">Свет</div>
|
||||
<div class="inspector-select-host" id="lightingModeSelect"></div>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--full" id="navigationAxisControl">
|
||||
<div class="inspector-control-label">Ось навигации</div>
|
||||
<div class="inspector-select-host" id="navigationAxisSelect"></div>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--full inspector-control-row--slider" id="zoomSpeedControl"></div>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--half" id="lightingModeControl">
|
||||
<div class="inspector-control-label">Свет</div>
|
||||
<div class="inspector-select-host" id="lightingModeSelect"></div>
|
||||
</div>
|
||||
<div class="panel-section" id="projectNameSection">
|
||||
<h3>Название проекта</h3>
|
||||
<input type="text" id="projectNameInput" class="project-name-input" placeholder="Проект" autocomplete="off">
|
||||
<div class="error-text inline-error" id="projectNameError"></div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h3>Глобальные координаты</h3>
|
||||
<div class="muted" style="margin-bottom:6px;">Центр выделения (мировые)</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="globalX"></label>
|
||||
<label>Y <input type="text" id="globalY"></label>
|
||||
<label>Z <input type="text" id="globalZ"></label>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--full" id="navigationAxisControl">
|
||||
<div class="inspector-control-label">Ось навигации</div>
|
||||
<div class="inspector-select-host" id="navigationAxisSelect"></div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h3>Трансформации</h3>
|
||||
<div class="muted" style="margin-bottom:6px;">Перемещение</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="posX"></label>
|
||||
<label>Y <input type="text" id="posY"></label>
|
||||
<label>Z <input type="text" id="posZ"></label>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--full inspector-control-row--slider" id="zoomSpeedControl"></div>
|
||||
<div class="muted" style="margin:8px 0 6px;">Вращение (deg)</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="rotX"></label>
|
||||
<label>Y <input type="text" id="rotY"></label>
|
||||
<label>Z <input type="text" id="rotZ"></label>
|
||||
</div>
|
||||
<div class="muted" style="margin:8px 0 6px;">Масштаб</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="scaleX"></label>
|
||||
<label>Y <input type="text" id="scaleY"></label>
|
||||
<label>Z <input type="text" id="scaleZ"></label>
|
||||
</div>
|
||||
<small id="transformHint" class="muted">Выберите объект в инспекторе или сцене, чтобы редактировать.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-section" id="projectNameSection">
|
||||
<h3>Название проекта</h3>
|
||||
<input type="text" id="projectNameInput" class="project-name-input" placeholder="Проект" autocomplete="off">
|
||||
<div class="error-text inline-error" id="projectNameError"></div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h3>Глобальные координаты</h3>
|
||||
<div class="muted" style="margin-bottom:6px;">Центр выделения (мировые)</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="globalX"></label>
|
||||
<label>Y <input type="text" id="globalY"></label>
|
||||
<label>Z <input type="text" id="globalZ"></label>
|
||||
<div class="panel-section">
|
||||
<h3>Журнал</h3>
|
||||
<div id="logList" class="log"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h3>Трансформации</h3>
|
||||
<div class="muted" style="margin-bottom:6px;">Перемещение</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="posX"></label>
|
||||
<label>Y <input type="text" id="posY"></label>
|
||||
<label>Z <input type="text" id="posZ"></label>
|
||||
<div class="panel-section" id="saveProjectSection">
|
||||
<button class="secondary-btn model-settings-btn" id="saveModelSettingsButton" type="button">Сохранить настройки</button>
|
||||
<button class="primary-btn" id="saveProjectButton" type="button">Сохранить проект</button>
|
||||
<button class="secondary-btn danger-btn" id="deleteProjectButton" type="button">Удалить проект</button>
|
||||
</div>
|
||||
<div class="muted" style="margin:8px 0 6px;">Вращение (deg)</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="rotX"></label>
|
||||
<label>Y <input type="text" id="rotY"></label>
|
||||
<label>Z <input type="text" id="rotZ"></label>
|
||||
</div>
|
||||
<div class="muted" style="margin:8px 0 6px;">Масштаб</div>
|
||||
<div class="transform-grid">
|
||||
<label>X <input type="text" id="scaleX"></label>
|
||||
<label>Y <input type="text" id="scaleY"></label>
|
||||
<label>Z <input type="text" id="scaleZ"></label>
|
||||
</div>
|
||||
<small id="transformHint" class="muted">Выберите объект в инспекторе или сцене, чтобы редактировать.</small>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h3>Журнал</h3>
|
||||
<div id="logList" class="log"></div>
|
||||
</div>
|
||||
<div class="panel-section" id="saveProjectSection">
|
||||
<button class="secondary-btn model-settings-btn" id="saveModelSettingsButton" type="button">Сохранить настройки</button>
|
||||
<button class="primary-btn" id="saveProjectButton" type="button">Сохранить проект</button>
|
||||
<button class="secondary-btn danger-btn" id="deleteProjectButton" type="button">Удалить проект</button>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="inspector-restore-tray" id="inspectorRestoreTray" hidden>
|
||||
@@ -570,6 +636,6 @@
|
||||
<input id="fileInput" class="hidden" type="file"
|
||||
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
|
||||
|
||||
<script type="module" src="./dcViewer.js?v=43"></script>
|
||||
<script type="module" src="./dcViewer.js?v=45"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user