All files / app/codeCharta/ui/ribbonBar/heightSettingsPanel heightSettingsPanel.component.ts

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
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
3x
 
3x
3x
3x
 
 
 
 
 
 
 
3x
3x
 
9x
9x
9x
9x
9x
9x
9x
 
9x
 
9x
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component } from "@angular/core"
import { amountOfTopLabelsSelector } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.selector"
import { isLabelsSliderDisabledSelector } from "./selectors/isLabelsSliderDisabled.selector"
import { setAmountOfTopLabels } from "../../../state/store/appSettings/amountOfTopLabels/amountOfTopLabels.actions"
import { showMetricLabelNodeNameSelector } from "../../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.selector"
import { showMetricLabelNodeValueSelector } from "../../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.selector"
import { MatCheckboxChange, MatCheckbox } from "@angular/material/checkbox"
import { setShowMetricLabelNodeName } from "../../../state/store/appSettings/showMetricLabelNodeName/showMetricLabelNodeName.actions"
import { setShowMetricLabelNameValue } from "../../../state/store/appSettings/showMetricLabelNameValue/showMetricLabelNameValue.actions"
import { scalingSelector } from "../../../state/store/appSettings/scaling/scaling.selector"
import { setScaling } from "../../../state/store/appSettings/scaling/scaling.actions"
import { invertHeightSelector } from "../../../state/store/appSettings/invertHeight/invertHeight.selector"
import { setInvertHeight } from "../../../state/store/appSettings/invertHeight/invertHeight.actions"
import { isDeltaStateSelector } from "../../../state/selectors/isDeltaState.selector"
import { debounce } from "../../../util/debounce"
import { Store } from "@ngrx/store"
import { CcState } from "../../../codeCharta.model"
import { SliderComponent } from "../../slider/slider.component"
import { ResetSettingsButtonComponent } from "../../resetSettingsButton/resetSettingsButton.component"
import { AsyncPipe } from "@angular/common"
 
@Component({
    selector: "cc-height-settings-panel",
    templateUrl: "./heightSettingsPanel.component.html",
    standalone: true,
    imports: [SliderComponent, MatCheckbox, ResetSettingsButtonComponent, AsyncPipe]
})
export class HeightSettingsPanelComponent {
    static DEBOUNCE_TIME = 400
 
    amountOfTopLabels$ = this.store.select(amountOfTopLabelsSelector)
    isLabelsSliderDisabled$ = this.store.select(isLabelsSliderDisabledSelector)
    showMetricLabelNodeName$ = this.store.select(showMetricLabelNodeNameSelector)
    showMetricLabelNodeValue$ = this.store.select(showMetricLabelNodeValueSelector)
    scaling$ = this.store.select(scalingSelector)
    invertHeight$ = this.store.select(invertHeightSelector)
    isDeltaState$ = this.store.select(isDeltaStateSelector)
 
    constructor(private store: Store<CcState>) {}
 
    applyDebouncedTopLabels = debounce((amountOfTopLabels: number) => {
        this.store.dispatch(setAmountOfTopLabels({ value: amountOfTopLabels }))
    }, HeightSettingsPanelComponent.DEBOUNCE_TIME)
 
    applyDebouncedScalingY = debounce((y: number) => {
        this.store.dispatch(setScaling({ value: { y } }))
    }, HeightSettingsPanelComponent.DEBOUNCE_TIME)
 
    setShowMetricLabelNodeName(event: MatCheckboxChange) {
        this.store.dispatch(setShowMetricLabelNodeName({ value: event.checked }))
    }
 
    setShowMetricLabelNameValue(event: MatCheckboxChange) {
        this.store.dispatch(setShowMetricLabelNameValue({ value: event.checked }))
    }
 
    setInvertHeight(event: MatCheckboxChange) {
        this.store.dispatch(setInvertHeight({ value: event.checked }))
    }
}