refactor: resource editor (DEV-4339)

libs/vre/shared/app-representations/src/lib/archive/archive.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { Component, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   Constants,
@@ -26,13 +26,10 @@ import { RepresentationService } from '../representation.service';
   templateUrl: './archive.component.html',
   styleUrls: ['./archive.component.scss'],
 })
-export class ArchiveComponent implements OnInit, AfterViewInit {
+export class ArchiveComponent implements OnChanges {
   @Input() src: FileRepresentation;
   @Input() attachedProject: ReadProject | undefined;
   @Input() parentResource: ReadResource;
-
-  @Output() loaded = new EventEmitter<boolean>();
-
   originalFilename: string;
 
   failedToLoad = false;
@@ -48,19 +45,17 @@ export class ArchiveComponent implements OnInit, AfterViewInit {
     private _rs: RepresentationService
   ) {}
 
-  ngOnInit(): void {
-    this._rs.getFileInfo(this.src.fileValue.fileUrl).subscribe(
-      res => {
-        this.originalFilename = res['originalFilename'];
-      },
-      () => {
-        this.failedToLoad = true;
-      }
-    );
-  }
-
-  ngAfterViewInit() {
-    this.loaded.emit(true);
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src']) {
+      this._rs.getFileInfo(this.src.fileValue.fileUrl).subscribe(
+        res => {
+          this.originalFilename = res['originalFilename'];
+        },
+        () => {
+          this.failedToLoad = true;
+        }
+      );
+    }
   }
 
   download(url: string) {

libs/vre/shared/app-representations/src/lib/audio/audio.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ReadResource } from '@dasch-swiss/dsp-js';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
@@ -20,8 +20,6 @@ export class AudioComponent implements OnChanges, OnDestroy {
   @Input({ required: true }) isAdmin!: boolean;
   @Input({ required: true }) parentResource!: ReadResource;
 
-  @Output() loaded = new EventEmitter<boolean>();
-
   originalFilename?: string;
   failedToLoad = false;
   audioFileUrl!: SafeUrl;

libs/vre/shared/app-representations/src/lib/document/document.component.ts

@@ -1,15 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Inject,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   Constants,
@@ -24,7 +14,6 @@ import {
 } from '@dasch-swiss/dsp-js';
 import { ResourceUtil } from '@dasch-swiss/vre/shared/app-common';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
-import { Store } from '@ngxs/store';
 import { PdfViewerComponent } from 'ng2-pdf-viewer';
 import { mergeMap } from 'rxjs/operators';
 import { FileRepresentation } from '../file-representation';
@@ -39,13 +28,11 @@ import { RepresentationService } from '../representation.service';
   templateUrl: './document.component.html',
   styleUrls: ['./document.component.scss'],
 })
