@thatopen/services 0.3.0 → 0.3.2

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

@@ -88,7 +88,7 @@ type Measurer =
   | OBF.AngleMeasurement
   | OBF.VolumeMeasurement;
 
-export const measurementTool = (
+const measurementToolImpl = (
   components: OBC.Components,
 ): MeasurementTool => {
   const length = components.get(OBF.LengthMeasurement);
@@ -568,3 +568,21 @@ export const measurementTool = (
     },
   };
 };
+
+// Real OBC.Component wrapper → per-`components` singleton resolved by UUID. The
+// toolbar built-in and the side panels (measurement-settings, objects) share the
+// SAME MeasurementTool because `components` is a single cross-bundle instance.
+export class MeasurementToolComponent extends OBC.Component {
+  static readonly uuid = "9b2c7e10-3a4f-4c21-8b6d-1f0a2c3d4e52" as const;
+  enabled = true;
+  readonly tool: MeasurementTool;
+  constructor(components: OBC.Components) {
+    super(components);
+    components.add(MeasurementToolComponent.uuid, this);
+    this.tool = measurementToolImpl(components);
+  }
+}
+
+/** Per-Components singleton accessor for the measurement tool. */
+export const measurementTool = (components: OBC.Components): MeasurementTool =>
+  components.get(MeasurementToolComponent).tool;

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

