All files / app/codeCharta/ui/legendPanel legendPanel.component.ts

100% Statements 37/37
85.71% Branches 6/7
100% Functions 6/6
100% Lines 35/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 672x 2x 2x   2x 2x 2x 2x 2x 2x 2x 2x 2x 2x                 2x 9x 9x 9x 9x 9x 9x         9x 9x 9x       17x 11x       10x 10x         7x       17x 17x 3x 3x 3x   3x 1x          
import { isDeltaStateSelector } from "../../state/selectors/isDeltaState.selector"
import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSideBarVisible.service"
import { Store } from "@ngrx/store"
import { CcState } from "../../codeCharta.model"
import { heightMetricSelector } from "../../state/store/dynamicSettings/heightMetric/heightMetric.selector"
import { areaMetricSelector } from "../../state/store/dynamicSettings/areaMetric/areaMetric.selector"
import { colorMetricSelector } from "../../state/store/dynamicSettings/colorMetric/colorMetric.selector"
import { edgeMetricSelector } from "../../state/store/dynamicSettings/edgeMetric/edgeMetric.selector"
import { Component, ViewContainerRef, OnDestroy, OnInit } from "@angular/core"
import { LegendBlockComponent } from "./legendBlock/legendBlock.component"
import { ColorPickerForMapColorComponent } from "../colorPickerForMapColor/colorPickerForMapColor.component"
import { LegendMarkedPackagesComponent } from "./legendMarkedPackages/legendMarkedPackages.component"
import { MatButton } from "@angular/material/button"
import { AsyncPipe } from "@angular/common"
 
@Component({
    selector: "cc-legend-panel",
    templateUrl: "./legendPanel.component.html",
    styleUrls: ["./legendPanel.component.scss"],
    standalone: true,
    imports: [LegendBlockComponent, ColorPickerForMapColorComponent, LegendMarkedPackagesComponent, MatButton, AsyncPipe]
})
export class LegendPanelComponent implements OnInit, OnDestroy {
    isLegendVisible = false
    isDeltaState$ = this.store.select(isDeltaStateSelector)
    heightMetric$ = this.store.select(heightMetricSelector)
    areaMetric$ = this.store.select(areaMetricSelector)
    colorMetric$ = this.store.select(colorMetricSelector)
    edgeMetric$ = this.store.select(edgeMetricSelector)
 
    private mouseDownListener?: (event: MouseEvent) => void
 
    constructor(
        private store: Store<CcState>,
        public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
        private readonly viewReference: ViewContainerRef
    ) {}
 
    ngOnInit(): void {
        this.mouseDownListener = (event: MouseEvent) => this.collapseOnOutsideClick(event)
        document.addEventListener("mousedown", this.mouseDownListener)
    }
 
    ngOnDestroy(): void {
        if (this.mouseDownListener) {
            document.removeEventListener("mousedown", this.mouseDownListener)
        }
    }
 
    toggleIsLegendVisible() {
        this.isLegendVisible = !this.isLegendVisible
    }
 
    private collapseOnOutsideClick(event: MouseEvent) {
        const target = event.target as Node
        if (this.isLegendVisible) {
            const clickedInside = this.viewReference.element.nativeElement.contains(target)
            const overlayPaneElement = document.querySelector(".cdk-overlay-container")
            const clickedWithinOverlayPane = overlayPaneElement ? overlayPaneElement.contains(target) : false
 
            if (!clickedInside && !clickedWithinOverlayPane) {
                this.isLegendVisible = false
            }
        }
    }
}