feat: Great Circle predictor

src/app/app.config.ts

@@ -168,17 +168,23 @@ export function cleanConfig(
       laylines: false,
       selfLines: {
         cog: {
-          length: 10, // (minutes) length = cogLine * sog
+          lineLength: { kind: 'time', value: 10 },
           color: 'rgba(204, 12, 225, 0.7)',
           weight: 1,
           dash: 'none'
         },
         heading: {
-          length: -1, // mode for display of heading line -1 = default
+          lineLength: { kind: 'distance', value: 1 },
           color: 'rgba(221, 99, 0, 0.5)',
           weight: 4,
           dash: 'none'
-        }
+        },
+        greatCircleStyle: {
+          lineLength: { kind: 'distance', value: 0 },
+          color: '#0080ff',
+          weight: 1,
+          dash: 'long',
+        },
       },
       aisCogLine: 10,
       iconScale: 0.9,
@@ -198,6 +204,22 @@ export function cleanConfig(
         lastHour: '5s',
         next23: '1m',
         beyond24: '5m'
+      },
+      routing: {
+        activeRoute: { color: 'blue', weight: 4, dash: 'none' },
+        defaultRoute: { color: 'green', weight: 2, dash: 'long' },
+        activeSegment: { color: 'gray', weight: 1, dash: 'medium' },
+        destination: { color: 'rgba(221, 149, 0, 1)', weight: 2, dash: 'none' }
+      },
+      selfTrailStyle: {
+        color: 'rgb(252, 3, 132)',
+        weight: 1,
+        dash: 'short'
+      },
+      aisTrackStyle: {
+        color: 'rgb(255, 0, 255)',
+        weight: 1,
+        dash: 'short'
       }
     };
   } else {
@@ -214,23 +236,67 @@ export function cleanConfig(
       settings.vessels.rangeCirclesDistance = 1000;
     }
     if (typeof settings.vessels.selfLines === 'undefined') {
+      const oldCogLine = (settings as any).vessels.cogLine;
+      const oldHeadingSize = (settings as any).vessels.headingLineSize;
       settings.vessels.selfLines = {
         cog: {
-          length: (settings as any).vessels.cogLine ?? 10,
+          lineLength: { kind: 'time', value: oldCogLine ?? 10 },
           color: 'rgba(204, 12, 225, 0.7)',
           weight: 1,
           dash: 'none'
         },
         heading: {
-          length: (settings as any).vessels.headingLineSize ?? -1,
+          lineLength: {
+            kind: 'distance',
+            value: oldHeadingSize != null && oldHeadingSize > 0 ? oldHeadingSize : 1
+          },
           color: 'rgba(221, 99, 0, 0.5)',
           weight: 4,
           dash: 'none'
-        }
+        },
+        greatCircleStyle: {
+          color: '#0080ff',
+          weight: 1,
+          dash: 'long',
+          lineLength: { kind: 'distance', value: 0 }
+        },
       };
       // @todo remove (implemented) v2.22.2
       delete (settings as any).vessels.cogLine;
       delete (settings as any).vessels.headingLineSize;
+    } else if (typeof (settings.vessels.selfLines.cog as any).length !== 'undefined') {
+      // migrate from upstream v2.22 format (length:number) to lineLength:ILineLengthDef
+      const oldCog = (settings.vessels.selfLines.cog as any).length as number;
+      const oldHd = (settings.vessels.selfLines.heading as any).length as number;
+      settings.vessels.selfLines.cog.lineLength = { kind: 'time', value: oldCog ?? 10 };
+      settings.vessels.selfLines.heading.lineLength = {
+        kind: 'distance',
+        value: oldHd != null && oldHd > 0 ? oldHd : 1
+      };
+      delete (settings.vessels.selfLines.cog as any).length;
+      delete (settings.vessels.selfLines.heading as any).length;
+    }
+    if (typeof settings.vessels.routing === 'undefined') {
+      settings.vessels.routing = {
+        activeRoute: { color: 'blue', weight: 4, dash: 'none' },
+        defaultRoute: { color: 'green', weight: 2, dash: 'long' },
+        activeSegment: { color: 'gray', weight: 1, dash: 'medium' },
+        destination: { color: 'rgba(221, 149, 0, 1)', weight: 2, dash: 'none' }
+      };
+    }
+    if (typeof settings.vessels.selfTrailStyle === 'undefined') {
+      settings.vessels.selfTrailStyle = {
+        color: 'rgb(252, 3, 132)',
+        weight: 1,
+        dash: 'short'
+      };
+    }
+    if (typeof settings.vessels.aisTrackStyle === 'undefined') {
+      settings.vessels.aisTrackStyle = {
+        color: 'rgb(255, 0, 255)',
+        weight: 1,
+        dash: 'short'
+      };
     }
   }
 
