beam: remove clay color controls
This commit is contained in:
CODEX
parent
4ecebd5e79
commit
9dadf6f838
|
|
@ -624,10 +624,6 @@ header {
|
|||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.inspector-color-control.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inspector-control-label {
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
|
|
@ -640,55 +636,6 @@ header {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.inspector-color-row {
|
||||
display: grid;
|
||||
grid-template-columns: 40px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
min-width: 0;
|
||||
border-radius: 14px;
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
box-shadow: var(--nodedc-glass-control-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inspector-color-row input[type="color"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.inspector-color-row input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inspector-color-row input[type="color"]::-webkit-color-swatch {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.inspector-color-row input[type="text"] {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(245, 245, 250, 0.82);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
outline: none;
|
||||
padding: 0 14px 0 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nodedc-select {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
|
|
|
|||
|
|
@ -41,9 +41,6 @@ const displayModeControl = document.getElementById("displayModeControl");
|
|||
const displayModeSelectHost = document.getElementById("displayModeSelect");
|
||||
const lightingModeControl = document.getElementById("lightingModeControl");
|
||||
const lightingModeSelectHost = document.getElementById("lightingModeSelect");
|
||||
const clayColorControl = document.getElementById("clayColorControl");
|
||||
const clayColorInput = document.getElementById("clayColorInput");
|
||||
const clayColorHexInput = document.getElementById("clayColorHexInput");
|
||||
const navigationAxisControl = document.getElementById("navigationAxisControl");
|
||||
const navigationAxisSelectHost = document.getElementById("navigationAxisSelect");
|
||||
const zoomSpeedControl = document.getElementById("zoomSpeedControl");
|
||||
|
|
@ -183,8 +180,6 @@ const LIGHTING_MODE_OPTIONS = [
|
|||
{ value: "technical", label: "Тех." },
|
||||
];
|
||||
|
||||
const DEFAULT_CLAY_COLOR = "#dbdbd1";
|
||||
|
||||
const NAVIGATION_AXIS_PRESETS = {
|
||||
"y-up": {
|
||||
worldAxis: [1, 0, 0, 0, 1, 0, 0, 0, 1],
|
||||
|
|
@ -225,7 +220,6 @@ let activeDisplayMode = "source";
|
|||
let activeLightingMode = "ambient";
|
||||
let activeNavigationAxis = "auto";
|
||||
let activeZoomSpeed = 20;
|
||||
let activeClayColor = DEFAULT_CLAY_COLOR;
|
||||
let displayModeSelect = null;
|
||||
let lightingModeSelect = null;
|
||||
let navigationAxisSelect = null;
|
||||
|
|
@ -289,7 +283,6 @@ const configureCameraControl = () => {
|
|||
if (!control) return;
|
||||
activeZoomSpeed = normalizeZoomSpeed(activeZoomSpeed);
|
||||
configureCameraPanMap(control);
|
||||
control.pointerEnabled = true;
|
||||
control.followPointer = true;
|
||||
control.doublePickFlyTo = false;
|
||||
control.smartPivot = true;
|
||||
|
|
@ -313,9 +306,6 @@ const setZoomSpeed = (value, { announce = false } = {}) => {
|
|||
const ensureCameraControlActive = () => {
|
||||
if (!viewer || !viewer.cameraControl) return;
|
||||
configureCameraControl();
|
||||
if (viewer.cameraControl.pointerEnabled === false) {
|
||||
viewer.cameraControl.pointerEnabled = true;
|
||||
}
|
||||
if (viewer.cameraControl.enabled === false) {
|
||||
viewer.cameraControl.enabled = true;
|
||||
}
|
||||
|
|
@ -326,21 +316,9 @@ const ensureCameraControlActive = () => {
|
|||
|
||||
const resetCameraControl = () => {
|
||||
if (!viewer?.cameraControl) return;
|
||||
// pointerEnabled setter calls xeokit's internal _reset(), which clears stuck drag state.
|
||||
viewer.cameraControl.pointerEnabled = false;
|
||||
viewer.cameraControl.pointerEnabled = true;
|
||||
// Toggle active to drop any stuck drag state without adding extra loops
|
||||
viewer.cameraControl.active = false;
|
||||
viewer.cameraControl.active = true;
|
||||
const canvas = viewer.scene?.canvas?.canvas;
|
||||
if (canvas) {
|
||||
["mouseup", "pointerup"].forEach((type) => {
|
||||
try {
|
||||
canvas.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, buttons: 0 }));
|
||||
} catch (_) {
|
||||
// noop
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const rearmCameraControl = () => {
|
||||
|
|
@ -387,7 +365,6 @@ const normalizeNavigationAxis = (axis) => (
|
|||
const setDisplayModeControlState = () => {
|
||||
activeDisplayMode = normalizeDisplayMode(activeDisplayMode);
|
||||
displayModeSelect?.setValue(activeDisplayMode);
|
||||
updateClayColorControlVisibility();
|
||||
};
|
||||
|
||||
const setLightingModeControlState = () => {
|
||||
|
|
@ -443,7 +420,7 @@ const hasModelSettingsTarget = () => !!getModelSettingsSrc(getPrimaryModelEntry(
|
|||
const getDisplayModePreset = (mode) => {
|
||||
switch (mode) {
|
||||
case "clay":
|
||||
return { colorize: hexToRgb01(activeClayColor), opacity: 1, edges: false, xrayed: false };
|
||||
return { colorize: [0.86, 0.86, 0.82], opacity: 1, edges: false, xrayed: false };
|
||||
case "white":
|
||||
return { colorize: [1, 1, 1], opacity: 1, edges: false, xrayed: false };
|
||||
case "contrast":
|
||||
|
|
@ -820,37 +797,6 @@ const hexToRgb01 = (hex) => {
|
|||
return [(num >> 16 & 255) / 255, (num >> 8 & 255) / 255, (num & 255) / 255];
|
||||
};
|
||||
|
||||
const normalizeHexColor = (value, fallback = DEFAULT_CLAY_COLOR) => {
|
||||
const raw = typeof value === "string" ? value.trim() : "";
|
||||
const withHash = raw.startsWith("#") ? raw : `#${raw}`;
|
||||
if (/^#([0-9a-fA-F]{3})$/.test(withHash)) {
|
||||
return `#${withHash.slice(1).split("").map((char) => char + char).join("")}`.toLowerCase();
|
||||
}
|
||||
if (/^#([0-9a-fA-F]{6})$/.test(withHash)) {
|
||||
return withHash.toLowerCase();
|
||||
}
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const syncClayColorInputs = () => {
|
||||
const color = normalizeHexColor(activeClayColor);
|
||||
if (clayColorInput) clayColorInput.value = color;
|
||||
if (clayColorHexInput) clayColorHexInput.value = color;
|
||||
};
|
||||
|
||||
const updateClayColorControlVisibility = () => {
|
||||
clayColorControl?.classList.toggle("hidden", activeDisplayMode !== "clay");
|
||||
syncClayColorInputs();
|
||||
};
|
||||
|
||||
const setClayColor = (value, { apply = true } = {}) => {
|
||||
activeClayColor = normalizeHexColor(value);
|
||||
syncClayColorInputs();
|
||||
if (apply && activeDisplayMode === "clay") {
|
||||
applyDisplayMode();
|
||||
}
|
||||
};
|
||||
|
||||
const measureThemeFromCSS = () => {
|
||||
const pick = (name, fallback) => {
|
||||
const v = cssValue(name);
|
||||
|
|
@ -2487,7 +2433,6 @@ const buildProjectSnapshot = async (name) => {
|
|||
edges: !!toggleEdges?.checked,
|
||||
addMode: !!addMode?.checked,
|
||||
displayMode: activeDisplayMode,
|
||||
clayColor: activeClayColor,
|
||||
lightingMode: activeLightingMode,
|
||||
navigationAxis: activeNavigationAxis,
|
||||
zoomSpeed: activeZoomSpeed,
|
||||
|
|
@ -2552,7 +2497,6 @@ const buildModelViewerSettings = () => ({
|
|||
transparent: !!toggleTransparent?.checked,
|
||||
edges: !!toggleEdges?.checked,
|
||||
displayMode: activeDisplayMode,
|
||||
clayColor: activeClayColor,
|
||||
lightingMode: activeLightingMode,
|
||||
navigationAxis: activeNavigationAxis,
|
||||
zoomSpeed: activeZoomSpeed
|
||||
|
|
@ -2583,9 +2527,6 @@ const applyModelViewerSettings = (settings, { applyCamera = true, applyDesign =
|
|||
toggleEdges.checked = viewerState.edges;
|
||||
suppressEdgeReload = false;
|
||||
}
|
||||
if (typeof viewerState.clayColor === "string") {
|
||||
setClayColor(viewerState.clayColor, { apply: false });
|
||||
}
|
||||
if (typeof viewerState.displayMode === "string") {
|
||||
activeDisplayMode = viewerState.displayMode;
|
||||
applyDisplayMode();
|
||||
|
|
@ -2679,9 +2620,6 @@ const applyViewerState = (state) => {
|
|||
if (typeof state.addMode === "boolean" && addMode) {
|
||||
addMode.checked = state.addMode;
|
||||
}
|
||||
if (typeof state.clayColor === "string") {
|
||||
setClayColor(state.clayColor, { apply: false });
|
||||
}
|
||||
if (typeof state.displayMode === "string") {
|
||||
activeDisplayMode = state.displayMode;
|
||||
applyDisplayMode();
|
||||
|
|
@ -3314,9 +3252,6 @@ const initViewer = async () => {
|
|||
activeDisplayMode = params.get("displayMode") || "source";
|
||||
setDisplayModeControlState();
|
||||
}
|
||||
if (params.has("clayColor")) {
|
||||
setClayColor(params.get("clayColor"), { apply: activeDisplayMode === "clay" });
|
||||
}
|
||||
if (params.has("lightingMode") || params.has("light")) {
|
||||
activeLightingMode = params.get("lightingMode") || params.get("light") || "ambient";
|
||||
applyLightingMode();
|
||||
|
|
@ -3706,28 +3641,6 @@ const loadProjectSnapshot = async (project) => {
|
|||
});
|
||||
setDisplayModeControlState();
|
||||
}
|
||||
if (clayColorControl && clayColorInput && clayColorHexInput) {
|
||||
syncClayColorInputs();
|
||||
const applyClayInputColor = (value) => {
|
||||
setClayColor(value, { apply: true });
|
||||
};
|
||||
clayColorInput.addEventListener("input", (event) => {
|
||||
applyClayInputColor(event.target.value);
|
||||
});
|
||||
clayColorInput.addEventListener("change", (event) => {
|
||||
applyClayInputColor(event.target.value);
|
||||
});
|
||||
clayColorHexInput.addEventListener("change", (event) => {
|
||||
applyClayInputColor(event.target.value);
|
||||
});
|
||||
clayColorHexInput.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
applyClayInputColor(event.target.value);
|
||||
clayColorHexInput.blur();
|
||||
}
|
||||
});
|
||||
updateClayColorControlVisibility();
|
||||
}
|
||||
if (lightingModeControl && lightingModeSelectHost) {
|
||||
lightingModeSelect = createGlassSelect({
|
||||
host: lightingModeSelectHost,
|
||||
|
|
|
|||
|
|
@ -87,7 +87,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=9">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=10">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -137,13 +137,6 @@
|
|||
<div class="inspector-control-label">Свет</div>
|
||||
<div class="inspector-select-host" id="lightingModeSelect"></div>
|
||||
</div>
|
||||
<div class="inspector-control-row inspector-control-row--full inspector-color-control hidden" id="clayColorControl">
|
||||
<div class="inspector-control-label">Цвет Clay</div>
|
||||
<div class="inspector-color-row">
|
||||
<input type="color" id="clayColorInput" aria-label="Цвет Clay">
|
||||
<input type="text" id="clayColorHexInput" aria-label="HEX Clay" spellcheck="false">
|
||||
</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>
|
||||
|
|
@ -246,6 +239,6 @@
|
|||
<input id="fileInput" class="hidden" type="file"
|
||||
accept=".xkt,.glb,.gltf,.bim,.las,.laz,.obj,.stl">
|
||||
|
||||
<script type="module" src="./dcViewer.js?v=15"></script>
|
||||
<script type="module" src="./dcViewer.js?v=16"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue