Refine BIM toolbar dock magnification

frontend/src/ui/settingsMenu.js

@@ -24,6 +24,10 @@ const defaultSettings = {
   toolbarBgActive: "#c4ff67",
   toolbarBorder: "#292929",
   toolbarOutline: "#292929",
+  toolbarMinSize: 25,
+  toolbarMaxSize: 56,
+  toolbarLensCount: 7,
+  toolbarAutoHide: false,
   modalBg: "#1c1c1c",
   modalBgAlpha: 1,
   modalFocus: "#292929",
@@ -213,6 +217,17 @@ const applySettings = (s) => {
   root.style.setProperty("--toolbar-bg-active-contrast", readableTextColor(s.toolbarBgActive));
   root.style.setProperty("--toolbar-border", s.toolbarBorder);
   root.style.setProperty("--toolbar-outline", s.toolbarOutline);
+  const toolbarMinRaw = Number(s.toolbarMinSize ?? defaultSettings.toolbarMinSize);
+  const toolbarMaxRaw = Number(s.toolbarMaxSize ?? defaultSettings.toolbarMaxSize);
+  const toolbarLensRaw = Number(s.toolbarLensCount ?? defaultSettings.toolbarLensCount);
+  const toolbarMinSize = clamp(Number.isFinite(toolbarMinRaw) ? toolbarMinRaw : defaultSettings.toolbarMinSize, 18, 88);
+  const toolbarMaxSize = Math.max(toolbarMinSize, clamp(Number.isFinite(toolbarMaxRaw) ? toolbarMaxRaw : defaultSettings.toolbarMaxSize, 18, 96));
+  const toolbarLensCount = Math.max(1, Math.min(15, Math.round(Number.isFinite(toolbarLensRaw) ? toolbarLensRaw : defaultSettings.toolbarLensCount)));
+  root.style.setProperty("--tb-size", `${toolbarMinSize}px`);
+  root.style.setProperty("--tb-min-size", `${toolbarMinSize}px`);
+  root.style.setProperty("--tb-max-size", `${toolbarMaxSize}px`);
+  root.style.setProperty("--tb-lens-count", `${toolbarLensCount % 2 === 0 ? toolbarLensCount + 1 : toolbarLensCount}`);
+  root.style.setProperty("--tb-autohide", s.toolbarAutoHide ? "1" : "0");
   const bgAlphaPct = `${(s.modalBgAlpha ?? 1) * 100}%`;
   const focusAlphaPct = `${(s.modalFocusAlpha ?? 1) * 100}%`;
   root.style.setProperty("--modal-bg", s.modalBg);
@@ -442,6 +457,24 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
       return input;
     };
 
+    const addBoolean = (parent, label, key) => {
+      const row = document.createElement("label");
+      row.className = "checkbox-row";
+      const text = document.createElement("span");
+      text.className = "checkbox-row__label";
+      text.textContent = label;
+      const chk = document.createElement("input");
+      chk.type = "checkbox";
+      chk.checked = !!state[key];
+      chk.addEventListener("change", () => {
+        setVal(key, chk.checked);
+      });
+      row.appendChild(text);
+      row.appendChild(chk);
+      parent.appendChild(row);
+      return chk;
+    };
+
     const font = section("Фон");
     addColor(font, "Фон внешний", "bgOuter");
     addColor(font, "Фон холста верх", "canvasTop");
@@ -484,6 +517,49 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
     addColor(toolbar, "Актив", "toolbarBgActive");
     addColor(toolbar, "Бордер", "toolbarBorder");
     addColor(toolbar, "Outline", "toolbarOutline");
+    addSettingsSlider({
+      parent: toolbar,
+      label: "Минимальный размер",
+      value: Math.max(18, Math.min(42, Number(state.toolbarMinSize ?? defaultSettings.toolbarMinSize))),
+      min: 18,
+      max: 42,
+      step: 1,
+      formatValue: (val) => `${Math.round(val)}px`,
+      onChange: (val) => {
+        const next = Math.max(18, Math.min(42, Math.round(Number(val))));
+        setVal("toolbarMinSize", next);
+        if (Number(state.toolbarMaxSize) < next) {
+          setVal("toolbarMaxSize", next);
+        }
+      },
+    });
+    addSettingsSlider({
+      parent: toolbar,
+      label: "Максимальный размер",
+      value: Math.max(28, Math.min(88, Number(state.toolbarMaxSize ?? defaultSettings.toolbarMaxSize))),
+      min: 28,
+      max: 88,
+      step: 1,
+      formatValue: (val) => `${Math.round(val)}px`,
+      onChange: (val) => {
+        const minSize = Math.max(18, Math.min(42, Number(state.toolbarMinSize ?? defaultSettings.toolbarMinSize)));
+        setVal("toolbarMaxSize", Math.max(minSize, Math.min(88, Math.round(Number(val)))));
+      },
+    });
+    addSettingsSlider({
+      parent: toolbar,
+      label: "Линза",
+      value: Math.max(1, Math.min(13, Number(state.toolbarLensCount ?? defaultSettings.toolbarLensCount))),
+      min: 1,
+      max: 13,
+      step: 2,
+      formatValue: (val) => `${Math.round(val)} иконок`,
+      onChange: (val) => {
+        const next = Math.max(1, Math.min(13, Math.round(Number(val))));
+        setVal("toolbarLensCount", next % 2 === 0 ? next + 1 : next);
+      },
+    });
+    addBoolean(toolbar, "Автоскрытие", "toolbarAutoHide");
     body.appendChild(toolbar);
 
     const navCube = section("NavCube");

frontend/src/ui/toolbar.js

@@ -1,4 +1,8 @@
 const toolbarConfig = {
+  minSize: 25,
+  maxSize: 56,
+  lensCount: 7,
+  autoHide: false,
   size: 25,
   gap: 10,
   radius: 7,
@@ -7,9 +11,22 @@ const toolbarConfig = {
   iconSize: 13,
 };
 
-const applyToolbarVars = () => {
+const numericSetting = (settings, key, fallback) => {
+  const value = Number(settings?.[key]);
+  return Number.isFinite(value) ? value : fallback;
+};
+
+const applyToolbarVars = (settings = {}) => {
   const root = document.documentElement;
-  root.style.setProperty("--tb-size", `${toolbarConfig.size}px`);
+  const minSize = numericSetting(settings, "toolbarMinSize", toolbarConfig.minSize);
+  const maxSize = Math.max(minSize, numericSetting(settings, "toolbarMaxSize", toolbarConfig.maxSize));
+  const lensCount = Math.max(1, Math.round(numericSetting(settings, "toolbarLensCount", toolbarConfig.lensCount)));
+  const autoHide = settings?.toolbarAutoHide ?? toolbarConfig.autoHide;
+  root.style.setProperty("--tb-size", `${minSize}px`);
+  root.style.setProperty("--tb-min-size", `${minSize}px`);
+  root.style.setProperty("--tb-max-size", `${maxSize}px`);
+  root.style.setProperty("--tb-lens-count", `${lensCount}`);
+  root.style.setProperty("--tb-autohide", autoHide ? "1" : "0");
   root.style.setProperty("--tb-gap", `${toolbarConfig.gap}px`);
   root.style.setProperty("--tb-radius", `${toolbarConfig.radius}px`);
   root.style.setProperty("--tb-pad-y", `${toolbarConfig.paddingY}px`);