@smarterplan/ngx-smarterplan-core 1.4.15 → 1.4.17

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

@@ -1,13 +1,17 @@
 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';
+import { Config } from '../config';
 import * as i0 from "@angular/core";
 export declare class ViewerService {
     private readonly sdkKey;
+    private readonly config;
     private poiService;
     private matterportService;
+    private threeJsService;
     private viewerMode;
     currentModel3D: string;
     private tourUrl;
@@ -23,6 +27,14 @@ export declare class ViewerService {
     dataIsLoaded: Subject<boolean>;
     isLoaded: boolean;
     showingViewer: boolean;
+    /**
+     * The space being viewed, whichever viewer is showing it.
+     *
+     * MatterportService carries its own copy, set while its SDK connects - which never happens in
+     * Three.js mode. Anything that reads only that one silently does nothing for a 3D model, and the
+     * lists that feed tags are exactly that.
+     */
+    currentSpaceID: string | null;
     sweepToMove: string | null;
     rotationToMove: {
         x: number;
@@ -50,7 +62,7 @@ export declare class ViewerService {
         };
     };
     private isObjectLoaded;
-    constructor(sdkKey: string, poiService: PoiService, matterportService: MatterportService);
+    constructor(sdkKey: string, config: Config, poiService: PoiService, matterportService: MatterportService, threeJsService: ThreeJsService);
     checkMode(indexMode: string): boolean;
     setMode(indexMode: string): void;
     setTourUrl(options: {
@@ -82,7 +94,70 @@ 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;
+    /**
+     * The image to draw a tag with, mirroring what Matterport shows for the same POI.
+     *
+     * Matterport registers one texture per type (`icon-ticket`, `icon-equipment`...) from the same
+     * config entries used here, and overrides it with the POI's own icon when it has one. Reading the
+     * same two sources is what keeps a tag looking like itself across the two viewers.
+     */
+    private resolveTagIconUrl;
+    /** The configured icon for a POI type, or null when that type has none. */
+    private defaultTagIconUrl;
+    /** 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 a tag's label while the pointer is over it in the Three.js scene. */
+    get threeJsTagHovered$(): Subject<{
+        label: string;
+        event: MouseEvent;
+    }>;
+    /** 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 +179,30 @@ 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;
+    /**
+     * Creates the POI for an element just placed in the Three.js scene.
+     *
+     * The Matterport path reaches the same result through its tag dictionary - the tag exists first
+     * and carries the coordinates. Three.js has no such object, so the placement captured at click
+     * time is the only record of where the user pointed, and it has to become a POI here or it is
+     * lost when the form closes.
+     *
+     * Returns null when there is no pending placement, which is the normal case in Matterport mode.
+     */
+    createPoiForThreeJsPlacement(element: DbObjectType, poiType: PoiType): Promise<POI | null>;
+    /** Emits when a tag is dropped on the model in the Three.js scene. */
+    get threeJsTagPlaced$(): Subject<import("./threejs.service").ThreeJsTagPlacement>;
+    /** Emits when the calibration walkthrough is abandoned, including via Escape. */
+    get threeJsAlignmentCancelled$(): Subject<void>;
+    /** 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 +213,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/services/zoneChange.service.d.ts

@@ -8,6 +8,15 @@ import * as i0 from "@angular/core";
 export declare class ZoneChangeService {
     zoneChange: Subject<Zone | null>;
     zonesForUserChange: Subject<Zone[] | null>;
+    /**
+     * Emits the space opened by a viewer that has no zone navigation (Three.js), or null when it
+     * closes.
+     *
+     * Zones are defined by the sweeps they contain, so they only mean something in a Matterport tour.
+     * A 3D model has no sweeps: it shows the whole space at once, and the services that load data
+     * listen here instead of to `zoneChange` to know which space they are looking at.
+     */
+    spaceWithoutZones: Subject<string | null>;
     private currentZone;
     private currentZones;
     floorHasChanged: EventEmitter<Zone>;

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",
@@ -569,6 +570,14 @@ export type Space = {
     status?: SpaceStatus | null;
     guestLink?: string | null;
     signedImageUrl?: string | null;
+    /**
+     * The capture a visitor opens by default, of any viewer type.
+     *
+     * Kept on the space rather than as a flag on each capture: there is one field, so there can only
+     * be one answer, whichever screen set it. A flag per capture would let two of them claim the
+     * default and put the choice back where it started - undefined.
+     */
+    defaultCaptureID?: string | null;
     zones?: {
         __typename?: 'ModelZoneConnection';
         items?: Array<Zone | null> | null;
@@ -595,6 +604,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.17",
   "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
+            }
+          }
+        ]
+      }
+    ]
+  }
+}