@thatopen/services 0.1.3 → 0.3.0

package/src/cli/templates/app/src/setups/navigation-gizmo.ts

@@ -0,0 +1,316 @@
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+
+/**
+ * NAVIGATION GIZMO — a Blender/Spline-style axis-ball orientation widget pinned
+ * TOP-RIGHT of the viewport. Replaces the old camera-views overlay.
+ *
+ * A small rounded dark DISC contains a soft axis triad that reflects the LIVE
+ * camera orientation (it rotates with the camera): a neutral hub and three muted
+ * axes (soft red/green/blue), each a ball on a SHORT, THICK rounded bar. No
+ * labels, no outer ring. Colour is FIXED BY AXIS SIGN — +X/+Y/+Z are coloured
+ * (ball + arm); −X/−Y/−Z are small flat-gray dots (no arm), regardless of facing.
+ * Click a ball → orient + frame the model's union bbox in a SINGLE animated move
+ * (one `setLookAt` whose distance is computed to frame the sphere — no separate
+ * fitToSphere). Hovering an end gently brightens it. No home/fit button (the
+ * Focus command zoom-to-fits the whole model when nothing is selected) and no
+ * ortho/persp toggle (the bottom toolbar owns it).
+ *
+ * Same orient-on-click technique as a view-cube; this is the axis-ball variant.
+ * The widget renders in its OWN tiny WebGL renderer (a fixed ~60px disc overlay,
+ * tight around the triad) fully decoupled from the main viewport — a constant
+ * on-screen size. The gizmo camera is ALWAYS ORTHOGRAPHIC (axonometric — the arms
+ * never foreshorten), posed each frame to mirror the main camera's orientation,
+ * so the end facing you is the axis the camera is looking down. Picking is a
+ * single raycast against the six ball meshes → the nearest ball's axis direction.
+ *
+ * Self-mounts into the viewport overlay (like the old camera-views). Wire from
+ * main.ts with one line, after the viewport exists:
+ *
+ *     navigationGizmo(components, viewerElement);
+ *
+ * @param components engine components
+ * @param container optional viewport element to overlay; defaults to the first
+ *                  world's renderer container.
+ */
+
+const SIZE = 60; // px, fixed on-screen widget size (~50% smaller)
+const DIST = 5; // gizmo camera distance from the triad
+const FRUSTUM = 1.08; // ortho half-extent — tight around the triad (little padding)
+const R = 0.82; // ball distance from the hub
+
+// Colour is FIXED BY AXIS SIGN: +X/+Y/+Z are coloured (ball + arm), the negatives
+// are always flat gray — independent of facing.
+const AXES: { dir: [number, number, number]; color: number; positive: boolean }[] = [
+  { dir: [1, 0, 0], color: 0xcf6f6f, positive: true }, // +X soft red
+  { dir: [-1, 0, 0], color: 0xcf6f6f, positive: false },
+  { dir: [0, 1, 0], color: 0x86b572, positive: true }, // +Y soft green
+  { dir: [0, -1, 0], color: 0x86b572, positive: false },
+  { dir: [0, 0, 1], color: 0x7095c9, positive: true }, // +Z soft blue
+  { dir: [0, 0, -1], color: 0x7095c9, positive: false },
+];
+const GRAY = new THREE.Color(0x6e7177); // negatives are always flat gray
+
+interface Axis {
+  ball: THREE.Mesh<THREE.SphereGeometry, THREE.MeshBasicMaterial>;
+  arm: THREE.Mesh<THREE.CapsuleGeometry, THREE.MeshBasicMaterial>;
+  baseColor: THREE.Color; // fixed appearance colour (axis colour, or gray for −axes)
+  baseScale: number;
+  dir: THREE.Vector3;
+}
+
+export const navigationGizmo = (
+  components: OBC.Components,
+  container?: HTMLElement,
+) => {
+  const fragments = components.get(OBC.FragmentsManager);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const firstWorld = (): any => [...components.get(OBC.Worlds).list.values()][0];
+
+  // ── Overlay DOM (pinned top-right, click-through except on the widget) ──
+  const root = document.createElement("div");
+  root.className = "nav-gizmo";
+  root.style.cssText = [
+    "position: absolute",
+    "top: 1rem",
+    "right: 1rem",
+    "z-index: 20",
+    "display: flex",
+    "flex-direction: column",
+    "align-items: center",
+    "gap: 0.25rem",
+    "pointer-events: none",
+  ].join(";");
+
+  // The subtle dark DISC is the canvas itself (the alpha renderer clears
+  // transparent, so this soft CSS background + round clip shows through). No bold
+  // outer ring — just the disc + a faint shadow for separation.
+  const canvas = document.createElement("canvas");
+  canvas.style.cssText = [
+    `width:${SIZE}px`,
+    `height:${SIZE}px`,
+    "pointer-events:auto",
+    "cursor:pointer",
+    "border-radius:50%",
+    // Opaque circular background matching the panels (BUI theme base colour).
+    "background:var(--bim-ui_bg-base, var(--bim-ui_bg-contrast-20, #1b1b1f))",
+    "box-shadow:0 1px 6px rgba(0,0,0,0.28)",
+  ].join(";");
+  root.appendChild(canvas);
+
+  // ── Gizmo scene (own renderer, fully decoupled from the main viewport) ──
+  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio || 1);
+  renderer.setSize(SIZE, SIZE, false);
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+  const scene = new THREE.Scene();
+  const gizmoCam = new THREE.OrthographicCamera(
+    -FRUSTUM, FRUSTUM, FRUSTUM, -FRUSTUM, 0.1, 100,
+  );
+
+  // Small neutral center hub.
+  scene.add(
+    new THREE.Mesh(
+      new THREE.SphereGeometry(0.06, 16, 12),
+      new THREE.MeshBasicMaterial({ color: 0x8a8f96 }),
+    ),
+  );
+
+  // Six axis ends: a ball + a SHORT, THICK rounded bar (capsule) from the hub.
+  // Appearance is FIXED BY SIGN: +axes coloured (ball + arm), −axes flat gray
+  // (small ball, no arm).
+  const BALL_R = 0.12; // ball radius
+  const ARM_R = 0.05; // arm (capsule) radius — fat
+  const ARM_INNER = 0.08; // bar starts just outside the hub
+  const ARM_OUTER = R - BALL_R; // bar ends just inside the ball
+  const ARM_LEN = ARM_OUTER - ARM_INNER - 2 * ARM_R; // cylinder length (caps add 2·R)
+  const ARM_MID = (ARM_INNER + ARM_OUTER) / 2; // centre offset along the axis
+  const _yAxis = new THREE.Vector3(0, 1, 0);
+  const axes: Axis[] = [];
+  for (const a of AXES) {
+    const dir = new THREE.Vector3(...a.dir);
+    const baseColor = a.positive ? new THREE.Color(a.color) : GRAY.clone();
+    const baseScale = 1; // negatives are full-size too — just gray + no arm
+
+    const ball = new THREE.Mesh(
+      new THREE.SphereGeometry(BALL_R, 20, 16),
+      new THREE.MeshBasicMaterial({ color: baseColor.clone(), transparent: true, opacity: a.positive ? 1 : 0.7 }),
+    );
+    ball.position.copy(dir).multiplyScalar(R);
+    ball.scale.setScalar(baseScale);
+    ball.renderOrder = 2;
+    scene.add(ball);
+
+    // Capsule points along +Y by default → rotate to the axis, centre it on the
+    // hub→ball midpoint. Only the coloured (+) axes show an arm.
+    const arm = new THREE.Mesh(
+      new THREE.CapsuleGeometry(ARM_R, ARM_LEN, 6, 12),
+      new THREE.MeshBasicMaterial({ color: baseColor.clone(), transparent: true }),
+    );
+    arm.quaternion.setFromUnitVectors(_yAxis, dir);
+    arm.position.copy(dir).multiplyScalar(ARM_MID);
+    arm.renderOrder = 1;
+    arm.visible = a.positive;
+    scene.add(arm);
+
+    axes.push({ ball, arm, dir, baseColor, baseScale });
+  }
+
+  // ── Pose the gizmo camera to mirror the main camera each frame ──
+  const _fwd = new THREE.Vector3();
+  const _up = new THREE.Vector3();
+  const _lastQuat = new THREE.Quaternion(0, 0, 0, 0);
+  const poseGizmo = (): boolean => {
+    const main = firstWorld()?.camera?.three as THREE.Camera | undefined;
+    if (!main) return false;
+    main.getWorldDirection(_fwd); // direction the main camera looks (into scene)
+    gizmoCam.position.copy(_fwd).multiplyScalar(-DIST); // mirror that viewpoint
+    _up.set(0, 1, 0).applyQuaternion(main.quaternion); // honor camera roll
+    gizmoCam.up.copy(_up);
+    gizmoCam.lookAt(0, 0, 0);
+    return true;
+  };
+
+  const WHITE = new THREE.Color(0xffffff);
+  let hovered: Axis | null = null;
+
+  let hoverDirty = false;
+  const render = () => {
+    if (!poseGizmo()) return;
+    renderer.render(scene, gizmoCam);
+  };
+
+  // Render only when the orientation changed (or a hover changed) — cheap.
+  let raf = 0;
+  const loop = () => {
+    raf = requestAnimationFrame(loop);
+    void raf;
+    const main = firstWorld()?.camera?.three as THREE.Camera | undefined;
+    if (!main) return;
+    if (hoverDirty || !main.quaternion.equals(_lastQuat)) {
+      _lastQuat.copy(main.quaternion);
+      hoverDirty = false;
+      render();
+    }
+  };
+
+  // ── Picking: nearest ball under the cursor ─────────────────────
+  const raycaster = new THREE.Raycaster();
+  const ndc = new THREE.Vector2();
+  const ballMeshes = axes.map((ax) => ax.ball);
+  const pickBall = (ev: PointerEvent | MouseEvent): Axis | null => {
+    const rect = canvas.getBoundingClientRect();
+    ndc.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
+    ndc.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(ndc, gizmoCam);
+    const hit = raycaster.intersectObjects(ballMeshes, false)[0];
+    if (!hit) return null;
+    return axes.find((ax) => ax.ball === hit.object) ?? null;
+  };
+
+  const setHover = (ax: Axis | null) => {
+    if (hovered === ax) return;
+    if (hovered) {
+      hovered.ball.scale.setScalar(hovered.baseScale);
+      hovered.ball.material.color.copy(hovered.baseColor);
+    }
+    hovered = ax;
+    if (ax) {
+      ax.ball.scale.setScalar(ax.baseScale * 1.18); // subtle grow
+      ax.ball.material.color.copy(ax.baseColor).lerp(WHITE, 0.22); // gentle brighten
+    }
+    canvas.style.cursor = ax ? "pointer" : "default";
+    hoverDirty = true;
+  };
+
+  // ── Orient + frame in ONE animated move ────────────────────────
+  // Compute the framing distance ourselves and issue a SINGLE setLookAt (which
+  // tweens position + target together) — no separate fitToSphere, so a gizmo
+  // click is one continuous orient-and-frame motion, not two.
+  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 orientTo = (dir: THREE.Vector3) => {
+    const world = firstWorld();
+    const controls = world?.camera?.controls;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const main = world?.camera?.three as any;
+    if (!controls?.setLookAt || !main) return;
+    try {
+      const box = unionBox();
+      if (box.isEmpty()) return; // nothing loaded → no-op gracefully
+      // Frame the actual MODEL AABB (not its bounding sphere — the sphere over-
+      // estimates ~1.7× for a box, landing the camera too far). For an axis view
+      // the distance is driven by the box's two PERPENDICULAR extents (fit the
+      // larger against the narrower fov half-angle) plus half the depth along the
+      // axis so the camera sits just outside the box. ONE animated setLookAt.
+      const v = dir.clone().normalize();
+      const center = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3());
+      const dims = [size.x, size.y, size.z];
+      const ax = Math.abs(v.x) > 0.5 ? 0 : Math.abs(v.y) > 0.5 ? 1 : 2; // dominant axis
+      const depth = dims[ax] || 1;
+      const perp = dims.filter((_, i) => i !== ax);
+      const maxPerp = Math.max(perp[0] || 0, perp[1] || 0, 1e-3);
+      if (main.isPerspectiveCamera) {
+        const vHalf = THREE.MathUtils.degToRad(main.fov || 50) / 2;
+        const aspect = main.aspect || 1;
+        const hHalf = Math.atan(Math.tan(vHalf) * aspect);
+        const fit = Math.max(0.001, Math.min(vHalf, hHalf));
+        const d = (maxPerp / 2 / Math.tan(fit) + depth / 2) * 1.12;
+        const eye = v.multiplyScalar(d).add(center);
+        void controls.setLookAt(eye.x, eye.y, eye.z, center.x, center.y, center.z, true);
+      } else {
+        // Orthographic: distance is cosmetic; place outside the box and tween the
+        // ortho zoom CONCURRENTLY (same frame → one smooth motion) to fit it.
+        const d = depth / 2 + maxPerp * 2;
+        const eye = v.multiplyScalar(d).add(center);
+        void controls.setLookAt(eye.x, eye.y, eye.z, center.x, center.y, center.z, true);
+        const fw = main.right - main.left;
+        const fh = main.top - main.bottom;
+        const zoom = Math.min(fw, fh) / (maxPerp * 1.12);
+        if (typeof controls.zoomTo === "function" && Number.isFinite(zoom) && zoom > 0) {
+          void controls.zoomTo(zoom, true);
+        }
+      }
+    } catch (error) {
+      console.warn("[navigation-gizmo] orient failed", error);
+    }
+  };
+
+  // ── Interaction ────────────────────────────────────────────────
+  canvas.addEventListener("pointermove", (ev) => setHover(pickBall(ev)));
+  canvas.addEventListener("pointerleave", () => setHover(null));
+  canvas.addEventListener("click", (ev) => {
+    const b = pickBall(ev);
+    if (b) void orientTo(b.dir);
+  });
+
+  // ── Mount + start ──────────────────────────────────────────────
+  const resolveContainer = (): HTMLElement | undefined => {
+    if (container) return container;
+    const world = firstWorld();
+    const canvasEl = world?.renderer?.three?.domElement as HTMLElement | undefined;
+    return (canvasEl?.parentElement as HTMLElement | undefined) ?? undefined;
+  };
+  const host = resolveContainer();
+  if (host) {
+    if (getComputedStyle(host).position === "static") host.style.position = "relative";
+    host.appendChild(root);
+  } else {
+    console.warn("[navigation-gizmo] no viewport found to overlay; append the returned element manually");
+  }
+
+  render(); // initial paint
+  loop();
+
+  return root;
+};

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

