WIP: landmark overlay on viewer works

WIP: on side-by-side mode, hiding landmarks & volume, lock inc volume

frontend/global.d.ts

@@ -45,8 +45,14 @@ declare namespace export_nehuba {
   }
 
   interface SliceView {
+    width: number
+    height: number
+    viewMatrix: mat4
     invViewMatrix: mat4
     centerDataPosition: vec3
+    viewChanged: {
+      add(callback: () => void): () => void
+    }
     navigationState: {
       pose: {
         orientation: {
@@ -74,6 +80,7 @@ declare namespace export_nehuba {
 
   class ManagedLayer {
     get layer(): any
+    setVisible(flag: boolean): void
   }
 
   interface NehubaViewer {

frontend/src/app/app.module.ts

@@ -9,6 +9,8 @@ import { StoreModule } from '@ngrx/store';
 import { reducers, metaReducers, effects } from 'src/state';
 import { EffectsModule } from '@ngrx/effects';
 import { SharedModule } from 'src/sharedModule/sharedModule';
+import { DEBOUNCED_WINDOW_RESIZE, SLICEVIEWS_INJECTION_TOKEN, SliceViewEvent, SliceViewProviderType, arrayEqual, sliceViewEvEql, sliceViewEvIncludes } from 'src/const';
+import { Subject, debounceTime, distinctUntilChanged, map, scan, shareReplay, throttleTime } from 'rxjs';
 
 @NgModule({
   declarations: [AppComponent],
@@ -23,7 +25,43 @@ import { SharedModule } from 'src/sharedModule/sharedModule';
     }),
     EffectsModule.forRoot(effects),
   ],
-  providers: [],
+  providers: [
+    {
+      provide: DEBOUNCED_WINDOW_RESIZE,
+      useFactory: () => {
+        const resizeSub = new Subject<UIEvent>()
+        window.addEventListener("resize", ev => {
+          resizeSub.next(ev)
+        })
+        return resizeSub.pipe(
+          debounceTime(160),
+          shareReplay(1),
+        )
+      }
+    },
+    {
+      provide: SLICEVIEWS_INJECTION_TOKEN,
+      useFactory: () => {
+        const obs = new Subject<SliceViewEvent>()
+        return {
+          register: obs.next.bind(obs),
+          observable: obs.pipe(
+            scan((acc, v) => {
+              if (sliceViewEvIncludes(v, acc)) {
+                return acc
+              }
+              return acc.concat(v)
+            }, [] as SliceViewEvent[]),
+            map(v => v.slice(0, 4)),
+            distinctUntilChanged(
+              (p, c) => arrayEqual(p, c, sliceViewEvEql)
+            ),
+            shareReplay(1),
+          )
+        } as SliceViewProviderType
+      }
+    }
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

frontend/src/const.ts

@@ -32,4 +32,26 @@ export function arrayEqual<T>(a: T[], b: T[], predicate: (a: T, b: T) => boolean
 
 export function isDefined<T>(v: T|null|undefined): v is T {
   return v !== null && typeof v !== 'undefined'
-} 
+} 
+
+export const DEBOUNCED_WINDOW_RESIZE = new InjectionToken<Observable<UIEvent>>("DEBOUNCED_WINDOW_RESIZE")
+
+export type SliceViewEvent = {
+  element: HTMLElement,
+  sliceview: export_nehuba.SliceView
+}
+
+export interface SliceViewProviderType {
+  observable: Observable<SliceViewEvent[]>
+  register: (ev: SliceViewEvent) => void
+}
+
+export const SLICEVIEWS_INJECTION_TOKEN = new InjectionToken<SliceViewProviderType>("SLICEVIEWS_INJECTION_TOKEN")
+
+export function sliceViewEvEql(a: SliceViewEvent, b: SliceViewEvent): boolean {
+  return a.element === b.element && a.sliceview === b.sliceview
+}
+
+export function sliceViewEvIncludes(ev: SliceViewEvent, list: SliceViewEvent[]): boolean {
+  return list.some(it => sliceViewEvEql(it, ev))
+}

frontend/src/landmarks/const.ts

@@ -1 +1,4 @@
 export { Landmark, LandmarkPair } from 'src/state/app/consts';
+
+export const INCOMING_LM_COLOR = "#ffff00"
+export const REF_LM_COLOR = "#ffffff"

frontend/src/landmarks/landmarks.module.ts

@@ -1,27 +1,24 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { ListviewComponent } from './listview/listview.component';
-import { MatTableModule } from '@angular/material/table';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { SharedModule } from 'src/sharedModule/sharedModule';
+import { OverlayComponent } from './overlay/overlay.component';
+import { OverlayPositionPipe } from './overlay/overlayPosition.pipe';
 
 @NgModule({
-  declarations: [ListviewComponent, ToolbarComponent],
+  declarations: [
+    ListviewComponent,
+    ToolbarComponent,
+    OverlayComponent,
+    OverlayPositionPipe
+  ],
   imports: [
     CommonModule,
-    MatTableModule,
-    MatIconModule,
-    MatButtonModule,
-    MatDividerModule,
     FormsModule,
-    MatInputModule,
-    MatFormFieldModule,
+    SharedModule,
   ],
-  exports: [ListviewComponent, ToolbarComponent],
+  exports: [ListviewComponent, ToolbarComponent, OverlayComponent],
 })
 export class LandmarksModule {}

frontend/src/landmarks/listview/listview.component.html

@@ -1,12 +1,4 @@
 <table mat-table [dataSource]="landmarkPair" [trackBy]="trackBy">
-
-  <ng-container matColumnDef="color">
-    <th mat-header-cell *matHeaderCellDef> Color </th>
-    <td mat-cell *matCellDef="let element">
-      <input type="color"
-        [value]="element.color"
-        (input)="onUpdateColor(element, $event)"></td>
-  </ng-container>
 
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef> Name </th>
@@ -28,19 +20,19 @@
   <ng-container matColumnDef="toTmpl">
     <th mat-header-cell *matHeaderCellDef> To Template </th>
     <td mat-cell *matCellDef="let element">
-      <button mat-icon-button [style.color]="element.color"
+      <button mat-icon-button [style.color]="REF_LM_COLOR"
         (click)="onClickLocation(element.tmplLm)">
-        <mat-icon fontIcon="location_on"></mat-icon>
+        <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
       </button>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="toInc">
     <th mat-header-cell *matHeaderCellDef> To Incoming </th>
     <td mat-cell *matCellDef="let element">
-      <button mat-icon-button [style.color]="element.color"
+      <button mat-icon-button [style.color]="INCOMING_LM_COLOR"
         (click)="onClickLocation(element.incLm)">
-        <mat-icon fontIcon="location_on"></mat-icon>
+        <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
       </button>
     </td>
   </ng-container>

frontend/src/landmarks/listview/listview.component.ts

@@ -4,7 +4,9 @@ import {
   Input,
   TrackByFunction,
 } from '@angular/core';
-import { LandmarkPair, Landmark } from '../const';
+import { LandmarkPair, Landmark, INCOMING_LM_COLOR, REF_LM_COLOR } from '../const';
+import { Store } from '@ngrx/store';
+import { actions } from 'src/state/app';
 
 @Component({
   selector: 'voluba-landmark-listview',
@@ -13,22 +15,34 @@ import { LandmarkPair, Landmark } from '../const';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListviewComponent {
+
+  INCOMING_LM_COLOR = INCOMING_LM_COLOR
+  REF_LM_COLOR = REF_LM_COLOR
+
   @Input()
   landmarkPair: LandmarkPair[] = [];
 
-  displayedColumns: string[] = ['color', 'name', 'toTmpl', 'toInc'];
+  displayedColumns: string[] = ['name', 'toTmpl', 'toInc'];
 
   public trackBy: TrackByFunction<LandmarkPair> = (
     _idx: number,
     landmarkPair: LandmarkPair
   ) => landmarkPair.id;
 
-  onUpdateColor(landmarkPair: LandmarkPair, inputEvent: Event) {
-    console.log(landmarkPair, (inputEvent.target as HTMLInputElement).value);
+  constructor(private store: Store){
+
   }
 
   onUpdateName(landmarkPair: LandmarkPair, inputEvent: Event) {
-    console.log(landmarkPair, (inputEvent.target as HTMLInputElement).value);
+    const { id } = landmarkPair
+    this.store.dispatch(
+      actions.updateLandmarkPair({
+        id,
+        value: {
+          name: (inputEvent.target as HTMLInputElement).value || ''
+        }
+      })
+    )
   }
 
   onClickLocation(landmark: Landmark) {

frontend/src/landmarks/overlay/overlay.component.html

@@ -0,0 +1,10 @@
+<ng-template [ngIf]="displayedLandmarks$ | async" let-displayedLandmarks>
+    <ng-template ngFor [ngForOf]="displayedLandmarks" let-displayedLandmark>
+        <div class="landmark-container"
+            [style.transform]="displayedLandmark.position | overlayPosition"
+            [style.color]="displayedLandmark.color">
+
+            <mat-icon class="position-icon" fontIcon="location_on"></mat-icon>
+        </div>
+    </ng-template>
+</ng-template>

frontend/src/landmarks/overlay/overlay.component.scss

@@ -0,0 +1,26 @@
+:host
+{
+    pointer-events: none;
+    position: relative;
+
+    > *
+    {
+        position: absolute;
+    }
+}
+
+.landmark-container
+{
+    display: inline-flex;
+    justify-content: center;
+    align-items: flex-end;
+    overflow: visible;
+    width: 0;
+    height: 0;
+
+    > *
+    {
+        color: inherit;
+        flex: 0 0 auto;
+    }
+}

frontend/src/landmarks/overlay/overlay.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverlayComponent } from './overlay.component';
+
+describe('OverlayComponent', () => {
+  let component: OverlayComponent;
+  let fixture: ComponentFixture<OverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OverlayComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});