#379 planner signals

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

@@ -64,7 +64,7 @@ export class LocationMapService extends OpenlayersMapService {
     geoJson: string
   ): void {
     const parameters = signal<MainMapStyleParameters>(
-      new MainMapStyleParameters('analysis', true, surveyDateValues, null, null, null)
+      new MainMapStyleParameters('analysis', true, surveyDateValues, null, null)
     );
     const mainMapStyle = new MainMapStyle(parameters);
     const networkLayers = [

frontend/src/app/ol/style/main-map-route-style.ts

@@ -51,10 +51,8 @@ export class MainMapRouteStyle {
     resolution: number
   ): Style {
     const color = this.routeColor(parameters, feature);
-    const highligthed =
-      parameters.highlightedRouteId && feature.get('id').startsWith(parameters.highlightedRouteId);
     const proposed = feature.get('state') === 'proposed';
-    return this.routeStyleBuilder.style(color, resolution, highligthed, proposed);
+    return this.routeStyleBuilder.style(color, resolution, proposed);
   }
 
   private initRouteSelectedStyle(): Style {

frontend/src/app/ol/style/main-map-style-parameters.ts

@@ -7,7 +7,6 @@ export class MainMapStyleParameters {
     public showProposed: boolean,
     public surveyDateValues: SurveyDateValues,
     public selectedRouteId: string,
-    public selectedNodeId: string,
-    public highlightedRouteId: string
+    public selectedNodeId: string
   ) {}
 }

frontend/src/app/ol/style/network-nodes-map-style.ts

@@ -75,6 +75,6 @@ export class NetworkNodesMapStyle {
     const routeId = +featureId.substring(0, featureId.indexOf('-'));
     const routeColor = this.networkRouteIds.includes(routeId) ? green : gray;
     const proposed = feature.get('state') === 'proposed';
-    return this.routeStyle.style(routeColor, resolution, false, proposed);
+    return this.routeStyle.style(routeColor, resolution, proposed);
   }
 }

frontend/src/app/ol/style/node-map-style.ts

@@ -42,7 +42,7 @@ export class NodeMapStyle {
           return this.smallNodeStyle;
         }
 
-        return this.routeStyle.style(green, resolution, false, proposed);
+        return this.routeStyle.style(green, resolution, proposed);
       }
       return null;
     };

frontend/src/app/ol/style/route-style.ts

@@ -6,18 +6,14 @@ import { green } from './main-style-colors';
 export class RouteStyle {
   private defaultRouteStyle = this.initRouteStyle();
 
-  style(color: Color, resolution: number, highlighted: boolean, proposed: boolean): Style {
+  style(color: Color, resolution: number, proposed: boolean): Style {
     let width: number;
     if (resolution > /* zoomLevel 9 */ 305.75) {
       width = 1;
     } else if (resolution > /* zoomLevel 12 */ 38.219) {
       width = 2;
     } else {
-      if (highlighted) {
-        width = 8;
-      } else {
-        width = 4;
-      }
+      width = 4;
     }
 
     const stroke = this.defaultRouteStyle.getStroke();

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

@@ -1,4 +1,3 @@
-import { effect } from '@angular/core';
 import { computed } from '@angular/core';
 import { inject } from '@angular/core';
 import { Injectable } from '@angular/core';
@@ -21,18 +20,15 @@ import Overlay from 'ol/Overlay';
 import View from 'ol/View';
 import { SharedStateService } from '../../../shared/core/shared/shared-state.service';
 import { PlannerInteraction } from '../../domain/interaction/planner-interaction';
+import { PlannerMapLayerService } from './planner-map-layer.service';
+import { PlannerState } from './planner-state';
 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',
 })
 export class PlannerMapService extends OpenlayersMapService {
-  private readonly mapService = inject(MapService);
-
   private readonly plannerService = inject(PlannerService);
   private readonly poiService = inject(PoiService);
   private readonly mapZoomService = inject(MapZoomService);
@@ -58,8 +54,7 @@ export class PlannerMapService extends OpenlayersMapService {
       showProposed,
       surveyDateValues,
       selectedRouteId,
-      selectedNodeId,
-      this.mapService.highlightedRouteId()
+      selectedNodeId
     );
   });
 

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

@@ -19,18 +19,16 @@ import { RouterService } from '../../../shared/services/router.service';
 import { PlannerCommandAddPlan } from '../../domain/commands/planner-command-add-plan';
 import { PlanBuilder } from '../../domain/plan/plan-builder';
 import { PlanUtil } from '../../domain/plan/plan-util';
+import { PlannerMapService } from './planner-map.service';
 import { PlannerStateService } from './planner-state.service';
 import { PlannerService } from './planner.service';
