All files / app/codeCharta/ui/viewCube/zoomSlider zoomSlider.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
4x
4x
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
6x
6x
 
 
 
6x
6x
 
6x
20x
 
 
 
 
20x
 
 
 
 
1x
1x
 
1x
 
 
 
2x
 
 
 
2x
 
 
 
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core"
import { ThreeMapControlsService } from "../../codeMap/threeViewer/threeMapControls.service"
 
@Component({
    selector: "cc-zoom-slider",
    templateUrl: "./zoomSlider.component.html",
    styleUrls: ["./zoomSlider.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true
})
export class ZoomSliderComponent implements OnInit {
    zoomPercentage: number
    maxZoom: number
    minZoom: number
 
    constructor(
        private threeMapControlsService: ThreeMapControlsService,
        private cdr: ChangeDetectorRef
    ) {}
 
    ngOnInit() {
        this.maxZoom = this.threeMapControlsService.MAX_ZOOM
        this.minZoom = this.threeMapControlsService.MIN_ZOOM
 
        this.threeMapControlsService.zoomPercentage$.subscribe(zoom => {
            this.zoomPercentage = zoom
 
            // Manually mark the component for change detection to prevent
            // ExpressionChangedAfterItHasBeenCheckedError thrown by angular
            // https://angular.dev/errors/NG0100
            this.cdr.detectChanges()
        })
    }
 
    onInput(event: Event) {
        const inputElement = event.target as HTMLInputElement
        const newZoomPercentage = Number.parseFloat(inputElement.value)
 
        this.threeMapControlsService.setZoomPercentage(newZoomPercentage)
    }
 
    zoomIn() {
        this.threeMapControlsService.setZoomPercentage(Math.min(this.zoomPercentage + 10, this.maxZoom))
    }
 
    zoomOut() {
        this.threeMapControlsService.setZoomPercentage(Math.max(this.zoomPercentage - 10, this.minZoom))
    }
}