Add BIM model comments

frontend/src/ui/settingsMenu.js

@@ -2,7 +2,7 @@ import { createSliderControl } from "./controls/slider.js";
 import { createColorControl } from "./controls/color.js";
 
 const defaultSettings = {
-  themeVersion: "v5-drone-lime",
+  themeVersion: "v6-comments-targets",
   bgOuter: "#0f0f0f",
   canvasTop: "#1c1c1c",
   canvasBottom: "#1c1c1c",
@@ -58,6 +58,12 @@ const defaultSettings = {
   sectionPlaneAlpha: 0.32,
   sectionPlaneEdge: "#0d0d0d",
   sectionPlaneEdgeAlpha: 0.8,
+  commentTargetActiveColor: "#c4ff67",
+  commentTargetActiveAlpha: 1,
+  commentTargetActiveSize: 30,
+  commentTargetPassiveColor: "#f5f5fa",
+  commentTargetPassiveAlpha: 0.58,
+  commentTargetPassiveSize: 22,
 };
 
 const STORAGE_KEY = "bimdc-settings-v3";
@@ -159,6 +165,12 @@ const applySettings = (s) => {
   root.style.setProperty("--section-plane-alpha", s.sectionPlaneAlpha);
   root.style.setProperty("--section-plane-edge", s.sectionPlaneEdge);
   root.style.setProperty("--section-plane-edge-alpha", s.sectionPlaneEdgeAlpha);
+  root.style.setProperty("--comment-target-active", s.commentTargetActiveColor);
+  root.style.setProperty("--comment-target-active-alpha", s.commentTargetActiveAlpha);
+  root.style.setProperty("--comment-target-active-size", `${s.commentTargetActiveSize}px`);
+  root.style.setProperty("--comment-target-passive", s.commentTargetPassiveColor);
+  root.style.setProperty("--comment-target-passive-alpha", s.commentTargetPassiveAlpha);
+  root.style.setProperty("--comment-target-passive-size", `${s.commentTargetPassiveSize}px`);
   // подсветка объектов
   root.style.setProperty("--highlight-color", s.highlight);
 };
@@ -458,6 +470,59 @@ export function createSettingsMenu({ panel, controls = {}, onChange = null, onSh
     });
     panel.appendChild(sectionCut);
 
+    const commentTargets = section("Таргеты комментариев");
+    addColor(commentTargets, "Активный: цвет", "commentTargetActiveColor");
+    addSettingsSlider({
+      parent: commentTargets,
+      label: "Активный: прозрачность",
+      value: Math.round(Math.max(0, Math.min(1, Number(state.commentTargetActiveAlpha ?? 1))) * 100),
+      min: 0,
+      max: 100,
+      step: 5,
+      formatValue: (val) => `${Math.round(val)}%`,
+      onChange: (val) => {
+        setVal("commentTargetActiveAlpha", Math.max(0, Math.min(1, Number(val) / 100)));
+      },
+    });
+    addSettingsSlider({
+      parent: commentTargets,
+      label: "Активный: размер",
+      value: Math.max(14, Math.min(64, Number(state.commentTargetActiveSize ?? 30))),
+      min: 14,
+      max: 64,
+      step: 1,
+      formatValue: (val) => `${Math.round(val)}px`,
+      onChange: (val) => {
+        setVal("commentTargetActiveSize", Math.max(14, Math.min(64, Math.round(Number(val)))));
+      },
+    });
+    addColor(commentTargets, "Пассивный: цвет", "commentTargetPassiveColor");
+    addSettingsSlider({
+      parent: commentTargets,
+      label: "Пассивный: прозрачность",
+      value: Math.round(Math.max(0, Math.min(1, Number(state.commentTargetPassiveAlpha ?? 0.58))) * 100),
+      min: 0,
+      max: 100,
+      step: 5,
+      formatValue: (val) => `${Math.round(val)}%`,
+      onChange: (val) => {
+        setVal("commentTargetPassiveAlpha", Math.max(0, Math.min(1, Number(val) / 100)));
+      },
+    });
+    addSettingsSlider({
+      parent: commentTargets,
+      label: "Пассивный: размер",
+      value: Math.max(12, Math.min(48, Number(state.commentTargetPassiveSize ?? 22))),
+      min: 12,
+      max: 48,
+      step: 1,
+      formatValue: (val) => `${Math.round(val)}px`,
+      onChange: (val) => {
+        setVal("commentTargetPassiveSize", Math.max(12, Math.min(48, Math.round(Number(val)))));
+      },
+    });
+    panel.appendChild(commentTargets);
+
     const measure = section("Линейка");
     addColor(measure, "Линия/бордер", "measureLine");
     addColor(measure, "Плашка", "measureLabel");