@@ -0,0 +1,127 @@
+import * as BUI from "@thatopen/ui";
+import type { InspectionInstances, InstanceRow } from "./inspection";
+import { toolPlaceholderUri } from "../assets/tool-placeholder";
+import { cardHeader } from "./card-header";
+
+/**
+ * OBJECTS outliner panel (UI-reorg increment b). Lists every created clip plane
+ * and measurement from the unified {@link InspectionInstances} API, each row with
+ * hide/show, enable/disable (clip planes only) and delete. Re-renders on the
+ * inspection `onChanged` event (the row actions themselves fire it via the tools,
+ * so handlers don't re-render manually). Returns its `bim-panel` WITHOUT
+ * self-mounting — main.ts docks it in the activity-bar "Objects" layout.
+ *
+ * @param inspection unified clip-plane + measurement instance list (from W1)
+ * @returns the `bim-panel` element
+ */
+const iconFor = (r: InstanceRow): string => {
+  if (r.kind === "clip") return "mdi:scissors-cutting";
+  switch (r.type) {
+    case "Length": return "mdi:ruler";
+    case "Area": return "mdi:vector-square";
+    case "Angle": return "mdi:angle-acute";
+    default: return "mdi:cube-outline";
+  }
+};
+
+export const objectsPanel = (inspection: InspectionInstances) => {
+  // bim-tooltip portals itself into a body-level container while shown and only
+  // hides on its parent button's `mouseleave`. A row action (delete / toggle)
+  // fires inspection.onChanged → the row re-renders and the button is removed —
+  // so the parent never sees `mouseleave` and the portaled tooltip is left
+  // orphaned on screen. Firing `mouseleave` on the button first runs the
+  // tooltip's hide (re-parents + clears it) BEFORE the row removes, so no stale
+  // tooltip lingers after delete/toggle.
+  const dismissTip = (e: Event) =>
+    (e.currentTarget as HTMLElement | null)?.dispatchEvent(new MouseEvent("mouseleave"));
+
+  const rowHtml = (r: InstanceRow) => BUI.html`
+    <div class="ob-row">
+      <bim-icon class="ob-ico" icon=${iconFor(r)}></bim-icon>
+      <span class="ob-lbl" title=${r.label}>${r.label}</span>
+      <bim-button
+        class="ob-act"
+        icon=${r.visible ? "mdi:eye-outline" : "mdi:eye-off-outline"}
+        @click=${(e: Event) => { dismissTip(e); r.setVisible(!r.visible); }}
+      ><bim-tooltip>${r.visible ? "Hide" : "Show"}</bim-tooltip></bim-button>
+      ${r.enabled !== undefined
+        ? BUI.html`<bim-button
+            class="ob-act"
+            icon=${r.enabled ? "mdi:toggle-switch-outline" : "mdi:toggle-switch-off-outline"}
+            @click=${(e: Event) => { dismissTip(e); r.setEnabled?.(!r.enabled); }}
+          ><bim-tooltip>${r.enabled ? "Disable cut" : "Enable cut"}</bim-tooltip></bim-button>`
+        : null}
+      <bim-button
+        class="ob-act"
+        icon="mdi:trash-can-outline"
+        @click=${(e: Event) => { dismissTip(e); r.remove(); }}
+      ><bim-tooltip>Delete</bim-tooltip></bim-button>
+    </div>`;
+
+  // A titled group ("Clip planes" / "Measurements") when its rows are present.
+  const group = (title: string, rows: InstanceRow[]) =>
+    rows.length === 0
+      ? null
+      : BUI.html`
+          <div class="ob-grp">${title}</div>
+          ${rows.map(rowHtml)}`;
+
+  const [panel, update] = BUI.Component.create<BUI.Panel, { tick: number }>(
+    // Arity >= 1 (state param) is REQUIRED — an arity-0 callback makes
+    // Component.create return a single element, not [el, update].
+    (_s) => {
+      const rows = inspection.list();
+      const clips = rows.filter((r) => r.kind === "clip");
+      const measures = rows.filter((r) => r.kind === "measurement");
+      return BUI.html`
+        <bim-panel
+          label="Objects"
+          icon="mdi:cube-outline"
+          header-hidden
+          style="width: 100%; height: 100%; pointer-events: auto;"
+        >
+          <style>
+            .ob-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
+              overflow-y: auto; padding: 0.4rem 0 0.6rem; }
+            .ob-scroll::-webkit-scrollbar { width: 0.4rem; }
+            .ob-scroll::-webkit-scrollbar-thumb { border-radius: 0.25rem;
+              background-color: var(--bim-scrollbar--c, #3C3C41); }
+            .ob-grp { padding: 0.45rem 0.75rem 0.2rem; font-size: 0.68rem;
+              font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
+              color: var(--bim-ui_bg-contrast-60, #99a0ae); }
+            .ob-row { display: flex; align-items: center; gap: 0.4rem;
+              padding: 0.1rem 0.5rem 0.1rem 0.75rem; min-height: 1.7rem; }
+            .ob-row:hover { background: var(--bim-ui_bg-contrast-20, rgba(255,255,255,0.06)); }
+            .ob-ico { flex: 0 0 auto; font-size: 0.9rem;
+              color: var(--bim-ui_bg-contrast-60, #99a0ae); }
+            .ob-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden;
+              text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem;
+              color: var(--bim-ui_bg-contrast-100, #e3e3e3); }
+            .ob-act { flex: 0 0 auto; }
+            /* Shared empty-state look (same svg placeholder + faded label as the
+               Properties panel) so all panels read consistently when empty. */
+            .ob-empty { display: flex; flex-direction: column; align-items: center;
+              justify-content: center; gap: 0.75rem; height: 100%; min-height: 12rem;
+              padding: 1rem; text-align: center; }
+          </style>
+          <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
+            ${cardHeader("mdi:cube-outline", "Objects", "1.1rem")}
+            <div class="ob-scroll">
+            ${rows.length === 0
+              ? BUI.html`<div class="ob-empty">
+                  <img src=${toolPlaceholderUri} alt="" style="width: 7.5rem; height: auto; opacity: 0.9;" />
+                  <bim-label style="opacity: 0.55; white-space: normal;">No clip planes or measurements yet. Create them from the Inspection toolbar.</bim-label>
+                </div>`
+              : BUI.html`${group("Clip planes", clips)}${group("Measurements", measures)}`}
+            </div>
+          </div>
+        </bim-panel>`;
+    },
+    { tick: 0 },
+  );
+
+  // Re-render whenever an instance is added/removed or its state changes.
+  inspection.onChanged.add(() => update({ tick: 0 }));
+
+  return panel;
+};