@@ -1,133 +1,133 @@
-import * as THREE from "three";
-import * as OBC from "@thatopen/components";
-import * as OBF from "@thatopen/components-front";
-import type { ModeTool } from "./tool-mode";
-
-// Brand purple, matching the selection outline so measurements read as "ours".
-const MEASURE_COLOR = 0x6528d7;
-
-const canvasOf = (world: OBC.World): HTMLCanvasElement => {
-  const canvas = (world.renderer as OBF.PostproductionRenderer | null)?.three
-    .domElement;
-  if (!canvas) {
-    throw new Error("measurements setup: world has no renderer with a canvas");
-  }
-  return canvas;
-};
-
-/**
- * Length-measurement tool. Wraps `OBF.LengthMeasurement` as a toolbar mode tool:
- *
- *  - double-click places measurement points (snapping to vertices/edges); a
- *    dimension line + label is drawn between them,
- *  - Escape cancels the in-progress measurement (handled by the component),
- *  - Delete / Backspace → delete the measurement under the cursor,
- *  - Shift + Delete / Shift + Backspace → clear ALL measurements.
- *
- * Finished measurements persist when the mode is exited.
- */
-export const lengthMeasurement = (
-  components: OBC.Components,
-  world: OBC.World,
-): ModeTool => {
-  const measurer = components.get(OBF.LengthMeasurement);
-  measurer.world = world;
-  measurer.color = new THREE.Color(MEASURE_COLOR);
-  const canvas = canvasOf(world);
-
-  const onDblClick = () => measurer.create();
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.code !== "Delete" && event.code !== "Backspace") return;
-    if (event.shiftKey) {
-      measurer.list.clear();
-    } else {
-      void measurer.delete();
-    }
-  };
-
-  let active = false;
-
-  return {
-    label: "Measure length",
-    icon: "mdi:ruler",
-    activate() {
-      if (active) return;
-      active = true;
-      measurer.enabled = true;
-      canvas.addEventListener("dblclick", onDblClick);
-      window.addEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "crosshair";
-    },
-    deactivate() {
-      if (!active) return;
-      active = false;
-      measurer.cancelCreation(); // drop any half-finished measurement
-      measurer.enabled = false;
-      canvas.removeEventListener("dblclick", onDblClick);
-      window.removeEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "";
-    },
-  };
-};
-
-/**
- * Area-measurement tool. Wraps `OBF.AreaMeasurement` as a toolbar mode tool:
- *
- *  - double-click adds polygon points; Enter closes/finalizes the polygon and
- *    shows the filled area + value,
- *  - Escape cancels the in-progress polygon (handled by the component),
- *  - Delete / Backspace → delete the area under the cursor,
- *  - Shift + Delete / Shift + Backspace → clear ALL areas.
- *
- * NOTE: the click-to-add-point vs. double-click-to-create flow is worth a live
- * check; tuned here to mirror the length tool's double-click entry.
- */
-export const areaMeasurement = (
-  components: OBC.Components,
-  world: OBC.World,
-): ModeTool => {
-  const measurer = components.get(OBF.AreaMeasurement);
-  measurer.world = world;
-  measurer.color = new THREE.Color(MEASURE_COLOR);
-  const canvas = canvasOf(world);
-
-  const onDblClick = () => measurer.create();
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (event.code === "Enter" || event.code === "NumpadEnter") {
-      measurer.endCreation();
-      return;
-    }
-    if (event.code !== "Delete" && event.code !== "Backspace") return;
-    if (event.shiftKey) {
-      measurer.list.clear();
-    } else {
-      void measurer.delete();
-    }
-  };
-
-  let active = false;
-
-  return {
-    label: "Measure area",
-    icon: "mdi:vector-square",
-    activate() {
-      if (active) return;
-      active = true;
-      measurer.enabled = true;
-      canvas.addEventListener("dblclick", onDblClick);
-      window.addEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "crosshair";
-    },
-    deactivate() {
-      if (!active) return;
-      active = false;
-      measurer.cancelCreation();
-      measurer.enabled = false;
-      canvas.removeEventListener("dblclick", onDblClick);
-      window.removeEventListener("keydown", onKeyDown);
-      canvas.style.cursor = "";
-    },
-  };
-};
+import * as THREE from "three";
+import * as OBC from "@thatopen/components";
+import * as OBF from "@thatopen/components-front";
+import type { ModeTool } from "./tool-mode";
+
+// Brand purple, matching the selection outline so measurements read as "ours".
+const MEASURE_COLOR = 0x6528d7;
+
+const canvasOf = (world: OBC.World): HTMLCanvasElement => {
+  const canvas = (world.renderer as OBF.PostproductionRenderer | null)?.three
+    .domElement;
+  if (!canvas) {
+    throw new Error("measurements setup: world has no renderer with a canvas");
+  }
+  return canvas;
+};
+
+/**
+ * Length-measurement tool. Wraps `OBF.LengthMeasurement` as a toolbar mode tool:
+ *
+ *  - double-click places measurement points (snapping to vertices/edges); a
+ *    dimension line + label is drawn between them,
+ *  - Escape cancels the in-progress measurement (handled by the component),
+ *  - Delete / Backspace → delete the measurement under the cursor,
+ *  - Shift + Delete / Shift + Backspace → clear ALL measurements.
+ *
+ * Finished measurements persist when the mode is exited.
+ */
+export const lengthMeasurement = (
+  components: OBC.Components,
+  world: OBC.World,
+): ModeTool => {
+  const measurer = components.get(OBF.LengthMeasurement);
+  measurer.world = world;
+  measurer.color = new THREE.Color(MEASURE_COLOR);
+  const canvas = canvasOf(world);
+
+  const onDblClick = () => measurer.create();
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.code !== "Delete" && event.code !== "Backspace") return;
+    if (event.shiftKey) {
+      measurer.list.clear();
+    } else {
+      void measurer.delete();
+    }
+  };
+
+  let active = false;
+
+  return {
+    label: "Measure length",
+    icon: "mdi:ruler",
+    activate() {
+      if (active) return;
+      active = true;
+      measurer.enabled = true;
+      canvas.addEventListener("dblclick", onDblClick);
+      window.addEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "crosshair";
+    },
+    deactivate() {
+      if (!active) return;
+      active = false;
+      measurer.cancelCreation(); // drop any half-finished measurement
+      measurer.enabled = false;
+      canvas.removeEventListener("dblclick", onDblClick);
+      window.removeEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "";
+    },
+  };
+};
+
+/**
+ * Area-measurement tool. Wraps `OBF.AreaMeasurement` as a toolbar mode tool:
+ *
+ *  - double-click adds polygon points; Enter closes/finalizes the polygon and
+ *    shows the filled area + value,
+ *  - Escape cancels the in-progress polygon (handled by the component),
+ *  - Delete / Backspace → delete the area under the cursor,
+ *  - Shift + Delete / Shift + Backspace → clear ALL areas.
+ *
+ * NOTE: the click-to-add-point vs. double-click-to-create flow is worth a live
+ * check; tuned here to mirror the length tool's double-click entry.
+ */
+export const areaMeasurement = (
+  components: OBC.Components,
+  world: OBC.World,
+): ModeTool => {
+  const measurer = components.get(OBF.AreaMeasurement);
+  measurer.world = world;
+  measurer.color = new THREE.Color(MEASURE_COLOR);
+  const canvas = canvasOf(world);
+
+  const onDblClick = () => measurer.create();
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.code === "NumpadEnter") {
+      measurer.endCreation();
+      return;
+    }
+    if (event.code !== "Delete" && event.code !== "Backspace") return;
+    if (event.shiftKey) {
+      measurer.list.clear();
+    } else {
+      void measurer.delete();
+    }
+  };
+
+  let active = false;
+
+  return {
+    label: "Measure area",
+    icon: "mdi:vector-square",
+    activate() {
+      if (active) return;
+      active = true;
+      measurer.enabled = true;
+      canvas.addEventListener("dblclick", onDblClick);
+      window.addEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "crosshair";
+    },
+    deactivate() {
+      if (!active) return;
+      active = false;
+      measurer.cancelCreation();
+      measurer.enabled = false;
+      canvas.removeEventListener("dblclick", onDblClick);
+      window.removeEventListener("keydown", onKeyDown);
+      canvas.style.cursor = "";
+    },
+  };
+};

