@thatopen/services 0.1.3 → 0.3.0

package/src/cli/templates/app/src/setups/camera-views.ts

@@ -0,0 +1,201 @@
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
+import { cameraTools } from "./camera-tools";
+
+/**
+ * Camera navigation — a COMPACT floating overlay pinned top-right of the
+ * viewport (mirrors visibility-toolbar's self-mounting floating-grid overlay).
+ *
+ * Controls:
+ *  - View presets (Iso / Top / Bottom / Front / Back / Left / Right) via a
+ *    compact dropdown. Each frames the union bounding box of all loaded models:
+ *    `setLookAt` along the preset axis, then `fitToSphere` to frame precisely
+ *    while keeping the new direction.
+ *  - Zoom-to-fit + Perspective⇄Orthographic toggle — reused from
+ *    `cameraTools(components)` (no reimplementation).
+ *
+ * Self-mounts into the viewport overlay. Wire from main.ts with one line
+ * (after the viewport exists), like the visibility toolbar:
+ *
+ *     cameraViews(components, viewerElement);
+ *
+ * @param components engine components
+ * @param container optional viewport element to overlay; if omitted, the first
+ *                  world's renderer container is used.
+ */
+
+// Preset → camera direction (from target toward camera). Normalized + scaled by
+// the model radius at apply time.
+const VIEWS: Record<string, [number, number, number]> = {
+  Iso: [1, 0.8, 1],
+  Top: [0, 1, 0],
+  Bottom: [0, -1, 0],
+  Front: [0, 0, 1],
+  Back: [0, 0, -1],
+  Left: [-1, 0, 0],
+  Right: [1, 0, 0],
+};
+
+export const cameraViews = (
+  components: OBC.Components,
+  container?: HTMLElement,
+) => {
+  const fragments = components.get(OBC.FragmentsManager);
+  const cam = cameraTools(components);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const firstWorld = (): any => [...components.get(OBC.Worlds).list.values()][0];
+
+  const unionBox = () => {
+    const box = new THREE.Box3();
+    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);
+    }
+    return box;
+  };
+
+  const setView = async (name: string) => {
+    const dir = VIEWS[name];
+    if (!dir) return;
+    const controls = firstWorld()?.camera?.controls;
+    if (!controls?.setLookAt) return;
+    const box = unionBox();
+    if (box.isEmpty()) return;
+    const sphere = box.getBoundingSphere(new THREE.Sphere());
+    const r = sphere.radius || 1;
+    const c = sphere.center;
+    const v = new THREE.Vector3(dir[0], dir[1], dir[2])
+      .normalize()
+      .multiplyScalar(r * 3);
+    try {
+      // Move to the preset direction, then frame the sphere exactly (keeps the
+      // new direction, snaps the distance to fit).
+      await controls.setLookAt(
+        c.x + v.x, c.y + v.y, c.z + v.z,
+        c.x, c.y, c.z,
+        true,
+      );
+      await controls.fitToSphere(sphere, true);
+    } catch (error) {
+      console.warn("[camera-views] setView failed", error);
+    }
+  };
+
+  let busy = false;
+  const run = async (fn: () => void | Promise<void>) => {
+    if (busy) return;
+    busy = true;
+    try {
+      await fn();
+    } catch (error) {
+      console.warn("[camera-views] action failed", error);
+    } finally {
+      busy = false;
+    }
+  };
+
+  let tick = 0;
+  const [bar, barUpdate] = BUI.Component.create<HTMLElement, { tick: number }>(
+    // Param required: create() returns a single element (not the [element,
+    // update] tuple) when the template has arity 0.
+    (_state) => {
+      // Guard: the very first render can run before a world exists, and reading
+      // the projection spreads the (possibly empty/not-yet-ready) worlds list.
+      let ortho = false;
+      try {
+        ortho = cam.orthoToggle.active();
+      } catch {
+        /* world not ready yet — default to perspective icon, re-render later */
+      }
+      return BUI.html`
+        <bim-toolbar
+          style="
+            pointer-events: auto; overflow: visible; padding: 0.15rem;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+          "
+        >
+          <bim-toolbar-section label-hidden style="background: transparent;">
+            <bim-dropdown
+              icon="mdi:camera-control"
+              style="min-width: 6rem;"
+              @change=${(e: Event) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const picked = (e.target as any).value?.[0];
+                if (picked) void run(() => setView(String(picked)));
+              }}
+            >
+              ${Object.keys(VIEWS).map(
+                (name) => BUI.html`<bim-option label=${name}></bim-option>`,
+              )}
+            </bim-dropdown>
+          </bim-toolbar-section>
+          <bim-toolbar-section label-hidden style="background: transparent;">
+            <bim-button
+              icon=${cam.fitAll.icon}
+              @click=${() => run(() => cam.fitAll.run())}
+              style="width: 1.9rem; min-width: 1.9rem; height: 1.9rem;"
+            ><bim-tooltip placement="bottom">${cam.fitAll.label}</bim-tooltip></bim-button>
+            <bim-button
+              icon=${ortho ? "mdi:perspective-less" : "mdi:perspective-more"}
+              @click=${() =>
+                run(async () => {
+                  if (cam.orthoToggle.active()) await cam.orthoToggle.deactivate();
+                  else await cam.orthoToggle.activate();
+                  barUpdate({ tick: ++tick });
+                })}
+              style="width: 1.9rem; min-width: 1.9rem; height: 1.9rem;"
+            ><bim-tooltip placement="bottom">${
+              ortho
+                ? "Orthographic — switch to Perspective"
+                : "Perspective — switch to Orthographic"
+            }</bim-tooltip></bim-button>
+          </bim-toolbar-section>
+        </bim-toolbar>
+      `;
+    },
+    { tick: 0 },
+  );
+
+  // ── Floating grid overlay: bar pinned TOP-RIGHT; empty areas click through ──
+  const grid = BUI.Component.create(() => {
+    const onCreated = (element?: Element) => {
+      if (!element) return;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const g = element as any;
+      g.elements = { bar };
+      g.layouts = {
+        main: {
+          template: `
+            "restL bar"   auto
+            "fillL fillR" 1fr
+            / 1fr auto
+          `,
+        },
+      };
+      g.layout = "main";
+    };
+    return BUI.html`
+      <bim-grid style="padding: 1rem;" ${BUI.ref(onCreated)} floating></bim-grid>
+    `;
+  });
+
+  const resolveContainer = (): HTMLElement | undefined => {
+    if (container) return container;
+    const world = [...components.get(OBC.Worlds).list.values()][0] as
+      | { renderer?: { three?: { domElement?: HTMLElement } } }
+      | undefined;
+    const canvas = world?.renderer?.three?.domElement;
+    return (canvas?.parentElement as HTMLElement | undefined) ?? undefined;
+  };
+
+  const host = resolveContainer();
+  if (host) host.append(grid);
+  else
+    console.warn(
+      "[camera-views] no viewport found to overlay; append the returned element manually",
+    );
+
+  return bar;
+};

package/src/cli/templates/app/src/setups/card-header.ts

@@ -0,0 +1,35 @@
+import * as BUI from "@thatopen/ui";
+
+/**
+ * A card title styled to match the nxt-bld-demo panels: an icon (#99A0AE) +
+ * a white→#99A0AE gradient text label, semibold with wide letter-spacing.
+ * Use inside a `header-hidden` `bim-panel` (replaces the default header). Sticky
+ * to the top so it stays put while the card body scrolls.
+ *
+ * @param icon iconify/mdi name (e.g. "mdi:file-tree")
+ * @param label the title text
+ * @param padLeft left padding so the title aligns with the card's content inset
+ */
+export const cardHeader = (icon: string, label: string, padLeft = "0.6rem") => BUI.html`
+  <div
+    style="
+      position: sticky; top: 0; z-index: 2;
+      display: flex; align-items: center; gap: 0.45rem;
+      padding: 0.4rem 0.6rem 0.4rem ${padLeft};
+      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
+      /* Opaque surface bg (#262629 = panel bg) so scrolled content doesn't show
+         behind the sticky title. */
+      background: var(--bim-ui_bg-contrast-10, #262629);
+      border-bottom: 1px solid var(--bim-ui_bg-contrast-20, rgba(255, 255, 255, 0.1));
+    "
+  >
+    <bim-icon icon=${icon} style="color: #99A0AE; font-size: 0.95rem;"></bim-icon>
+    <span
+      style="
+        background: linear-gradient(90deg, #ffffff 0%, #99a0ae 100%);
+        -webkit-background-clip: text; background-clip: text;
+        -webkit-text-fill-color: transparent; color: transparent;
+      "
+    >${label}</span>
+  </div>
+`;

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

@@ -0,0 +1,167 @@
+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;
+};