@smarterplan/ngx-smarterplan-core 1.4.15 → 1.4.16

package/lib/services/viewer.service.d.ts

@@ -1,5 +1,6 @@
 import { Subject } from 'rxjs';
 import { MatterportService } from './matterport.service';
+import { ThreeJsService } from './threejs.service';
 import { BaseTagService } from './tag.service';
 import { DbObjectType, POI, PoiType, Comment, Equipment, Ticket, Feature, SpModule } from '../types.service';
 import { PoiService } from './models/poi.service';
@@ -8,6 +9,7 @@ export declare class ViewerService {
     private readonly sdkKey;
     private poiService;
     private matterportService;
+    private threeJsService;
     private viewerMode;
     currentModel3D: string;
     private tourUrl;
@@ -50,7 +52,7 @@ export declare class ViewerService {
         };
     };
     private isObjectLoaded;
-    constructor(sdkKey: string, poiService: PoiService, matterportService: MatterportService);
+    constructor(sdkKey: string, poiService: PoiService, matterportService: MatterportService, threeJsService: ThreeJsService);
     checkMode(indexMode: string): boolean;
     setMode(indexMode: string): void;
     setTourUrl(options: {
@@ -82,7 +84,55 @@ export declare class ViewerService {
      */
     addObjectTagsToViewer(objects: DbObjectType[]): Promise<void>;
     actionAddObjectFromPOI(object: DbObjectType, poi: POI): Promise<any>;
+    /**
+     * Draws a POI as a tag in the Three.js scene.
+     *
+     * Both viewers are fed by the same subscriptions on the same POI records, so a tag created in
+     * either one shows up in the other without any syncing of its own - this is just the Three.js end
+     * of the pipeline that already drives Matterport.
+     */
+    private addThreeJsTagFromPOI;
+    /** Moves the Three.js camera to frame a tag, mirroring Matterport's goToTag. */
+    goToThreeJsTag(elementId: string): void;
+    /** Shows only tags of the given POI types; null clears the filter. */
+    setVisibleThreeJsTagTypes(types: PoiType[] | null): void;
+    /**
+     * Alignment walkthrough: pick a tag, then click where it really sits, three times over.
+     *
+     * Uses tags that already exist, so nothing is created and nothing is written until the caller
+     * saves the result. See threeJsAlignmentProgress$ for what the UI should be asking for.
+     */
+    startThreeJsTagAlignment(): void;
+    cancelThreeJsTagAlignment(): void;
+    get threeJsAlignmentProgress$(): Subject<{
+        pairs: number;
+        awaiting: "tag" | "point";
+        tagId?: string;
+    }>;
+    /**
+     * Solves the alignment and applies it to the scene, returning it as the JSON to store in the
+     * capture's metadata. Null means the three tags were collinear and nothing was applied.
+     */
+    solveThreeJsTagAlignment(existingMetadata?: string): {
+        alignment: any;
+        metadata: string;
+    } | null;
+    /** Shows or hides a single Three.js tag. */
+    setThreeJsTagVisibility(elementId: string, visible: boolean): void;
     action_delete_element(element: DbObjectType): Promise<void>;
+    /** Emits when a Three.js model load actually stopped short, rather than merely being asked to. */
+    get threeJsModelLoadCancelled$(): Subject<void>;
+    /** Stops the Three.js model download in progress. */
+    cancelThreeJsModelLoad(): void;
+    /** Emits the element id of a tag clicked in the Three.js scene. */
+    get threeJsTagClicked$(): Subject<import("./threejs.service").ThreeJsTagClick>;
+    /**
+     * Applies the visit's stored tag alignment, mapping captured tag coordinates onto this model.
+     *
+     * Safe to call before the model or any tag exists: it is a transform on the group both end up
+     * under, so it applies to whatever arrives later.
+     */
+    setThreeJsTagAlignmentFromMetadata(metadata: string): void;
     /**
      * Enable tag placement menu to add a new element depending on its type (TICKET, DATA, EQUIPMENT etc)
      */
@@ -104,6 +154,17 @@ export declare class ViewerService {
     action_toolbox_mesure(): void;
     action_toolbox_cancel_mesure(): void;
     action_update_poi(poi: POI, isValid: boolean, element: DbObjectType): Promise<POI>;
+    /**
+     * Writes the spot picked in the Three.js scene into the POI, mirroring the Matterport branch.
+     *
+     * The coordinate goes in the same field and the same space Matterport writes, which is what makes
+     * a tag created here show up in the right place there - and the other way round.
+     */
+    private commitThreeJsTagPlacement;
+    /** Emits when a tag is dropped on the model in the Three.js scene. */
+    get threeJsTagPlaced$(): Subject<import("./threejs.service").ThreeJsTagPlacement>;
+    /** Leaves Three.js tag placement mode without placing anything. */
+    cancelThreeJsTagPlacement(): void;
     editOnlyTagStyleForPoi(poi: POI, object: DbObjectType): void;
     addIconAndSetForPoi(poi: POI, iconPath: string): void;
     changeToRegistredIconForPoi(poi: POI, iconName: string): void;
@@ -114,6 +175,58 @@ export declare class ViewerService {
      * @param element
      */
     action_move_poi_visually(poi: POI, element: Ticket | Feature | Equipment | Comment): Promise<void>;
+    initThreeJs(canvas: HTMLCanvasElement): void;
+    /**
+     * Loads a 3D model into the Three.js scene (GLTF).
+     * Only works when the viewer is in 'threejs' mode.
+     */
+    loadGLTFModel(url: string, cameraPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    }, rotation?: {
+        x: number;
+        y: number;
+        z: number;
+    }): void;
+    /**
+     * Loads a GLB stored in S3, given its key (e.g. `visits/<id>/model.glb`).
+     *
+     * Resolves the key to a signed URL first, then loads it like any other. The signed URL only
+     * covers authentication - the bucket still needs a CORS rule allowing GET from the app's origin,
+     * or the browser blocks the download before it starts.
+     *
+     * `placementMetadata` is the capture's stored placement; when absent or unusable the viewer falls
+     * back to framing the model automatically.
+     */
+    loadGLTFModelFromS3(key: string, placementMetadata?: string): Promise<void>;
+    /**
+     * Loads a 3D model into the Three.js scene (OBJ).
+     */
+    loadObjModel(mtlUrl: string, objUrl: string, cameraPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    }, rotation?: {
+        x: number;
+        y: number;
+        z: number;
+    }): void;
+    get threeJsObjectHovered$(): Subject<{
+        id: string;
+        event: MouseEvent;
+    }>;
+    get threeJsObjectClicked$(): Subject<string>;
+    /** Emits true while a heavy .obj file is being parsed (in a worker, when available), false once done. */
+    get threeJsModelLoading$(): Subject<boolean>;
+    /** Download progress for GLB models as a 0-1 fraction, or null when the size isn't known upfront. */
+    get threeJsModelLoadProgress$(): Subject<number>;
+    /**
+     * Registers the Web Worker used to parse heavy .obj files off the main thread.
+     * Must be created by the app (see obj-parser.worker.ts), since this library can't bundle worker files.
+     */
+    setObjParserWorker(worker: Worker): void;
+    addThreeJsObjects(objs: any[]): void;
     initMatterportSdk(spaceID: string, model3D: string, tagService: BaseTagService, module?: SpModule): Promise<void>;
     removeForbiddenSweeps(forbiddenSweeps: string[]): void;
     setObject3DLoadedInPosition(objectLoaded: boolean): void;

package/lib/types.service.d.ts

@@ -127,7 +127,8 @@ export declare enum EmailStatus {
 export declare enum CaptureViewer {
     CUPIX = "CUPIX",
     MATTERPORT = "MATTERPORT",
-    SMARTERPLAN_V1 = "SMARTERPLAN_V1"
+    SMARTERPLAN_V1 = "SMARTERPLAN_V1",
+    THREEJS = "THREEJS"
 }
 export declare enum InventoryStatus {
     SUCCESS = "SUCCESS",
@@ -595,6 +596,11 @@ export type Visit = {
     node: Node;
     name?: string | null;
     nmbImagesImported: number;
+    /**
+     * Free-form metadata from the capture. Named after its source to keep it distinct from `name`,
+     * which comes from node.metadata. Three.js visits store their initial placement here.
+     */
+    captureMetadata?: string | null;
 };
 export type Hashtag = {
     name?: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smarterplan/ngx-smarterplan-core",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "dependencies": {
     "tslib": "^2.5.0"
   },

package/public-api.d.ts

@@ -6,6 +6,7 @@ export * from './lib/services/tag.service';
 export * from './lib/services/baseVisibility.service';
 export * from './lib/services/content.service';
 export * from './lib/services/viewer.service';
+export * from './lib/services/threejs.service';
 export * from './lib/services/navigator.service';
 export * from './lib/services/zoneChange.service';
 export * from './lib/config';
@@ -18,6 +19,7 @@ export * from './lib/services/filter.service';
 export * from './lib/services/search.service';
 export * from './lib/services/zone-drawer.service';
 export * from './lib/services/matterport-import.service';
+export * from './lib/services/threejs-import.service';
 export * from './lib/services/matterport-tag-copy.service';
 export * from './lib/mattertagData';
 export * from './lib/services/utils/matterport-transform.util';

package/src/assets/vs-app.json

@@ -1,67 +1,67 @@
-{
-  "version": "1.0",
-  "payload": {
-    "objects": [
-      {
-        "name": "slot_camera",
-        "position": {
-          "x": 2.8,
-          "y": 2.4,
-          "z": 10.71
-        },
-        "rotation": {
-          "x": 0,
-          "y": -22,
-          "z": 0
-        },
-        "scale": {
-          "x": 1,
-          "y": 1,
-          "z": 1
-        },
-        "components": [
-          {
-            "type": "mp.gltfLoader",
-            "inputs": {
-              "url": "https://static.matterport.com/showcase-sdk/examples/assets-1.0-2-g6b74572/assets/models/camera-1/scene.gltf",
-              "localScale": { "x": 0.0008, "y": 0.0008, "z": 0.0008 },
-              "localRotation": { "x": 0, "y": 90, "z": 0 }
-            },
-            "events": {
-              "INTERACTION.CLICK": false,
-              "INTERACTION.HOVER": false,
-              "INTERACTION.DRAG": false
-            }
-          },
-          {
-            "type": "mp.securityCamera",
-            "inputs": {
-              "nearPlane": 0.1,
-              "farPlane": 10,
-              "horizontalFOV": 52,
-              "aspect": 1.7777777777777777,
-              "localPosition": {
-                "x": 0,
-                "y": 0.18,
-                "z": -0.3
-              },
-              "localRotation": {
-                "x": -15,
-                "y": 0,
-                "z": 0
-              },
-              "color": 65280,
-              "panPeriod": 5,
-              "panAngle": -45
-            },
-            "events": {
-              "INTERACTION.CLICK": false,
-              "INTERACTION.HOVER": false,
-              "INTERACTION.DRAG": false
-            }
-          }
-        ]
-      }
-    ]
-  }
-}
+{
+  "version": "1.0",
+  "payload": {
+    "objects": [
+      {
+        "name": "slot_camera",
+        "position": {
+          "x": 2.8,
+          "y": 2.4,
+          "z": 10.71
+        },
+        "rotation": {
+          "x": 0,
+          "y": -22,
+          "z": 0
+        },
+        "scale": {
+          "x": 1,
+          "y": 1,
+          "z": 1
+        },
+        "components": [
+          {
+            "type": "mp.gltfLoader",
+            "inputs": {
+              "url": "https://static.matterport.com/showcase-sdk/examples/assets-1.0-2-g6b74572/assets/models/camera-1/scene.gltf",
+              "localScale": { "x": 0.0008, "y": 0.0008, "z": 0.0008 },
+              "localRotation": { "x": 0, "y": 90, "z": 0 }
+            },
+            "events": {
+              "INTERACTION.CLICK": false,
+              "INTERACTION.HOVER": false,
+              "INTERACTION.DRAG": false
+            }
+          },
+          {
+            "type": "mp.securityCamera",
+            "inputs": {
+              "nearPlane": 0.1,
+              "farPlane": 10,
+              "horizontalFOV": 52,
+              "aspect": 1.7777777777777777,
+              "localPosition": {
+                "x": 0,
+                "y": 0.18,
+                "z": -0.3
+              },
+              "localRotation": {
+                "x": -15,
+                "y": 0,
+                "z": 0
+              },
+              "color": 65280,
+              "panPeriod": 5,
+              "panAngle": -45
+            },
+            "events": {
+              "INTERACTION.CLICK": false,
+              "INTERACTION.HOVER": false,
+              "INTERACTION.DRAG": false
+            }
+          }
+        ]
+      }
+    ]
+  }
+}