@thatopen/services 0.3.1 → 0.3.2

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

@@ -1,63 +1,63 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-
-/**
- * Camera tools for the viewer toolbar. Returns controllers matching the
- * toolbar's integration contract:
- *  - `fitAll`  — ACTION: fit the camera to the whole loaded model.
- *  - `orthoToggle` — TOGGLE: switch the projection Perspective ⇄ Orthographic.
- */
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const firstWorld = (components: OBC.Components): any =>
-  [...components.get(OBC.Worlds).list.values()][0];
-
-export interface CameraTools {
-  fitAll: { label: string; icon: string; run(): Promise<void> };
-  orthoToggle: {
-    label: string;
-    icon: string;
-    active(): boolean;
-    activate(): Promise<void>;
-    deactivate(): Promise<void>;
-  };
-}
-
-export const cameraTools = (components: OBC.Components): CameraTools => {
-  const fragments = components.get(OBC.FragmentsManager);
-
-  return {
-    fitAll: {
-      label: "Zoom to fit",
-      icon: "mdi:fit-to-page-outline",
-      async run() {
-        const controls = firstWorld(components)?.camera?.controls;
-        if (!controls) return;
-        // Union every loaded model's bounding box, then frame its sphere —
-        // fitToSphere preserves the current view direction (no rotation snap).
-        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);
-        }
-        if (box.isEmpty()) return;
-        const sphere = box.getBoundingSphere(new THREE.Sphere());
-        await controls.fitToSphere(sphere, true);
-      },
-    },
-    orthoToggle: {
-      label: "Orthographic",
-      icon: "mdi:angle-right",
-      active() {
-        return firstWorld(components)?.camera?.projection?.current === "Orthographic";
-      },
-      async activate() {
-        await firstWorld(components)?.camera?.projection?.set?.("Orthographic");
-      },
-      async deactivate() {
-        await firstWorld(components)?.camera?.projection?.set?.("Perspective");
-      },
-    },
-  };
-};
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+
+/**
+ * Camera tools for the viewer toolbar. Returns controllers matching the
+ * toolbar's integration contract:
+ *  - `fitAll`  — ACTION: fit the camera to the whole loaded model.
+ *  - `orthoToggle` — TOGGLE: switch the projection Perspective ⇄ Orthographic.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const firstWorld = (components: OBC.Components): any =>
+  [...components.get(OBC.Worlds).list.values()][0];
+
+export interface CameraTools {
+  fitAll: { label: string; icon: string; run(): Promise<void> };
+  orthoToggle: {
+    label: string;
+    icon: string;
+    active(): boolean;
+    activate(): Promise<void>;
+    deactivate(): Promise<void>;
+  };
+}
+
+export const cameraTools = (components: OBC.Components): CameraTools => {
+  const fragments = components.get(OBC.FragmentsManager);
+
+  return {
+    fitAll: {
+      label: "Zoom to fit",
+      icon: "mdi:fit-to-page-outline",
+      async run() {
+        const controls = firstWorld(components)?.camera?.controls;
+        if (!controls) return;
+        // Union every loaded model's bounding box, then frame its sphere —
+        // fitToSphere preserves the current view direction (no rotation snap).
+        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);
+        }
+        if (box.isEmpty()) return;
+        const sphere = box.getBoundingSphere(new THREE.Sphere());
+        await controls.fitToSphere(sphere, true);
+      },
+    },
+    orthoToggle: {
+      label: "Orthographic",
+      icon: "mdi:angle-right",
+      active() {
+        return firstWorld(components)?.camera?.projection?.current === "Orthographic";
+      },
+      async activate() {
+        await firstWorld(components)?.camera?.projection?.set?.("Orthographic");
+      },
+      async deactivate() {
+        await firstWorld(components)?.camera?.projection?.set?.("Perspective");
+      },
+    },
+  };
+};

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

@@ -89,7 +89,7 @@ export const ensureSectionStyle = (components: OBC.Components) => {
   });
 };
 
-export const clipperTool = (components: OBC.Components): ClipperTool => {
+const clipperToolImpl = (components: OBC.Components): ClipperTool => {
   const clipper = components.get(OBC.Clipper);
   clipper.localClippingPlanes = true; // before any plane is created
   clipper.enabled = true;
@@ -752,3 +752,22 @@ export const clipperTool = (components: OBC.Components): ClipperTool => {
     isStylingVisible: () => styler.visible,
   };
 };
+
+// Real OBC.Component wrapper so the ClipperTool wrapper is a per-`components`
+// singleton, resolved by UUID via `components.get(...)`. Because `components` is
+// a single shared instance across bundle boundaries, the toolbar built-in and
+// the app's side panels (clipper-panel, objects) all get the SAME ClipperTool.
+export class ClipperToolComponent extends OBC.Component {
+  static readonly uuid = "9b2c7e10-3a4f-4c21-8b6d-1f0a2c3d4e51" as const;
+  enabled = true;
+  readonly tool: ClipperTool;
+  constructor(components: OBC.Components) {
+    super(components);
+    components.add(ClipperToolComponent.uuid, this);
+    this.tool = clipperToolImpl(components);
+  }
+}
+
+/** Per-Components singleton accessor for the clipping tool. */
+export const clipperTool = (components: OBC.Components): ClipperTool =>
+  components.get(ClipperToolComponent).tool;

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

