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 67 | 2x 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
}
}
}
}
|