feat(resource): display region annotations in still images (DSP-1585)

src/app/material-module.ts

@@ -3,6 +3,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 // material modules
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -23,8 +24,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -36,6 +37,7 @@ import { MatTreeModule } from '@angular/material/tree';
 const matModules = [
     DragDropModule,
     MatAutocompleteModule,
+    MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,
@@ -68,9 +70,9 @@ const matModules = [
 ];
 
 @NgModule({
-    imports: [ matModules ],
+    imports: [matModules],
 
-    exports: [ matModules ]
+    exports: [matModules]
 })
 export class MaterialModule {
 }

src/app/workspace/resource/representation/still-image/still-image.component.html

@@ -5,13 +5,13 @@
 
         <!-- openseadragon (osd) viewer -->
         <div class="osd-container">
-            <div class="action horizontal top">
+            <div class="action horizontal top overlay">
                 <!-- caption -->
-                <span class="overlay caption mat-caption">{{imageCaption}}</span>
+                <span class="caption mat-caption">{{imageCaption}}</span>
                 <span class="fill-remaining-space"></span>
                 <!-- image action tools e.g. zoom, rotate and flip -->
                 <!-- zoom buttons -->
-                <span class="overlay">
+                <span>
                     <button mat-icon-button id="DSP_OSD_ZOOM_OUT" matTooltip="Zoom out">
                         <mat-icon>remove_circle_outline</mat-icon>
                     </button>
@@ -44,8 +44,8 @@
             </div>
         </div>
         <!-- footer with image caption e.g. copyright information -->
-        <div class="navigation horizontal">
-            <span class="compound-nav" *ngIf="compoundNavigation">
+        <div class="navigation horizontal bottom" *ngIf="compoundNavigation">
+            <span class="compound-nav">
                 <button mat-icon-button [disabled]="compoundNavigation.page <= 1" matTooltip="First page"
                     (click)="goToPage.emit(1)">
                     <mat-icon>first_page</mat-icon>

src/app/workspace/resource/representation/still-image/still-image.component.scss

@@ -16,6 +16,13 @@ $bright: #ccc;
     height: 300px;
   }
 
