All files / app/codeCharta/ui/viewCube/zoomSlider zoomSlider.component.ts

100% Statements 16/16
100% Branches 0/0
100% Functions 6/6
100% Lines 15/15

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 504x 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))
    }
}