package/src/cli/templates/app/src/setups/reality-capture/lib/hidden-tiles-plugin.ts

@@ -1,88 +1,88 @@
-// 3DTilesRendererJS plugin: serve a STANDARD loose 3D Tiles dataset whose tiles
-// are stored as platform HIDDEN files, streamed one-file-per-tile.
-//
-// Seam: the renderer's `fetchData(url, options)` hook (intercepts BOTH the root
-// tileset and every tile content fetch). Point the TilesRenderer at
-// `<baseUrl>/tileset.json`; relative content URIs then resolve to
-// `<baseUrl>/<relUri>` (e.g. "mem://t/tiles/n12_d3.spz"), which we strip back to
-// the dataset-relative path (`relUri`) and look up in the `hiddenFiles` map to
-// find the platform hidden-file id to download.
-//
-// SHARED CONTRACT (matches the converters): the main visible file is a standard
-// `tileset.json`; each tile `content.uri` is a relative path under "tiles/".
-// tileset.json carries a top-level `hiddenFiles: { "<content.uri>": "<id>" }`
-// map. We fetch a tile blob with `client.downloadHiddenFile(id)` -> Response.
-//
-// Per-tile streaming = one `downloadHiddenFile` per visible tile; the controller's
-// Q1 LRU/count-budget governor bounds how many are resident/loading at once.
-
-// Structural type for the platform client: download a normal file by id (the
-// tileset main file) and a hidden file by id (each tile). PlatformClient /
-// EngineServicesClient satisfy this.
-export interface HiddenTilesClient {
-  downloadFile(fileId: string, params?: any): Promise<Response>;
-  downloadHiddenFile(hiddenId: string): Promise<Response>;
-}
-
-export interface HiddenTilesOptions {
-  baseUrl: string; // synthetic base the TilesRenderer is pointed at, e.g. "mem://t"
-  tilesetBytes: Uint8Array; // the already-downloaded tileset.json bytes
-  hiddenFiles: Record<string, string>; // content.uri -> hidden file id
-  client: HiddenTilesClient;
-}
-
-export class HiddenTilesPlugin {
-  name = "HIDDEN_TILES_PLUGIN";
-  private baseUrl: string;
-  private tilesetBytes: Uint8Array;
-  private hiddenFiles: Record<string, string>;
-  private client: HiddenTilesClient;
-
-  constructor({ baseUrl, tilesetBytes, hiddenFiles, client }: HiddenTilesOptions) {
-    this.baseUrl = baseUrl.replace(/\/$/, "");
-    this.tilesetBytes = tilesetBytes;
-    this.hiddenFiles = hiddenFiles;
-    this.client = client;
-  }
-
-  // dataset-relative path for URLs under our synthetic base, else null.
-  private rel(url: string): string | null {
-    const prefix = this.baseUrl + "/";
-    return url.startsWith(prefix) ? url.slice(prefix.length) : null;
-  }
-
-  // The renderer fetch hook. Return a Response, or null to let the default fetch
-  // run (URLs that aren't under our base).
-  async fetchData(url: string, _options: any): Promise<Response | null> {
-    const rel = this.rel(url);
-    if (rel === null) return null;
-
-    // Root tileset request: serve the bytes we already downloaded.
-    if (rel === "tileset.json") {
-      // copy out into a standalone ArrayBuffer for the Response
-      const b = this.tilesetBytes;
-      const ab = (b.byteOffset === 0 && b.byteLength === b.buffer.byteLength
-        ? b.buffer
-        : b.slice().buffer) as ArrayBuffer;
-      return new Response(ab, {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      });
-    }
-
-    // Content (tile) request: strip query/fragment, look up the hidden id.
-    const relUri = decodeURIComponent(rel.split("?")[0].split("#")[0]);
-    const hiddenId = this.hiddenFiles[relUri];
-    if (!hiddenId) {
-      // not a known tile -> 404 so the renderer treats it as a failed fetch.
-      return new Response(null, { status: 404, statusText: "Not Found" });
-    }
-
-    const res = await this.client.downloadHiddenFile(hiddenId);
-    const buf = await res.arrayBuffer();
-    return new Response(buf, {
-      status: 200,
-      headers: { "Content-Type": "application/octet-stream" },
-    });
-  }
-}
+// 3DTilesRendererJS plugin: serve a STANDARD loose 3D Tiles dataset whose tiles
+// are stored as platform HIDDEN files, streamed one-file-per-tile.
+//
+// Seam: the renderer's `fetchData(url, options)` hook (intercepts BOTH the root
+// tileset and every tile content fetch). Point the TilesRenderer at
+// `<baseUrl>/tileset.json`; relative content URIs then resolve to
+// `<baseUrl>/<relUri>` (e.g. "mem://t/tiles/n12_d3.spz"), which we strip back to
+// the dataset-relative path (`relUri`) and look up in the `hiddenFiles` map to
+// find the platform hidden-file id to download.
+//
+// SHARED CONTRACT (matches the converters): the main visible file is a standard
+// `tileset.json`; each tile `content.uri` is a relative path under "tiles/".
+// tileset.json carries a top-level `hiddenFiles: { "<content.uri>": "<id>" }`
+// map. We fetch a tile blob with `client.downloadHiddenFile(id)` -> Response.
+//
+// Per-tile streaming = one `downloadHiddenFile` per visible tile; the controller's
+// Q1 LRU/count-budget governor bounds how many are resident/loading at once.
+
+// Structural type for the platform client: download a normal file by id (the
+// tileset main file) and a hidden file by id (each tile). PlatformClient /
+// EngineServicesClient satisfy this.
+export interface HiddenTilesClient {
+  downloadFile(fileId: string, params?: any): Promise<Response>;
+  downloadHiddenFile(hiddenId: string): Promise<Response>;
+}
+
+export interface HiddenTilesOptions {
+  baseUrl: string; // synthetic base the TilesRenderer is pointed at, e.g. "mem://t"
+  tilesetBytes: Uint8Array; // the already-downloaded tileset.json bytes
+  hiddenFiles: Record<string, string>; // content.uri -> hidden file id
+  client: HiddenTilesClient;
+}
+
+export class HiddenTilesPlugin {
+  name = "HIDDEN_TILES_PLUGIN";
+  private baseUrl: string;
+  private tilesetBytes: Uint8Array;
+  private hiddenFiles: Record<string, string>;
+  private client: HiddenTilesClient;
+
+  constructor({ baseUrl, tilesetBytes, hiddenFiles, client }: HiddenTilesOptions) {
+    this.baseUrl = baseUrl.replace(/\/$/, "");
+    this.tilesetBytes = tilesetBytes;
+    this.hiddenFiles = hiddenFiles;
+    this.client = client;
+  }
+
+  // dataset-relative path for URLs under our synthetic base, else null.
+  private rel(url: string): string | null {
+    const prefix = this.baseUrl + "/";
+    return url.startsWith(prefix) ? url.slice(prefix.length) : null;
+  }
+
+  // The renderer fetch hook. Return a Response, or null to let the default fetch
+  // run (URLs that aren't under our base).
+  async fetchData(url: string, _options: any): Promise<Response | null> {
+    const rel = this.rel(url);
+    if (rel === null) return null;
+
+    // Root tileset request: serve the bytes we already downloaded.
+    if (rel === "tileset.json") {
+      // copy out into a standalone ArrayBuffer for the Response
+      const b = this.tilesetBytes;
+      const ab = (b.byteOffset === 0 && b.byteLength === b.buffer.byteLength
+        ? b.buffer
+        : b.slice().buffer) as ArrayBuffer;
+      return new Response(ab, {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    // Content (tile) request: strip query/fragment, look up the hidden id.
+    const relUri = decodeURIComponent(rel.split("?")[0].split("#")[0]);
+    const hiddenId = this.hiddenFiles[relUri];
+    if (!hiddenId) {
+      // not a known tile -> 404 so the renderer treats it as a failed fetch.
+      return new Response(null, { status: 404, statusText: "Not Found" });
+    }
+
+    const res = await this.client.downloadHiddenFile(hiddenId);
+    const buf = await res.arrayBuffer();
+    return new Response(buf, {
+      status: 200,
+      headers: { "Content-Type": "application/octet-stream" },
+    });
+  }
+}