@thatopen/services 0.2.0 → 0.3.0

package/src/cli/templates/app/src/setups/hider.ts

@@ -0,0 +1,98 @@
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+
+/**
+ * Visibility actions driven by the CURRENT selection (the Highlighter "select"
+ * set that the tree/viewport populate). Returns a controller for the toolbar to
+ * wire to buttons — it does not render any UI itself.
+ *
+ * Suggested icons (ACTION buttons):
+ *  - hideSelected    → "mdi:eye-off-outline"
+ *  - isolateSelected → "mdi:select-search"   (alt: "mdi:eye")
+ *  - showAll         → "mdi:eye-outline"     (alt: "mdi:restore")
+ */
+export interface HiderController {
+  /** Hide the currently selected items. No-op if nothing is selected. */
+  hideSelected(): void;
+  /** Hide everything except the current selection. No-op if nothing is selected. */
+  isolateSelected(): void;
+  /** Reset: make every item visible again. */
+  showAll(): void;
+  /**
+   * Ghost (x-ray) the current selection via the scalable per-element GPU state
+   * texture (`model.setGhostItems`) — NO per-item recolor, so it scales to
+   * millions of elements. No-op if nothing is selected.
+   */
+  ghostSelected(): void;
+  /** Clear the ghost (x-ray) overlay on all loaded models. */
+  clearGhost(): void;
+}
+
+export const hider = (components: OBC.Components): HiderController => {
+  const hiderComp = components.get(OBC.Hider);
+  const highlighter = components.get(OBF.Highlighter);
+  const fragments = components.get(OBC.FragmentsManager);
+
+  const currentSelection = (): OBC.ModelIdMap | undefined =>
+    highlighter.selection.select;
+  const hasItems = (map?: OBC.ModelIdMap) =>
+    !!map && Object.values(map).some((set) => set.size > 0);
+
+  // Making items visible must also un-ghost them — a shown element should never
+  // linger as a ghost. unsetGhostItems is async (localId→itemId worker
+  // conversion), so collect per-model tasks and update once they all land.
+  const unghost = (map: OBC.ModelIdMap) => {
+    const tasks: Promise<unknown>[] = [];
+    for (const [modelId, set] of Object.entries(map)) {
+      const model = fragments.list.get(modelId);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (model && set.size > 0) tasks.push((model as any).unsetGhostItems?.([...set]));
+    }
+    if (tasks.length) void Promise.all(tasks).then(() => fragments.core.update(true));
+  };
+
+  const clearGhostAll = () => {
+    for (const model of fragments.list.values()) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (model as any).clearGhost?.();
+    }
+    void fragments.core.update(true);
+  };
+
+  return {
+    hideSelected() {
+      const sel = currentSelection();
+      if (!sel || !hasItems(sel)) return;
+      void hiderComp.set(false, sel);
+    },
+    isolateSelected() {
+      const sel = currentSelection();
+      if (!sel || !hasItems(sel)) return;
+      void hiderComp.isolate(sel);
+      // The selection is the only thing visible now → un-ghost it so an isolated
+      // element is never left ghosted.
+      unghost(sel);
+    },
+    showAll() {
+      void hiderComp.set(true);
+      // Everything is visible again → nothing should stay ghosted.
+      clearGhostAll();
+    },
+    ghostSelected() {
+      const sel = currentSelection();
+      if (!sel || !hasItems(sel)) return;
+      const tasks: Promise<unknown>[] = [];
+      for (const [modelId, set] of Object.entries(sel)) {
+        const model = fragments.list.get(modelId);
+        // setGhostItems is async (localId→itemId worker conversion) — update
+        // only after every model's ghost state is written.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (model && set.size > 0) tasks.push((model as any).setGhostItems([...set], false));
+      }
+      void Promise.all(tasks).then(() => fragments.core.update(true));
+    },
+    clearGhost() {
+      clearGhostAll();
+    },
+  };
+};

package/src/cli/templates/app/src/setups/index.ts

