@thatopen/services 0.3.1 → 0.3.2

package/src/cli/templates/app/src/setups/active-tool-hud.ts

@@ -1,69 +0,0 @@
-import * as OBC from "@thatopen/components";
-import { toolModeManager, type ManagedTool } from "./tool-mode-manager";
-
-/**
- * Active-tool HUD — a floating text overlay (top-left of the viewport) showing
- * what the user is currently doing, e.g. "Drawing clipping plane" /
- * "Measuring length".
- *
- * Fully DECOUPLED from any specific tool: it only subscribes to the global
- * toolModeManager's `onActiveChanged` and renders the active tool's registered
- * {@link ManagedTool.label} (+ optional icon), hidden when no tool is active. Any
- * future tool that registers a label with the manager shows up here with zero
- * HUD changes.
- *
- * Styled like the other in-viewer overlays (fps counter): panel surface + 1px
- * contrast-20 border + theme text, pointer-events off.
- */
-export interface ActiveToolHud {
-  element: HTMLElement;
-}
-
-export const activeToolHud = (
-  parent: HTMLElement,
-  components: OBC.Components,
-): ActiveToolHud => {
-  const manager = toolModeManager(components);
-
-  const el = document.createElement("div");
-  el.style.cssText = `
-    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 10;
-    display: none; align-items: center; gap: 0.4rem;
-    padding: 0.25rem 0.6rem; border-radius: 0.5rem;
-    background: var(--bim-ui_bg-contrast-10, #262629);
-    border: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1));
-    color: var(--bim-ui_bg-contrast-100, #e3e3e3);
-    font: 600 0.74rem/1.2 "Plus Jakarta Sans", sans-serif;
-    pointer-events: none; user-select: none;
-  `;
-  const icon = document.createElement("bim-icon");
-  icon.style.fontSize = "0.95rem";
-  const text = document.createElement("span");
-  el.append(icon, text);
-
-  // The viewer is position:relative, so an absolutely-positioned child overlays
-  // the canvas correctly.
-  if (!parent.style.position) parent.style.position = "relative";
-  parent.append(el);
-
-  const render = (tool: ManagedTool | null) => {
-    if (!tool) {
-      el.style.display = "none";
-      return;
-    }
-    text.textContent =
-      typeof tool.label === "function" ? tool.label() : tool.label;
-    if (tool.icon) {
-      icon.setAttribute("icon", tool.icon);
-      icon.style.display = "";
-    } else {
-      icon.style.display = "none";
-    }
-    el.style.display = "flex";
-  };
-
-  manager.onActiveChanged.add(render);
-  render(manager.active);
-
-  return { element: el };
-};

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