+  .caption {
+    padding: 10px 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .action {
     z-index: 1;
     position: absolute;
@@ -24,15 +31,8 @@ $bright: #ccc;
     // background: rgba(200, 200, 200, 0.3);
     color: $bright;
 
-    .overlay {
+    &.overlay {
       background: rgba(0, 0, 0, 0.3);
-
-      &.caption {
-        padding: 10px 16px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     }
 
     &.vertical {

src/app/workspace/resource/representation/still-image/still-image.component.ts

@@ -252,6 +252,10 @@ export class StillImageComponent implements OnChanges, OnDestroy {
         };
         this._viewer = new OpenSeadragon.Viewer(osdOptions);
 
+        // do not zoom in on click
+        // https://github.com/openseadragon/openseadragon/issues/1115#issuecomment-275725918
+        this._viewer.zoomPerClick = 1;
+
         this._viewer.addHandler('full-screen', (args) => {
             if (args.fullScreen) {
                 viewerContainer.classList.add('fullscreen');
@@ -433,7 +437,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
         svgElement.setAttribute('style', 'stroke: ' + lineColor + '; stroke-width: ' + lineWidth + 'px;');
 
         // event when a region is clicked (output)
-        svgElement.addEventListener('click', () => {
+        svgElement.addEventListener('click', (event: MouseEvent) => {
             this.regionClicked.emit(regionIri);
         }, false);
 

src/app/workspace/resource/resource.component.html

@@ -8,14 +8,14 @@
             <app-still-image
                 [images]="representationsToDisplay"
                 [imageCaption]="(incomingResource ? resource.res.label + ': ' + incomingResource.res.label : resource.res.label)"
-                [compoundNavigation]="compoundPosition" (goToPage)="compoundNavigation($event)">
+                [compoundNavigation]="compoundPosition" (goToPage)="compoundNavigation($event)" (regionClicked)="openRegion($event)">
             </app-still-image>
             <!-- TODO: here we'll add more viewers and players dsp-moving-image, dsp-audio etc. -->
 
         </div>
 
         <!-- tabs -->
-        <mat-tab-group animationDuration="0ms">
+        <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
             <!-- first tab for the main resource e.g. book -->
             <mat-tab [label]="resource.res.entityInfo?.classes[resource.res.type].label">
                 <!-- dsp-property-toolbar with action buttons and project information -->
@@ -26,15 +26,17 @@
 
                 <!-- dsp-property-view -->
                 <app-resource-properties
-                    *ngIf="resource.resProps.length !== 0 || resource.systemProps.length !== 0; else noProperty"
+                    *ngIf="resource.resProps.length !== 0 || resource.systemProps.length !== 0; else noPropertyMain"
                     [parentResource]="resource.res" [propArray]="resource.resProps"
                     [systemPropArray]="resource.systemProps" [showAllProps]="showAllProps"
                     (referredResourceClicked)="openResource($event)">
                 </app-resource-properties>
 
-                <ng-template #noProperty>The resource {{resource?.res.resourceClassLabel}} has no defined
+                <ng-template #noPropertyMain>The resource {{resource?.res.resourceClassLabel}} has no defined
                     properties.</ng-template>
             </mat-tab>
+
+            <!-- incoming resource -->
             <mat-tab *ngIf="incomingResource"
                 [label]="incomingResource.res.entityInfo.classes[incomingResource.res.type].label">
                 <!-- dsp-property-toolbar with action buttons and project information -->
@@ -46,13 +48,40 @@
                 <!-- dsp-property-view -->
 
                 <app-resource-properties
-                    *ngIf="incomingResource.resProps.length !== 0 || incomingResource.systemProps.length !== 0; else noProperty"
+                    *ngIf="incomingResource.resProps.length !== 0 || incomingResource.systemProps.length !== 0; else noPropertyIncoming"
                     [parentResource]="incomingResource.res" [propArray]="incomingResource.resProps"
                     [systemPropArray]="incomingResource.systemProps" [showAllProps]="showAllProps"
                     (referredResourceClicked)="openResource($event)">
                 </app-resource-properties>
 
-                <!-- <ng-template #noProperty>The resource {{resource?.res.resourceClassLabel}} has no defined properties.</ng-template> -->
+                <ng-template #noPropertyIncoming>The resource {{resource?.res.resourceClassLabel}} has no defined properties.</ng-template>
+            </mat-tab>
+
+            <!-- annotations -->
+            <mat-tab *ngIf="representationsToDisplay" >
+                <ng-template matTabLabel class="annotations">
+                    <span [matBadge]="representationsToDisplay[0]?.regions.length" matBadgeColor="primary" matBadgeOverlap="false">
+                        Annotations
+                    </span>
+                </ng-template>
+                <div class="region-property" *ngFor="let annotation of annotationResources"
+                    [id]="annotation.res.id" [class.active]="annotation.res.id === selectedRegion">
+                    <!-- dsp-property-toolbar with action buttons and project information -->
+                    <app-resource-toolbar [resource]="annotation.res" [showAllProps]="showAllProps"
+                        (toggleProps)="showAllProps = !showAllProps" (referredProjectClicked)="openProject($event)">
+                    </app-resource-toolbar>
+
+                    <!-- dsp-property-view -->
+                    <app-resource-properties
+                    *ngIf="annotation.resProps.length !== 0 || annotation.systemProps.length !== 0; else noPropertyAnnotation"
+                    [parentResource]="annotation.res" [propArray]="annotation.resProps"
+                    [systemPropArray]="annotation.systemProps" [showAllProps]="showAllProps"
+                    (referredResourceClicked)="openResource($event)">
+                    </app-resource-properties>
+                    <ng-template #noPropertyAnnotation>The resource {{resource?.res.resourceClassLabel}} has no defined properties.</ng-template>
+                </div>
+
+
             </mat-tab>
         </mat-tab-group>
 

src/app/workspace/resource/resource.component.scss

@@ -1,8 +1,14 @@
+@import "../../../assets/style/config";
+
 .previousBtn {
   margin: 24px 48px;
   position: absolute;
 }
 
+.active {
+  border: 1px solid $primary_800;
+}
+
 @media (max-width: 1024px) {
   .previousBtn {
     margin: 12px auto 0 12px;