@@ -1,3 +1,33 @@
-export * from "./cloud-runner";
-export * from "./fragments";
-export * from "./ifc-loader";
+export * from "./ui-manager";
+export * from "./cloud-runner";
+export * from "./properties-panel";
+export * from "./fps-indicator";
+export * from "./active-tool-hud";
+export * from "./files-panel";
+export * from "./model-tree";
+export * from "./right-sidebar";
+export * from "./card-header";
+export * from "./toolbar";
+export * from "./visibility-toolbar";
+export * from "./hider";
+export * from "./tool-mode";
+export * from "./clipper";
+export * from "./measurements";
+export * from "./styles";
+export * from "./helper-panel";
+export * from "./styles-panel";
+export * from "./graphics-panel";
+export * from "./commands-panel";
+export * from "./clipper-tool";
+export * from "./clipper-panel";
+export * from "./plans-panel";
+export * from "./navigation-gizmo";
+export * from "./exploded-view";
+export * from "./measurement-tool";
+export * from "./measurement-panel";
+export * from "./data-table-panel";
+export * from "./walkthrough";
+export * from "./tool-mode-manager";
+// reality-capture-viewer is intentionally NOT re-exported here: it spins up
+// decode workers at module load, so it must be LAZY-imported (dynamic import in
+// files-panel's .3tz "View" handler), never pulled onto the app boot path.

package/src/cli/templates/app/src/setups/inspection.ts

@@ -0,0 +1,136 @@
+import * as OBC from "@thatopen/components";
+import type { ClipperTool } from "./clipper-tool";
+import type { MeasurementTool } from "./measurement-tool";
+
+/**
+ * Unified "Objects" outliner API (W2's new panel). Enumerates every created clip
+ * plane and every measurement as a flat list of {@link InstanceRow}s with
+ * per-instance HIDE / DISABLE / DELETE, so W2 can render rows without knowing
+ * about the individual Clipping / Measurement tools.
+ *
+ * Shapes are owned here and produced by each tool's `instances()`; this module
+ * just merges them and fans the two tools' change events into one.
+ */
+export type InstanceKind = "clip" | "measurement";
+
+export interface InstanceRow {
+  /** Stable id (plane id for clips; per-measurement id) — use as the row key. */
+  id: string;
+  kind: InstanceKind;
+  /** "Clip plane" | "Length" | "Area" | "Angle". */
+  type: string;
+  /** User-facing row label (includes the measured value for measurements). */
+  label: string;
+  /** Currently shown in the scene. */
+  visible: boolean;
+  /** Clip planes only: whether the plane is actively cutting. `undefined` for measurements. */
+  enabled?: boolean;
+  /** Show/hide this instance without deleting it. */
+  setVisible(on: boolean): void;
+  /** Clip planes only: toggle the cut on/off (present only when `enabled` is defined). */
+  setEnabled?(on: boolean): void;
+  /** Permanently remove this instance. */
+  remove(): void;
+}
+
+export interface InspectionInstances {
+  /** Snapshot of all clip planes + measurements, in that order. */
+  list(): InstanceRow[];
+  /** Fires whenever the set or state of instances changes (re-query `list()`). */
+  readonly onChanged: OBC.Event<void>;
+}
+
+/**
+ * A toolbar action W2 wires into the new "Inspection" tab. Each `activate()`
+ * routes through the toolModeManager (exclusive — entering one exits any other
+ * tool). W2 drives the Select button + active highlighting via
+ * `toolModeManager.selectMode()` / `getActiveId()` / `onActiveChanged`; each
+ * action's own `isActive()` is provided for convenience.
+ */
+export interface InspectionAction {
+  id: string;
+  label: string;
+  /** mdi icon name (e.g. "mdi:ruler"). */
+  icon: string;
+  activate(): void;
+  isActive(): boolean;
+}
+
+/**
+ * Inspection toolbar actions: clip plane + the measurement types/modes. Order is
+ * the toolbar order. measure-edge/face reuse Length/Area with a forced sub-mode;
+ * measure-length/area are the plain "free" modes (isActive distinguishes them by
+ * sub-mode). Volume is a distinct measurer.
+ */
+export const inspectionActions = (
+  clipperTool: ClipperTool,
+  measurementTool: MeasurementTool,
+): InspectionAction[] => {
+  const m = measurementTool;
+  const isMeasure = (mode: string, sub: string) =>
+    m.getMode() === mode && m.getSubMode() === sub;
+  return [
+    {
+      id: "clip-plane",
+      label: "Clip plane",
+      icon: "mdi:scissors-cutting",
+      activate: () => clipperTool.setPlacing(true),
+      isActive: () => clipperTool.isPlacing(),
+    },
+    {
+      id: "measure-length",
+      label: "Length",
+      icon: "mdi:ruler",
+      activate: () => m.setMode("length", "free"),
+      isActive: () => isMeasure("length", "free"),
+    },
+    {
+      id: "measure-area",
+      label: "Area",
+      icon: "mdi:vector-polygon",
+      activate: () => m.setMode("area", "free"),
+      isActive: () => isMeasure("area", "free"),
+    },
+    {
+      id: "measure-angle",
+      label: "Angle",
+      icon: "mdi:angle-acute",
+      activate: () => m.setMode("angle"),
+      isActive: () => m.getMode() === "angle",
+    },
+    {
+      id: "measure-edge",
+      label: "Edge",
+      icon: "mdi:vector-line",
+      activate: () => m.setMode("length", "edge"),
+      isActive: () => isMeasure("length", "edge"),
+    },
+    {
+      id: "measure-face",
+      label: "Face",
+      icon: "mdi:vector-square",
+      activate: () => m.setMode("area", "face"),
+      isActive: () => isMeasure("area", "face"),
+    },
+    {
+      id: "volume",
+      label: "Volume",
+      icon: "mdi:cube-outline",
+      activate: () => m.setMode("volume"),
+      isActive: () => m.getMode() === "volume",
+    },
+  ];
+};
+
+export const inspectionInstances = (
+  clipperTool: ClipperTool,
+  measurementTool: MeasurementTool,
+): InspectionInstances => {
+  const onChanged = new OBC.Event<void>();
+  clipperTool.onChanged.add(() => onChanged.trigger());
+  measurementTool.onChanged.add(() => onChanged.trigger());
+  return {
+    list: () => [...clipperTool.instances(), ...measurementTool.instances()],
+    onChanged,
+  };
+};

