@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

package/src/lib/components/plans/calibration/calibration.component.ts

@@ -1,603 +0,0 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { getDocument } from 'pdfjs-dist';
-import { PDFDocumentProxy } from 'ng2-pdf-viewer';
-import {
-    Zone,
-    MenuItem,
-    Plan,
-    Space,
-    Navigation,
-    PlanService,
-    ZoneService,
-    SpaceService,
-    NavigationService,
-    getMetaForImage,
-    MatterportImportService,
-} from '@smarterplan/ngx-smarterplan-core';
-import panzoom from 'panzoom';
-
-@Component({
-    selector: 'lib-calibration',
-    templateUrl: './calibration.component.html',
-    styleUrls: ['./calibration.component.scss'],
-})
-export class CalibrationComponent implements OnInit {
-    /** Item to display for the navbar */
-    menuItems: MenuItem[] = [];
-
-    /** Canvas (Plan) */
-    canvas;
-
-    /** CanvasDiv (Div that contain the canvas + matterport iframe) */
-    @ViewChild('canvasDiv') canvasDiv: ElementRef;
-
-    /** Size of the canvas & matterport iframe */
-    canvasSize: { w: number; h: number; };
-
-    /** Zoom ratio of the canvas/plan  */
-    canvasZoom = 0;
-
-    /** Opacity for matterport iframe */
-    opacity: number = 50;
-
-    /** Current rotation for matterport, [0-360],  matterport rotation is bind to input range */
-    rotation: number = 180;
-
-    /** Previous rotation, use to calculate the deltaRotation to rotate, when user change rotation value using range input */
-    prevRotation: number = 180;
-
-    /** Current Camera Pose */
-    cameraPose: any;
-
-    /** True when the user is currently rotating with the input range, the matterport rotation events will be ignored */
-    isRotatingRange: boolean = false;
-
-    /** Rotating queue event to send to matterport */
-    rotatingQueueEvent: number[] = [];
-
-    /** True when Vertical symmetry is enabled */
-    reflectV = false;
-
-    /** True when Horizontal symmetry is enabled */
-    reflectH = false;
-
-    chosenPlan: Plan;
-
-    spaceID: string;
-
-    currentSpace: Space;
-
-    currentZone: Zone;
-
-    chosenPlanIsPdf = false;
-
-    /** First Point in visit, used to determine the calibration  */
-    firstMarkVisit = { x: 0, y: 0 };
-
-    /** Second Point in visit, used to determine the calibration  */
-    secondMarkVisit = { x: 0.5, y: 0.5 };
-
-    /** Equivalent of 'firstMarkVisit' in canvas  */
-    firstMarkPlan: { x: number; y: number; } = { x: 0, y: 0 };
-
-    /** Equivalent of 'secondMarkVisit' in canvas  */
-    secondMarkPlan: { x: number; y: number; } = { x: 0, y: 0 };
-
-    /** Calibration result, (offsetX, offsetY, x, y) */
-    calibrage: any = {};
-
-    /** Is in preview mode (see scan result) */
-    preview = false;
-
-    /** Matterport is loading */
-    loading = true;
-
-    /* for pan and zoom of canvas */
-    panzoom: any;
-
-    currentNavigations: Navigation[];
-
-    positions: { navID: string; planID: string; x: number; y: number; }[] = [];
-
-    floors: any[] = [];
-
-    currentFloor;
-
-    zoomCanBeChanged: boolean = false;
-
-    constructor(
-        private matterportImportService: MatterportImportService,
-        private planService: PlanService,
-        private route: ActivatedRoute,
-        private router: Router,
-        private zoneService: ZoneService,
-        private spaceService: SpaceService,
-        private navigationService: NavigationService,
-        private translate: TranslateService
-    ) { }
-
-    ngOnDestroy(): void {
-        if (!this.loading) {
-            this.matterportImportService.removeFrame();
-        }
-    }
-
-    async ngOnInit(): Promise<void> {
-        this.spaceID = this.route.snapshot.queryParams.spaceID;
-        this.currentSpace = await this.spaceService.getSpace(this.spaceID);
-
-        /** Menu nav bar */
-        this.setupMenuItems();
-
-        this.chosenPlan = this.planService.getChosenPlan();
-
-        if (this.chosenPlan) {
-            this.chosenPlanIsPdf = this.chosenPlan.annexe.includes('pdf');
-            this.launchViewer();
-            setTimeout(() => {
-                this.configureCanvas().then(() => {
-                    this.panzoom = panzoom(this.canvas, {
-                        bounds: true,
-                        boundsPadding: 0,
-                        maxZoom: 2.5,
-                        minZoom: 0.1,
-                        initialZoom: 1,
-                        zoomSpeed: 0.02,
-                    });
-                });
-            }, 500);
-        } else {
-            this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
-        }
-    }
-
-    /** **********************************************************************************************
-     *                                      MENU NAV BAR
-     *********************************************************************************************** */
-    setupMenuItems() {
-        this.menuItems = [
-            { label: 'Locations', url: '/localisation' },
-            {
-                label: this.currentSpace.name,
-                url: `/localisation/${this.spaceID}`,
-            },
-            {
-                label: 'Plans',
-                url: `/localisation/${this.currentSpace.id}/plans`,
-            },
-            {
-                label: 'Calibration',
-                url: `/localisation/${this.currentSpace.id}/plan-calibration?spaceID=${this.currentSpace.id}`,
-            },
-        ];
-    }
-
-    /** **********************************************************************************************
-     *                                     CANVAS
-     *********************************************************************************************** */
-
-    /** Display the plan */
-    async configureCanvas() {
-        /** Get canvas */
-        if (!this.canvas) {
-            const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
-            this.canvas = canvas;
-        }
-
-        if (!this.chosenPlanIsPdf) {
-            const image = await getMetaForImage(this.chosenPlan.filepath);
-            /** Compute the new size for the canvas/matterport, base on the dimension of the plan, keeping the ratio */
-            const size = this.getSizeForCanvas(image.width, image.height);
-
-            /** Compute the plan zoom ratio (use for the calibration later) */
-            this.canvasZoom = size.w / image.width;
-
-            this.resizeView(size);
-
-            /** Draw Plan on the canvas */
-            this.drawImage(this.chosenPlan.filepath);
-        } else {
-            // TODO
-            this.pdfToCanvas();
-        }
-    }
-
-    /** Update size of the canvas/matterport */
-    resizeView(size) {
-        this.canvasDiv.nativeElement.style.width = `${size.w}px`;
-        this.canvasDiv.nativeElement.style.height = `${size.h}px`;
-        this.canvas.style.width = `${size.w}px`;
-        this.canvas.style.height = `${size.h}px`;
-        this.canvas.width = size.w;
-        this.canvas.height = size.h;
-        this.canvasSize = size;
-    }
-
-    /** Draw something on the canvas */
-    drawImage(url: string, x = 0, y = 0, icone = false) {
-        const image = new Image();
-        const size = this.canvasSize;
-        const context = this.canvas.getContext('2d');
-
-        /** Flip the context, for symmetry */
-        // if (this.reflectV) {
-        //     context.translate(size.w, 0);
-        //     context.scale(-1, 1);
-        // }
-        // if (this.reflectH) {
-        //     context.translate(0, size.h);
-        //     context.scale(1, -1);
-        // }
-
-        let imageWidth = size.w;
-        let imageHeight = size.h;
-        image.addEventListener('load', () => {
-            if (icone) {
-                imageWidth = image.width;
-                imageHeight = image.height;
-            }
-            context.drawImage(
-                image,
-                0,
-                0,
-                image.width,
-                image.height,
-                x,
-                y,
-                imageWidth,
-                imageHeight
-            );
-        });
-        image.src = url;
-    }
-
-    /** Get the size for the canvas, based on the plan size, keeping the ratio */
-    getSizeForCanvas(w, h) {
-        let canvasW = this.canvasDiv.nativeElement.offsetWidth;
-        let canvasH = this.canvasDiv.nativeElement.offsetHeight;
-
-        const imageRatio = w / h;
-        const canvasRatio = canvasW / canvasH;
-
-        if (imageRatio > canvasRatio) {
-            canvasH = canvasW / imageRatio;
-        } else {
-            canvasW = canvasH * imageRatio;
-        }
-        return { w: canvasW, h: canvasH };
-    }
-
-    /** [TODO] Convert a PDF to a Canvas */
-    async pdfToCanvas() {
-        const pdfjs = await import('pdfjs-dist/build/pdf');
-        const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
-
-        pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
-        const pdf: PDFDocumentProxy = await getDocument(this.chosenPlan.filepath)
-            .promise;
-        const page = await pdf.getPage(1);
-
-        const viewPortParameters = { scale: 1 };
-        const viewport = page.getViewport(viewPortParameters);
-
-        this.canvas.height = viewport.height;
-        this.canvas.width = viewport.width;
-
-        const size = this.getSizeForCanvas(viewport.width, viewport.height);
-        console.log(size);
-        this.canvasSize = size;
-
-        this.canvasZoom = size.w / viewport.width;
-
-        const context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
-        const renderContext = {
-            canvasContext: context,
-            viewport,
-        };
-        const renderTask = page.render(renderContext).promise;
-
-        renderTask.then(() => console.log('Page rendered'));
-
-        // const res = canvas.toDataURL();
-        // if (pdf != null) pdf.destroy();
-        // return res;
-    }
-
-    /** User click to user Symmetry Vertical */
-    onReflectV() {
-        this.reflectV = !this.reflectV;
-        this.configureCanvas();
-    }
-
-    /** User click to user Symmetry Horizontal */
-    onReflectH() {
-        this.reflectH = !this.reflectH;
-        this.configureCanvas();
-    }
-
-    /** **********************************************************************************************
-     *                                     MATTERPORT
-     *********************************************************************************************** */
-
-    /** Launch matterport */
-    async launchViewer() {
-        await this.matterportImportService.initSdkForModel(this.chosenPlan.model3d);
-
-        const { sdk } = this.matterportImportService;
-        this.floors = Object.values(this.matterportImportService.floors);
-        // console.log(this.floors);
-        setTimeout(async () => {
-            /** Move Floor mode */
-            sdk.Mode.moveTo(sdk.Mode.Mode.FLOORPLAN).then(async (nextMode) => {
-                /** Display the correct floor for the plan */
-                try {
-                    const matterportFloor = this.chosenPlan.zone.metadata ?
-                        JSON.parse(this.chosenPlan.zone.metadata).matterportFloorSequence : null;
-                    await this.matterportImportService.moveToFloor(this.chosenPlan.zone.name, matterportFloor);
-
-                    /** 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;
-        }, 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 */
-            if (!this.isRotatingRange) {
-                this.rotation = event.rotation.y + 180;
-                this.prevRotation = this.rotation;
-                this.cameraPose = event;
-            }
-        });
-    }
-
-    /** When the <input> range, for rotation, change */
-    async onRotationChange() {
-        const rotationDelta = this.rotation - this.prevRotation;
-        this.prevRotation = this.rotation;
-
-        /** Send the rotationDelta to th queue event in order to be send to matterport */
-        this.rotatingQueueEvent.push(rotationDelta);
-
-        /** Start to process the queue, if it's the first event */
-        if (!this.isRotatingRange) {
-            this.isRotatingRange = true;
-            this.processRotatingQueueEvent();
-        }
-    }
-
-    /** Process the rotating event queue, send event one by one to matterport  */
-    async processRotatingQueueEvent() {
-        const { sdk } = this.matterportImportService;
-
-        /** While the queue is not empty */
-        while (this.rotatingQueueEvent.length > 0) {
-            /** Rotate matterport by deltaRotation and remove event from queue */
-            await sdk.Camera.rotate(this.rotatingQueueEvent.shift(), 0, {
-                speed: 360,
-            });
-        }
-
-        /** When the queue is empty, then the user is not rotating with the <input> range anymore */
-        this.isRotatingRange = false;
-    }
-
-    /** **********************************************************************************************
-     *                                     USER ACTIONS
-     *********************************************************************************************** */
-
-    /** Preview calibration */
-    async onPreview() {
-        this.preview = true;
-        /** Place sweeps */
-        this.onPlaceSweeps();
-    }
-
-    async calibrate() {
-        const [navigation] = this.currentNavigations;
-        const position = JSON.parse(navigation.position);
-        this.firstMarkPlan =
-            await this.matterportImportService.sdk.Renderer.getScreenPosition({
-                x: position.x,
-                y: position.y,
-                z: position.z,
-            });
-        this.secondMarkPlan =
-            await this.matterportImportService.sdk.Renderer.getScreenPosition({
-                x: position.x,
-                y: 0,
-                z: 0,
-            });
-        const deltaZVisit = 0 - position.z;
-        let deltaXPlan = this.secondMarkPlan.x - this.firstMarkPlan.x;
-        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.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.offsetX = this.secondMarkPlan.x;
-            this.calibrage.scaleX = deltaXPlan / deltaZVisit;
-        }
-        const thirdMarkPlan =
-            await this.matterportImportService.sdk.Renderer.getScreenPosition({
-                x: 0,
-                y: 0,
-                z: position.z,
-            });
-        const deltaXVisit = 0 - position.x;
-        if (deltaXPlan === 0) {
-            // console.log(" we moved along X axis on Plan");
-            deltaXPlan = thirdMarkPlan.x - this.firstMarkPlan.x;
-            this.calibrage.offsetX = thirdMarkPlan.x;
-            this.calibrage.scaleX = deltaXPlan / deltaXVisit;
-        } else {
-            const deltaYPlan = thirdMarkPlan.y - this.firstMarkPlan.y;
-            this.calibrage.offsetY = thirdMarkPlan.y;
-            this.calibrage.scaleY = deltaYPlan / deltaXVisit;
-        }
-
-        /** Take considiration of pan and zoom of plan on canvas */
-        const transformInfo = this.panzoom.getTransform();
-        const { scale, x, y } = transformInfo;
-        // console.log(transformInfo);
-        this.calibrage.offsetXPlan = x;
-        this.calibrage.offsetYPlan = y;
-        this.calibrage.scalePlan = scale;
-        console.log(this.calibrage);
-    }
-
-    /** Place sweeps */
-    async onPlaceSweeps() {
-        /** Display all scan */
-        const zone = await this.zoneService.getZone(this.chosenPlan.zoneID);
-
-        if (zone) {
-            this.currentZone = zone;
-            const navigations = await this.navigationService.getNavigationsForZone(
-                this.currentZone
-            );
-            this.currentNavigations = navigations;
-            await this.calibrate();
-            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;
-                    // 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;
-                    this.positions.push({
-                        navID: navigation.id,
-                        planID: this.chosenPlan.id,
-                        x: transformedX,
-                        y: transformedY,
-                    });
-                    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
-                    );
-                }
-            }
-        }
-    }
-
-    /** Save calibration */
-    async onSave() {
-        if (this.currentZone) {
-            /** Normalize with the zoom */
-            // this.calibrage.offsetX /= this.canvasZoom;
-            // this.calibrage.offsetY /= this.canvasZoom;
-            // this.calibrage.x /= this.canvasZoom;
-            // this.calibrage.y /= this.canvasZoom;
-            this.calibrage.new = true;
-            this.calibrage.imgWidth = this.canvasSize.w;
-            this.calibrage.imgHeight = this.canvasSize.h;
-
-            await this.planService.updatePlan({
-                id: this.chosenPlan.id,
-                calibration: JSON.stringify(this.calibrage),
-            });
-            await Promise.all(
-                this.positions.map(async (position) => {
-                    const { navID } = position;
-                    delete position.navID;
-                    const nav = this.currentNavigations.find((_nav) => _nav.id === navID);
-                    let positionsDataToUpdate;
-                    if (nav.positionOnPlan) {
-                        const positionOnPlan = nav.positionOnPlan.map((entry) =>
-                            JSON.parse(entry)
-                        );
-                        const positionForCurrentPlan = positionOnPlan.find(
-                            (entry) => entry.planID === this.chosenPlan.id
-                        );
-                        if (positionForCurrentPlan) {
-                            positionOnPlan.splice(
-                                positionOnPlan.indexOf(positionForCurrentPlan),
-                                1,
-                                position
-                            );
-                        } else {
-                            positionOnPlan.push(position);
-                        }
-                        positionsDataToUpdate = [...positionOnPlan];
-                    } else {
-                        positionsDataToUpdate = [position];
-                    }
-                    // console.log(positionsDataToUpdate);
-                    await this.navigationService.updateNavigation({
-                        id: navID,
-                        positionOnPlan: positionsDataToUpdate.map((entry) =>
-                            JSON.stringify(entry)
-                        ),
-                    });
-                })
-            );
-        }
-        this.matterportImportService.removeFrame();
-
-        this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
-        alert(this.translate.instant('calibration.success'));
-    }
-
-    /** Reset the canvas */
-    onReset() {
-        this.reflectH = false;
-        this.reflectV = false;
-        this.preview = false;
-
-        this.configureCanvas();
-    }
-
-    /** Cancel, leave */
-    onCancel() {
-        this.matterportImportService.removeFrame();
-        this.router.navigate(['/dashboard/localisation', this.spaceID, 'plans']);
-        alert(this.translate.instant('calibration.canceled'));
-    }
-
-    async onFloorClick(floor) {
-        this.currentFloor = floor;
-        await this.matterportImportService.moveToFloor(floor.id);
-    }
-
-    onActivateZoomChange() {
-        this.zoomCanBeChanged = !this.zoomCanBeChanged;
-        const iframe = document.querySelector('#viewer-frame') as HTMLElement;
-        if (iframe) {
-            iframe.style.zIndex = this.zoomCanBeChanged ? '1' : '0';
-        }
-    }
-}

