From f28de867c78e4956942b568b1c60138b8ea1e6d5 Mon Sep 17 00:00:00 2001 From: CODEX Date: Thu, 18 Jun 2026 22:21:14 +0300 Subject: [PATCH] Tune section toolbar icons and gizmo thickness --- frontend/dcViewer.css | 12 +++++--- frontend/dcViewer.js | 5 ++-- frontend/index.html | 5 ++-- frontend/lib/dc-camera-context.es.js | 42 ++++++++++++++++++++++++++++ frontend/src/ui/settingsMenu.js | 14 ++++++++++ frontend/theme.js | 1 + 6 files changed, 71 insertions(+), 8 deletions(-) diff --git a/frontend/dcViewer.css b/frontend/dcViewer.css index 341444c..835dffa 100644 --- a/frontend/dcViewer.css +++ b/frontend/dcViewer.css @@ -55,6 +55,7 @@ --section-axis-y: #35ff4f; --section-axis-z: #285bff; --section-gizmo-diameter: 1; + --section-gizmo-thickness: 1; --section-plane-fill: #606060; --section-plane-alpha: 0.32; --section-plane-edge: #0d0d0d; @@ -1968,7 +1969,7 @@ body[data-viewer-mode="guest"] .inspector-restore-tray { background: var(--toolbar-bg); color: var(--text); font-size: var(--tb-icon-size, 13px); - font-weight: 700; + font-weight: 500; line-height: 1; cursor: pointer; padding: var(--tb-icon-pad, 5px); @@ -1991,17 +1992,20 @@ body[data-viewer-mode="guest"] .inspector-restore-tray { .section-tool-btn svg { display: block; - width: var(--tb-svg-size, 24px); - height: var(--tb-svg-size, 24px); + width: 12px; + height: 12px; fill: none; stroke: currentColor; - stroke-width: 1.8; + stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .section-axis-btn { letter-spacing: 0; + font-size: 11px; + font-weight: 600; + padding-top: 1px; } .section-overview { diff --git a/frontend/dcViewer.js b/frontend/dcViewer.js index cc36337..3c3d525 100644 --- a/frontend/dcViewer.js +++ b/frontend/dcViewer.js @@ -1,10 +1,10 @@ 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 { toolbarConfig, applyToolbarVars } from "./src/ui/toolbar.js"; 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 { createGlassSelect } from "./src/ui/glassSelect.js"; import { createSliderControl } from "./src/ui/controls/slider.js"; @@ -1011,6 +1011,7 @@ const sectionPlaneThemeFromCSS = () => ({ z: hexToRgb01(cssValue("--section-axis-z", "#285bff")), }, 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")), planeFillAlpha: clampNumber(parseFloat(cssValue("--section-plane-alpha", "0.32")), 0, 1, 0.32), planeEdgeColor: hexToRgb01(cssValue("--section-plane-edge", "#0d0d0d")), diff --git a/frontend/index.html b/frontend/index.html index 9176de5..ab1c59c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -85,6 +85,7 @@ set("--section-axis-y", s.sectionAxisY); set("--section-axis-z", s.sectionAxisZ); set("--section-gizmo-diameter", s.sectionGizmoDiameter); + set("--section-gizmo-thickness", s.sectionGizmoThickness); set("--section-plane-fill", s.sectionPlaneFill); set("--section-plane-alpha", s.sectionPlaneAlpha); set("--section-plane-edge", s.sectionPlaneEdge); @@ -97,7 +98,7 @@ - +
@@ -357,6 +358,6 @@ - + diff --git a/frontend/lib/dc-camera-context.es.js b/frontend/lib/dc-camera-context.es.js index 69d0294..5160c73 100644 --- a/frontend/lib/dc-camera-context.es.js +++ b/frontend/lib/dc-camera-context.es.js @@ -126568,6 +126568,45 @@ class TransformControl { 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, { diffuse: rgb, emissive: rgb, @@ -127051,6 +127090,9 @@ class TransformControl { this._styleScale = style.gizmoDiameter; this._applyRootScale?.(); } + if (style.gizmoThickness !== undefined) { + this._setGuideThickness?.(style.gizmoThickness); + } if (style.axes) { this._displayMeshes.x?.setColor?.(style.axes.x); this._displayMeshes.y?.setColor?.(style.axes.y); diff --git a/frontend/src/ui/settingsMenu.js b/frontend/src/ui/settingsMenu.js index 6aa4a33..fcdf9fe 100644 --- a/frontend/src/ui/settingsMenu.js +++ b/frontend/src/ui/settingsMenu.js @@ -53,6 +53,7 @@ const defaultSettings = { sectionAxisY: "#35ff4f", sectionAxisZ: "#285bff", sectionGizmoDiameter: 1, + sectionGizmoThickness: 1, sectionPlaneFill: "#606060", sectionPlaneAlpha: 0.32, sectionPlaneEdge: "#0d0d0d", @@ -121,6 +122,7 @@ const applySettings = (s) => { root.style.setProperty("--section-axis-y", s.sectionAxisY); root.style.setProperty("--section-axis-z", s.sectionAxisZ); 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-alpha", s.sectionPlaneAlpha); 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))); }, }); + 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"); addSettingsSlider({ parent: sectionCut, diff --git a/frontend/theme.js b/frontend/theme.js index abc4b47..e778465 100644 --- a/frontend/theme.js +++ b/frontend/theme.js @@ -52,6 +52,7 @@ const PROJECT_THEME = { sectionAxisY: "#35ff4f", sectionAxisZ: "#285bff", sectionGizmoDiameter: 1, + sectionGizmoThickness: 1, sectionPlaneFill: "#606060", sectionPlaneAlpha: 0.32, sectionPlaneEdge: "#0d0d0d",