Tune section toolbar icons and gizmo thickness
This commit is contained in:
CODEX
parent
84b28ba12c
commit
f28de867c7
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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")),
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<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=19">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=20">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -357,6 +358,6 @@
|
|||
<input id="fileInput" class="hidden" type="file"
|
||||
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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ const PROJECT_THEME = {
|
|||
sectionAxisY: "#35ff4f",
|
||||
sectionAxisZ: "#285bff",
|
||||
sectionGizmoDiameter: 1,
|
||||
sectionGizmoThickness: 1,
|
||||
sectionPlaneFill: "#606060",
|
||||
sectionPlaneAlpha: 0.32,
|
||||
sectionPlaneEdge: "#0d0d0d",
|
||||
|
|
|
|||
Loading…
Reference in New Issue