package/src/cli/templates/app/src/setups/measurement-panel.ts

@@ -0,0 +1,188 @@
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import type {
+  MeasurementTool,
+  MeasureMode,
+  SnapKind,
+} from "./measurement-tool";
+
+/**
+ * MEASUREMENT panel — a docked side-panel (a layout alongside
+ * Explorer/Files/Graphics/Clipping) for length / area / angle measurements.
+ *
+ * Sections:
+ *  - Measure — exclusive mode buttons (Off / Length / Area / Angle); pick one,
+ *    then double-click surfaces in the viewport (Area: Enter to close).
+ *  - Snapping — vertices / edges / faces toggles (precise picks).
+ *  - Measurements — show/hide all, clear all, and a list of every measurement
+ *    (type + value + units) with delete-per-row.
+ *
+ * Vanilla BUI, app chrome (native panel header, muted bands, 1px contrast-20
+ * hairlines, #3C3C41 scrollbar, library toggle switches + buttons). Factory
+ * returns the element WITHOUT self-mounting. (A simple row list is used for the
+ * measurements, matching files-panel / clipper-panel, so each row can carry a
+ * delete button.)
+ */
+const MODES: { mode: MeasureMode; label: string; icon: string }[] = [
+  { mode: "none", label: "Off", icon: "mdi:cursor-default" },
+  { mode: "length", label: "Length", icon: "mdi:ruler" },
+  { mode: "area", label: "Area", icon: "mdi:vector-square" },
+  { mode: "angle", label: "Angle", icon: "mdi:angle-acute" },
+];
+
+const SNAPS: { kind: SnapKind; label: string }[] = [
+  { kind: "point", label: "Vertices" },
+  { kind: "line", label: "Edges" },
+  { kind: "face", label: "Faces" },
+];
+
+export const measurementPanel = (
+  _components: OBC.Components,
+  tool: MeasurementTool,
+) => {
+  const [panel, update] = BUI.Component.create<BUI.Panel, { tick: number }>(
+    (state) => {
+      const refresh = () => update({ tick: state.tick + 1 });
+
+      const mode = tool.getMode();
+      const rows = tool.rows();
+      const snaps = tool.getSnaps();
+      const visible = tool.isVisible();
+
+      const modeButtons = MODES.map(
+        (m) => BUI.html`
+          <bim-button
+            class="m-mode"
+            label=${m.label}
+            icon=${m.icon}
+            ?active=${mode === m.mode}
+            @click=${() => {
+              tool.setMode(m.mode);
+              refresh();
+            }}
+          ></bim-button>
+        `,
+      );
+
+      const snapRows = SNAPS.map(
+        (s) => BUI.html`
+          <div class="m-row">
+            <span class="m-k">${s.label}</span>
+            <span class="m-v">
+              <bim-checkbox class="m-toggle" toggle ?checked=${snaps[s.kind]}
+                @change=${(e: Event) => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  tool.setSnap(s.kind, !!(e.target as any).checked);
+                  refresh();
+                }}></bim-checkbox>
+            </span>
+          </div>
+        `,
+      );
+
+      const measurementRows =
+        rows.length === 0
+          ? BUI.html`<div class="m-empty">No measurements. Pick a mode above, then double-click surfaces.</div>`
+          : rows.map(
+              (r) => BUI.html`
+                <div class="m-row">
+                  <span class="m-k m-type">${r.type}</span>
+                  <span class="m-v">
+                    <span class="m-val">${r.text}</span>
+                    <bim-button class="m-del" icon="mdi:trash-can-outline"
+                      @click=${() => {
+                        r.remove();
+                        refresh();
+                      }}></bim-button>
+                  </span>
+                </div>
+              `,
+            );
+
+      return BUI.html`
+        <bim-panel label="Measure" icon="mdi:ruler"
+          style="width: 100%; height: 100%; pointer-events: auto;">
+          <style>
+            .m-vp::-webkit-scrollbar { width: 0.4rem; height: 0.4rem; }
+            .m-vp::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--bim-scrollbar--c, #3C3C41); }
+            .m-vp::-webkit-scrollbar-track { background-color: var(--bim-scrollbar--bgc, var(--bim-ui_bg-contrast-10)); }
+
+            .m-band { box-sizing: border-box; padding: 0.4rem 0.4rem 0.4rem 1.1rem;
+              display: flex; align-items: center; gap: 0.4rem;
+              font-size: 0.76rem; font-weight: 500; letter-spacing: 0.01em;
+              color: var(--bim-ui_bg-contrast-70, #a7a7ab);
+              background: var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1));
+              border-top: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1));
+              border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1)); }
+            .m-band-ico { flex: 0 0 auto; font-size: 0.9rem; color: var(--bim-ui_bg-contrast-70, #a7a7ab); }
+            .m-band:first-child { border-top: none; }
+
+            .m-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
+              padding: 0.5rem 0.4rem 0.5rem 1.1rem; }
+            .m-modes bim-button { width: 100%; }
+
+            .m-row { box-sizing: border-box; min-height: 32px; display: flex;
+              align-items: center; justify-content: space-between; gap: 0.6rem;
+              padding: 0.35rem 0.4rem 0.35rem 1.1rem; font-size: 0.78rem;
+              color: var(--bim-ui_bg-contrast-100, #e3e3e3);
+              border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1)); }
+            .m-k { opacity: 0.6; flex: 0 1 auto; min-width: 0; white-space: nowrap;
+              overflow: hidden; text-overflow: ellipsis; }
+            .m-type { opacity: 0.85; }
+            .m-v { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
+              justify-content: flex-end; gap: 0.5rem; }
+            .m-val { font-variant-numeric: tabular-nums; }
+            .m-row bim-checkbox.m-toggle { flex: 0 0 2rem; width: 2rem; }
+            .m-row bim-button.m-del { flex: 0 0 auto; --bim-button--bgc: transparent; }
+
+            .m-empty { padding: 0.6rem 0.4rem 0.6rem 1.1rem; opacity: 0.6;
+              font-size: 0.78rem; line-height: 1.3; white-space: normal; }
+
+            .m-actions { display: flex; flex-direction: column; gap: 0.4rem;
+              padding: 0.5rem 0.4rem 0.5rem 1.1rem; }
+            .m-actions bim-button { width: 100%; }
+          </style>
+          <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
+            <div style="flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 0.4rem 0.4rem 1.1rem;">
+              <div class="m-vp" style="flex: 1 1 auto; min-height: 0; overflow-y: auto;
+                margin-left: -1.1rem; margin-right: -0.4rem;">
+
+                <div class="m-modes">${modeButtons}</div>
+
+                <div class="m-band"><bim-icon class="m-band-ico" icon="mdi:magnet"></bim-icon>Snapping</div>
+                ${snapRows}
+
+                <div class="m-band"><bim-icon class="m-band-ico" icon="mdi:format-list-bulleted"></bim-icon>Measurements</div>
+                <div class="m-row">
+                  <span class="m-k">Show all</span>
+                  <span class="m-v">
+                    <bim-checkbox class="m-toggle" toggle ?checked=${visible}
+                      @change=${(e: Event) => {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        tool.setVisible(!!(e.target as any).checked);
+                        refresh();
+                      }}></bim-checkbox>
+                  </span>
+                </div>
+                <div class="m-actions">
+                  <bim-button label="Clear all" icon="mdi:trash-can-outline" ?disabled=${rows.length === 0}
+                    @click=${() => {
+                      tool.clearAll();
+                      refresh();
+                    }}></bim-button>
+                </div>
+                ${measurementRows}
+              </div>
+            </div>
+          </div>
+        </bim-panel>
+      `;
+    },
+    { tick: 0 },
+  );
+
+  tool.onChanged.add(() => update({ tick: 0 }));
+  tool.onModeChanged.add(() => update({ tick: 0 }));
+
+  return panel;
+};

