@smarterplan/ngx-smarterplan-locations 0.2.7 → 0.2.8

package/fesm2020/smarterplan-ngx-smarterplan-locations.mjs

@@ -775,7 +775,7 @@ class CalibrationComponent {
         this.setupMenuItems();
         this.chosenPlan = this.planService.getChosenPlan();
         if (this.chosenPlan) {
-            this.chosenPlanIsPdf = this.chosenPlan.annexe.includes("pdf");
+            this.chosenPlanIsPdf = this.chosenPlan.annexe.includes('pdf');
             this.launchViewer();
             setTimeout(() => {
                 this.configureCanvas().then(() => {
@@ -791,11 +791,7 @@ class CalibrationComponent {
             }, 500);
         }
         else {
-            this.router.navigate([
-                "/dashboard/localisation",
-                this.spaceID,
-                "plans",
-            ]);
+            this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
         }
     }
     /** **********************************************************************************************
@@ -803,17 +799,17 @@ class CalibrationComponent {
      *********************************************************************************************** */
     setupMenuItems() {
         this.menuItems = [
-            { label: "Locations", url: "/localisation" },
+            { label: 'Locations', url: '/localisation' },
             {
                 label: this.currentSpace.name,
                 url: `/localisation/${this.spaceID}`,
             },
             {
-                label: "Plans",
+                label: 'Plans',
                 url: `/localisation/${this.currentSpace.id}/plans`,
             },
             {
-                label: "Calibration",
+                label: 'Calibration',
                 url: `/localisation/${this.currentSpace.id}/plan-calibration?spaceID=${this.currentSpace.id}`,
             },
         ];
@@ -825,7 +821,7 @@ class CalibrationComponent {
     async configureCanvas() {
         /** Get canvas */
         if (!this.canvas) {
-            const canvas = document.querySelector("#canvas");
+            const canvas = document.querySelector('#canvas');
             this.canvas = canvas;
         }
         if (!this.chosenPlanIsPdf) {
@@ -857,7 +853,7 @@ class CalibrationComponent {
     drawImage(url, x = 0, y = 0, icone = false) {
         const image = new Image();
         const size = this.canvasSize;
-        const context = this.canvas.getContext("2d");
+        const context = this.canvas.getContext('2d');
         /** Flip the context, for symmetry */
         // if (this.reflectV) {
         //     context.translate(size.w, 0);
@@ -869,7 +865,7 @@ class CalibrationComponent {
         // }
         let imageWidth = size.w;
         let imageHeight = size.h;
-        image.addEventListener("load", () => {
+        image.addEventListener('load', () => {
             if (icone) {
                 imageWidth = image.width;
                 imageHeight = image.height;
@@ -897,7 +893,8 @@ class CalibrationComponent {
         const pdfjs = await import('pdfjs-dist/build/pdf');
         const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
         pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-        const pdf = await getDocument(this.chosenPlan.filepath).promise;
+        const pdf = await getDocument(this.chosenPlan.filepath)
+            .promise;
         const page = await pdf.getPage(1);
         const viewPortParameters = { scale: 1 };
         const viewport = page.getViewport(viewPortParameters);
@@ -907,13 +904,13 @@ class CalibrationComponent {
         console.log(size);
         this.canvasSize = size;
         this.canvasZoom = size.w / viewport.width;
-        const context = this.canvas.getContext("2d");
+        const context = this.canvas.getContext('2d');
         const renderContext = {
             canvasContext: context,
             viewport,
         };
         const renderTask = page.render(renderContext).promise;
-        renderTask.then(() => console.log("Page rendered"));
+        renderTask.then(() => console.log('Page rendered'));
         // const res = canvas.toDataURL();
         // if (pdf != null) pdf.destroy();
         // return res;
@@ -939,25 +936,28 @@ class CalibrationComponent {
         // console.log(this.floors);
         setTimeout(async () => {
             /** Move Floor mode */
-            await sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN);
-            /** Display the correct floor for the plan */
-            try {
-                await this.matterportImportService.moveToFloor(this.chosenPlan.name);
-            }
-            catch {
-                console.log("couldnot move to floor");
-            }
+            await sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN).then(async (nextMode) => {
+                // Move successful
+                console.log(`Arrived at new view mode ${nextMode}`);
+                /** Display the correct floor for the plan */
+                try {
+                    await this.matterportImportService.moveToFloor(this.chosenPlan.name);
+                    /** When the user try to change the view mode we set it back to floorpan */
+                    sdk.on(sdk.Mode.Event.CHANGE_END, (oldMode, newMode) => {
+                        if (newMode !== sdk.Mode.Mode.FLOORPLAN) {
+                            sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN, {
+                                transition: 'transition.instant',
+                            });
+                        }
+                    });
+                }
+                catch {
+                    console.log('couldnot move to floor');
+                }
+            });
             /** We can display the matterport view now */
             this.loading = false;
-        }, 300);
-        /** When the user try to change the view mode we set it back to floorpan */
-        sdk.on(sdk.Mode.Event.CHANGE_END, (oldMode, newMode) => {
-            if (newMode !== sdk.Mode.Mode.FLOORPLAN) {
-                sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN, {
-                    transition: "transition.instant",
-                });
-            }
-        });
+        }, 1000);
         /** Update current camera pose and rotation */
         sdk.Camera.pose.subscribe((event) => {
             /** We update only if the user is not changing the rotation with the <input> range, to not override the <input> value */
@@ -1022,15 +1022,15 @@ class CalibrationComponent {
         if (deltaXPlan === 0) {
             // console.log("we moved along Y axis on Plan");
             const deltaYPlan = this.secondMarkPlan.y - this.firstMarkPlan.y;
-            this.calibrage.nameYAxis = "z";
-            this.calibrage.nameXAxis = "x";
+            this.calibrage.nameYAxis = 'z';
+            this.calibrage.nameXAxis = 'x';
             this.calibrage.offsetY = this.secondMarkPlan.y;
             this.calibrage.scaleY = deltaYPlan / deltaZVisit;
         }
         else {
             // console.log(" we moved along X axis on Plan");
-            this.calibrage.nameYAxis = "x";
-            this.calibrage.nameXAxis = "z";
+            this.calibrage.nameYAxis = 'x';
+            this.calibrage.nameXAxis = 'z';
             this.calibrage.offsetX = this.secondMarkPlan.x;
             this.calibrage.scaleX = deltaXPlan / deltaZVisit;
         }
@@ -1072,21 +1072,13 @@ class CalibrationComponent {
             if (navigations.length > 0) {
                 for (const navigation of navigations) {
                     const testPosition = JSON.parse(navigation.position);
-                    const positionX = this.calibrage.nameXAxis === "x"
-                        ? testPosition.x
-                        : testPosition.z;
-                    const positionY = this.calibrage.nameYAxis === "x"
-                        ? testPosition.x
-                        : testPosition.z;
-                    const testX = positionX * this.calibrage.scaleX +
-                        this.calibrage.offsetX;
-                    const testY = positionY * this.calibrage.scaleY +
-                        this.calibrage.offsetY;
+                    const positionX = this.calibrage.nameXAxis === 'x' ? testPosition.x : testPosition.z;
+                    const positionY = this.calibrage.nameYAxis === 'x' ? testPosition.x : testPosition.z;
+                    const testX = positionX * this.calibrage.scaleX + this.calibrage.offsetX;
+                    const testY = positionY * this.calibrage.scaleY + this.calibrage.offsetY;
                     // console.log("test position GREEN", testX, testY);
-                    const transformedX = (testX - this.calibrage.offsetXPlan) /
-                        this.calibrage.scalePlan; // we are undoing the pan and zoom
-                    const transformedY = (testY - this.calibrage.offsetYPlan) /
-                        this.calibrage.scalePlan;
+                    const transformedX = (testX - this.calibrage.offsetXPlan) / this.calibrage.scalePlan; // we are undoing the pan and zoom
+                    const transformedY = (testY - this.calibrage.offsetYPlan) / this.calibrage.scalePlan;
                     this.positions.push({
                         navID: navigation.id,
                         planID: this.chosenPlan.id,
@@ -1095,7 +1087,7 @@ class CalibrationComponent {
                     });
                     const iconSize = 30 * this.calibrage.scalePlan;
                     const shift = iconSize / 2;
-                    this.drawImage("https://api.iconify.design/mdi:adjust.svg?color=green&height=30&width=30", transformedX - shift, transformedY - shift, true);
+                    this.drawImage('https://api.iconify.design/mdi:adjust.svg?color=green&height=30&width=30', transformedX - shift, transformedY - shift, true);
                 }
             }
         }
@@ -1142,12 +1134,8 @@ class CalibrationComponent {
             }));
         }
         this.matterportImportService.removeFrame();
-        this.router.navigate([
-            "/dashboard/localisation",
-            this.spaceID,
-            "plans",
-        ]);
-        alert(this.translate.instant("calibration.success"));
+        this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
+        alert(this.translate.instant('calibration.success'));
     }
     /** Reset the canvas */
     onReset() {
@@ -1159,12 +1147,8 @@ class CalibrationComponent {
     /** Cancel, leave */
     onCancel() {
         this.matterportImportService.removeFrame();
-        this.router.navigate([
-            "/dashboard/localisation",
-            this.spaceID,
-            "plans",
-        ]);
-        alert(this.translate.instant("calibration.canceled"));
+        this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
+        alert(this.translate.instant('calibration.canceled'));
     }
     async onFloorClick(floor) {
         this.currentFloor = floor;
@@ -1172,9 +1156,9 @@ class CalibrationComponent {
     }
     onActivateZoomChange() {
         this.zoomCanBeChanged = !this.zoomCanBeChanged;
-        const iframe = document.querySelector("#viewer-frame");
+        const iframe = document.querySelector('#viewer-frame');
         if (iframe) {
-            iframe.style.zIndex = this.zoomCanBeChanged ? "1" : "0";
+            iframe.style.zIndex = this.zoomCanBeChanged ? '1' : '0';
         }
     }
 }
@@ -1185,7 +1169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             args: [{ selector: 'lib-calibration', template: "<div class=\"row mt-3\">\r\n    <div class=\"col\">\r\n        <div class=\"m-3\">\r\n            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div id=\"rowCanvas\">\r\n    <div #canvasDiv id=\"canvasDiv\">\r\n\r\n        <div id=\"viewer-frame\" [style.pointer-events]=\"zoomCanBeChanged?'auto':'none'\">\r\n            <!-- <div class=\"blur\"></div> -->\r\n        </div>\r\n        <canvas id=\"canvas\" [ngStyle]=\"{'opacity': (preview||loading) ? '1' : 'calc(' + opacity + '/ 100)'}\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"!(preview || loading)\">\r\n        <h1>{{'Calibration tool' | translate}}</h1>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 legend\">\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (-(opacity-100)+10) + '/ 100)'}\">\r\n                    {{'Less' | translate}}</div>\r\n                <div class=\"legend-title\">{{'Plan Opacity' | translate }}</div>\r\n                <div class=\"legend-bar-indicator\" [ngStyle]=\"{'opacity': 'calc(' + (opacity+10) + '/ 100)'}\">{{'More' |\r\n                    translate}}</div>\r\n            </div>\r\n            <div class=\"row ms-0 me-0 \">\r\n                <input [disabled]=\"false\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"opacity\" type=\"range\"\r\n                    class=\"form-range\" min=\"0\" max=\"100\" value=\"50\" id=\"opacity\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"label-legend\">{{'Change Visit Floor' | translate}}</div>\r\n                <div ngbDropdown class=\"d-inline-block ms-3\">\r\n                    <button class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\" ngbDropdownToggle>\r\n                        {{currentFloor ? currentFloor.id : ('Floor' | translate) }}</button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                        <button ngbDropdownItem *ngFor=\"let floor of floors\" (click)=\"onFloorClick(floor)\">\r\n                            {{ floor.name.length > 0 ? floor.name : ('Floor ' + floor.id) }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"tool\">\r\n            <div class=\"row ms-0 me-0 \">\r\n                <div class=\"tool-checkbox-container\">\r\n                    <div class=\"tool-checkbox-subcontainer\">\r\n                        <div class=\"label-legend me-3\">{{'Pan/Zoom Visit' | translate}} {{zoomCanBeChanged ? \"ON\" :\r\n                            \"OFF\"}}\r\n                        </div>\r\n                        <input type=\"checkbox\" (change)=\"onActivateZoomChange()\" style=\"margin-top: 5px;\">\r\n                    </div>\r\n                    <div class=\"card border-warning mb-3 mt-3\" *ngIf=\"zoomCanBeChanged\">\r\n                        <div class=\"card-body text-warning\">\r\n                            <h5 class=\"card-title\">{{\"calibration.wait-message\" | translate}}</h5>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onPreview()\"\r\n                [disabled]=\"zoomCanBeChanged\">{{'Preview' | translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"preview\">\r\n        <h1>{{'Validation' | translate}}</h1>\r\n        <div class=\"action\">\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onSave()\">{{'Validate' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onReset()\">{{'Reset' |\r\n                translate}}</button>\r\n            <button type=\"button\" class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'Cancel' |\r\n                translate}}</button>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"calibration-tools container-fluid\" *ngIf=\"loading\">\r\n        <h3>{{\"Waiting for Matterport\" | translate}}...</h3>\r\n        <div class=\"d-flex justify-content-center\">\r\n            <div class=\"spinner-border\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".button-visit{display:none;height:30px;width:30px;position:absolute;background:url(https://api.iconify.design/mdi:map-marker-check.svg?color=red&height=30) no-repeat scroll 0 0 transparent;border:none}#button-visit-left{left:350px;top:550px}#button-visit-right{left:500px;top:600px}#rowCanvas{display:flex}#canvasDiv{height:100%;width:100%;position:relative}#canvas{width:100%;height:100%;opacity:.5}#viewer-frame{top:0;position:absolute;width:100%;height:100%}.calibration-tools{margin-left:20px;width:400px;background-color:#fff;z-index:11;border:1px solid var(--smarterplan-primary);padding:7px}.form-range{width:100%}.tool{margin-top:20px}.tool .legend{justify-content:space-between;position:relative;margin-bottom:5px}.tool .legend-title{font-size:1.2rem;color:var(--smarterplan-primary);margin:auto;width:100%;font-weight:700;display:flex;justify-content:center}.tool .legend-bar-indicator{width:15%!important}.tool .label-legend{color:var(--smarterplan-primary);font-size:1.1rem;max-width:55%}.tool .tool-checkbox-container{display:flex;flex-direction:column}.tool .tool-checkbox-container .tool-checkbox-subcontainer{display:flex}.blur{width:150px;height:52px;position:absolute;background-color:#1e2023;bottom:0}.symmetry{padding:5px;border:solid 2px;border-radius:10px;color:var(--smarterplan-primary);margin:25px 10px;cursor:pointer}.symmetry:hover{color:var(--smarterplan-primary)}.symmetry-row{justify-content:center}.action{margin-top:30px;display:flex;justify-content:space-evenly}h1{color:var(--smarterplan-primary);text-align:center;margin-bottom:20px}h3{color:var(--smarterplan-primary);text-align:center;margin-bottom:10px}.btn-outline-primary.disabled{background-color:var(--smarterplan-orange)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.MatterportImportService }, { type: i2.PlanService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ZoneService }, { type: i2.SpaceService }, { type: i2.NavigationService }, { type: i3.TranslateService }]; }, propDecorators: { canvasDiv: [{
                 type: ViewChild,
-                args: ["canvasDiv"]
+                args: ['canvasDiv']
             }] } });
 
 class PlansComponent {