-import { MapService } from './map.service';
-import { PlannerMapService } from './planner-map.service';
 
 @Injectable()
 export class PlannerPageService {
   private readonly plannerStateService = inject(PlannerStateService);
   private readonly plannerService = inject(PlannerService);
   private readonly plannerMapService = inject(PlannerMapService);
   private readonly pageService = inject(PageService);
-  private readonly mapService = inject(MapService);
   private readonly dialog = inject(MatDialog);
   private readonly apiService = inject(ApiService);
   private readonly sharedStateService = inject(SharedStateService);
@@ -130,7 +128,7 @@ export class PlannerPageService {
   geolocation(coordinate: Coordinate): void {
     this.plannerMapService.map.getView().setCenter(coordinate);
     let zoomLevel = 15;
-    if ('cycling' === this.mapService.networkType()) {
+    if ('cycling' === this.plannerStateService.networkType()) {
       zoomLevel = 13;
     }
     this.plannerMapService.map.getView().setZoom(zoomLevel);

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

@@ -1,9 +1,7 @@
 import { inject } from '@angular/core';
 import { Injectable } from '@angular/core';
-import { PlanRoute } from '@api/common/planner';
 import { PreferencesService } from '@app/core';
 import { ApiService } from '@app/services';
-import { List } from 'immutable';
 import Map from 'ol/Map';
 import { PlannerContext } from '../../domain/context/planner-context';
 import { PlannerCursorImpl } from '../../domain/context/planner-cursor-impl';
@@ -16,8 +14,6 @@ import { PlannerPopupService } from '../../domain/context/planner-popup-service'
 import { PlannerRouteLayerImpl } from '../../domain/context/planner-route-layer-impl';
 import { PlannerEngine } from '../../domain/interaction/planner-engine';
 import { PlannerEngineImpl } from '../../domain/interaction/planner-engine-impl';
-import { PlanUtil } from '../../domain/plan/plan-util';
-import { PlannerTranslations } from '../../util/planner-translations';
 
 @Injectable({
   providedIn: 'root',
@@ -55,17 +51,4 @@ export class PlannerService {
     this.highlightLayer.addToMap(map);
     this.plannerPopupService.addToMap(map);
   }
-
-  hasColour(planRoute: PlanRoute): boolean {
-    return planRoute.segments.filter((segment) => !!segment.colour).length > 0;
-  }
-
-  colours(planRoute: PlanRoute): string {
-    const colourValues = planRoute.segments
-      .filter((segment) => !!segment.colour)
-      .map((segment) => segment.colour);
-    const distinctColours = PlanUtil.distinctColours(List(colourValues));
-    const colourGroups = distinctColours.map((colour) => PlannerTranslations.colour(colour));
-    return colourGroups.join(' > ');
-  }
 }

frontend/src/app/planner/pages/planner/popup/planner-popup-contents.component.ts

@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy } from '@angular/core';
 import { inject } from '@angular/core';
 import { Component } from '@angular/core';
 import { PlannerPopupService } from '../../../domain/context/planner-popup-service';
-import { MapPopupRouteComponent } from './map-popup-route.component';
+import { PlannerPopupRouteComponent } from './planner-popup-route.component';
 import { PlannerPopupNodeComponent } from './planner-popup-node.component';
 import { PlannerPopupPoiComponent } from './planner-popup-poi.component';
 
@@ -24,7 +24,12 @@ import { PlannerPopupPoiComponent } from './planner-popup-poi.component';
     }
   `,
   standalone: true,
-  imports: [MapPopupRouteComponent, NgClass, PlannerPopupNodeComponent, PlannerPopupPoiComponent],
+  imports: [
+    PlannerPopupRouteComponent,
+    NgClass,
+    PlannerPopupNodeComponent,
+    PlannerPopupPoiComponent,
+  ],
 })
 export class PlannerPopupContentsComponent {
   protected readonly service = inject(PlannerPopupService);

frontend/src/app/planner/pages/planner/popup/planner-popup-node.component.ts

@@ -13,8 +13,8 @@ import { MapZoomService } from '@app/ol/services';
 import { ApiService } from '@app/services';
 import { Coordinate } from 'ol/coordinate';
 import { PlannerPopupService } from '../../../domain/context/planner-popup-service';
+import { PlannerStateService } from '../planner-state.service';
 import { PlannerService } from '../planner.service';
-import { MapService } from '../map.service';
 
 @Component({
   selector: 'kpn-planner-popup-node',
@@ -89,7 +89,7 @@ import { MapService } from '../map.service';
 export class PlannerPopupNodeComponent {
   private readonly service = inject(PlannerPopupService);
   private readonly apiService = inject(ApiService);
-  private readonly mapService = inject(MapService);
+  private readonly plannerStateService = inject(PlannerStateService);
   private readonly mapZoomService = inject(MapZoomService);
   private readonly plannerService = inject(PlannerService);
 
@@ -99,7 +99,7 @@ export class PlannerPopupNodeComponent {
     effect(() => {
       const nodeClick = this.service.nodeClick();
       if (nodeClick !== null) {
-        const networkType = this.mapService.networkType();
+        const networkType = this.plannerStateService.networkType();
         const nodeId = +nodeClick.node.node.nodeId;
         this.apiService.mapNodeDetail(networkType, nodeId).subscribe((response) => {
           this.response.set(response);

frontend/src/app/planner/pages/planner/popup/planner-popup-poi.component.ts

@@ -15,7 +15,6 @@ import { ActionButtonRelationComponent } from '../../../../analysis/components/a
 import { ActionButtonWayComponent } from '../../../../analysis/components/action/action-button-way.component';
 import { PlannerPopupService } from '../../../domain/context/planner-popup-service';
 import { PlannerService } from '../planner.service';
-import { MapService } from '../map.service';
 
 @Component({
   selector: 'kpn-planner-popup-poi',
@@ -74,7 +73,6 @@ export class PlannerPopupPoiComponent {
   private readonly service = inject(PlannerPopupService);
   private readonly apiService = inject(ApiService);
   private readonly plannerService = inject(PlannerService);
-  private readonly mapService = inject(MapService);
   protected readonly poiClick = this.service.poiClick;
 
   protected response = signal<ApiResponse<PoiPage>>(null);

frontend/src/app/planner/pages/planner/popup/map-popup-route.component.ts → frontend/src/app/planner/pages/planner/popup/planner-popup-route.component.ts

@@ -10,8 +10,8 @@ import { LinkRouteComponent } from '@app/components/shared/link';
 import { ApiService } from '@app/services';
 import { Coordinate } from 'ol/coordinate';
 import { PlannerPopupService } from '../../../domain/context/planner-popup-service';
+import { PlannerStateService } from '../planner-state.service';
 import { PlannerService } from '../planner.service';
-import { MapService } from '../map.service';
 
 @Component({
   selector: 'kpn-planner-popup-route',
@@ -65,14 +65,14 @@ import { MapService } from '../map.service';
   standalone: true,
   imports: [RouterLink, LinkRouteComponent],
 })
-export class MapPopupRouteComponent {
+export class PlannerPopupRouteComponent {
   private readonly service = inject(PlannerPopupService);
+  private readonly plannerStateService = inject(PlannerStateService);
   private readonly apiService = inject(ApiService);
-  private readonly mapService = inject(MapService);
   private readonly plannerService = inject(PlannerService);
 
   protected response = signal<ApiResponse<MapRouteDetail>>(null);
-  protected networkType = this.mapService.networkType;
+  protected networkType = this.plannerStateService.networkType;
 
   constructor() {
     effect(() => {

frontend/src/app/planner/pages/planner/sidebar/plan-compact.component.ts

@@ -1,10 +1,9 @@
-import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { Component } from '@angular/core';
 import { input } from '@angular/core';
 import { PlanRoute } from '@api/common/planner';
 import { Plan } from '../../../domain/plan/plan';
-import { PlannerService } from '../planner.service';
+import { PlanRouteColourUtil } from '../../../util/plan-route-colour-util';
 
 @Component({
   selector: 'kpn-plan-compact',
@@ -49,13 +48,11 @@ import { PlannerService } from '../planner.service';
 export class PlanCompactComponent {
   plan = input.required<Plan>();
 
-  private readonly plannerService = inject(PlannerService);
-
   hasColour(planRoute: PlanRoute): boolean {
-    return this.plannerService.hasColour(planRoute);
+    return PlanRouteColourUtil.hasColour(planRoute);
   }
 
   colours(planRoute: PlanRoute): string {
-    return this.plannerService.colours(planRoute);
+    return PlanRouteColourUtil.colours(planRoute);
   }
 }

frontend/src/app/planner/pages/planner/sidebar/plan-detailed.component.ts

@@ -1,10 +1,9 @@
-import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { Component } from '@angular/core';
 import { input } from '@angular/core';
 import { PlanRoute } from '@api/common/planner';
 import { Plan } from '../../../domain/plan/plan';
-import { PlannerService } from '../planner.service';
+import { PlanRouteColourUtil } from '../../../util/plan-route-colour-util';
 
 @Component({
   selector: 'kpn-plan-detailed',
@@ -111,13 +110,11 @@ import { PlannerService } from '../planner.service';
 export class PlanDetailedComponent {
   plan = input.required<Plan>();
 
-  private readonly plannerService = inject(PlannerService);
-
   hasColour(planRoute: PlanRoute): boolean {
-    return this.plannerService.hasColour(planRoute);
+    return PlanRouteColourUtil.hasColour(planRoute);
   }
 
   colours(planRoute: PlanRoute): string {
-    return this.plannerService.colours(planRoute);
+    return PlanRouteColourUtil.colours(planRoute);
   }
 }

frontend/src/app/planner/util/plan-route-colour-util.ts

@@ -0,0 +1,19 @@
+import { PlanRoute } from '@api/common/planner';
+import { List } from 'immutable';
+import { PlanUtil } from '../domain/plan/plan-util';
+import { PlannerTranslations } from './planner-translations';
+
+export class PlanRouteColourUtil {
+  static hasColour(planRoute: PlanRoute): boolean {
+    return planRoute.segments.filter((segment) => !!segment.colour).length > 0;
+  }
+
+  static colours(planRoute: PlanRoute): string {
+    const colourValues = planRoute.segments
+      .filter((segment) => !!segment.colour)
+      .map((segment) => segment.colour);
+    const distinctColours = PlanUtil.distinctColours(List(colourValues));
+    const colourGroups = distinctColours.map((colour) => PlannerTranslations.colour(colour));
+    return colourGroups.join(' > ');
+  }
+}