Skip to content
Permalink
Browse files
feat(resource): display region annotations in still images (DSP-1585) (
…#445)

* feat(resource): show region's metadata

* feat(resource): get regions in compound objects

* style(resource): clean up osd viewer

* fix(resource): do not zoom on click in osd
  • Loading branch information
kilchenmann committed May 26, 2021
1 parent c25280d commit 86e75b9fc540dde01590257d786fb65ee7af2c9c
@@ -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 {
}
@@ -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>
@@ -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 {
@@ -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);

@@ -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>

@@ -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;
Loading

0 comments on commit 86e75b9

Please sign in to comment.