@@ -448,17 +514,23 @@ export function defaultConfig(): IAppConfig {
       laylines: false,
       selfLines: {
         cog: {
-          length: 10, // (minutes) length = cogLine * sog
+          lineLength: { kind: 'time', value: 10 },
           color: 'rgba(204, 12, 225, 0.7)',
           weight: 1,
           dash: 'none'
         },
         heading: {
-          length: -1, // mode for display of heading line -1 = default
+          lineLength: { kind: 'distance', value: 1 },
           color: 'rgba(221, 99, 0, 0.5)',
           weight: 4,
           dash: 'none'
-        }
+        },
+        greatCircleStyle: {
+          color: '#0080ff',
+          weight: 1,
+          dash: 'long',
+          lineLength: { kind: 'distance', value: 0 }
+        },
       },
       aisCogLine: 10, // ais COG line time (mins)
       iconScale: 0.9,
@@ -479,6 +551,22 @@ export function defaultConfig(): IAppConfig {
         lastHour: '5s',
         next23: '1m',
         beyond24: '5m'
+      },
+      routing: {
+        activeRoute: { color: 'blue', weight: 4, dash: 'none' },
+        defaultRoute: { color: 'green', weight: 2, dash: 'long' },
+        activeSegment: { color: 'gray', weight: 1, dash: 'medium' },
+        destination: { color: 'rgba(221, 149, 0, 1)', weight: 2, dash: 'none' }
+      },
+      selfTrailStyle: {
+        color: 'rgb(252, 3, 132)',
+        weight: 1,
+        dash: 'short'
+      },
+      aisTrackStyle: {
+        color: 'rgb(255, 0, 255)',
+        weight: 1,
+        dash: 'short'
       }
     },
     resources: {

src/app/app.facade.ts

@@ -54,6 +54,7 @@ import {
   LineStyleDash,
   LineStyleDef
 } from './modules/settings/components/linestyle-select.component';
+import { lineDashFor, DASH_PATTERNS } from './modules/map/ol/lib/util';
 
 /** Parent Window message */
 interface ParentMessage {
@@ -385,24 +386,20 @@ export class AppFacade extends InfoService {
     this.doPostConfigLoad();
   }
 
-  // line dash style helpers
+  // line dash style helpers — SVG stroke-dasharray strings derived from DASH_PATTERNS
   get lineDashMap() {
-    return new Map([
-      ['none', 'none'],
-      ['short', '2 2'],
-      ['medium', '4 4'],
-      ['long', '8 4'],
-      ['alt', '8 4 2 4']
-    ]);
+    return new Map(
+      Object.entries(DASH_PATTERNS).map(([key, arr]) => [
+        key,
+        arr.length === 0 ? 'none' : arr.join(' ')
+      ])
+    );
   }
 
   // line dash style format helpers
-  formatLineDashArray(value: LineStyleDash): number[] | null {
-    return value === 'none'
-      ? null
-      : Array.from(this.lineDashMap.get(value))
-          .filter((i) => i !== ' ')
-          .map((i) => Number(i));
+  formatLineDashArray(value: LineStyleDash, weight = 1): number[] | null {
+    const arr = lineDashFor(value, weight);
+    return arr.length === 0 ? null : arr;
   }
 
   /** Initialise and raise "settings$.load" event */
@@ -425,7 +422,8 @@ export class AppFacade extends InfoService {
             color: this.config.vessels.selfLines.cog.color,
             width: this.config.vessels.selfLines.cog.weight,
             lineDash: this.formatLineDashArray(
-              this.config.vessels.selfLines.cog.dash
+              this.config.vessels.selfLines.cog.dash,
+              this.config.vessels.selfLines.cog.weight
             )
           }
         },
@@ -435,7 +433,8 @@ export class AppFacade extends InfoService {
             color: this.config.vessels.selfLines.heading.color,
             width: this.config.vessels.selfLines.heading.weight,
             lineDash: this.formatLineDashArray(
-              this.config.vessels.selfLines.heading.dash
+              this.config.vessels.selfLines.heading.dash,
+              this.config.vessels.selfLines.heading.weight
             )
           }
         }

src/app/modules/map/fb-map.component.html

@@ -222,6 +222,7 @@
       [updateIds]="skstream.aisStatus().updated"
       [removeIds]="skstream.aisStatus().expired"
       [mapZoom]="mapZoomLevel()"
+      [aisTrackStyle]="aisTrackStyleConfig"
       zIndex="110"
     >
     </ais-targets-track>
@@ -249,7 +250,7 @@
   <!-- Routes -->
   <fb-routes
     [routes]="skres.routes()"
-    [routeStyles]="featureStyles.route"
+    [routeStyles]="routeFeatureStyles"
     [activeRoute]="activeRoute"
     [darkMode]="app.uiConfig().invertColor"
     [labelMinZoom]="this.app.config.map.labelsMinZoom"
@@ -661,7 +662,9 @@
   @if (anchor.raised() && dfeat.navData.position) {
     @if (dfeat.navData.startPosition) {
       <fb-xte-path
-        [color]=""
+        [color]="app.config.vessels.routing.activeSegment.color"
+        [weight]="app.config.vessels.routing.activeSegment.weight"
+        [dash]="app.config.vessels.routing.activeSegment.dash"
         [startPosition]="dfeat.navData.startPosition"
         [destPosition]="dfeat.navData.position"
         [zIndex]="340"
@@ -696,7 +699,7 @@
         [vesselPosition]="dfeat.active.position"
         [showMarker]="!app.data.activeWaypoint"
         [markerName]="course.courseData().destPointName"
-        [bearingStyles]="featureStyles.destination"
+        [bearingStyles]="destinationFeatureStyles"
         [labelMinZoom]="this.app.config.map.labelsMinZoom"
         [mapZoom]="mapZoomLevel()"
         [zIndex]="335"
@@ -727,7 +730,7 @@
     </fb-range-circles>
   }
 
-  @if (app.config.vessels.selfLines.cog.length !== 0) {
+  @if (app.config.vessels.selfLines.cog.lineLength.value !== 0) {
     <fb-heading-line
       [coords]="vesselLines().heading"
       [lineStyle]="app.selfLines().heading"
@@ -737,10 +740,10 @@
     </fb-heading-line>
   }
 
-  @if (app.config.vessels.selfLines.cog.length !== 0) {
+  @if (app.config.vessels.selfLines.cog.lineLength.value !== 0) {
     <fb-cog-line
       [coords]="vesselLines().cog"
-      [cogTime]="app.config.vessels.selfLines.cog.length"
+      [cogTime]="app.config.vessels.selfLines.cog.lineLength.value"
       [lineStyle]="app.selfLines().cog"
       [units]="app.config.units.distance"
       [darkMode]="app.uiConfig().invertColor"
@@ -750,6 +753,14 @@
     >
     </fb-cog-line>
   }
+  @if (showGreatCircle) {
+    <fb-great-circle
+      [coords]="greatCircleArc()"
+      [lineStyle]="app.config.vessels.selfLines.greatCircleStyle"
+      [zIndex]="344"
+    >
+    </fb-great-circle>
+  }
   @if (app.config.vessels.windVectors) {
     <fb-wind-lines
       [twd]="this.dfeat.active.wind.direction"
@@ -779,6 +790,7 @@
       [localTrail]="app.selfTrail()"
       [serverTrail]="app.selfTrailFromServer()"
       [trailStyles]=""
+      [selfTrailStyle]="selfTrailStyleConfig"
       [zIndex]="990"
     >
     </fb-vessel-trail>