@knora/viewer
Version:
Knora ui module: viewer
1,048 lines (1,022 loc) • 105 kB
JavaScript
import { __decorate, __metadata, __values, __extends, __param } from 'tslib';
import { Component, EventEmitter, ElementRef, Input, Output, HostListener, Inject, ViewChild, NgModule } from '@angular/core';
import { Constants, Point2D, ReadBooleanValue, ReadColorValue, KnoraPeriod, Precision, ReadDateValue, ReadDecimalValue, ReadGeomValue, ReadIntValue, ReadIntervalValue, ReadLinkValue, ReadListValue, ReadTextValueAsHtml, ReadTextValueAsString, ReadTextValueAsXml, ReadFileValue, ReadUriValue, ResourcePropertyDefinition, KnoraApiConnection } from '@knora/api';
import { OntologyInformation, KnoraApiConnectionToken, SearchParamsService, KuiCoreModule } from '@knora/core';
import { Router, ActivatedRoute } from '@angular/router';
import { PageEvent, MatMenuModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { KuiActionModule } from '@knora/action';
var MovingImageComponent = /** @class */ (function () {
function MovingImageComponent() {
}
MovingImageComponent.prototype.ngOnInit = function () {
};
MovingImageComponent = __decorate([
Component({
selector: 'kui-moving-image',
template: "<!-- video container -->\n<div class=\"moving-image-viewer\">\n\n <!-- video source -->\n <video></video>\n\n <!-- timeline incl. preview -->\n <div class=\"kui-mi-timeline\">\n\n </div>\n <div class=\"kui-mi-navigation\">\n\n\n </div>\n\n</div>\n",
styles: [""]
}),
__metadata("design:paramtypes", [])
], MovingImageComponent);
return MovingImageComponent;
}());
/**
* Represents a region.
* Contains a reference to the resource representing the region and its geometries.
*/
var ImageRegion = /** @class */ (function () {
/**
*
* @param regionResource a resource of type Region
*/
function ImageRegion(regionResource) {
this.regionResource = regionResource;
}
/**
* Get all geometry information belonging to this region.
*
* @returns
*/
ImageRegion.prototype.getGeometries = function () {
return this.regionResource.properties[Constants.HasGeometry];
};
return ImageRegion;
}());
/**
* Represents an image including its regions.
*/
var StillImageRepresentation = /** @class */ (function () {
/**
*
* @param stillImageFileValue a [[ReadStillImageFileValue]] representing an image.
* @param regions the regions belonging to the image.
*/
function StillImageRepresentation(stillImageFileValue, regions) {
this.stillImageFileValue = stillImageFileValue;
this.regions = regions;
}
return StillImageRepresentation;
}());
/**
* Represents a geometry belonging to a specific region.
*/
var GeometryForRegion = /** @class */ (function () {
/**
*
* @param geometry the geometrical information.
* @param region the region the geometry belongs to.
*/
function GeometryForRegion(geometry, region) {
this.geometry = geometry;
this.region = region;
}
return GeometryForRegion;
}());
/**
* This component creates a OpenSeadragon viewer instance.
* Accepts an array of ReadResource containing (among other resources) ReadStillImageFileValues to be rendered.
* @member resources - resources containing (among other resources) the StillImageFileValues and incoming regions to be rendered. (Use as angular @Input data binding property.)
*/
var StillImageComponent = /** @class */ (function () {
function StillImageComponent(elementRef) {
this.elementRef = elementRef;
this.currentImageIndex = new EventEmitter();
this.regionHovered = new EventEmitter();
this.regions = {};
}
StillImageComponent_1 = StillImageComponent;
/**
* Calculates the surface of a rectangular region.
*
* @param geom the region's geometry.
* @returns the surface.
*/
StillImageComponent.surfaceOfRectangularRegion = function (geom) {
if (geom.type !== 'rectangle') {
console.log('expected rectangular region, but ' + geom.type + ' given');
return 0;
}
var w = Math.max(geom.points[0].x, geom.points[1].x) - Math.min(geom.points[0].x, geom.points[1].x);
var h = Math.max(geom.points[0].y, geom.points[1].y) - Math.min(geom.points[0].y, geom.points[1].y);
return w * h;
};
/**
* Prepare tile sources from the given sequence of [[ReadStillImageFileValue]].
*
* @param imagesToDisplay the given file values to de displayed.
* @returns the tile sources to be passed to OSD viewer.
*/
StillImageComponent.prepareTileSourcesFromFileValues = function (imagesToDisplay) {
var e_1, _a;
var imageXOffset = 0;
var imageYOffset = 0;
var tileSources = [];
try {
for (var imagesToDisplay_1 = __values(imagesToDisplay), imagesToDisplay_1_1 = imagesToDisplay_1.next(); !imagesToDisplay_1_1.done; imagesToDisplay_1_1 = imagesToDisplay_1.next()) {
var image = imagesToDisplay_1_1.value;
var sipiBasePath = image.iiifBaseUrl + '/' + image.filename;
var width = image.dimX;
var height = image.dimY;
// construct OpenSeadragon tileSources according to https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open
tileSources.push({
// construct IIIF tileSource configuration according to
// http://iiif.io/api/image/2.1/#technical-properties
// see also http://iiif.io/api/image/2.0/#a-implementation-notes
'tileSource': {
'@context': 'http://iiif.io/api/image/2/context.json',
'@id': sipiBasePath,
'height': height,
'width': width,
'profile': ['http://iiif.io/api/image/2/level2.json'],
'protocol': 'http://iiif.io/api/image',
'tiles': [{
'scaleFactors': [1, 2, 4, 8, 16, 32],
'width': 1024
}]
},
'x': imageXOffset,
'y': imageYOffset
});
imageXOffset++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (imagesToDisplay_1_1 && !imagesToDisplay_1_1.done && (_a = imagesToDisplay_1.return)) _a.call(imagesToDisplay_1);
}
finally { if (e_1) throw e_1.error; }
}
return tileSources;
};
StillImageComponent.prototype.ngOnChanges = function (changes) {
if (changes['images'] && changes['images'].isFirstChange()) {
this.setupViewer();
// this.currentImageIri.emit(this.images[this.viewer.currentPage()].stillImageFileValue.id);
}
if (changes['images']) {
this.openImages();
this.renderRegions();
this.unhighlightAllRegions();
if (this.activateRegion !== undefined) {
this.highlightRegion(this.activateRegion);
}
}
else if (changes['activateRegion']) {
this.unhighlightAllRegions();
if (this.activateRegion !== undefined) {
this.highlightRegion(this.activateRegion);
}
}
if (this.viewer) {
// console.log(this.viewer);
// this.currentImageIndex.emit(this.viewer.currentPage());
}
};
StillImageComponent.prototype.ngOnInit = function () {
// initialisation is done on first run of ngOnChanges
};
StillImageComponent.prototype.ngOnDestroy = function () {
if (this.viewer) {
this.viewer.destroy();
this.viewer = undefined;
}
};
/**
* Renders all ReadStillImageFileValues to be found in [[this.images]].
* (Although this.images is a Angular Input property, the built-in change detection of Angular does not detect changes in complex objects or arrays, only reassignment of objects/arrays.
* Use this method if additional ReadStillImageFileValues were added to this.images after creation/assignment of the this.images array.)
*/
StillImageComponent.prototype.updateImages = function () {
if (!this.viewer) {
this.setupViewer();
}
this.openImages();
};
/**
* Renders all regions to be found in [[this.images]].
* (Although this.images is a Angular Input property, the built-in change detection of Angular does not detect changes in complex objects or arrays, only reassignment of objects/arrays.
* Use this method if additional regions were added to the resources.images)
*/
StillImageComponent.prototype.updateRegions = function () {
if (!this.viewer) {
this.setupViewer();
}
this.renderRegions();
};
/**
* Highlights the polygon elements associated with the given region.
*
* @param regionIri the Iri of the region whose polygon elements should be highlighted..
*/
StillImageComponent.prototype.highlightRegion = function (regionIri) {
var e_2, _a;
var activeRegion = this.regions[regionIri];
if (activeRegion !== undefined) {
try {
for (var activeRegion_1 = __values(activeRegion), activeRegion_1_1 = activeRegion_1.next(); !activeRegion_1_1.done; activeRegion_1_1 = activeRegion_1.next()) {
var pol = activeRegion_1_1.value;
pol.setAttribute('class', 'roi-svgoverlay active');
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (activeRegion_1_1 && !activeRegion_1_1.done && (_a = activeRegion_1.return)) _a.call(activeRegion_1);
}
finally { if (e_2) throw e_2.error; }
}
}
};
/**
* Unhighlights the polygon elements of all regions.
*
*/
StillImageComponent.prototype.unhighlightAllRegions = function () {
var e_3, _a;
for (var reg in this.regions) {
if (this.regions.hasOwnProperty(reg)) {
try {
for (var _b = __values(this.regions[reg]), _c = _b.next(); !_c.done; _c = _b.next()) {
var pol = _c.value;
pol.setAttribute('class', 'roi-svgoverlay');
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
}
}
};
/**
* Initializes the OpenSeadragon viewer
*/
StillImageComponent.prototype.setupViewer = function () {
var viewerContainer = this.elementRef.nativeElement.getElementsByClassName('osd-container')[0];
var osdOptions = {
element: viewerContainer,
sequenceMode: true,
showReferenceStrip: true,
showNavigator: true,
zoomInButton: 'KUI_OSD_ZOOM_IN',
zoomOutButton: 'KUI_OSD_ZOOM_OUT',
previousButton: 'KUI_OSD_PREV_PAGE',
nextButton: 'KUI_OSD_NEXT_PAGE',
homeButton: 'KUI_OSD_HOME',
fullPageButton: 'KUI_OSD_FULL_PAGE',
rotateLeftButton: 'KUI_OSD_ROTATE_LEFT',
rotateRightButton: 'KUI_OSD_ROTATE_RIGHT' // doesn't work yet
};
this.viewer = new OpenSeadragon.Viewer(osdOptions);
this.viewer.addHandler('full-screen', function (args) {
if (args.fullScreen) {
viewerContainer.classList.add('fullscreen');
}
else {
viewerContainer.classList.remove('fullscreen');
}
});
this.viewer.addHandler('resize', function (args) {
args.eventSource.svgOverlay().resize();
});
var fileValues = this.images.map(function (img) {
return img;
});
this.viewer.addHandler('page', function (event) {
console.log('event on page', event);
console.log('Now on page', event.page);
var index = event.page;
console.log('= id', fileValues[index].id);
var id = fileValues[index].id;
// return id;
});
//
// this.currentImageIri.emit(this.viewer.getCurrentImage());
};
/**
* Adds all images in this.images to the viewer.
* Images are positioned in a horizontal row next to each other.
*/
StillImageComponent.prototype.openImages = function () {
// imageXOffset controls the x coordinate of the left side of each image in the OpenSeadragon viewport coordinate system.
// The first image has its left side at x = 0, and all images are scaled to have a width of 1 in viewport coordinates.
// see also: https://openseadragon.github.io/examples/viewport-coordinates/
var fileValues = this.images.map(function (img) {
return img;
});
// display only the defined range of this.images
var tileSources = StillImageComponent_1.prepareTileSourcesFromFileValues(fileValues);
this.removeOverlays();
this.viewer.open(tileSources);
};
/**
* Removes SVG overlays from the DOM.
*/
StillImageComponent.prototype.removeOverlays = function () {
var e_4, _a;
for (var reg in this.regions) {
if (this.regions.hasOwnProperty(reg)) {
try {
for (var _b = __values(this.regions[reg]), _c = _b.next(); !_c.done; _c = _b.next()) {
var pol = _c.value;
if (pol instanceof SVGPolygonElement) {
pol.remove();
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
}
}
this.regions = {};
// TODO: make this work by using osdviewer's addOverlay method
this.viewer.clearOverlays();
};
/**
* Adds a ROI-overlay to the viewer for every region of every image in this.images
*/
StillImageComponent.prototype.renderRegions = function () {
var e_5, _a;
this.removeOverlays();
var imageXOffset = 0; // see documentation in this.openImages() for the usage of imageXOffset
try {
for (var _b = __values(this.images), _c = _b.next(); !_c.done; _c = _b.next()) {
var image = _c.value;
var aspectRatio = (image.dimY / image.dimX);
// collect all geometries belonging to this page
var geometries = [];
/* TODO: knora-api-js-lib integration needs another region handling?
image.regions.map((reg) => {
this.regions[reg.regionResource.id] = [];
const geoms = reg.getGeometries();
geoms.map((geom) => {
const geomForReg = new GeometryForRegion(geom.geometry, reg.regionResource);
geometries.push(geomForReg);
});
});
// sort all geometries belonging to this page
geometries.sort((geom1, geom2) => {
if (geom1.geometry.type === 'rectangle' && geom2.geometry.type === 'rectangle') {
const surf1 = StillImageComponent.surfaceOfRectangularRegion(geom1.geometry);
const surf2 = StillImageComponent.surfaceOfRectangularRegion(geom2.geometry);
// if reg1 is smaller than reg2, return 1
// reg1 then comes after reg2 and thus is rendered later
if (surf1 < surf2) {
return 1;
} else {
return -1;
}
} else {
return 0;
}
});
// render all geometries for this page
for (const geom of geometries) {
const geometry = geom.geometry;
this.createSVGOverlay(geom.region.id, geometry, aspectRatio, imageXOffset, geom.region.label);
}
*/
imageXOffset++;
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_5) throw e_5.error; }
}
};
/**
* Creates and adds a ROI-overlay to the viewer
* @param regionIri the Iri of the region.
* @param geometry - the geometry describing the ROI
* @param aspectRatio - the aspectRatio (h/w) of the image on which the geometry should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the geometry should be placed
* @param toolTip - the tooltip which should be displayed on mousehover of the svg element
*/
StillImageComponent.prototype.createSVGOverlay = function (regionIri, geometry, aspectRatio, xOffset, toolTip) {
var _this = this;
var lineColor = geometry.lineColor;
var lineWidth = geometry.lineWidth;
var svgElement;
switch (geometry.type) {
case 'rectangle':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); // yes, we render rectangles as svg polygon elements
this.addSVGAttributesRectangle(svgElement, geometry, aspectRatio, xOffset);
break;
case 'polygon':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
this.addSVGAttributesPolygon(svgElement, geometry, aspectRatio, xOffset);
break;
case 'circle':
svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.addSVGAttributesCircle(svgElement, geometry, aspectRatio, xOffset);
break;
default:
console.log('ERROR: StillImageOSDViewerComponent.createSVGOverlay: unknown geometryType: ' + geometry.type);
return;
}
svgElement.id = 'roi-svgoverlay-' + Math.random() * 10000;
svgElement.setAttribute('class', 'roi-svgoverlay');
svgElement.setAttribute('style', 'stroke: ' + lineColor + '; stroke-width: ' + lineWidth + 'px;');
// event when a region is clicked (output)
svgElement.addEventListener('click', function () {
_this.regionHovered.emit(regionIri);
}, false);
var svgTitle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
svgTitle.textContent = toolTip;
var svgGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
svgGroup.appendChild(svgTitle);
svgGroup.appendChild(svgElement);
var overlay = this.viewer.svgOverlay();
overlay.node().appendChild(svgGroup); // TODO: use method osdviewer's method addOverlay
this.regions[regionIri].push(svgElement);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'rectangle' to a SVGElement
* @param svgElement - an SVGElement (should have type 'polygon' (sic))
* @param geometry - the geometry describing the rectangle
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesRectangle = function (svgElement, geometry, aspectRatio, xOffset) {
var pointA = geometry.points[0];
var pointB = geometry.points[1];
// geometry.points contains two diagonally opposed corners of the rectangle, but the order of the corners is arbitrary.
// We therefore construct the upperleft (UL), lowerright (LR), upperright (UR) and lowerleft (LL) positions of the corners with min and max operations.
var positionUL = new Point2D(Math.min(pointA.x, pointB.x), Math.min(pointA.y, pointB.y));
var positionLR = new Point2D(Math.max(pointA.x, pointB.x), Math.max(pointA.y, pointB.y));
var positionUR = new Point2D(Math.max(pointA.x, pointB.x), Math.min(pointA.y, pointB.y));
var positionLL = new Point2D(Math.min(pointA.x, pointB.x), Math.max(pointA.y, pointB.y));
var points = [positionUL, positionUR, positionLR, positionLL];
var viewCoordPoints = this.image2ViewPortCoords(points, aspectRatio, xOffset);
var pointsString = this.createSVGPolygonPointsAttribute(viewCoordPoints);
svgElement.setAttribute('points', pointsString);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'polygon' to a SVGElement
* @param svgElement - an SVGElement (should have type 'polygon')
* @param geometry - the geometry describing the polygon
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesPolygon = function (svgElement, geometry, aspectRatio, xOffset) {
var viewCoordPoints = this.image2ViewPortCoords(geometry.points, aspectRatio, xOffset);
var pointsString = this.createSVGPolygonPointsAttribute(viewCoordPoints);
svgElement.setAttribute('points', pointsString);
};
/**
* Adds the necessary attributes to create a ROI-overlay of type 'circle' to a SVGElement
* @param svgElement - an SVGElement (should have type 'circle')
* @param geometry - the geometry describing the circle
* @param aspectRatio - the aspectRatio (h/w) of the image on which the circle should be placed
* @param xOffset - the x-offset in Openseadragon viewport coordinates of the image on which the circle should be placed
*/
StillImageComponent.prototype.addSVGAttributesCircle = function (svgElement, geometry, aspectRatio, xOffset) {
var viewCoordPoints = this.image2ViewPortCoords(geometry.points, aspectRatio, xOffset);
var cx = String(viewCoordPoints[0].x);
var cy = String(viewCoordPoints[0].y);
// geometry.radius contains not the radius itself, but the coordinates of a (arbitrary) point on the circle.
// We therefore have to calculate the length of the vector geometry.radius to get the actual radius. -> sqrt(x^2 + y^2)
// Since geometry.radius has its y coordinate scaled to the height of the image,
// we need to multiply it with the aspectRatio to get to the scale used by Openseadragon, analoguous to this.image2ViewPortCoords()
var radius = String(Math.sqrt(geometry.radius.x * geometry.radius.x + aspectRatio * aspectRatio * geometry.radius.y * geometry.radius.y));
svgElement.setAttribute('cx', cx);
svgElement.setAttribute('cy', cy);
svgElement.setAttribute('r', radius);
};
/**
* Maps a Point2D[] with coordinates relative to an image to a new Point2D[] with coordinates in the viewport coordinate system of Openseadragon
* see also: https://openseadragon.github.io/examples/viewport-coordinates/
* @param points - an array of points in coordinate system relative to an image
* @param aspectRatio - the aspectRatio (h/w) of the image
* @param xOffset - the x-offset in viewport coordinates of the image
* @returns - a new Point2D[] with coordinates in the viewport coordinate system of Openseadragon
*/
StillImageComponent.prototype.image2ViewPortCoords = function (points, aspectRatio, xOffset) {
return points.map(function (point) {
return new Point2D(point.x + xOffset, point.y * aspectRatio);
});
};
/**
* Returns a string in the format expected by the 'points' attribute of a SVGElement
* @param points - an array of points to be serialized to a string
* @returns - the points serialized to a string in the format expected by the 'points' attribute of a SVGElement
*/
StillImageComponent.prototype.createSVGPolygonPointsAttribute = function (points) {
var pointsString = '';
for (var i in points) {
if (points.hasOwnProperty(i)) {
pointsString += points[i].x;
pointsString += ',';
pointsString += points[i].y;
pointsString += ' ';
}
}
return pointsString;
};
StillImageComponent.prototype.getCurrentImage = function () {
};
var StillImageComponent_1;
StillImageComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Input(),
__metadata("design:type", Array)
], StillImageComponent.prototype, "images", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StillImageComponent.prototype, "imageCaption", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StillImageComponent.prototype, "activateRegion", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], StillImageComponent.prototype, "currentImageIndex", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], StillImageComponent.prototype, "regionHovered", void 0);
StillImageComponent = StillImageComponent_1 = __decorate([
Component({
selector: 'kui-still-image',
template: "<div class=\"still-image-viewer\">\n <div class=\"navigation left\">\n <button mat-button class=\"full-size\" id=\"KUI_OSD_PREV_PAGE\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- main content with navigation and osd viewer -->\n <div class=\"content\">\n\n <!-- openseadragon (osd) viewer -->\n <div class=\"osd-container\"></div>\n <!-- /openseadragon (osd) -->\n\n <!-- footer with image caption e.g. copyright information -->\n <div class=\"footer\">\n <p class=\"mat-caption\" [innerHtml]=\"imageCaption\"></p>\n </div>\n\n <!-- action panel with tools for image -->\n <mat-toolbar class=\"action\">\n <mat-toolbar-row>\n <!-- home button -->\n <span>\n <button mat-icon-button id=\"KUI_OSD_HOME\">\n <mat-icon>home</mat-icon>\n </button>\n </span>\n <!-- zoom buttons -->\n <span class=\"fill-remaining-space\"></span>\n <span>\n <button mat-icon-button id=\"KUI_OSD_ZOOM_IN\">\n <mat-icon>add</mat-icon>\n </button>\n <button mat-icon-button id=\"KUI_OSD_ZOOM_OUT\">\n <mat-icon>remove</mat-icon>\n </button>\n </span>\n <!-- window button -->\n <span class=\"fill-remaining-space\"></span>\n <span>\n <button mat-icon-button id=\"KUI_OSD_FULL_PAGE\">\n <mat-icon>fullscreen</mat-icon>\n </button>\n </span>\n </mat-toolbar-row>\n </mat-toolbar>\n\n </div>\n\n <div class=\"navigation\">\n <button mat-button class=\"full-size\" id=\"KUI_OSD_NEXT_PAGE\" (click)=\"getCurrentImage()\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n </div>\n\n</div>\n\n<!-- simple image viewer e.g. as a preview -->\n<!-- TODO: handle images array -->\n<!--<img *ngIf=\"simple && images?.length === 1; else osdViewer\" [src]=\"simpleImageExample\">-->\n\n\n<!--\n <div>\n <span *ngIf=\"images.length > 1\" (click)=\"gotoLeft()\"><<</span>\n <span *ngIf=\"images.length > 1\" (click)=\"gotoRight()\">>></span>\n </div>\n-->\n",
styles: [".still-image-viewer{display:-webkit-inline-box;display:inline-flex;height:400px;max-width:960px;width:100%}@media (max-height:636px){.still-image-viewer{height:300px}}.still-image-viewer .navigation{height:calc(400px + 64px + 24px);width:36px}.still-image-viewer .navigation .mat-button.full-size{height:100%!important;width:36px!important;padding:0!important;min-width:36px!important}.still-image-viewer .content{height:calc(400px + 64px + 24px);max-width:calc(960px - (2 * 36px));width:calc(100% - (2 * 36px))}.still-image-viewer .content .osd-container{color:#ccc;background-color:#000;height:400px}.still-image-viewer .content .osd-container.fullscreen{max-width:100vw}.still-image-viewer .content .footer p{color:#ccc;background-color:#000;height:24px;margin:0;padding:0 16px}::ng-deep .roi-svgoverlay{opacity:.4;fill:transparent;stroke:#00695c;stroke-width:2px;vector-effect:non-scaling-stroke}.roi-svgoverlay:focus,::ng-deep .roi-svgoverlay:hover{opacity:1}::ng-deep .roi-svgoverlay.active{opacity:1}"]
}),
__metadata("design:paramtypes", [ElementRef])
], StillImageComponent);
return StillImageComponent;
}());
var BooleanValueComponent = /** @class */ (function () {
function BooleanValueComponent() {
}
Object.defineProperty(BooleanValueComponent.prototype, "valueObject", {
get: function () {
return this._booleanValueObj;
},
set: function (value) {
this._booleanValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadBooleanValue),
__metadata("design:paramtypes", [ReadBooleanValue])
], BooleanValueComponent.prototype, "valueObject", null);
BooleanValueComponent = __decorate([
Component({
selector: 'kui-boolean-value',
template: "<mat-checkbox [checked]=\"valueObject.bool\" readonly=\"true\"></mat-checkbox>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], BooleanValueComponent);
return BooleanValueComponent;
}());
var ColorValueComponent = /** @class */ (function () {
function ColorValueComponent() {
}
Object.defineProperty(ColorValueComponent.prototype, "valueObject", {
get: function () {
return this._colorValueObj;
},
set: function (value) {
this._colorValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadColorValue),
__metadata("design:paramtypes", [ReadColorValue])
], ColorValueComponent.prototype, "valueObject", null);
ColorValueComponent = __decorate([
Component({
selector: 'kui-color-value',
template: "<span [style.background-color]=\"valueObject.color\">{{valueObject.color}}</span>\n",
styles: [".fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.mat-form-field{width:36px;overflow-x:visible}"]
}),
__metadata("design:paramtypes", [])
], ColorValueComponent);
return ColorValueComponent;
}());
var DateValueComponent = /** @class */ (function () {
function DateValueComponent() {
}
Object.defineProperty(DateValueComponent.prototype, "calendar", {
get: function () {
return this._calendar;
},
set: function (value) {
this._calendar = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateValueComponent.prototype, "era", {
get: function () {
return this._era;
},
set: function (value) {
this._era = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateValueComponent.prototype, "valueObject", {
get: function () {
return this._dateValueObj;
},
set: function (value) {
this._dateValueObj = value;
var dateOrRange = this.valueObject.date;
if (dateOrRange instanceof KnoraPeriod) {
// period (start and end dates)
this.period = true;
this.dates = [this.getJSDate(dateOrRange.start), this.getJSDate(dateOrRange.end)];
}
else {
// single date
this.period = false;
this.dates = [this.getJSDate(dateOrRange)];
}
},
enumerable: true,
configurable: true
});
/**
* Converts a `KnoraDate` to a JS Date, providing necessary formatting information.
* JULIAN and GREGORIAN calendar are the only available for the moment.
*
* @param date the date to be converted.
* @return DateFormatter.
*/
DateValueComponent.prototype.getJSDate = function (date) {
if (date.precision === Precision.yearPrecision) {
return {
format: 'yyyy',
date: new Date(date.year.toString()),
era: date.era,
calendar: date.calendar
};
}
else if (date.precision === Precision.monthPrecision) {
return {
format: 'MMMM ' + 'yyyy',
date: new Date(date.year, date.month - 1, 1),
era: date.era,
calendar: date.calendar
};
}
else if (date.precision === Precision.dayPrecision) {
return {
format: 'longDate',
date: new Date(date.year, date.month - 1, date.day),
era: date.era,
calendar: date.calendar
};
}
else {
console.error('Error: incorrect precision for date');
}
};
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], DateValueComponent.prototype, "calendar", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], DateValueComponent.prototype, "era", null);
__decorate([
Input(),
__metadata("design:type", ReadDateValue),
__metadata("design:paramtypes", [ReadDateValue])
], DateValueComponent.prototype, "valueObject", null);
DateValueComponent = __decorate([
Component({
selector: 'kui-date-value',
template: "<span *ngIf=\"period; else preciseDate\">\n {{dates[0].date | date: dates[0].format}}\n <span *ngIf=\"era\">\n {{dates[0].era}}\n </span>\n - {{dates[1].date | date: dates[1].format}}\n <span *ngIf=\"era\">\n {{dates[1].era}}\n </span>\n\n <span *ngIf=\"calendar\">\n ({{dates[0].calendar}})\n </span>\n</span>\n\n<ng-template #preciseDate>\n\n <span>\n {{dates[0].date | date: dates[0].format}}\n <span *ngIf=\"era\">\n {{dates[0].era}}\n </span>\n <span *ngIf=\"calendar\">\n ({{dates[0].calendar}})\n </span>\n </span>\n\n</ng-template>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], DateValueComponent);
return DateValueComponent;
}());
var DecimalValueComponent = /** @class */ (function () {
function DecimalValueComponent() {
}
Object.defineProperty(DecimalValueComponent.prototype, "valueObject", {
get: function () {
return this._decimalValueObj;
},
set: function (value) {
this._decimalValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadDecimalValue),
__metadata("design:paramtypes", [ReadDecimalValue])
], DecimalValueComponent.prototype, "valueObject", null);
DecimalValueComponent = __decorate([
Component({
selector: 'kui-decimal-value',
template: "<span>{{valueObject.decimal}}</span>",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], DecimalValueComponent);
return DecimalValueComponent;
}());
var GeometryValueComponent = /** @class */ (function () {
function GeometryValueComponent() {
}
Object.defineProperty(GeometryValueComponent.prototype, "valueObject", {
get: function () {
return this._geomValueObj;
},
set: function (value) {
this._geomValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadGeomValue),
__metadata("design:paramtypes", [ReadGeomValue])
], GeometryValueComponent.prototype, "valueObject", null);
GeometryValueComponent = __decorate([
Component({
selector: 'kui-geometry-value',
template: "<span>{{valueObject.geometry}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], GeometryValueComponent);
return GeometryValueComponent;
}());
var GeonameValueComponent = /** @class */ (function () {
function GeonameValueComponent() {
}
GeonameValueComponent.prototype.ngOnInit = function () {
};
GeonameValueComponent = __decorate([
Component({
selector: 'kui-geoname-value',
template: "<p>\n geoname-value works!\n</p>",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], GeonameValueComponent);
return GeonameValueComponent;
}());
var IntegerValueComponent = /** @class */ (function () {
function IntegerValueComponent() {
}
Object.defineProperty(IntegerValueComponent.prototype, "valueObject", {
get: function () {
return this._integerValueObj;
},
set: function (value) {
this._integerValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadIntValue),
__metadata("design:paramtypes", [ReadIntValue])
], IntegerValueComponent.prototype, "valueObject", null);
IntegerValueComponent = __decorate([
Component({
selector: 'kui-integer-value',
template: "<span>{{valueObject.int}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], IntegerValueComponent);
return IntegerValueComponent;
}());
var IntervalValueComponent = /** @class */ (function () {
function IntervalValueComponent() {
}
Object.defineProperty(IntervalValueComponent.prototype, "valueObject", {
get: function () {
return this._intervalValueObj;
},
set: function (value) {
this._intervalValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadIntervalValue),
__metadata("design:paramtypes", [ReadIntervalValue])
], IntervalValueComponent.prototype, "valueObject", null);
IntervalValueComponent = __decorate([
Component({
selector: 'kui-interval-value',
template: "<span>{{valueObject.start}} - {{valueObject.end}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], IntervalValueComponent);
return IntervalValueComponent;
}());
var LinkValueComponent = /** @class */ (function () {
function LinkValueComponent() {
this.referredResourceClicked = new EventEmitter();
}
Object.defineProperty(LinkValueComponent.prototype, "valueObject", {
get: function () {
return this._linkValueObj;
},
set: function (value) {
this._linkValueObj = value;
if (this.valueObject.linkedResource !== undefined) {
this.referredResource = this.valueObject.linkedResource.label;
}
else {
this.referredResource = this.valueObject.linkedResourceIri;
}
},
enumerable: true,
configurable: true
});
LinkValueComponent.prototype.refResClicked = function () {
this.referredResourceClicked.emit(this._linkValueObj);
};
__decorate([
Input(),
__metadata("design:type", ReadLinkValue),
__metadata("design:paramtypes", [ReadLinkValue])
], LinkValueComponent.prototype, "valueObject", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], LinkValueComponent.prototype, "referredResourceClicked", void 0);
LinkValueComponent = __decorate([
Component({
selector: 'kui-link-value',
template: "<a class=\"kui-link\" (click)=\"refResClicked()\">{{referredResource}}</a>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], LinkValueComponent);
return LinkValueComponent;
}());
var ListValueComponent = /** @class */ (function () {
function ListValueComponent() {
}
Object.defineProperty(ListValueComponent.prototype, "valueObject", {
get: function () {
return this._listValueObj;
},
set: function (value) {
this._listValueObj = value;
},
enumerable: true,
configurable: true
});
__decorate([
Input(),
__metadata("design:type", ReadListValue),
__metadata("design:paramtypes", [ReadListValue])
], ListValueComponent.prototype, "valueObject", null);
ListValueComponent = __decorate([
Component({
selector: 'kui-list-value',
template: "<span>{{valueObject.listNodeLabel}}</span>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}"]
}),
__metadata("design:paramtypes", [])
], ListValueComponent);
return ListValueComponent;
}());
var TextValueAsHtmlComponent = /** @class */ (function () {
function TextValueAsHtmlComponent(el) {
this.el = el;
this.referredResourceClicked = new EventEmitter();
}
Object.defineProperty(TextValueAsHtmlComponent.prototype, "ontologyInfo", {
get: function () {
return this._ontoInfo;
},
set: function (value) {
this._ontoInfo = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextValueAsHtmlComponent.prototype, "bindEvents", {
get: function () {
return this._bindEvents;
},
set: function (value) {
this._bindEvents = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextValueAsHtmlComponent.prototype, "valueObject", {
get: function () {
return this._htmlValueObj;
},
set: function (value) {
this._htmlValueObj = value;
if (this.el.nativeElement.innerHTML) {
this.el.nativeElement.innerHTML = this.valueObject.html;
}
},
enumerable: true,
configurable: true
});
TextValueAsHtmlComponent.prototype.refResClicked = function (refResourceIri) {
this.referredResourceClicked.emit(refResourceIri);
};
/**
* Binds a click event to standoff links that shows the referred resource.
*
* @param targetElement
*/
TextValueAsHtmlComponent.prototype.onClick = function (targetElement) {
if (this._bindEvents && targetElement.nodeName.toLowerCase() === 'a'
&& targetElement.className.toLowerCase().indexOf('salsah-link') >= 0
&& targetElement.href !== undefined) {
this.refResClicked(targetElement.href);
// prevent propagation
return false;
}
else if (this.bindEvents && targetElement.nodeName.toLowerCase() === 'a' && targetElement.href !== undefined) {
// open link in a new window
window.open(targetElement.href, '_blank');
// prevent propagation
return false;
}
else {
// prevent propagation
return false;
}
};
TextValueAsHtmlComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], TextValueAsHtmlComponent.prototype, "referredResourceClicked", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], TextValueAsHtmlComponent.prototype, "ontologyInfo", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], TextValueAsHtmlComponent.prototyp