beam: remove clay color controls

frontend/dcViewer.css

@@ -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;

frontend/dcViewer.js

@@ -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.
+  // Toggle active to drop any stuck drag state without adding extra loops
-  viewer.cameraControl.pointerEnabled = false;
-  viewer.cameraControl.pointerEnabled = true;
   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,

frontend/index.html

@@ -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>