package/src/lib/components/plans/edit-plan/edit-plan.component.html

@@ -1,77 +0,0 @@
-<div class="row mt-3">
-    <div class="col">
-        <div class="m-3">
-            <lib-tab-navigation [menuItems]='menuItems'></lib-tab-navigation>
-        </div>
-    </div>
-</div>
-<lib-add-zone *ngIf="isNewZone" [images360]="images360" [spaceID]="spaceID" [navigationIDs]="navigations"
-    [zoneEdit]="editedZone" [zones]="zones" (updatedZone)="onNewZone($event)" [chosenPlan]="editedPlan"
-    [newZoneDataFromEditor]="newZoneData"></lib-add-zone>
-<iframe *ngIf="editorUrl" #svgEditor [src]="editorUrl | safeUrl" frameborder="0"
-    style="height:100%;width:100%;min-height:550px;max-height:750px" (load)="onLoad(svgEditor)"></iframe>
-<!-- chosenPlan && -->
-<!-- ./../../../../../../assets/svgeditor/index.html -->
-
-<img #imgPng *ngIf="chosenPlan && chosenPlan.extension !== 'svg' && svgEditor" [src]="chosenPlan.filepath"
-    (load)="onLoadImg(imgPng)" style="display: none;">
-
-<canvas id="canvas4pdf" style="display: none;"></canvas>
-
-<ng-template #dialog let-modal>
-
-    <div class="modal-header">
-        <h4 class="modal-title">{{'Submit' | translate}}</h4>
-        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        {{'save plan edited' | translate}}
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline-dark" (click)="newSvg();modal.close('Close click')">{{'Yes' |
-            translate}}</button>
-        <button type="button" class="btn btn-outline-dark" (click)="updateSvg();modal.close('Close click')">{{'No' |
-            translate}}</button>
-    </div>
-
-</ng-template>
-
-<ng-template #dialogZone let-modal>
-
-    <div class="modal-header">
-        <h4 class="modal-title">{{'Submit' | translate}}</h4>
-        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        {{'confirm.new-zone-from-plan' | translate}}
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline-dark"
-            (click)="isNewZone = true;modal.close('Close click')">{{'Validate' |
-            translate}}</button>
-        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">{{'Cancel' |
-            translate}}</button>
-    </div>
-
-</ng-template>
-
-<ng-template #preparing let-modal>
-    <div class="modal-header">
-        <h4 class="modal-title">{{'Processing' | translate}}</h4>
-        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        <div class="d-flex justify-content-center">
-            <div class="spinner-border" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>
-        </div>
-    </div>
-
-</ng-template>

package/src/lib/components/plans/edit-plan/edit-plan.component.scss

@@ -1,9 +0,0 @@
-app-add-zone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: white;
-    width: 100%;
-    height: 100%;
-    padding: 30px;
-}