Skip to content

Commit

Permalink
chore: upgrade msfssdk to v0.7 (#8335)
Browse files Browse the repository at this point in the history 
* chore: bump msfssdk to 0.7

* fix: tspan hax

* fix: render vnodes

* fix: tidy up mapped subject and force layout with hidden class
  • Loading branch information
@tracernz
tracernz authored Jan 17, 2024
1 parent d67cd0d commit 87caf3b
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 72 deletions.
18 changes: 5 additions & 13 deletions fbw-a32nx/src/systems/instruments/src/EWD/FormattedFwcText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class FormattedFwcText extends DisplayComponent<FormattedFwcTextProps> {
this.linesRef.instance.innerHTML = '';
this.decorationRef.instance.innerHTML = '';

let spans: Node[] = [];
let spans: VNode[] = [];
let yOffset = 0;

let color = 'White';
Expand All @@ -36,11 +36,7 @@ export class FormattedFwcText extends DisplayComponent<FormattedFwcTextProps> {
if (char === '\x1b' || char === '\r') {
if (buffer !== '') {
// close current part
const s = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
s.setAttribute('key', buffer);
s.setAttribute('class', `${color} EWDWarn`);
s.textContent = buffer;
spans.push(s);
spans.push(<tspan key={buffer} class={{ [color]: true, EWDWarn: true }}>{buffer}</tspan>);
buffer = '';

if (underlined) {
Expand Down Expand Up @@ -135,7 +131,7 @@ export class FormattedFwcText extends DisplayComponent<FormattedFwcTextProps> {
e.setAttribute('x', this.props.x.toString());
e.setAttribute('y', (this.props.y + yOffset).toString());
spans.forEach((s) => {
e.appendChild(s);
FSComponent.render(s, e);
});
this.linesRef.instance.appendChild(e);
yOffset += LINE_SPACING;
Expand All @@ -152,19 +148,15 @@ export class FormattedFwcText extends DisplayComponent<FormattedFwcTextProps> {
}

if (buffer !== '') {
const s = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
s.setAttribute('key', buffer);
s.setAttribute('class', `${color} EWDWarn`);
s.textContent = buffer;
spans.push(s);
spans.push(<tspan key={buffer} class={{ [color]: true, EWDWarn: true }}>{buffer}</tspan>);
}

if (spans.length) {
const e = document.createElementNS('http://www.w3.org/2000/svg', 'text');
e.setAttribute('x', this.props.x.toString());
e.setAttribute('y', (this.props.y + yOffset).toString());
spans.forEach((s) => {
e.appendChild(s);
FSComponent.render(s, e);
});
this.linesRef.instance.appendChild(e);
yOffset += LINE_SPACING;
Expand Down
13 changes: 0 additions & 13 deletions fbw-a32nx/src/systems/instruments/src/ND/instrument.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,17 +174,4 @@ class A32NX_ND extends FsBaseInstrument<NDInstrument> {
}
}

// Hack to support tspan SVG elements, which FSComponent does not recognise as SVG

const original = document.createElement.bind(document);

const extraSvgTags = ['tspan'];

document.createElement = ((tagName, options) => {
if (extraSvgTags.includes(tagName)) {
return document.createElementNS('http://www.w3.org/2000/svg', tagName, options);
}
return original(tagName, options);
}) as any;

registerInstrument('a32nx-nd', A32NX_ND);
101 changes: 73 additions & 28 deletions fbw-a32nx/src/systems/instruments/src/PFD/FMA.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: GPL-3.0

import { ComponentProps, DisplayComponent, FSComponent, MappedSubject, Subject, Subscribable, VNode } from '@microsoft/msfs-sdk';
import { ComponentProps, ConsumerSubject, DisplayComponent, FSComponent, MappedSubject, Subject, Subscribable, SubscribableMapFunctions, VNode } from '@microsoft/msfs-sdk';
import { ArincEventBus, Arinc429Word, Arinc429RegisterSubject } from '@flybywiresim/fbw-sdk';

import { ArmedLateralMode, ArmedVerticalMode, isArmed, LateralMode, VerticalMode } from '@shared/autopilot';
Expand Down Expand Up @@ -705,9 +705,19 @@ class B1Cell extends ShowForSecondsComponent<CellProps> {

private fmaTextRef = FSComponent.createRef<SVGTextElement>();

private readonly verticalText = Subject.create('');

private readonly additionalText = Subject.create('');

private selectedVS = 0;

private inSpeedProtection = false;
private readonly apSpeedProtection = ConsumerSubject.create(null, false);

private readonly inSpeedProtection = MappedSubject.create(
([apSpeedProtection, activeVerticalMode]) => apSpeedProtection && (activeVerticalMode === 14 || activeVerticalMode === 15),
this.apSpeedProtection,
this.activeVerticalModeSub,
);

private fmaModeReversion = false;

Expand Down Expand Up @@ -815,7 +825,7 @@ class B1Cell extends ShowForSecondsComponent<CellProps> {
this.displayModeChangedPath(true);
}

const inSpeedProtection = this.inSpeedProtection && (this.activeVerticalModeSub.get() === 14 || this.activeVerticalModeSub.get() === 15);
const inSpeedProtection = this.inSpeedProtection.get();

if (inSpeedProtection || this.fmaModeReversion) {
this.boxClassSub.set('NormalStroke None');
Expand All @@ -838,7 +848,8 @@ class B1Cell extends ShowForSecondsComponent<CellProps> {

this.activeVerticalModeClassSub.set(smallFont ? 'FontMediumSmaller MiddleAlign Green' : 'FontMedium MiddleAlign Green');

this.fmaTextRef.instance.innerHTML = `<tspan>${text}</tspan><tspan xml:space="preserve" class=${inSpeedProtection ? 'PulseCyanFill' : 'Cyan'}>${additionalText}</tspan>`;
this.verticalText.set(text);
this.additionalText.set(additionalText);

return text.length > 0;
}
Expand Down Expand Up @@ -874,10 +885,8 @@ class B1Cell extends ShowForSecondsComponent<CellProps> {
this.getText();
});

sub.on('fmaSpeedProtection').whenChanged().handle((protection) => {
this.inSpeedProtection = protection;
this.getText();
});
this.apSpeedProtection.setConsumer(sub.on('fmaSpeedProtection'));
this.apSpeedProtection.sub(this.getText.bind(this));

sub.on('expediteMode').whenChanged().handle((e) => {
this.expediteMode = e;
Expand Down Expand Up @@ -905,9 +914,17 @@ class B1Cell extends ShowForSecondsComponent<CellProps> {
<path ref={this.inModeReversionPathRef} class="NormalStroke White BlinkInfinite" d="m35.756 1.8143h27.918v6.0476h-27.918z" />

<text ref={this.fmaTextRef} style="white-space: pre" class={this.activeVerticalModeClassSub} x="49.921795" y="7.1040988">

{/* set directly via innerhtml as tspan was invisble for some reason when set here */}

<tspan>{this.verticalText}</tspan>
<tspan
xml:space="preserve"
class={{
PulseCyanFill: this.inSpeedProtection,
Cyan: this.inSpeedProtection.map(SubscribableMapFunctions.not()),
}}
>
{this.additionalText}
</tspan>
`
</text>
</g>
);
Expand Down Expand Up @@ -1476,6 +1493,13 @@ class D1D2Cell extends ShowForSecondsComponent<CellProps> {
}
}

enum MdaMode {
None = '',
NoDh = 'NO DH',
Radio = 'RADIO',
Baro = 'BARO',
}

class D3Cell extends DisplayComponent<{bus: ArincEventBus}> {
private readonly textRef = FSComponent.createRef<SVGTextElement>();

Expand All @@ -1488,38 +1512,46 @@ class D3Cell extends DisplayComponent<{bus: ArincEventBus}> {

private readonly noDhSelected = this.fmEisDiscrete2.map((r) => r.bitValueOr(29, false));

private mdaMdhHtml = MappedSubject.create(
([mda, dh, noDhSelected]) => {
if (noDhSelected) {
return '<tspan>NO DH</tspan>';
private readonly mdaDhMode = MappedSubject.create(
([noDh, dh, mda]) => {
if (noDh) {
return MdaMode.NoDh;
}

if (!dh.isNoComputedData() && !dh.isFailureWarning()) {
const DHText = Math.round(dh.value).toString().padStart(4, ' ');
return `<tspan>RADIO</tspan><tspan class="Cyan" xml:space="preserve">${DHText}</tspan>`;
return MdaMode.Radio;
}

if (!mda.isNoComputedData() && !mda.isFailureWarning()) {
const MDAText = Math.round(mda.value).toString().padStart(6, ' ');
return `<tspan>BARO</tspan><tspan class="Cyan" xml:space="preserve">${MDAText}</tspan>`;
return MdaMode.Baro;
}

return '';
return MdaMode.None;
},
this.noDhSelected,
this.dh,
this.mda,
);

private readonly mdaDhValueText = MappedSubject.create(
([mdaMode, dh, mda]) => {
switch (mdaMode) {
case MdaMode.Baro:
return Math.round(mda.value).toString().padStart(6, ' ');
case MdaMode.Radio:
return Math.round(dh.value).toString().padStart(4, ' ');
default:
return '';
}
},
this.mdaDhMode,
this.dh,
this.noDhSelected,
this.mda,
);

onAfterRender(node: VNode): void {
super.onAfterRender(node);

this.mdaMdhHtml.sub((html) => this.textRef.instance.innerHTML = html);
this.noDhSelected.sub((noDh) => {
this.textRef.instance.classList.toggle('FontSmallest', !noDh);
this.textRef.instance.classList.toggle('FontMedium', noDh);
});

const sub = this.props.bus.getArincSubscriber<PFDSimvars & Arinc429Values>();

sub.on('fmEisDiscreteWord2Raw').handle(this.fmEisDiscrete2.setWord.bind(this.fmEisDiscrete2));
Expand All @@ -1529,7 +1561,20 @@ class D3Cell extends DisplayComponent<{bus: ArincEventBus}> {

render(): VNode {
return (
<text ref={this.textRef} class="FontSmallest MiddleAlign White" x="118.38384" y="21.104172" />
<text
ref={this.textRef}
class={{
FontSmallest: this.noDhSelected.map(SubscribableMapFunctions.not()),
FontMedium: this.noDhSelected,
MiddleAlign: true,
White: true,
}}
x="118.38384"
y="21.104172"
>
<tspan>{this.mdaDhMode}</tspan>
<tspan class={{ Cyan: true, HiddenElement: this.mdaDhValueText.map((v) => v.length <= 0) }} style="white-space: pre">{this.mdaDhValueText}</tspan>
</text>
);
}
}
Expand Down
13 changes: 0 additions & 13 deletions fbw-a32nx/src/systems/instruments/src/PFD/instrument.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,4 @@ class A32NX_PFD extends BaseInstrument {
}
}

// Hack to support tspan SVG elements, which FSComponent does not recognise as SVG

const original = document.createElement.bind(document);

const extraSvgTags = ['tspan'];

document.createElement = ((tagName, options) => {
if (extraSvgTags.includes(tagName)) {
return document.createElementNS('http://www.w3.org/2000/svg', tagName, options);
}
return original(tagName, options);
}) as any;

registerInstrument('a32nx-pfd', A32NX_PFD);
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@
"lodash": "^4.17.20",
"msfs-geo": "^0.1.0-alpha3",
"msfs-navdata": "^1.1.0",
"@microsoft/msfs-sdk": "^0.6.0",
"@microsoft/msfs-sdk": "^0.7.0",
"nanoid": "^3.3.1",
"network": "^0.6.1",
"qrcode.react": "^1.0.1",
Expand Down
8 changes: 4 additions & 4 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 87caf3b

Please sign in to comment.