@smarterplan/ngx-smarterplan-locations 0.2.44 → 0.2.45

package/src/lib/components/zones/add-zone/sweep-plan-selection/sweep-plan-selection.component.ts

@@ -1,595 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { getCoefficientsForImage, getMetaForImage, Navigation, NavigationService, Plan, Zone, showScanPointsOnPlanInDiv, ZoneService, PlanService } from '@smarterplan/ngx-smarterplan-core';
-import panzoom, { PanZoom } from 'panzoom';
-import { buttonIsInSelection, isInPolygon, Rectangle, rotate, setVisuallySelected, styleButton, SweepState } from '../../../../helper.service';
-
-@Component({
-    selector: 'lib-sweep-plan-selection',
-    templateUrl: './sweep-plan-selection.component.html',
-    styleUrls: ['./sweep-plan-selection.component.scss']
-})
-export class SweepPlanSelectionComponent implements OnInit {
-
-    plans: Plan[];
-
-    @Input() spaceID: string;
-
-    @Input() chosenScansOnPlan: string[] = [];
-
-    /** if comming from Edit Plan SVG Zone creation */
-    @Input() newZoneData: any;
-
-    navIDsZoneEdit: string[] = [];
-
-    // sweeps belonging to any audio zone
-    @Input() occupiedSweeps: string[] = [];
-
-    // sweeps unavailable (cannot be chosen)
-    @Input() unavailableSweeps: string[] = [];
-
-    // if choosing sweeps for audio zone
-    @Input() editingAudioZone: boolean = false;
-
-    @Input() inputZone: Zone;
-
-    @Input() multipleFloors: boolean = false;
-
-    chosenPlan: Plan;
-
-    /** panZoom element for adding scans */
-    panZoom: PanZoom;
-
-    /** divPlan (use By panZoom) */
-    divPlan: HTMLElement;
-
-    /** all scan buttons Element */
-    buttonElements: HTMLButtonElement[] = [];
-
-    /** Scan buttons that are in the current selection */
-    buttonsInSelection: HTMLButtonElement[] = [];
-
-    @Output() sweepsSelected = new EventEmitter<{ sweeps: string[]; startSweepID: string; }>();
-
-    isSettingStartSweep = false;
-
-    startSweepID: string;
-
-    chosenSweepsPerFloor = new Map<string, string[]>(); // map matching floorID to sweeps selected
-
-    inputSweepsPerFloor = new Map<string, string[]>(); // map matching floorID to sweeps selected for zone in edition
-
-    selectionChanged = false;
-
-    constructor(
-        private zoneService: ZoneService,
-        private navigationService: NavigationService,
-        private planService: PlanService,
-        private translate: TranslateService,
-    ) { }
-
-    async ngOnInit() {
-        await this.getPlans();
-        this.setSweepsOfInputZone();
-    }
-
-    ngOnChanges() {
-        if (this.chosenPlan) {
-            this.setSweepsOfInputZone();
-            this.chosenScansOnPlan = [];
-            this.clearDivPlan();
-            this.addScanPoints();
-        }
-    }
-
-    setSweepsOfInputZone() {
-        this.navIDsZoneEdit = this.inputZone ? this.inputZone.sweepIDs : [];
-        if (this.multipleFloors) {
-            this.plans.forEach((plan) => {
-                if (!this.inputSweepsPerFloor.get(plan.zoneID)) {
-                    this.inputSweepsPerFloor.set(plan.zoneID,
-                        this.navIDsZoneEdit.filter((sweep) => plan.zone.sweepIDs.includes(sweep)));
-                }
-            });
-        } else {
-            if (this.inputZone) {
-                //filter plans only for the parent Zone
-                this.plans = this.plans.filter((p) => p.zoneID === this.inputZone.parentID);
-            }
-        }
-    }
-
-    async getPlans() {
-        this.plans = await this.planService.getSingedPlansForSpace(
-            this.spaceID,
-        );
-    }
-
-    async onPlanClick(plan: Plan) {
-        const switchPlan = () => {
-            this.selectionChanged = false;
-            this.chosenPlan = plan;
-            this.chosenScansOnPlan = [];
-            this.clearDivPlan();
-            this.addScanPoints();
-        };
-        if (this.selectionChanged) {
-            const message = this.translate.instant("confirm.cancelModifZoneSweeps");
-            if (window.confirm(message)) {
-                switchPlan();
-            }
-        } else {
-            switchPlan();
-        }
-    }
-
-    async addScanPoints() {
-        let wasModified = false;
-        if (this.multipleFloors) {
-            // check if we have already validated buttons for this floor
-            if (this.chosenSweepsPerFloor.get(this.chosenPlan.zoneID)) {
-                this.chosenScansOnPlan = this.chosenSweepsPerFloor.get(this.chosenPlan.zoneID);
-                wasModified = true;
-            }
-        }
-        this.divPlan = document.querySelector("#planDiv") as HTMLElement;
-        const zoneOfPlan = await this.zoneService.getZone(
-            this.chosenPlan.zoneID,
-        );
-        const navigations = await this.navigationService.getNavigationsForZone(
-            zoneOfPlan,
-        );
-        if (this.newZoneData) await this.setScanByDraw(navigations);
-        this.buttonElements = await showScanPointsOnPlanInDiv(
-            this.chosenPlan,
-            this.divPlan,
-            navigations,
-        );
-        for (const element of this.buttonElements) {
-            if (this.unavailableSweeps && this.unavailableSweeps.includes(element.id)) {
-                styleButton(element, SweepState.DISABLED);
-            } else {
-
-                if (wasModified) {
-                    if (this.chosenScansOnPlan.includes(element.id)) {
-                        styleButton(element, SweepState.ADDED);
-                    } else {
-                        styleButton(element, SweepState.REMOVED);
-                    }
-                } else {
-                    if (
-                        this.navIDsZoneEdit.length > 0 &&
-                        this.navIDsZoneEdit.includes(element.id)) {
-                        styleButton(element, SweepState.ADDED);
-                        if (!this.chosenScansOnPlan.includes(element.id)) {
-                            this.chosenScansOnPlan.push(element.id);
-                        }
-                    } else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
-                        styleButton(element, SweepState.OCCUPIED);
-                    } else {
-                        styleButton(element, SweepState.REMOVED);
-                    }
-                }
-
-                //start point should be last condition 
-                if (this.inputZone && this.inputZone.startSweepID === element.id) {
-                    console.log("setting start point");
-                    styleButton(element, SweepState.STARTPOINT);
-                }
-                element.addEventListener("click", (event) =>
-                    this.onButtonScanClicked(event.target as HTMLElement),
-                );
-            }
-        }
-        this.panZoom = panzoom(this.divPlan, {
-            bounds: true,
-            boundsPadding: 0,
-            maxZoom: 3.5,
-            beforeMouseDown(e: MouseEvent) {
-                return (
-                    e.button === 2
-                ); /** Ignore event for right click (use for selecting) */
-            },
-        });
-        if (this.multipleFloors) {
-            this.chosenSweepsPerFloor.set(this.chosenPlan.zoneID, [...this.chosenScansOnPlan]);
-        }
-    }
-
-    /** Function if we are coming for svg editor workflow */
-    setScanByDraw(navigations: any[]): Promise<void> {
-        return new Promise(async (resolve) => {
-            const rect = {
-                width: this.newZoneData.width,
-                height: this.newZoneData.height,
-            };
-            const img = await getMetaForImage(this.chosenPlan.filepath);
-            const { coeffX, coeffY } = getCoefficientsForImage(img, rect);
-
-            const draw = this.newZoneData.elements;
-
-            draw.map(async (element: any) => {
-                switch (element.nodeName) {
-                    case "rect":
-                        await this.setScanInRect(
-                            img,
-                            coeffX,
-                            coeffY,
-                            element,
-                            navigations,
-                        );
-                        break;
-
-                    case "ellipse":
-                        await this.setScanInCircle(
-                            img,
-                            coeffX,
-                            coeffY,
-                            element,
-                            navigations,
-                        );
-                        break;
-
-                    case "path":
-                        await this.setScanInPolygon(
-                            img,
-                            coeffX,
-                            coeffY,
-                            element,
-                            navigations,
-                        );
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            resolve();
-        });
-    }
-
-    async setScanInRect(img: any, coeffX: number, coeffY: number,
-        element: { angle: any; cx: any; cy: any; x: number; width: any; y: number; height: any; }, navigations: any[]) {
-        const calibrage = JSON.parse(this.chosenPlan.calibration);
-        navigations.map((navigation) => {
-            const positionsOnPlan = navigation.positionOnPlan.map((entry) =>
-                JSON.parse(entry),
-            );
-            const positionOnPlan = positionsOnPlan.find(
-                (data) => data.planID === this.chosenPlan.id,
-            );
-            if (positionOnPlan) {
-                const realWidth = img.width / coeffX;
-                const realHeight = img.height / coeffY;
-                const navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
-                const navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
-                if (
-                    navX > element.x &&
-                    navX < element.x + element.width &&
-                    navY > element.y &&
-                    navY < element.y + element.height &&
-                    !this.navIDsZoneEdit.includes(navigation.id)
-                ) {
-                    this.navIDsZoneEdit.push(navigation.id);
-                }
-            }
-
-            // old calibration:
-            // const position = JSON.parse(navigation.position);
-            // let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
-            // let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
-            // if (element.angle) {
-            //     const rotatePos = rotate(
-            //         { x: navX, y: navY },
-            //         { x: element.cx, y: element.cy },
-            //         element.angle,
-            //     );
-            //     navX = rotatePos.x;
-            //     navY = rotatePos.y;
-            // }
-            /**
-             * TODO calculer la rotation du rectangle
-             */
-            // if (
-            //     navX > element.x &&
-            //     navX < element.x + element.width &&
-            //     navY > element.y &&
-            //     navY < element.y + element.height &&
-            //     !this.navIDsZoneEdit.includes(navigation.id)
-            // ) {
-            //     this.navIDsZoneEdit.push(navigation.id);
-            // }
-        });
-    } // EO
-
-    async setScanInCircle(img: any, coeffX: number, coeffY: number,
-        element: { angle: any; cx: number; cy: number; rx: number; ry: number; }, navigations: Navigation[]) {
-        const calibrage = JSON.parse(this.chosenPlan.calibration);
-        navigations.map(navigation => {
-            const positionsOnPlan = navigation.positionOnPlan.map((entry) =>
-                JSON.parse(entry),
-            );
-            const positionOnPlan = positionsOnPlan.find(
-                (data) => data.planID === this.chosenPlan.id,
-            );
-            if (positionOnPlan) {
-                const realWidth = img.width / coeffX;
-                const realHeight = img.height / coeffY;
-                let navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
-                let navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
-                if (element.angle) {
-                    const rotatePos = rotate(
-                        { x: navX, y: navY },
-                        { x: element.cx, y: element.cy },
-                        element.angle,
-                    );
-                    navX = rotatePos.x;
-                    navY = rotatePos.y;
-                }
-
-                const valueX =
-                    Math.pow(navX - element.cx, 2) / Math.pow(element.rx, 2);
-                const valueY =
-                    Math.pow(navY - element.cy, 2) / Math.pow(element.ry, 2);
-                const result = valueX + valueY;
-                if (result <= 1 && !this.navIDsZoneEdit.includes(navigation.id)) {
-                    this.navIDsZoneEdit.push(navigation.id);
-                }
-            }
-
-            // old calibration
-            // const position = JSON.parse(navigation.position);
-            // let navX = (calibrage.offsetX + position.x * calibrage.x) / coeffX;
-            // let navY = (calibrage.offsetY + position.z * calibrage.y) / coeffY;
-            // if (element.angle) {
-            //     const rotatePos = rotate(
-            //         { x: navX, y: navY },
-            //         { x: element.cx, y: element.cy },
-            //         element.angle,
-            //     );
-            //     navX = rotatePos.x;
-            //     navY = rotatePos.y;
-            // }
-
-            // const valueX =
-            //     Math.pow(navX - element.cx, 2) / Math.pow(element.rx, 2);
-            // const valueY =
-            //     Math.pow(navY - element.cy, 2) / Math.pow(element.ry, 2);
-            // const result = valueX + valueY;
-            // if (result <= 1 && !this.navIDsZoneEdit.includes(navigation.id)) {
-            //     this.navIDsZoneEdit.push(navigation.id);
-            // }
-        });
-    } // EO
-
-    async setScanInPolygon(img: any, coeffX: number, coeffY: number, element: { segList: any; }, navigations: any[]) {
-        const calibrage = JSON.parse(this.chosenPlan.calibration);
-        navigations.map(async (navigation) => {
-
-            const positionsOnPlan = navigation.positionOnPlan.map((entry) =>
-                JSON.parse(entry),
-            );
-            const positionOnPlan = positionsOnPlan.find(
-                (data) => data.planID === this.chosenPlan.id,
-            );
-            if (positionOnPlan) {
-                const realWidth = img.width / coeffX;
-                const realHeight = img.height / coeffY;
-                let navY = (positionOnPlan.y * realHeight) / calibrage.imgHeight;
-                let navX = (positionOnPlan.x * realWidth) / calibrage.imgWidth;
-
-                const p = {
-                    x: navX,
-                    y: navY,
-                };
-                if (
-                    isInPolygon(p, element.segList) &&
-                    !this.navIDsZoneEdit.includes(navigation.id)
-                ) {
-                    this.navIDsZoneEdit.push(navigation.id);
-                }
-            }
-
-            // old calibration
-            // const position = JSON.parse(navigation.position);
-            // const p = {
-            //     x: (calibrage.offsetX + position.x * calibrage.x) / coeffX,
-            //     y: (calibrage.offsetY + position.z * calibrage.y) / coeffY,
-            // };
-            // if (element.angle) {
-            //     p = this.rotate(
-            //         p,
-            //         { x: element.cx, y: element.cy },
-            //         element.angle,
-            //     );
-            // }
-            // if (
-            //     isInPolygon(p, element.segList) &&
-            //     !this.navIDsZoneEdit.includes(navigation.id)
-            // ) {
-            //     this.navIDsZoneEdit.push(navigation.id);
-            // }
-        });
-    }
-
-    clearDivPlan() {
-        if (this.divPlan) this.divPlan.innerHTML = "";
-    }
-
-
-    /**
-     * Trigger each by the selectionComponent when selection change
-     * Update the current selected scan buttons
-     * @param selection new selection
-     */
-    onSelectionChanged(selection: Rectangle) {
-        const unselectedButtons: HTMLButtonElement[] = [];
-        const newSelectedButtons = [];
-
-        /** For each button, decide whether will be add to selected list or unselected list */
-        for (const button of this.buttonElements) {
-            const isSelected = buttonIsInSelection(button, selection);
-            if (this.buttonsInSelection.includes(button)) {
-                /** If the button is already in the selected list, we check if it should be unselect */
-                if (!isSelected) {
-                    unselectedButtons.push(button);
-                }
-            } else if (isSelected) {
-                newSelectedButtons.push(button);
-            }
-        }
-
-        /** Visually Update unselected list */
-        for (const button of unselectedButtons) {
-            setVisuallySelected(button, false);
-        }
-
-        /** Visually Update selected list */
-        for (const button of newSelectedButtons) {
-            setVisuallySelected(button, true);
-        }
-
-        /** Remove  unselected list */
-        this.buttonsInSelection = this.buttonsInSelection.filter((button) => {
-            return !unselectedButtons.includes(button);
-        });
-        /** Add new selected buttons */
-        this.buttonsInSelection = [
-            ...this.buttonsInSelection,
-            ...newSelectedButtons,
-        ];
-    }
-
-
-
-    /**
-     * Trigger when the user click to add the selected scans
-     */
-    onSelectionAdd() {
-        for (const button of this.buttonsInSelection) {
-            if (!this.chosenScansOnPlan.includes(button.id)) {
-                this.onButtonScanClicked(button);
-            }
-        }
-
-        this.onSelectionChanged({ top: 0, left: 0, width: 0, height: 0 });
-    }
-
-    /**
-     * Trigger when the user click to remove the selected scans
-     */
-    onSelectionRemove() {
-        for (const button of this.buttonsInSelection) {
-            if (this.chosenScansOnPlan.includes(button.id)) {
-                this.onButtonScanClicked(button);
-            }
-        }
-        this.onSelectionChanged({ top: 0, left: 0, width: 0, height: 0 });
-    }
-
-    /**
-     * Trigger when the user click to select all scans
-     */
-    onSelectAll() {
-        this.buttonsInSelection = [...this.buttonElements];
-        for (const button of this.buttonsInSelection) {
-            setVisuallySelected(button, true);
-        }
-    }
-
-    /**
-     * Trigger when the user change the size of the scan points
-     * @param event
-     */
-    onChangeScanSize(event: any) {
-        const factor = event.target.value;
-
-        for (const button of this.buttonElements) {
-            button.style.transform = `scale(${factor})`;
-        }
-    }
-
-    /**
-     * When a button representing a scan is clicked
-     * @param button
-     */
-    onButtonScanClicked(button: HTMLElement) {
-        this.selectionChanged = true;
-        if (this.isSettingStartSweep) {
-            if (this.startSweepID === button.id) {
-                // we deselect the starting point
-                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-                this.startSweepID = null;
-                return;
-            }
-            button.style.backgroundImage = `url('https://api.iconify.design/ic/baseline-flag-circle.svg?color=white&width=17&height=17')`;
-            if (!this.chosenScansOnPlan.includes(button.id)) {
-                this.chosenScansOnPlan.push(button.id);
-            }
-            if (this.startSweepID) {
-                // we are changing start sweep
-                const btnChanged = this.buttonElements.find((btn) => btn.id === this.startSweepID);
-                btnChanged.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-            }
-            this.startSweepID = button.id;
-            return;
-        }
-        if (!this.chosenScansOnPlan.includes(button.id)) {
-            // add to selection
-            button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-            this.chosenScansOnPlan.push(button.id);
-        } else {
-            // remove from selection
-            if (this.occupiedSweeps.includes(button.id) && !this.navIDsZoneEdit.includes(button.id)) {
-                // the sweep belongs to another zone => set orange
-                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
-            } else {
-                button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
-            }
-            const index = this.chosenScansOnPlan.indexOf(button.id);
-            this.chosenScansOnPlan.splice(index, 1);
-        }
-    }
-
-    onSaveSelection() {
-        if (this.multipleFloors) {
-            // rassemble all sweeps per floors
-            let finalSweeps = [];
-            Array.from(this.inputSweepsPerFloor.keys()).forEach(floorID => {
-                if (this.chosenSweepsPerFloor.get(floorID)) {
-                    // the sweeps for this floor were modified, we take them
-                    finalSweeps = [...finalSweeps, ...this.chosenSweepsPerFloor.get(floorID)];
-                } else {
-                    // was not modified, we take the previous values
-                    finalSweeps = [...finalSweeps, ...this.inputSweepsPerFloor.get(floorID)];
-                }
-            });
-            // console.log("final sweeps", finalSweeps);
-            this.sweepsSelected.emit({ "sweeps": finalSweeps, "startSweepID": this.startSweepID });
-        } else {
-            this.sweepsSelected.emit({ "sweeps": this.chosenScansOnPlan, "startSweepID": this.startSweepID });
-        }
-    }
-
-    onCancel() {
-        if (this.selectionChanged) {
-            const message = this.translate.instant("confirm.cancelModifZoneSweeps");
-            if (window.confirm(message)) {
-                this.sweepsSelected.emit(null);
-            }
-        } else {
-            this.sweepsSelected.emit(null);
-        }
-    }
-
-    /**
-     * Adds current selection of sweeps for current floor (plan) for multifloor zone.
-     * It has to be saved anyway with onSaveSelection!
-     */
-    onValidateForFloor() {
-        if (this.multipleFloors) {
-            this.chosenSweepsPerFloor.set(this.chosenPlan.zoneID, [...this.chosenScansOnPlan]);
-            this.selectionChanged = false;
-        }
-    }
-}