-export class DocumentComponent implements OnInit, AfterViewInit {
+export class DocumentComponent implements OnChanges {
   @Input() src: FileRepresentation;
   @Input() parentResource: ReadResource;
   @Input() attachedProject: ReadProject | undefined;
 
-  @Output() loaded = new EventEmitter<boolean>();
-
   @ViewChild(PdfViewerComponent) private _pdfComponent: PdfViewerComponent;
 
   originalFilename: string;
@@ -70,29 +57,25 @@ export class DocumentComponent implements OnInit, AfterViewInit {
     private _dspApiConnection: KnoraApiConnection,
     private _dialog: MatDialog,
     private _rs: RepresentationService,
-    private _cd: ChangeDetectorRef,
-    private _store: Store
+    private _cd: ChangeDetectorRef
   ) {}
 
-  ngOnInit(): void {
-    this.fileType = this._getFileType(this.src.fileValue.filename);
-
-    this._rs.getFileInfo(this.src.fileValue.fileUrl).subscribe(
-      res => {
-        this.originalFilename = res['originalFilename'];
-      },
-      () => {
-        // error already handled by getFileInfo
-        this.failedToLoad = true;
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src'] && changes['src'].currentValue) {
+      this._rs.getFileInfo(this.src.fileValue.fileUrl).subscribe(
+        res => {
+          this.originalFilename = res['originalFilename'];
+        },
+        () => {
+          // error already handled by getFileInfo
+          this.failedToLoad = true;
+        }
+      );
+      this.fileType = this._getFileType(this.src.fileValue.filename);
+      if (this.fileType === 'pdf') {
+        this.elem = document.getElementsByClassName('pdf-viewer')[0];
       }
-    );
-  }
-
-  ngAfterViewInit() {
-    if (this.fileType === 'pdf') {
-      this.elem = document.getElementsByClassName('pdf-viewer')[0];
     }
-    this.loaded.emit(true);
   }
 
   searchQueryChanged(newQuery: string) {

libs/vre/shared/app-representations/src/lib/still-image/osd-drawer.service.ts

@@ -43,6 +43,10 @@ export class OsdDrawerService implements OnDestroy {
     this._subscribeToCreatedRectangle();
   }
 
+  update(resource: ReadResource): void {
+    this.resource = resource;
+  }
+
   private _subscribeToSelectedRegion() {
     this._regionService.selectedRegion$.pipe(takeUntil(this._ngUnsubscribe)).subscribe(region => {
       this._unhighlightAllRegions();

libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts

@@ -1,11 +1,12 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
+  OnChanges,
   OnDestroy,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core';
 import { Constants, ReadResource, ReadStillImageFileValue } from '@dasch-swiss/dsp-js';
@@ -41,7 +42,7 @@ import { StillImageHelper } from './still-image-helper';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [OsdDrawerService, OpenSeaDragonService],
 })
-export class StillImageComponent implements AfterViewInit, OnDestroy {
+export class StillImageComponent implements OnChanges, AfterViewInit, OnDestroy {
   @Input({ required: true }) compoundMode!: boolean;
   @Input({ required: true }) resource!: ReadResource;
   @ViewChild('osdViewer') osdViewerElement!: ElementRef;
@@ -51,28 +52,33 @@ export class StillImageComponent implements AfterViewInit, OnDestroy {
 
   constructor(
     protected osdService: OpenSeaDragonService,
-    private _osdDrawerService: OsdDrawerService,
-    private _cdr: ChangeDetectorRef
+    private _osdDrawerService: OsdDrawerService
   ) {}
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.isViewInitialized && changes['resource']) {
+      this._osdDrawerService.update(this.resource);
+      this._loadImage();
+    }
+  }
+
   ngAfterViewInit() {
     this.osdService.onInit(this.osdViewerElement.nativeElement);
     this._osdDrawerService.onInit(this.resource);
     this.isViewInitialized = true;
-    this._cdr.detectChanges();
-    this._loadImages();
+    this._loadImage();
   }
 
   afterFormatChange(value: boolean) {
     this.isPng = value;
-    this._loadImages();
+    this._loadImage();
   }
 
   ngOnDestroy() {
     this.osdService.viewer.destroy();
   }
 
-  private _loadImages() {
+  private _loadImage() {
     const image = this.resource.properties[Constants.HasStillImageFileValue][0];
 
     switch (image.type) {

libs/vre/shared/app-representations/src/lib/text/text.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { Component, Inject, Input, OnChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   Constants,
@@ -26,13 +26,11 @@ import { RepresentationService } from '../representation.service';
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss'],
 })
-export class TextComponent implements OnInit, AfterViewInit {
+export class TextComponent implements OnChanges {
   @Input() src: FileRepresentation;
   @Input() attachedProject: ReadProject | undefined;
   @Input() parentResource: ReadResource;
 
-  @Output() loaded = new EventEmitter<boolean>();
-
   originalFilename: string;
 
   failedToLoad = false;
@@ -48,7 +46,7 @@ export class TextComponent implements OnInit, AfterViewInit {
     private _rs: RepresentationService
   ) {}
 
-  ngOnInit(): void {
+  ngOnChanges(): void {
     this._rs.getFileInfo(this.src.fileValue.fileUrl).subscribe(
       res => {
         this.originalFilename = res['originalFilename'];
@@ -59,10 +57,6 @@ export class TextComponent implements OnInit, AfterViewInit {
     );
   }
 
-  ngAfterViewInit() {
-    this.loaded.emit(true);
-  }
-
   download(url: string) {
     this._rs.downloadFile(url);
   }

libs/vre/shared/app-resource-page/src/lib/annotation-tab.component.ts

@@ -53,7 +53,6 @@ export class AnnotationTabComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this._subscription.unsubscribe();
-    this.regionService.showRegions(false);
   }
 
   private _scrollToRegion(iri: string) {

libs/vre/shared/app-resource-page/src/lib/compound/compound-viewer.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DspResource } from '@dasch-swiss/vre/shared/app-common';
 import { CompoundService } from './compound.service';
 
 @Component({
   selector: 'app-compound-viewer',
   template: `
     <ng-container *ngIf="compoundService.compoundPosition">
-      <ng-container *ngIf="compoundService.incomingResource as incomingResource">
+      <ng-container *ngIf="compoundService.incomingResource$ | async as incomingResource">
         <app-still-image class="dsp-representation" [resource]="incomingResource.res" [compoundMode]="true" />
       </ng-container>
     </ng-container>

libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts

@@ -5,20 +5,19 @@ import { IncomingService } from '@dasch-swiss/vre/shared/app-common-to-move';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
 import { RegionService } from '@dasch-swiss/vre/shared/app-representations';
+import { BehaviorSubject } from 'rxjs';
 
 /**
  * Service to handle compound resources, which are resources that are composed of multiple resources.
  */
 @Injectable()
 export class CompoundService {
   compoundPosition?: DspCompoundPosition;
-  incomingResource?: DspResource;
 
-  private _resource!: DspResource;
+  private _incomingResource = new BehaviorSubject<DspResource | undefined>(undefined);
+  incomingResource$ = this._incomingResource.asObservable();
 
-  get exists() {
-    return this.compoundPosition !== undefined;
-  }
+  private _resource!: DspResource;
 
   constructor(
     @Inject(DspApiConnectionToken)
@@ -88,9 +87,7 @@ export class CompoundService {
   }
 
   private _reloadViewer(resource: DspResource) {
-    this.incomingResource = undefined;
-    this._cd.detectChanges();
-    this.incomingResource = resource;
+    this._incomingResource.next(resource);
     this._cd.detectChanges();
   }
 }

libs/vre/shared/app-resource-page/src/lib/resource-fetcher.component.ts

@@ -5,14 +5,13 @@ import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-resource-fetcher',
-  template: ' <app-resource *ngIf="resource" [resource]="resource" [isDifferentResource]="isDifferentResource" />',
+  template: ' <app-resource *ngIf="resource" [resource]="resource" />',
   providers: [ResourceFetcherService],
 })
 export class ResourceFetcherComponent implements OnChanges, OnDestroy {
   @Input({ required: true }) resourceIri!: string;
 
   resource?: DspResource;
-  isDifferentResource = true;
 
   private _subscription?: Subscription;
 
@@ -38,8 +37,6 @@ export class ResourceFetcherComponent implements OnChanges, OnDestroy {
         return;
       }
 
-      this.isDifferentResource = resource.res.id !== this.resource?.res.id;
-
       this._reloadEditor(resource);
     });
   }
@@ -51,8 +48,6 @@ export class ResourceFetcherComponent implements OnChanges, OnDestroy {
    * @private
    */
   private _reloadEditor(resource: DspResource) {
-    this.resource = undefined;
-    this._cdr.detectChanges();
     this.resource = resource;
     this._cdr.detectChanges();
   }