Basic NFS2 track support

frontend/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatMenuModule } from '@angular/material/menu';
 import { TriMapBlockUiComponent } from './components/editor/eac/tri-map.block-ui/tri-map.block-ui.component';
+import { TrkMapBlockUiComponent } from './components/editor/eac/trk-map.block-ui/trk-map.block-ui.component';
 import { RunCustomActionDialogComponent } from './components/run-custom-action.dialog/run-custom-action.dialog.component';
 import { OripGeometryBlockUiComponent } from './components/editor/eac/orip-geometry.block-ui/orip-geometry.block-ui.component';
 import { MinimapComponent } from './components/editor/common/minimap/minimap.component';
@@ -79,6 +80,7 @@ import { HexEditorModule } from 'ngx-hex-editor';
     FlagsBlockUiComponent,
     ConfirmDialogComponent,
     TriMapBlockUiComponent,
+    TrkMapBlockUiComponent,
     RunCustomActionDialogComponent,
     OripGeometryBlockUiComponent,
     MinimapComponent,

frontend/src/app/components/editor/eac/trk-map.block-ui/trk-map.block-ui.component.html

@@ -0,0 +1,30 @@
+<div class='qfsSelector'>
+  <h4>Preview QFS file</h4>
+  <mat-form-field appearance='fill'>
+    <mat-label>Custom QFS path</mat-label>
+    <input #customQfsInput matInput type='text' [value]='(previewQfsLocation$ | async)!'>
+  </mat-form-field>
+  <button mat-button (click)='onQfsSelected(customQfsInput.value)'>LOAD</button>
+  <mat-spinner *ngIf='previewQfsLoading$ | async' mode='indeterminate' [diameter]='40'></mat-spinner>
+</div>
+<div class='preview'>
+  <div class='previewCanvasContainer' #previewCanvasContainer>
+    <canvas #previewCanvas width='640' height='480'></canvas>
+    <mat-spinner *ngIf='previewLoading$ | async' mode='indeterminate'></mat-spinner>
+  </div>
+  <div class='previewNavigationContainer' #previewCanvasContainer>
+    <mat-form-field appearance='fill'>
+      <mat-label>Spline item</mat-label>
+      <input matInput type='number'
+             [min]='0' [max]='(_resource$ | async)?.data.num_blocks * 4 - 1'
+             [ngModel]='selectedSplineIndex$ | async'
+             (ngModelChange)='selectedSplineIndex$.next($event)'>
+    </mat-form-field>
+    <app-minimap [roadSpline]='roadPath || []'
+                 [pointer]='pointer$ | async'
+                 [splineClosed]='true'
+                 [projection]='"nz"'
+                 (pointerChange)='onPointerChange($event)'></app-minimap>
+  </div>
+</div>
+<app-compound-block-ui [resource]='_resource$ | async'></app-compound-block-ui>

frontend/src/app/components/editor/eac/trk-map.block-ui/trk-map.block-ui.component.scss

@@ -0,0 +1,52 @@
+.preview {
+  width: 100%;
+  height: calc(100vh - 14rem);
+  display: flex;
+  column-gap: 1rem;
+
+  .previewCanvasContainer {
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
+    margin: 0 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    canvas {
+      position: absolute;
+    }
+  }
+
+  .previewNavigationContainer {
+    width: 20rem;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+
+    app-minimap {
+      flex-grow: 1;
+      display: flex;
+    }
+  }
+
+}
+
+.qfsSelector {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  column-gap: 1rem;
+
+  h4 {
+    min-width: fit-content;
+  }
+
+  mat-form-field {
+    flex-grow: 1;
+  }
+
+  mat-spinner, button {
+    margin-bottom: 1.34375em;
+  }
+}