SILVER
/
NODEDC_BIM_VIEWER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tune section toolbar icons and gizmo thickness

This commit is contained in:
CODEX 2026-06-18 22:21:14 +03:00
parent 84b28ba12c
commit f28de867c7
6 changed files with 71 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/dcViewer.css
View File

@ -55,6 +55,7 @@
--section-axis-y: #35ff4f; --section-axis-y: #35ff4f;
--section-axis-z: #285bff; --section-axis-z: #285bff;
--section-gizmo-diameter: 1; --section-gizmo-diameter: 1;
--section-gizmo-thickness: 1;
--section-plane-fill: #606060; --section-plane-fill: #606060;
--section-plane-alpha: 0.32; --section-plane-alpha: 0.32;
--section-plane-edge: #0d0d0d; --section-plane-edge: #0d0d0d;
@ -1968,7 +1969,7 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
background: var(--toolbar-bg); background: var(--toolbar-bg);
color: var(--text); color: var(--text);
font-size: var(--tb-icon-size, 13px); font-size: var(--tb-icon-size, 13px);
font-weight: 700; font-weight: 500;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
padding: var(--tb-icon-pad, 5px); padding: var(--tb-icon-pad, 5px);
@ -1991,17 +1992,20 @@ body[data-viewer-mode="guest"] .inspector-restore-tray {
.section-tool-btn svg { .section-tool-btn svg {
display: block; display: block;
width: var(--tb-svg-size, 24px); width: 12px;
height: var(--tb-svg-size, 24px); height: 12px;
fill: none; fill: none;
stroke: currentColor; stroke: currentColor;
stroke-width: 1.8; stroke-width: 1.45;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
} }
.section-axis-btn { .section-axis-btn {
letter-spacing: 0; letter-spacing: 0;
font-size: 11px;
font-weight: 600;
padding-top: 1px;
} }
.section-overview { .section-overview {

5
frontend/dcViewer.js
View File

@ -1,10 +1,10 @@
const SDK_VERSION = "2.6.78"; // соответствует package.json const SDK_VERSION = "2.6.78"; // соответствует package.json
const SDK_URL = "./lib/dc-camera-context.es.js?v=2"; const SDK_URL = "./lib/dc-camera-context.es.js?v=3";
import { createLogo } from "./src/ui/logo.js"; import { createLogo } from "./src/ui/logo.js";
import { toolbarConfig, applyToolbarVars } from "./src/ui/toolbar.js"; import { toolbarConfig, applyToolbarVars } from "./src/ui/toolbar.js";
import { createTemplatesMenu } from "./src/ui/templatesMenu.js?v=2"; import { createTemplatesMenu } from "./src/ui/templatesMenu.js?v=2";
import { createSettingsMenu } from "./src/ui/settingsMenu.js?v=6"; import { createSettingsMenu } from "./src/ui/settingsMenu.js?v=7";
import { createMeasurementModal } from "./src/ui/measurementModal.js"; import { createMeasurementModal } from "./src/ui/measurementModal.js";
import { createGlassSelect } from "./src/ui/glassSelect.js"; import { createGlassSelect } from "./src/ui/glassSelect.js";
import { createSliderControl } from "./src/ui/controls/slider.js"; import { createSliderControl } from "./src/ui/controls/slider.js";
@ -1011,6 +1011,7 @@ const sectionPlaneThemeFromCSS = () => ({
z: hexToRgb01(cssValue("--section-axis-z", "#285bff")), z: hexToRgb01(cssValue("--section-axis-z", "#285bff")),
}, },
gizmoDiameter: clampNumber(parseFloat(cssValue("--section-gizmo-diameter", "1")), 0.5, 1.8, 1), gizmoDiameter: clampNumber(parseFloat(cssValue("--section-gizmo-diameter", "1")), 0.5, 1.8, 1),
gizmoThickness: clampNumber(parseFloat(cssValue("--section-gizmo-thickness", "1")), 0.5, 2.5, 1),
planeFillColor: hexToRgb01(cssValue("--section-plane-fill", "#606060")), planeFillColor: hexToRgb01(cssValue("--section-plane-fill", "#606060")),
planeFillAlpha: clampNumber(parseFloat(cssValue("--section-plane-alpha", "0.32")), 0, 1, 0.32), planeFillAlpha: clampNumber(parseFloat(cssValue("--section-plane-alpha", "0.32")), 0, 1, 0.32),
planeEdgeColor: hexToRgb01(cssValue("--section-plane-edge", "#0d0d0d")), planeEdgeColor: hexToRgb01(cssValue("--section-plane-edge", "#0d0d0d")),

5
frontend/index.html
View File

@ -85,6 +85,7 @@
set("--section-axis-y", s.sectionAxisY); set("--section-axis-y", s.sectionAxisY);
set("--section-axis-z", s.sectionAxisZ); set("--section-axis-z", s.sectionAxisZ);
set("--section-gizmo-diameter", s.sectionGizmoDiameter); set("--section-gizmo-diameter", s.sectionGizmoDiameter);
set("--section-gizmo-thickness", s.sectionGizmoThickness);
set("--section-plane-fill", s.sectionPlaneFill); set("--section-plane-fill", s.sectionPlaneFill);
set("--section-plane-alpha", s.sectionPlaneAlpha); set("--section-plane-alpha", s.sectionPlaneAlpha);
set("--section-plane-edge", s.sectionPlaneEdge); set("--section-plane-edge", s.sectionPlaneEdge);
@ -97,7 +98,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./dcViewer.css?v=19"> <link rel="stylesheet" href="./dcViewer.css?v=20">
</head> </head>
<body> <body>
<header> <header>
@ -357,6 +358,6 @@
<input id="fileInput" class="hidden" type="file" <input id="fileInput" class="hidden" type="file"
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl"> accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
<script type="module" src="./dcViewer.js?v=24"></script> <script type="module" src="./dcViewer.js?v=25"></script>
</body> </body>
</html> </html>

42
frontend/lib/dc-camera-context.es.js
View File

@ -126568,6 +126568,45 @@ class TransformControl {
axisHandle: tubeGeometry(handleRadius, arrowLength, 20) axisHandle: tubeGeometry(handleRadius, arrowLength, 20)
}; };
const updateGeometryPositions = (geometry, cfg) => {
if (geometry?.positions && cfg?.positions && geometry.positions.length === cfg.positions.length) {
geometry.positions = cfg.positions;
}
};
this._guideThicknessScale = 1;
this._setGuideThickness = (scale = 1) => {
const nextScale = Math.max(0.5, Math.min(2.5, Number(scale) || 1));
if (nextScale === this._guideThicknessScale) {
return;
}
this._guideThicknessScale = nextScale;
const guideTube = tubeRadius * nextScale;
updateGeometryPositions(shapes.curve, buildTorusGeometry({
radius: arrowLength - 0.2,
tube: guideTube,
radialSegments: 64,
tubeSegments: 14,
arc: (Math.PI * 2.0) * 0.25
}));
updateGeometryPositions(shapes.hoop, buildTorusGeometry({
radius: arrowLength - 0.2,
tube: guideTube,
radialSegments: 64,
tubeSegments: 8,
arc: Math.PI * 2.0
}));
updateGeometryPositions(shapes.axis, buildCylinderGeometry({
radiusTop: guideTube,
radiusBottom: guideTube,
radialSegments: 20,
heightSegments: 1,
height: arrowLength,
openEnded: false
}));
rootNode.scene?.glRedraw?.();
};
const colorMaterial = (rgb) => new PhongMaterial(rootNode, { const colorMaterial = (rgb) => new PhongMaterial(rootNode, {
diffuse: rgb, diffuse: rgb,
emissive: rgb, emissive: rgb,
@ -127051,6 +127090,9 @@ class TransformControl {
this._styleScale = style.gizmoDiameter; this._styleScale = style.gizmoDiameter;
this._applyRootScale?.(); this._applyRootScale?.();
} }
if (style.gizmoThickness !== undefined) {
this._setGuideThickness?.(style.gizmoThickness);
}
if (style.axes) { if (style.axes) {
this._displayMeshes.x?.setColor?.(style.axes.x); this._displayMeshes.x?.setColor?.(style.axes.x);
this._displayMeshes.y?.setColor?.(style.axes.y); this._displayMeshes.y?.setColor?.(style.axes.y);

14
frontend/src/ui/settingsMenu.js
View File

@ -53,6 +53,7 @@ const defaultSettings = {
sectionAxisY: "#35ff4f", sectionAxisY: "#35ff4f",
sectionAxisZ: "#285bff", sectionAxisZ: "#285bff",
sectionGizmoDiameter: 1, sectionGizmoDiameter: 1,
sectionGizmoThickness: 1,
sectionPlaneFill: "#606060", sectionPlaneFill: "#606060",
sectionPlaneAlpha: 0.32, sectionPlaneAlpha: 0.32,
sectionPlaneEdge: "#0d0d0d", sectionPlaneEdge: "#0d0d0d",
@ -121,6 +122,7 @@ const applySettings = (s) => {
root.style.setProperty("--section-axis-y", s.sectionAxisY); root.style.setProperty("--section-axis-y", s.sectionAxisY);
root.style.setProperty("--section-axis-z", s.sectionAxisZ); root.style.setProperty("--section-axis-z", s.sectionAxisZ);
root.style.setProperty("--section-gizmo-diameter", s.sectionGizmoDiameter); root.style.setProperty("--section-gizmo-diameter", s.sectionGizmoDiameter);
root.style.setProperty("--section-gizmo-thickness", s.sectionGizmoThickness);
root.style.setProperty("--section-plane-fill", s.sectionPlaneFill); root.style.setProperty("--section-plane-fill", s.sectionPlaneFill);
root.style.setProperty("--section-plane-alpha", s.sectionPlaneAlpha); root.style.setProperty("--section-plane-alpha", s.sectionPlaneAlpha);
root.style.setProperty("--section-plane-edge", s.sectionPlaneEdge); root.style.setProperty("--section-plane-edge", s.sectionPlaneEdge);
@ -384,6 +386,18 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
setVal("sectionGizmoDiameter", Math.max(0.5, Math.min(1.8, Number(val) / 100))); setVal("sectionGizmoDiameter", Math.max(0.5, Math.min(1.8, Number(val) / 100)));
}, },
}); });
addSettingsSlider({
parent: sectionCut,
label: "Толщина гизмо",
value: Math.round(Math.max(0.5, Math.min(2.5, Number(state.sectionGizmoThickness ?? 1))) * 100),
min: 50,
max: 250,
step: 5,
formatValue: (val) => `${Math.round(val)}%`,
onChange: (val) => {
setVal("sectionGizmoThickness", Math.max(0.5, Math.min(2.5, Number(val) / 100)));
},
});
addColor(sectionCut, "Плоскость", "sectionPlaneFill"); addColor(sectionCut, "Плоскость", "sectionPlaneFill");
addSettingsSlider({ addSettingsSlider({
parent: sectionCut, parent: sectionCut,

1
frontend/theme.js
View File

@ -52,6 +52,7 @@ const PROJECT_THEME = {
sectionAxisY: "#35ff4f", sectionAxisY: "#35ff4f",
sectionAxisZ: "#285bff", sectionAxisZ: "#285bff",
sectionGizmoDiameter: 1, sectionGizmoDiameter: 1,
sectionGizmoThickness: 1,
sectionPlaneFill: "#606060", sectionPlaneFill: "#606060",
sectionPlaneAlpha: 0.32, sectionPlaneAlpha: 0.32,
sectionPlaneEdge: "#0d0d0d", sectionPlaneEdge: "#0d0d0d",