@@ -1,75 +1,75 @@
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-import type { ModeTool } from "./tool-mode";
-
-/**
- * Section / clipping-planes tool. Wraps `OBC.Clipper` as a toolbar mode tool:
- *
- *  - double-click on the model → create a clip plane on the surface under the
- *    pointer (raycast; the plane's normal is the hit face normal),
- *  - drag the plane's arrow gizmo to move it along its normal (handled by the
- *    Clipper's built-in TransformControls while the mode is active),
- *  - Delete / Backspace → delete the plane under the cursor,
- *  - Shift + Delete / Shift + Backspace → clear ALL section planes.
- *
- * Clipping is applied through `renderer.three.clippingPlanes` with
- * `localClippingEnabled = true` (set by the SimpleRenderer), so the cut is
- * honored during the deferred pipeline's single capture render — no
- * deferred-lib change is needed. (Worth an explicit live check that the section
- * actually cuts geometry in deferred mode.)
- *
- * Leaving the mode keeps the existing section planes cutting the model (so a
- * section persists while navigating); it only stops creating/dragging new ones.
- */
-export const clipper = (
-  components: OBC.Components,
-  world: OBC.World,
-): ModeTool => {
-  const clipperComp = components.get(OBC.Clipper);
-
-  const canvas = (world.renderer as OBF.PostproductionRenderer | null)?.three
-    .domElement;
-  if (!canvas) {
-    throw new Error("clipper setup: world has no renderer with a canvas");
-  }
-
-  const onDblClick = () => {
-    void clipperComp.create(world);
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.code !== "Delete" && event.code !== "Backspace") return;
-    if (event.shiftKey) {
-      clipperComp.deleteAll();
-    } else {
-      // No-op when nothing is hovered (the Clipper raycasts for a plane).
-      void clipperComp.delete(world);
-    }
-  };
-
-  let active = false;
-
-  return {
-    label: "Section",
-    icon: "mdi:scissors-cutting",
-    activate() {
-      if (active) return;
-      active = true;
-      clipperComp.enabled = true; // allow create + drag-to-move
-      clipperComp.visible = true;
-      canvas.addEventListener("dblclick", onDblClick);
-      window.addEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "crosshair";
-    },
-    deactivate() {
-      if (!active) return;
-      active = false;
-      // Stop creating / dragging, but keep the planes in the renderer's
-      // clippingPlanes so the section stays cut while navigating.
-      clipperComp.enabled = false;
-      canvas.removeEventListener("dblclick", onDblClick);
-      window.removeEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "";
-    },
-  };
-};
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+import type { ModeTool } from "./tool-mode";
+
+/**
+ * Section / clipping-planes tool. Wraps `OBC.Clipper` as a toolbar mode tool:
+ *
+ *  - double-click on the model → create a clip plane on the surface under the
+ *    pointer (raycast; the plane's normal is the hit face normal),
+ *  - drag the plane's arrow gizmo to move it along its normal (handled by the
+ *    Clipper's built-in TransformControls while the mode is active),
+ *  - Delete / Backspace → delete the plane under the cursor,
+ *  - Shift + Delete / Shift + Backspace → clear ALL section planes.
+ *
+ * Clipping is applied through `renderer.three.clippingPlanes` with
+ * `localClippingEnabled = true` (set by the SimpleRenderer), so the cut is
+ * honored during the deferred pipeline's single capture render — no
+ * deferred-lib change is needed. (Worth an explicit live check that the section
+ * actually cuts geometry in deferred mode.)
+ *
+ * Leaving the mode keeps the existing section planes cutting the model (so a
+ * section persists while navigating); it only stops creating/dragging new ones.
+ */
+export const clipper = (
+  components: OBC.Components,
+  world: OBC.World,
+): ModeTool => {
+  const clipperComp = components.get(OBC.Clipper);
+
+  const canvas = (world.renderer as OBF.PostproductionRenderer | null)?.three
+    .domElement;
+  if (!canvas) {
+    throw new Error("clipper setup: world has no renderer with a canvas");
+  }
+
+  const onDblClick = () => {
+    void clipperComp.create(world);
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.code !== "Delete" && event.code !== "Backspace") return;
+    if (event.shiftKey) {
+      clipperComp.deleteAll();
+    } else {
+      // No-op when nothing is hovered (the Clipper raycasts for a plane).
+      void clipperComp.delete(world);
+    }
+  };
+
+  let active = false;
+
+  return {
+    label: "Section",
+    icon: "mdi:scissors-cutting",
+    activate() {
+      if (active) return;
+      active = true;
+      clipperComp.enabled = true; // allow create + drag-to-move
+      clipperComp.visible = true;
+      canvas.addEventListener("dblclick", onDblClick);
+      window.addEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "crosshair";
+    },
+    deactivate() {
+      if (!active) return;
+      active = false;
+      // Stop creating / dragging, but keep the planes in the renderer's
+      // clippingPlanes so the section stays cut while navigating.
+      clipperComp.enabled = false;
+      canvas.removeEventListener("dblclick", onDblClick);
+      window.removeEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "";
+    },
+  };
+};

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

@@ -1,33 +1,23 @@
-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.
+export * from "./ui-manager";
+export * from "./cloud-runner";
+export * from "./right-sidebar";
+export * from "./card-header";
+export * from "./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 "./clipper-tool";
+export * from "./plans-panel";
+export * from "./navigation-gizmo";
+export * from "./exploded-view";
+export * from "./measurement-tool";
+export * from "./measurement-panel";
+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
+// main.ts's app-registered .3tz loader for <top-models-list>), never pulled onto
+// the app boot path.

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

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