#379 planner signals

frontend/src/app/analysis/changes/changes-routes.ts

@@ -1,11 +1,9 @@
 import { Routes } from '@angular/router';
-import { ChangesService } from '@app/analysis/components/changes/filter';
 import { ChangesPageComponent } from './changes-page.component';
 
 export const changesRoutes: Routes = [
   {
     path: '',
-    providers: [ChangesService],
     children: [
       {
         path: '',

frontend/src/app/analysis/components/changes/filter/index.ts

@@ -1,4 +1,3 @@
-export * from './changes.service';
 export * from './month.component';
 export * from './change-filter-option';
 export * from './change-filter-options';

frontend/src/app/analysis/network/map/components/network-map.service.ts

@@ -1,3 +1,4 @@
+import { effect } from '@angular/core';
 import { inject } from '@angular/core';
 import { Injectable } from '@angular/core';
 import { NetworkMapPage } from '@api/common/network';
@@ -28,7 +29,27 @@ export class NetworkMapService extends OpenlayersMapService {
 
   private networkMapPositionKey = 'network-map-position';
 
+  networkId: number | null = null;
+
+  constructor() {
+    super();
+    effect(() => {
+      const mapPosition = this.mapPosition();
+      if (mapPosition && this.networkId) {
+        const networkMapPosition: NetworkMapPosition = {
+          networkId: this.networkId,
+          zoom: mapPosition.zoom,
+          x: mapPosition.x,
+          y: mapPosition.y,
+          rotation: mapPosition.rotation,
+        };
+        this.storage.set(this.networkMapPositionKey, JSON.stringify(networkMapPosition));
+      }
+    });
+  }
+
   init(networkId: number, page: NetworkMapPage, mapPositionFromUrl: NetworkMapPosition): void {
+    this.networkId = networkId;
     this.registerLayers(page);
 
     this.initMap(
@@ -61,19 +82,6 @@ export class NetworkMapService extends OpenlayersMapService {
       }
     }
 
-    this.mapPosition$.subscribe((mapPosition) => {
-      if (mapPosition) {
-        const networkMapPosition: NetworkMapPosition = {
-          networkId: networkId,
-          zoom: mapPosition.zoom,
-          x: mapPosition.x,
-          y: mapPosition.y,
-          rotation: mapPosition.rotation,
-        };
-        this.storage.set(this.networkMapPositionKey, JSON.stringify(networkMapPosition));
-      }
-    });
-
     this.mapZoomService.install(view);
     this.mapClickService.installOn(this.map);
 

frontend/src/app/ol/components/layer-switcher.component.ts

@@ -18,7 +18,7 @@ import { OpenlayersMapService } from '../services';
   template: `
     <mat-menu #mapMenu="matMenu" class="map-control-menu">
       <ng-template matMenuContent>
-        @if (layerStates$ | async; as layerStates) {
+        @if (layerStates(); as layerStates) {
           <div (click)="$event.stopPropagation()">
             @for (layerState of layerStates; track layerState) {
               <div [hidden]="!layerState.enabled">
@@ -62,7 +62,7 @@ import { OpenlayersMapService } from '../services';
 export class LayerSwitcherComponent {
   private readonly openlayersMapService: OpenlayersMapService = inject(MAP_SERVICE_TOKEN);
 
-  protected readonly layerStates$ = this.openlayersMapService.layerStates$;
+  protected readonly layerStates = this.openlayersMapService.layerStates;
   protected readonly osmLayerId = OsmLayer.id;
 
   layerVisibleChanged(layerState: MapLayerState, event: MatCheckboxChange): void {

frontend/src/app/ol/services/openlayers-map-service.ts

@@ -1,7 +1,9 @@
+import { signal } from '@angular/core';
 import { effect } from '@angular/core';
 import { Injectable } from '@angular/core';
 import { InjectionToken } from '@angular/core';
 import { inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import { Router } from '@angular/router';
 import { Params } from '@angular/router';
@@ -35,12 +37,15 @@ export abstract class OpenlayersMapService {
   private router = inject(Router);
   private activatedRoute = inject(ActivatedRoute);
   private shouldUpdateUrl = false;
-  private _layerStates$ = new BehaviorSubject<MapLayerState[]>([]);
+
+  private readonly _layerStates = signal<MapLayerState[]>([]);
+
   protected mapLayers: MapLayer[] = [];
-  public layerStates$ = this._layerStates$.asObservable();
+
+  readonly layerStates = this._layerStates.asReadonly();
 
   private _mapPosition$ = new BehaviorSubject<MapPosition | null>(null);
-  public mapPosition$ = this._mapPosition$.pipe(distinct(), debounceTime(50));
+  public mapPosition = toSignal(this._mapPosition$.pipe(distinct(), debounceTime(50)));
 
   private readonly pageService = inject(PageService);
   private readonly subscriptions = new Subscriptions();
@@ -54,6 +59,12 @@ export abstract class OpenlayersMapService {
     this.subscriptions.add(
       fromEvent(window, 'webkitfullscreenchange').subscribe(() => this.updateSize())
     );
+    effect(() => {
+      const mapPosition = this.mapPosition();
+      if (this.shouldUpdateUrl) {
+        this.updateUrl(mapPosition);
+      }
+    });
   }
 
   protected initMap(map: Map): void {
@@ -68,29 +79,14 @@ export abstract class OpenlayersMapService {
     view.on('change:center', this.updatePositionHandler);
     this.updatePositionHandler();
     this.updateLayerVisibility();
-    if (this.shouldUpdateUrl) {
-      this.subscriptions.add(
-        this.mapPosition$.subscribe((mapPosition) => {
-          this.updateUrl(mapPosition);
-        })
-      );
-    }
   }
 
   get map(): Map {
     return this._map;
   }
 
-  protected get layerStates(): MapLayerState[] {
-    return this._layerStates$.value;
-  }
-
   protected updateLayerStates(layerStates: MapLayerState[]) {
-    this._layerStates$.next(layerStates);
-  }
-
-  get mapPosition(): MapPosition {
-    return this._mapPosition$.value;
+    this._layerStates.set(layerStates);
   }
 
   protected get layers(): BaseLayer[] {
@@ -99,7 +95,7 @@ export abstract class OpenlayersMapService {
 
   protected register(registry: MapLayerRegistry): void {
     this.mapLayers = registry.layers;
-    this._layerStates$.next(registry.layerStates);
+    this._layerStates.set(registry.layerStates);
   }
 
   destroy(): void {
@@ -116,7 +112,7 @@ export abstract class OpenlayersMapService {
     const layerId = change.id;
     const visible = change.visible;
 
-    const mapLayerStates = this._layerStates$.value.map((layerState) => {
+    const mapLayerStates = this._layerStates().map((layerState) => {
       if (layerState.id == BackgroundLayer.id && layerId == OsmLayer.id && visible) {
         return {
           ...layerState,
@@ -138,7 +134,7 @@ export abstract class OpenlayersMapService {
       return layerState;
     });
 
-    this._layerStates$.next(mapLayerStates);
+    this._layerStates.set(mapLayerStates);
 
     this.updateLayerVisibility();
   }
@@ -158,9 +154,9 @@ export abstract class OpenlayersMapService {
   }
 
   protected layerVisible(mapLayer: MapLayer): boolean {
-    const mapLayerState = this.layerStates.find((layerState) => layerState.id === mapLayer.id);
+    const mapLayerState = this.layerStates().find((layerState) => layerState.id === mapLayer.id);
     if (mapLayerState) {
-      const zoom = this.mapPosition.zoom;
+      const zoom = this._mapPosition$.value.zoom;
       const zoomInRange = zoom >= mapLayer.minZoom && zoom <= mapLayer.maxZoom;
       const visible =
         zoomInRange &&

frontend/src/app/planner/pages/planner/planner-map.service.ts

@@ -1,3 +1,4 @@
+import { effect } from '@angular/core';
 import { computed } from '@angular/core';
 import { inject } from '@angular/core';
 import { Injectable } from '@angular/core';
@@ -18,14 +19,13 @@ import { Subscriptions } from '@app/util';
 import Map from 'ol/Map';
 import Overlay from 'ol/Overlay';
 import View from 'ol/View';
-import { skip } from 'rxjs';
 import { SharedStateService } from '../../../shared/core/shared/shared-state.service';
 import { PlannerInteraction } from '../../domain/interaction/planner-interaction';
-import { PlannerStateService } from '../../planner-state.service';
-import { PlannerService } from '../../planner.service';
-import { MapService } from '../../services/map.service';
-import { PlannerState } from '../../store/planner-state';
-import { PlannerMapLayerService } from '../planner-map-layer.service';
+import { PlannerStateService } from './planner-state.service';
+import { PlannerService } from './planner.service';
+import { MapService } from './map.service';
+import { PlannerState } from './planner-state';
+import { PlannerMapLayerService } from './planner-map-layer.service';
 
 @Injectable({
   providedIn: 'root',
@@ -65,6 +65,13 @@ export class PlannerMapService extends OpenlayersMapService {
 
   private subcriptions = new Subscriptions();
 
+  // constructor() {
+  //   super();
+  //   effect(() => {
+  //     this.plannerStateService.setLayerStates(this.layerStates());
+  //   });
+  // }
+
   init(state: PlannerState): void {
     const registry = this.plannerMapLayerService.registerLayers(
       state.networkType,
@@ -115,11 +122,6 @@ export class PlannerMapService extends OpenlayersMapService {
     //     .pipe(skip(1))
     //     .subscribe((mapPosition) => this.plannerStateService.setMapPosition(mapPosition))
     // );
-    this.subcriptions.add(
-      this.layerStates$
-        .pipe(skip(1))
-        .subscribe((layerStates) => this.plannerStateService.setLayerStates(layerStates))
-    );
   }
 
   setNetworkType(networkType: NetworkType): void {
@@ -139,7 +141,7 @@ export class PlannerMapService extends OpenlayersMapService {
 
   networkTypeChanged(networkType: NetworkType) {
     let changed = false;
-    const newLayerStates = this.layerStates.map((layerState) => {
+    const newLayerStates = this.layerStates().map((layerState) => {
       let enabled = layerState.enabled;
       const correspondingMapLayer = this.mapLayers.find(
         (mapLayer) => mapLayer.id === layerState.id
@@ -180,7 +182,9 @@ export class PlannerMapService extends OpenlayersMapService {
     this.updateLayerStates(newLayerStates);
     this.mapLayers.forEach((mapLayer) => {
       if (mapLayer.name === PoiTileLayerService.poiLayerId) {
-        const mapLayerState = this.layerStates.find((layerState) => layerState.id === mapLayer.id);
+        const mapLayerState = this.layerStates().find(
+          (layerState) => layerState.id === mapLayer.id
+        );
         if (mapLayerState) {
           mapLayer.layer.setVisible(mapLayerState.visible);
         }