@@ -1,167 +0,0 @@
-import * as OBC from "@thatopen/components";
-import * as BUI from "@thatopen/ui";
-import type { ClipperTool } from "./clipper-tool";
-
-/**
- * CLIPPING panel — a docked side-panel (a 4th layout alongside
- * Explorer/Files/Graphics) for section planes + per-category section styling.
- *
- * Sections:
- *  - Section planes — master Enabled, Add plane (placing mode: double-click a
- *    surface), Clear all.
- *  - Active planes — one row per plane (per-plane enable + delete).
- *  - Section styling — master fills/edges visibility + a per-IFC-category list,
- *    each with a fill colour, an edge colour, and an include toggle.
- *
- * Vanilla BUI, matching graphics-panel.ts / files-panel.ts: `bim-panel` (native
- * header label+icon), muted section bands, 1px contrast-20 hairline rows, the
- * #3C3C41 scrollbar, library `bim-checkbox[toggle]` switches, `bim-button`s and
- * `bim-color-input`s. Factory returns the element WITHOUT self-mounting.
- */
-export const clipperPanel = (
-  _components: OBC.Components,
-  tool: ClipperTool,
-) => {
-  const [panel, update] = BUI.Component.create<BUI.Panel, { tick: number }>(
-    (state) => {
-      const refresh = () => update({ tick: state.tick + 1 });
-
-      const enabled = tool.isEnabled();
-      const sectionStyle = tool.getSectionStyle();
-      const stylingVisible = tool.isStylingVisible();
-
-      return BUI.html`
-        <bim-panel label="Clipping" icon="mdi:scissors-cutting"
-          style="width: 100%; height: 100%; pointer-events: auto;">
-          <style>
-            .c-vp::-webkit-scrollbar { width: 0.4rem; height: 0.4rem; }
-            .c-vp::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--bim-scrollbar--c, #3C3C41); }
-            .c-vp::-webkit-scrollbar-track { background-color: var(--bim-scrollbar--bgc, var(--bim-ui_bg-contrast-10)); }
-
-            .c-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)); }
-            .c-band-ico { flex: 0 0 auto; font-size: 0.9rem; color: var(--bim-ui_bg-contrast-70, #a7a7ab); }
-            .c-band:first-child { border-top: none; }
-
-            .c-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)); }
-            .c-k { opacity: 0.6; flex: 0 1 auto; min-width: 0; white-space: nowrap;
-              overflow: hidden; text-overflow: ellipsis; }
-            .c-v { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
-              justify-content: flex-end; gap: 0.5rem; }
-            .c-row bim-checkbox.c-toggle, .c-cat bim-checkbox.c-toggle { flex: 0 0 2rem; width: 2rem; }
-            .c-row bim-button.c-del { flex: 0 0 auto; --bim-button--bgc: transparent; }
-
-            .c-empty { padding: 0.6rem 0.4rem 0.6rem 1.1rem; opacity: 0.6;
-              font-size: 0.78rem; line-height: 1.3; white-space: normal; }
-
-            .c-actions { display: flex; flex-direction: column; gap: 0.4rem;
-              padding: 0.5rem 0.4rem 0.5rem 1.1rem; }
-            .c-actions bim-button { width: 100%; }
-
-            /* Per-category style row: [toggle] [name grows] [fill][edge swatches] */
-            .c-cat { box-sizing: border-box; min-height: 32px; display: flex;
-              align-items: center; gap: 0.5rem;
-              padding: 0.3rem 0.4rem 0.3rem 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)); }
-            .c-cat-name { flex: 1 1 auto; min-width: 0; opacity: 0.85;
-              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-            .c-cat-colors { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; }
-            .c-cat-colors bim-color-input { flex: 0 0 auto; }
-            .c-cat-off { opacity: 0.45; }
-            .c-cat-off .c-cat-colors { pointer-events: none; }
-          </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="c-vp" style="flex: 1 1 auto; min-height: 0; overflow-y: auto;
-                margin-left: -1.1rem; margin-right: -0.4rem;">
-
-                <div class="c-row">
-                  <span class="c-k">Enabled</span>
-                  <span class="c-v">
-                    <bim-checkbox class="c-toggle" toggle ?checked=${enabled}
-                      @change=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        tool.setEnabled(!!(e.target as any).checked);
-                        refresh();
-                      }}></bim-checkbox>
-                  </span>
-                </div>
-                <div class="c-row">
-                  <span class="c-k">Show fills / edges</span>
-                  <span class="c-v">
-                    <bim-checkbox class="c-toggle" toggle ?checked=${stylingVisible}
-                      @change=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        tool.setStylingVisible(!!(e.target as any).checked);
-                        refresh();
-                      }}></bim-checkbox>
-                  </span>
-                </div>
-                <div class="c-row">
-                  <span class="c-k">Fill color</span>
-                  <span class="c-v">
-                    <bim-color-input color=${sectionStyle.fill}
-                      @input=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const t = e.target as any;
-                        tool.setSectionFill(String(t.color ?? t.value));
-                      }}></bim-color-input>
-                  </span>
-                </div>
-                <div class="c-row">
-                  <span class="c-k">Edge color</span>
-                  <span class="c-v">
-                    <bim-color-input color=${sectionStyle.line}
-                      @input=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const t = e.target as any;
-                        tool.setSectionLine(String(t.color ?? t.value));
-                      }}></bim-color-input>
-                  </span>
-                </div>
-                <div class="c-row">
-                  <span class="c-k">Fill opacity</span>
-                  <span class="c-v">
-                    <bim-number-input slider value=${sectionStyle.opacity}
-                      min="0" max="1" step="0.05"
-                      @change=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        tool.setSectionOpacity(Number((e.target as any).value));
-                      }}></bim-number-input>
-                  </span>
-                </div>
-                <div class="c-row">
-                  <span class="c-k">Edge width</span>
-                  <span class="c-v">
-                    <bim-number-input slider value=${sectionStyle.width}
-                      min="1" max="20" step="1"
-                      @change=${(e: Event) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        tool.setSectionWidth(Number((e.target as any).value));
-                      }}></bim-number-input>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </bim-panel>
-      `;
-    },
-    { tick: 0 },
-  );
-
-  tool.onChanged.add(() => update({ tick: 0 }));
-  tool.onStyleChanged.add(() => update({ tick: 0 }));
-
-  return panel;
-};

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