package/src/cli/templates/app/src/setups/measurement-settings-panel.ts

@@ -0,0 +1,161 @@
+import * as BUI from "@thatopen/ui";
+import type { MeasurementTool } from "./measurement-tool";
+
+/**
+ * MEASUREMENT settings section for the merged Settings layout (UI-reorg). Color,
+ * per-type units, rounding, snap toggles, and global visibility — all driven by
+ * W1's measurementTool settings API (getMeasurementSettings + setters), re-read
+ * on `onChanged`. (Line thickness lands later with the LineSegments2 conversion.)
+ * Returns its `bim-panel` WITHOUT self-mounting.
+ *
+ * @param tool the measurement tool (worker 1)
+ * @returns the `bim-panel` element
+ */
+export const measurementSettingsPanel = (tool: MeasurementTool) => {
+  const dropdown = (
+    opts: string[],
+    selected: string,
+    onPick: (v: string) => void,
+  ) => BUI.html`
+    <bim-dropdown
+      style="flex: 1 1 auto; min-width: 0;"
+      @change=${(e: Event) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const v = (e.target as any).value?.[0];
+        if (v != null) onPick(String(v));
+      }}
+    >
+      ${opts.map((o) => BUI.html`<bim-option .value=${o} label=${o} ?checked=${o === selected}></bim-option>`)}
+    </bim-dropdown>`;
+
+  const [panel, update] = BUI.Component.create<BUI.Panel, { tick: number }>(
+    // NOTE: the callback MUST take a state param (arity >= 1) — an arity-0
+    // callback makes Component.create return a single element instead of
+    // [el, update], and the destructure throws "object is not iterable".
+    (_s) => {
+      // Fail-safe: a settings sub-panel must NEVER crash main(). If the tool's
+      // settings API is unavailable/throws, render a placeholder instead.
+      let s: ReturnType<MeasurementTool["getMeasurementSettings"]> | null = null;
+      try {
+        s = tool.getMeasurementSettings?.() ?? null;
+      } catch (error) {
+        console.warn("[measurement-settings] getMeasurementSettings failed", error);
+      }
+      if (!s || !s.unitOptions || !s.units || !s.snaps) {
+        return BUI.html`
+          <bim-panel label="Measurement" icon="mdi:ruler" style="width: 100%; height: 100%; pointer-events: auto;">
+            <div style="padding: 0.9rem 1.1rem; font-size: 0.78rem; color: var(--bim-ui_bg-contrast-70, #a7a7ab);">
+              Measurement settings unavailable.
+            </div>
+          </bim-panel>`;
+      }
+      const unitRow = (label: string, type: "length" | "area" | "angle") => BUI.html`
+        <div class="ms-row">
+          <span class="ms-lbl">${label}</span>
+          ${dropdown(s.unitOptions[type], s.units[type], (v) => tool.setUnits(type, v))}
+        </div>`;
+      return BUI.html`
+        <bim-panel
+          label="Measurement"
+          icon="mdi:ruler"
+          style="width: 100%; height: 100%; pointer-events: auto;"
+        >
+          <style>
+            .ms-body { display: flex; flex-direction: column; gap: 0.45rem;
+              padding: 0.6rem 0.75rem; overflow-y: auto; height: 100%; }
+            .ms-row { display: flex; align-items: center; gap: 0.5rem; }
+            .ms-toggle { cursor: pointer; justify-content: space-between; }
+            .ms-lbl { font-size: 0.72rem; white-space: nowrap; flex: 0 0 5.5rem;
+              color: var(--bim-ui_bg-contrast-80, #c9c9c9); }
+            .ms-snaps { display: flex; gap: 0.9rem; flex-wrap: wrap; }
+            .ms-snap { display: inline-flex; align-items: center; gap: 0.3rem;
+              cursor: pointer; font-size: 0.72rem;
+              color: var(--bim-ui_bg-contrast-80, #c9c9c9); }
+          </style>
+          <div class="ms-body">
+            <div class="ms-row">
+              <span class="ms-lbl">Color</span>
+              <bim-color-input
+                color=${s.color}
+                @input=${(e: Event) => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const t = e.target as any;
+                  tool.setColor(String(t.color ?? t.value));
+                }}
+              ></bim-color-input>
+            </div>
+            ${unitRow("Length", "length")}
+            ${unitRow("Area", "area")}
+            ${unitRow("Angle", "angle")}
+            <div class="ms-row">
+              <span class="ms-lbl">Decimals</span>
+              <bim-number-input
+                slider
+                value=${s.rounding}
+                min="0"
+                max="6"
+                step="1"
+                style="flex: 1 1 auto;"
+                @change=${(e: Event) => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  tool.setRounding(Number((e.target as any).value));
+                }}
+              ></bim-number-input>
+            </div>
+            ${
+              typeof s.thickness === "number" && typeof tool.setThickness === "function"
+                ? BUI.html`
+                  <div class="ms-row">
+                    <span class="ms-lbl">Thickness</span>
+                    <bim-number-input
+                      slider
+                      value=${s.thickness}
+                      min="1"
+                      max="10"
+                      step="1"
+                      style="flex: 1 1 auto;"
+                      @change=${(e: Event) => {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        tool.setThickness(Number((e.target as any).value));
+                      }}
+                    ></bim-number-input>
+                  </div>`
+                : BUI.html``
+            }
+            <div class="ms-row">
+              <span class="ms-lbl">Snap</span>
+              <div class="ms-snaps">
+                ${Object.keys(s.snaps).map(
+                  (kind) => BUI.html`<label class="ms-snap">
+                    <bim-checkbox
+                      toggle
+                      ?checked=${s.snaps[kind as keyof typeof s.snaps]}
+                      @change=${(e: Event) => {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        tool.setSnap(kind as never, !!(e.target as any).checked);
+                      }}
+                    ></bim-checkbox>${kind}
+                  </label>`,
+                )}
+              </div>
+            </div>
+            <label class="ms-row ms-toggle">
+              <span class="ms-lbl">Show measurements</span>
+              <bim-checkbox
+                toggle
+                ?checked=${s.visible}
+                @change=${(e: Event) => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  tool.setVisible(!!(e.target as any).checked);
+                }}
+              ></bim-checkbox>
+            </label>
+          </div>
+        </bim-panel>`;
+    },
+    { tick: 0 },
+  );
+
+  tool.onChanged.add(() => update({ tick: 0 }));
+  return panel;
+};