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