@@ -1,239 +0,0 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-import * as BUI from "@thatopen/ui";
-import { hider } from "./hider";
-
-/**
- * COMMANDS — a docked side-panel (alongside Explorer / Files / Graphics) that is
- * both the keyboard-shortcut registry and its palette UI.
- *
- * A single `COMMANDS` table maps each viewer action to a shortcut + an mdi icon
- * and a `run()` wired to the EXISTING components (the `hider` controller for
- * visibility, the Highlighter for the current selection + clear, camera-controls
- * for focus). The panel lists every command with its shortcut (command-palette
- * style, click-to-run), and a global `keydown` handler dispatches the shortcuts —
- * ignored while typing in an input so search fields aren't hijacked.
- *
- * Self-contained: returns the panel element WITHOUT self-mounting (like
- * modelTree / graphicsPanel) and installs its own window keydown listener.
- *
- * @param components engine components
- */
-
-interface ViewerCommand {
-  id: string;
-  label: string;
-  icon: string;
-  /** Display chips, e.g. ["Shift", "H"]. */
-  keys: string[];
-  /** Does this keydown event trigger the command? */
-  match: (e: KeyboardEvent) => boolean;
-  run: () => void;
-}
-
-const noMods = (e: KeyboardEvent) =>
-  !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
-
-// Don't hijack shortcuts while the user is typing in a field.
-const typingInField = (e: KeyboardEvent) => {
-  const path = (e.composedPath?.() ?? []) as HTMLElement[];
-  const el = (path[0] ?? (e.target as HTMLElement)) || null;
-  const active = (document.activeElement as HTMLElement) || null;
-  const isField = (n: HTMLElement | null) =>
-    !!n &&
-    (n.isContentEditable ||
-      /^(input|textarea|select)$/i.test(n.tagName) ||
-      /^bim-(text|number)-input$/i.test(n.tagName));
-  return path.some(isField) || isField(el) || isField(active);
-};
-
-export const commandsPanel = (components: OBC.Components) => {
-  const fragments = components.get(OBC.FragmentsManager);
-  const highlighter = components.get(OBF.Highlighter);
-  const selectName = highlighter.config.selectName;
-  const h = hider(components);
-
-  const hasSelection = () => {
-    const map = highlighter.selection[selectName];
-    return !!map && Object.values(map).some((s) => s.size > 0);
-  };
-
-  const focusSelection = async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const world = [...components.get(OBC.Worlds).list.values()][0] as any;
-    const controls = world?.camera?.controls;
-    if (!controls) return;
-    const map = highlighter.selection[selectName];
-    const hasSel = !!map && Object.values(map).some((s) => s.size > 0);
-    try {
-      const box = new THREE.Box3();
-      if (hasSel) {
-        const boxes = (await fragments.getBBoxes(map)) as THREE.Box3[];
-        for (const b of boxes) box.union(b);
-      } else {
-        // Nothing selected → focus = zoom to fit the WHOLE model (union of all
-        // loaded models' bounds). This makes a dedicated fit/home button unnecessary.
-        for (const model of fragments.list.values()) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const b = (model as any).box as THREE.Box3 | undefined;
-          if (b && !b.isEmpty()) box.union(b);
-        }
-      }
-      if (box.isEmpty()) return;
-      const sphere = box.getBoundingSphere(new THREE.Sphere());
-      await controls.fitToSphere(sphere, true);
-    } catch (error) {
-      console.warn("[commands] focus failed", error);
-    }
-  };
-
-  const clearSelection = () => void highlighter.clear(selectName);
-
-  const COMMANDS: ViewerCommand[] = [
-    {
-      id: "focus",
-      label: "Focus selection",
-      icon: "mdi:image-filter-center-focus",
-      keys: ["F"],
-      match: (e) => e.key.toLowerCase() === "f" && noMods(e),
-      run: () => void focusSelection(),
-    },
-    {
-      id: "hide",
-      label: "Hide selected",
-      icon: "mdi:eye-off-outline",
-      keys: ["H"],
-      match: (e) => e.key.toLowerCase() === "h" && noMods(e),
-      run: () => h.hideSelected(),
-    },
-    {
-      id: "isolate",
-      label: "Isolate selected",
-      icon: "mdi:select-search",
-      keys: ["Shift", "H"],
-      match: (e) =>
-        e.key.toLowerCase() === "h" &&
-        e.shiftKey &&
-        !e.ctrlKey &&
-        !e.metaKey &&
-        !e.altKey,
-      run: () => h.isolateSelected(),
-    },
-    {
-      id: "ghost",
-      label: "Ghost selected",
-      icon: "mdi:ghost-outline",
-      keys: ["G"],
-      match: (e) => e.key.toLowerCase() === "g" && noMods(e),
-      run: () => h.ghostSelected(),
-    },
-    {
-      id: "showAll",
-      label: "Show all",
-      icon: "mdi:eye-outline",
-      keys: ["Shift", "A"],
-      match: (e) =>
-        e.key.toLowerCase() === "a" &&
-        e.shiftKey &&
-        !e.ctrlKey &&
-        !e.metaKey &&
-        !e.altKey,
-      run: () => h.showAll(),
-    },
-    {
-      id: "clear",
-      label: "Clear selection",
-      icon: "mdi:close",
-      keys: ["Esc"],
-      match: (e) => e.key === "Escape" && noMods(e),
-      run: () => clearSelection(),
-    },
-  ];
-
-  // ── Global shortcut dispatch ───────────────────────────────────
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (typingInField(e)) return;
-    for (const cmd of COMMANDS) {
-      if (cmd.match(e)) {
-        e.preventDefault();
-        cmd.run();
-        return;
-      }
-    }
-  };
-  window.addEventListener("keydown", onKeyDown);
-
-  // ── Panel UI (command-palette list; mirrors graphics-panel chrome) ──
-  const [panel, update] = BUI.Component.create<BUI.Panel, { query: string }>(
-    (state) => {
-      const q = state.query.trim().toLowerCase();
-      const rows = COMMANDS.filter((c) => !q || c.label.toLowerCase().includes(q));
-      return BUI.html`
-        <bim-panel
-          label="Commands"
-          icon="mdi:keyboard"
-          style="width: 100%; height: 100%; pointer-events: auto;"
-        >
-          <style>
-            .cmd-vp::-webkit-scrollbar { width: 0.4rem; height: 0.4rem; }
-            .cmd-vp::-webkit-scrollbar-thumb { border-radius: 0.25rem; background-color: var(--bim-scrollbar--c, #3C3C41); }
-            .cmd-vp::-webkit-scrollbar-track { background-color: var(--bim-scrollbar--bgc, var(--bim-ui_bg-contrast-10)); }
-            .cmd-row { box-sizing: border-box; min-height: 32px; display: flex;
-              align-items: center; gap: 0.55rem; padding: 0.35rem 0.4rem 0.35rem 1.1rem;
-              font-size: 0.78rem; line-height: 1.3; cursor: pointer;
-              color: var(--bim-ui_bg-contrast-100, #e3e3e3);
-              border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1)); }
-            .cmd-row:hover { background: var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.08)); }
-            .cmd-ico { flex: 0 0 auto; color: #99a0ae; font-size: 0.95rem; }
-            .cmd-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
-              text-overflow: ellipsis; white-space: nowrap; }
-            .cmd-keys { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.2rem; }
-            .cmd-kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-              font-size: 0.66rem; line-height: 1; padding: 0.12rem 0.35rem;
-              border-radius: 0.25rem; color: var(--bim-ui_bg-contrast-80, #c9c9c9);
-              background: var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.08));
-              border: 1px solid var(--bim-ui_bg-contrast-40, rgba(255,255,255,0.18)); }
-            .cmd-plus { opacity: 0.4; font-size: 0.66rem; }
-          </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.4rem 0.4rem 0.4rem 1.1rem; gap: 0.25rem;">
-              <bim-text-input
-                icon="mdi:magnify"
-                icon-inside
-                placeholder="Search commands…"
-                style="flex: 0 0 auto; width: 100%; margin: 0 0 0.25rem -0.35rem;"
-                @input=${(e: Event) => {
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  update({ query: String((e.target as any).value ?? "") });
-                }}
-              ></bim-text-input>
-              <div style="flex: 0 0 auto; border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.1)); margin: 0 -0.4rem 0.1rem -1.1rem;"></div>
-              <div class="cmd-vp" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-left: -1.1rem; margin-right: -0.4rem;">
-                ${rows.length === 0
-                  ? BUI.html`<div style="padding: 0.75rem 1.1rem;"><bim-label style="opacity: 0.6;">No commands.</bim-label></div>`
-                  : rows.map(
-                      (c) => BUI.html`
-                        <div class="cmd-row" title=${c.label} @click=${() => c.run()}>
-                          <bim-icon class="cmd-ico" icon=${c.icon}></bim-icon>
-                          <span class="cmd-label">${c.label}</span>
-                          <span class="cmd-keys">
-                            ${c.keys.map(
-                              (k, i) => BUI.html`${i > 0
-                                ? BUI.html`<span class="cmd-plus">+</span>`
-                                : null}<span class="cmd-kbd">${k}</span>`,
-                            )}
-                          </span>
-                        </div>`,
-                    )}
-              </div>
-            </div>
-          </div>
-        </bim-panel>
-      `;
-    },
-    { query: "" },
-  );
-
-  return panel;
-};