@smarterplan/ngx-smarterplan-locations 0.2.7 → 0.2.8

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

@@ -803,7 +803,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(() => {
@@ -819,11 +819,7 @@ class CalibrationComponent {
                 }, 500);
             }
             else {
-                this.router.navigate([
-                    "/dashboard/localisation",
-                    this.spaceID,
-                    "plans",
-                ]);
+                this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
             }
         });
     }
@@ -832,17 +828,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}`,
             },
         ];
@@ -855,7 +851,7 @@ class CalibrationComponent {
         return __awaiter(this, void 0, void 0, function* () {
             /** Get canvas */
             if (!this.canvas) {
-                const canvas = document.querySelector("#canvas");
+                const canvas = document.querySelector('#canvas');
                 this.canvas = canvas;
             }
             if (!this.chosenPlanIsPdf) {
@@ -888,7 +884,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);
@@ -900,7 +896,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;
@@ -929,7 +925,8 @@ class CalibrationComponent {
             const pdfjs = yield import('pdfjs-dist/build/pdf');
             const pdfjsWorker = yield import('pdfjs-dist/build/pdf.worker.entry');
             pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-            const pdf = yield getDocument(this.chosenPlan.filepath).promise;
+            const pdf = yield getDocument(this.chosenPlan.filepath)
+                .promise;
             const page = yield pdf.getPage(1);
             const viewPortParameters = { scale: 1 };
             const viewport = page.getViewport(viewPortParameters);
@@ -939,13 +936,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;
@@ -973,25 +970,28 @@ class CalibrationComponent {
             // console.log(this.floors);
             setTimeout(() => __awaiter(this, void 0, void 0, function* () {
                 /** Move Floor mode */
-                yield sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN);
-                /** Display the correct floor for the plan */
-                try {
-                    yield this.matterportImportService.moveToFloor(this.chosenPlan.name);
-                }
-                catch (_a) {
-                    console.log("couldnot move to floor");
-                }
+                yield sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN).then((nextMode) => __awaiter(this, void 0, void 0, function* () {
+                    // Move successful
+                    console.log(`Arrived at new view mode ${nextMode}`);
+                    /** Display the correct floor for the plan */
+                    try {
+                        yield 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 (_a) {
+                        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 */
@@ -1064,15 +1064,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;
             }
@@ -1116,21 +1116,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,
@@ -1139,7 +1131,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);
                     }
                 }
             }
@@ -1188,12 +1180,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 */
@@ -1206,12 +1194,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'));
     }
     onFloorClick(floor) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1221,9 +1205,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';
         }
     }
 }
@@ -1234,7 +1218,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 {