Skip to content

Commit

Permalink
Remove view child and viewchildren
Browse files Browse the repository at this point in the history
  • Loading branch information
HarelM committed Oct 6, 2024
1 parent e2e6182 commit b05407b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 46 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ViewChild, ElementRef, AfterViewInit, HostListener, inject } from "@angular/core";
import { Component, ElementRef, AfterViewInit, HostListener, inject, viewChild } from "@angular/core";
import {
MatDialogRef,
MatDialog,
Expand Down Expand Up @@ -51,8 +51,7 @@ export class PrivatePoiEditDialogComponent implements AfterViewInit {
public description: string;
public iconsGroups: IIconsGroup[] = [];

@ViewChild("titleInput")
public titleInput: ElementRef;
public titleInput = viewChild<ElementRef>("titleInput");

public readonly resources = inject(ResourcesService);

Expand Down Expand Up @@ -130,8 +129,8 @@ export class PrivatePoiEditDialogComponent implements AfterViewInit {
}

private focusTitle() {
if (this.titleInput && this.titleInput.nativeElement) {
this.titleInput.nativeElement.focus();
if (this.titleInput && this.titleInput().nativeElement) {
this.titleInput().nativeElement.focus();
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ViewChild, ViewEncapsulation, ViewChildren, QueryList, ElementRef, inject } from "@angular/core";
import { Component, ViewEncapsulation, ElementRef, inject, viewChild, viewChildren } from "@angular/core";
import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
import { MapComponent, CustomControl } from "@maplibre/ngx-maplibre-gl";
import { setRTLTextPlugin, StyleSpecification, ScaleControl, Unit, RasterDEMSourceSpecification, PointLike } from "maplibre-gl";
Expand All @@ -22,20 +22,11 @@ import type { ApplicationState, LocationState } from "../../models/models";
})
export class MainMapComponent {

@ViewChild(MapComponent)
public mapComponent: MapComponent;

@ViewChildren("topLeftControl", { read: ElementRef })
public topLeftControls: QueryList<ElementRef>;

@ViewChildren("topRightControl", { read: ElementRef })
public topRightControls: QueryList<ElementRef>;

@ViewChildren("bottomLeftControl", { read: ElementRef })
public bottomLeftControls: QueryList<ElementRef>;

@ViewChildren("bottomRightControl", { read: ElementRef })
public bottomRightControls: QueryList<ElementRef>;
public mapComponent = viewChild(MapComponent);
public topLeftControls = viewChildren("topLeftControl", { read: ElementRef });
public topRightControls = viewChildren("topRightControl", { read: ElementRef });
public bottomLeftControls = viewChildren("bottomLeftControl", { read: ElementRef });
public bottomRightControls = viewChildren("bottomRightControl", { read: ElementRef });

public location: LocationState;
public initialStyle: StyleSpecification;
Expand Down Expand Up @@ -101,37 +92,37 @@ export class MainMapComponent {
if (!e) {
return;
}
const centerLatLon = this.mapComponent.mapInstance.getCenter();
this.store.dispatch(new SetLocationAction(centerLatLon.lng, centerLatLon.lat, this.mapComponent.mapInstance.getZoom()));
const centerLatLon = this.mapComponent().mapInstance.getCenter();
this.store.dispatch(new SetLocationAction(centerLatLon.lng, centerLatLon.lat, this.mapComponent().mapInstance.getZoom()));
this.hashService.resetAddressbar();
}

public mapLoaded() {
setRTLTextPlugin("./mapbox-gl-rtl-text.js", false);

this.mapService.setMap(this.mapComponent.mapInstance);
this.mapService.setMap(this.mapComponent().mapInstance);

this.topLeftControls.forEach(c => {
this.mapComponent.mapInstance.addControl(new CustomControl(c.nativeElement), "top-left");
});
this.topRightControls.forEach(c => {
this.mapComponent.mapInstance.addControl(new CustomControl(c.nativeElement), "top-right");
});
this.mapComponent.mapInstance.addControl(new ScaleControl({ unit: "meter" as Unit}), "bottom-left");
this.bottomLeftControls.forEach(c => {
this.mapComponent.mapInstance.addControl(new CustomControl(c.nativeElement), "bottom-left");
});
this.bottomRightControls.forEach(c => {
this.mapComponent.mapInstance.addControl(new CustomControl(c.nativeElement), "bottom-right");
});
for (const c of this.topLeftControls()) {
this.mapComponent().mapInstance.addControl(new CustomControl(c.nativeElement), "top-left");
}
for (const c of this.topRightControls()) {
this.mapComponent().mapInstance.addControl(new CustomControl(c.nativeElement), "top-right");
}
this.mapComponent().mapInstance.addControl(new ScaleControl({ unit: "meter" as Unit}), "bottom-left");
for (const c of this.bottomLeftControls()) {
this.mapComponent().mapInstance.addControl(new CustomControl(c.nativeElement), "bottom-left");
}
for (const c of this.bottomRightControls()) {
this.mapComponent().mapInstance.addControl(new CustomControl(c.nativeElement), "bottom-right");
}

this.mapComponent.mapInstance.on("click", (e) => {
this.mapComponent().mapInstance.on("click", (e) => {
// This is used for the personal heatmap, assuming there's a layer there called "record_lines".
const bbox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5]
] as [PointLike, PointLike];
const features = this.mapComponent.mapInstance.queryRenderedFeatures(bbox).filter(f => f.sourceLayer === "record_lines");
const features = this.mapComponent().mapInstance.queryRenderedFeatures(bbox).filter(f => f.sourceLayer === "record_lines");
if (features.length <= 0) { return; }
this.dialog.open(TracesDialogComponent, { width: "480px", data: features.map(f => f.properties.trace_id) } as MatDialogConfig);
});
Expand All @@ -150,7 +141,7 @@ export class MainMapComponent {
}

public pitchChanged() {
const pitch = this.mapComponent.mapInstance.getPitch();
const pitch = this.mapComponent().mapInstance.getPitch();
if (pitch <= 10 && !this.isTerrainOn) {
// Terrain is off and pitch is low, nothing to do.
return;
Expand All @@ -164,7 +155,7 @@ export class MainMapComponent {
if (pitch <= 10 && this.isTerrainOn) {
// Terrain is on and pitch is low, turning off.
this.isTerrainOn = false;
this.mapComponent.mapInstance.setTerrain(null);
this.mapComponent().mapInstance.setTerrain(null);
return;
}

Expand All @@ -184,14 +175,13 @@ export class MainMapComponent {
minzoom:7
};
}
const currentSourceTerrain = this.mapComponent.mapInstance.getSource("terrain");
const currentSourceTerrain = this.mapComponent().mapInstance.getSource("terrain");
if (!currentSourceTerrain) {
this.mapComponent.mapInstance.addSource("terrain", source);
this.mapComponent().mapInstance.addSource("terrain", source);
} else if (currentSourceTerrain && currentSourceTerrain.serialize().url !== source.url) {
this.mapComponent.mapInstance.removeSource("terrain");
this.mapComponent.mapInstance.addSource("terrain", source);
this.mapComponent().mapInstance.removeSource("terrain");
this.mapComponent().mapInstance.addSource("terrain", source);
}
this.mapComponent.mapInstance.setTerrain({source: "terrain", exaggeration: 2});
this.mapComponent().mapInstance.setTerrain({source: "terrain", exaggeration: 2});
}

}

0 comments on commit b05407b

Please sign in to comment.