All files / app/codeCharta/ui/ribbonBar/colorSettingsPanel/metricColorRangeSlider/rangeSliderLabels rangeSliderLabels.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
62
63
64
5x
 
 
5x
 
 
 
 
 
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
20x
20x
20x
 
 
 
 
 
 
20x
 
 
40x
 
 
 
40x
40x
40x
 
40x
40x
40x
 
40x
40x
 
40x
40x
 
40x
40x
40x
 
40x
 
 
 
import { AfterViewChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from "@angular/core"
import { SliderRangePosition } from "../utils/SliderRangePosition"
 
const minDistanceBetweenLabels = 4
 
@Component({
    selector: "cc-range-slider-labels",
    templateUrl: "./rangeSliderLabels.component.html",
    styleUrls: ["./rangeSliderLabels.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true
})
export class RangeSliderLabelsComponent implements AfterViewChecked {
    @Input() minValue: number
    @Input() maxValue: number
    @Input() leftValueLabel: number
    @Input() rightValueLabel: number
    @Input() sliderRangePosition: SliderRangePosition
    @Input() sliderWidth: number
 
    @ViewChild("minLabel") minLabel: ElementRef<HTMLDivElement>
    @ViewChild("maxLabel") maxLabel: ElementRef<HTMLDivElement>
    @ViewChild("currentLeftLabel") currentLeftLabel: ElementRef<HTMLDivElement>
    @ViewChild("currentRightLabel") currentRightLabel: ElementRef<HTMLDivElement>
    @ViewChild("combinedCurrentLeftRightLabel") combinedCurrentLeftRightLabel: ElementRef<HTMLDivElement>
 
    hideMinLabel = false
    hideMaxLabel = false
    doLeftRightLabelOverlap = false
    currentLeftLabelLeftPosition: number
    leftLabel: number
    currentRightLabelLeftPosition: number
    rightLabel: number
    combinedCurrentLeftRightLabelLeftPosition: number
 
    constructor(private changeDetector: ChangeDetectorRef) {}
 
    ngAfterViewChecked(): void {
        this.updateLabelDisplays()
    }
 
    private updateLabelDisplays() {
        const minLabelRightPosition = this.minLabel.nativeElement.getBoundingClientRect().width
        const currentLeftLabelWidth = this.currentLeftLabel.nativeElement.getBoundingClientRect().width
        this.currentLeftLabelLeftPosition = this.sliderRangePosition.leftEnd - currentLeftLabelWidth / 2
 
        const currentRightLabelWidth = this.currentRightLabel.nativeElement.getBoundingClientRect().width
        const maxLabelLeftPosition = this.sliderWidth - this.maxLabel.nativeElement.getBoundingClientRect().width
        this.currentRightLabelLeftPosition = this.sliderRangePosition.rightStart - currentRightLabelWidth / 2
 
        this.hideMinLabel = this.currentLeftLabelLeftPosition <= minLabelRightPosition + minDistanceBetweenLabels
        this.hideMaxLabel = this.currentRightLabelLeftPosition + currentRightLabelWidth + minDistanceBetweenLabels >= maxLabelLeftPosition
 
        const currentLeftLabelRightPosition = this.currentLeftLabelLeftPosition + currentLeftLabelWidth
        this.doLeftRightLabelOverlap = currentLeftLabelRightPosition + minDistanceBetweenLabels >= this.currentRightLabelLeftPosition
 
        const middleBetweenLeftRight = (currentLeftLabelRightPosition + this.currentRightLabelLeftPosition) / 2
        const combinedCurrentLeftRightLabelWidth = this.combinedCurrentLeftRightLabel.nativeElement.getBoundingClientRect().width
        this.combinedCurrentLeftRightLabelLeftPosition = middleBetweenLeftRight - combinedCurrentLeftRightLabelWidth / 2
 
        this.changeDetector.detectChanges()
    }
}