fix: track bug for rose modes (#8248)

* fix: trackbug for rose modes

* fix bug placement

* fix lubber line placement in arc mode

* attempt to fix nd build

fbw-a32nx/src/systems/instruments/src/NDv2/ND.tsx

@@ -327,7 +327,7 @@ export class NDComponent extends DisplayComponent<NDProps> {
                     />
 
                     <TrackLine bus={this.props.bus} isUsingTrackUpMode={this.isUsingTrackUpMode} />
-                    <TrackBug bus={this.props.bus} isUsingTrackUpMode={this.isUsingTrackUpMode} />
+                    <TrackBug bus={this.props.bus} isUsingTrackUpMode={this.isUsingTrackUpMode} ndMode={this.currentPageMode} />
 
                     <WindIndicator bus={this.props.bus} />
                     <SpeedIndicator bus={this.props.bus} />

fbw-a32nx/src/systems/instruments/src/NDv2/config.json

@@ -0,0 +1,4 @@
+{
+  "index": "./instrument.tsx",
+  "isInteractive": false
+}

fbw-a32nx/src/systems/instruments/src/NDv2/pages/arc/LubberLine.tsx

@@ -1,10 +1,11 @@
 import { FSComponent, DisplayComponent, VNode, EventBus, Subscribable } from '@microsoft/msfs-sdk';
+import { EfisNdMode } from '@shared/NavigationDisplay';
 
 export interface LubberLineProps {
     bus: EventBus,
 
     visible: Subscribable<boolean>,
-
+    ndMode: Subscribable<EfisNdMode>,
     rotation: Subscribable<number>,
 }
 
@@ -19,19 +20,19 @@ export class LubberLine extends DisplayComponent<LubberLineProps> {
             >
                 <line
                     x1={384}
-                    y1={116}
+                    y1={this.props.ndMode.map((mode) => (mode === EfisNdMode.ARC ? 108 : 116))}
                     x2={384}
-                    y2={152}
+                    y2={this.props.ndMode.map((mode) => (mode === EfisNdMode.ARC ? 148 : 152))}
                     class="shadow"
                     stroke-width={5.5}
                     stroke-linejoin="round"
                     stroke-linecap="round"
                 />
                 <line
                     x1={384}
-                    y1={116}
+                    y1={this.props.ndMode.map((mode) => (mode === EfisNdMode.ARC ? 108 : 116))}
                     x2={384}
-                    y2={152}
+                    y2={this.props.ndMode.map((mode) => (mode === EfisNdMode.ARC ? 148 : 152))}
                     class="Yellow"
                     stroke-width={5}
                     stroke-linejoin="round"

fbw-a32nx/src/systems/instruments/src/NDv2/shared/Airplane.tsx

@@ -89,7 +89,7 @@ export class Airplane extends DisplayComponent<{ bus: EventBus, ndMode: Subscrib
                     />
                 </Layer>
 
-                <LubberLine bus={this.props.bus} visible={this.lubberVisibility} rotation={this.rotation} />
+                <LubberLine bus={this.props.bus} visible={this.lubberVisibility} rotation={this.rotation} ndMode={this.props.ndMode} />
             </>
         );
     }

fbw-a32nx/src/systems/instruments/src/NDv2/shared/TrackBug.tsx

@@ -3,6 +3,7 @@ import {
     DisplayComponent,
     EventBus,
     FSComponent,
+    MappedSubject,
     Subject,
     Subscribable,
     VNode,
@@ -17,6 +18,7 @@ import { FcuSimVars } from '../../MsfsAvionicsCommon/providers/FcuBusPublisher';
 export interface TrackBugProps {
     bus: EventBus,
     isUsingTrackUpMode: Subscribable<boolean>,
+    ndMode: Subscribable<EfisNdMode>,
 }
 
 export class TrackBug extends DisplayComponent<TrackBugProps> {
@@ -30,6 +32,10 @@ export class TrackBug extends DisplayComponent<TrackBugProps> {
 
     private readonly bugShown = Subject.create(false);
 
+    private readonly transformSubject = MappedSubject.create(([diff, ndMode]) => {
+        return `rotate(${diff} 384 ${ndMode === EfisNdMode.ARC ? 620 : 384})`;
+    }, this.diffSubject, this.props.ndMode);
+
     onAfterRender(node: VNode) {
         super.onAfterRender(node);
 
@@ -69,15 +75,15 @@ export class TrackBug extends DisplayComponent<TrackBugProps> {
         return (
             <g
                 visibility={this.bugShown.map((v) => (v ? 'inherit' : 'hidden'))}
-                transform={this.diffSubject.map((diff) => `rotate(${diff} 384 620)`)}
+                transform={this.transformSubject}
             >
                 <path
-                    d="M384,128 L378,138 L384,148 L390,138 L384,128"
+                    d={this.ndMode.map((ndMode) => (ndMode !== EfisNdMode.ARC ? 'M384,134 L379,143 L384,152 L389,143 L384,134' : 'M384,128 L378,138 L384,148 L390,138 L384,128'))}
                     class="rounded shadow"
                     stroke-width={4.5}
                 />
                 <path
-                    d="M384,128 L378,138 L384,148 L390,138 L384,128"
+                    d={this.ndMode.map((ndMode) => (ndMode !== EfisNdMode.ARC ? 'M384,134 L379,143 L384,152 L389,143 L384,134' : 'M384,128 L378,138 L384,148 L390,138 L384,128'))}
                     class="rounded Green"
                     stroke-width={3}
                 />