Page MenuHomec4science
Files F91965836

page-view.component.ts
No OneTemporary
Actions

File Metadata

Created
Sat, Nov 16, 05:20

page-view.component.ts
View Options

import { Component, Input, OnInit, OnChanges} from '@angular/core';
import { externalAssignClass, externalAssignStyle, Configuration, Identifier, Image, Line, TextField, TextByForeignHand, Word} from './models';
/**
* This component displays one or two {@link /components/TextFieldComponent.html|TextFieldComponent(s)}
* and its or their {@link /components/MarginFieldComponent.html|MarginFieldComponent(s)}.
**/
@Component({
selector: 'page-view',
templateUrl: './page-view.component.html',
styleUrls: ['./page-view.component.css']
})
export class PageViewComponent implements OnInit, OnChanges {
@Input() configuration: Configuration;
/**
* the search text of words that should be highlighted as {@link /miscellaneous/enumerations.html#HIGHTLIGHT_CASES|HIGHTLIGHT_CASES.SEARCHED_WORD}.
**/
@Input() findText: string;
/**
* first texts written by foreign hand
**/
@Input() first_foreign_texts: TextByForeignHand[] = [];
/**
* the first image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}.
**/
@Input() first_image: Image;
/**
* the Array of lines of the first image that will be displayed by {@link /components/MarginFieldComponent.html|MarginFieldComponent}.
**/
@Input() first_lines: Line[];
/**
* Identification of first textfield.
**/
first_textfield_id: string = 'first textfield'
/**
* the Array of words of the first image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}.
**/
@Input() first_words: Word[];
/**
* the (initial) maximum height of the image(s).
**/
@Input() max_height: number = -1;
/**
* the (initial) maximum width of the image(s).
**/
@Input() max_width: number = -1;
/**
* should primary Url be used for image. Use secondary Url if false.
**/
@Input() preferPrimaryUrl: boolean = true;
/**
* second texts written by foreign hand
**/
@Input() second_foreign_texts: TextByForeignHand[] = [];
/**
* the second image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}.
**/
@Input() second_image: Image;
/**
* the Array of lines of the second image that will be displayed by {@link /components/MarginFieldComponent.html|MarginFieldComponent}.
**/
@Input() second_lines: Line[];
/**
* Identification of second textfield.
**/
second_textfield_id: string = 'second textfield'
/**
* the Array of words of the second image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}.
**/
@Input() second_words: Word[];
/**
* An optional function that will be passed to {@link /components/TextFieldComponent.html|TextFieldComponent}
* in order to return a further highlight class
* to the word rects when the internal function would return 'textfield unhighlighted'.
**/
@Input('assignClass') assignClass?: externalAssignClass;
/**
* An optional function that will be passed to {@link /components/TextFieldComponent.html|TextFieldComponent}
* and {@link /components/MarginFieldComponent.html|MarginFieldComponent}
* in order to return a (svg-)style object
* to the word and line rects. This function allows the user to extend the style of this component.
* E.g. by returning { fill: blue } the function overwrites the default behaviour and sets
* the default highlight color to blue.
**/
@Input('assignStyle') assignStyle?: externalAssignStyle;
/**
* global zoom factor.
**/
@Input() zoomFactor: number = 1;
/**
* identifiers of selected words that should be highlighted.
**/
@Input() selectedWords: Identifier[] = [];
/**
* identifiers of selected lines that should be highlighted.
**/
@Input() selectedLines: Identifier[] = [];
@Input('startLine') startLineId: Identifier;
@Input('endLine') endLineId: Identifier;
@Input() dontShowReference: boolean;
showReferenceLeft: string = 'from';
showReferenceRight: string = 'to';
constructor() {}
/**
* sets {@link /components/PageViewComponent.html#max_height|max_height} if it is unset.
**/
ngOnInit() {
if (this.max_height == -1 && this.max_width == -1){
this.max_height = screen.availHeight;
}
if (this.dontShowReference != undefined && this.dontShowReference != null && this.dontShowReference){
this.showReferenceLeft = '';
this.showReferenceRight = '';
}
this.checkImages();
}
ngOnChanges(){
this.checkImages();
if (this.first_image != null && this.first_image != undefined && this.first_image.transform != null){
this.updateLines(this.first_words, this.first_lines)
}
if (this.second_image != null && this.second_image != undefined && this.second_image.transform != null){
this.updateLines(this.second_words, this.second_lines)
}
}
private checkImages(){
if (this.first_image != null && this.first_image != undefined && this.startLineId != null && this.startLineId != undefined){
if(this.first_lines != null && this.first_lines != undefined && this.first_lines.length > 0){
this.first_image = this.updateTextField(this.first_image, this.first_lines);
}
if(this.second_lines != null && this.second_lines != undefined && this.second_lines.length > 0){
this.second_image = this.updateTextField(this.second_image, this.second_lines);
}
}
}
private updateLines(words: Word[], lines: Line[]) {
for (var i = 0; i < lines.length; i++){
if (words.filter(word =>word.line == lines[i].id).length > 0){
lines[i].top = words.filter(word =>word.line == lines[i].id).map(word =>Number(word.top)).sort(function(a,b){ return a-b; })[0]
lines[i].bottom = words.filter(word =>word.line == lines[i].id).map(word =>Number(word.top)+Number(word.height)).sort(function(a,b){ return b-a; })[0]
}
}
}
private updateTextField(image: Image, lines: Line[]): Image {
let endLineId = (this.endLineId != null && this.endLineId != undefined) ? this.endLineId : this.startLineId;
let startLines = lines.filter(line =>line.id == this.startLineId)
let endLines = lines.filter(line =>line.id == endLineId)
if (startLines.length > 0 && endLines.length > 0){
let top = (startLines[0].top > 10) ? startLines[0].top-10 : startLines[0].top;
let height = (endLines[0].bottom-top)+10;
let text_field: TextField = { top: top, left: image.text_field.left, width: image.text_field.width, height: height }
return { x: image.x, y: image.y, width: image.width, height: image.height, filename: image.filename,
URL: image.URL, secondaryURL: image.secondaryURL, text_field: text_field, transform: image.transform,
copyright: image.copyright }
}
return image;
}
/**
* Returns whether the two images can be displayed as columns.
**/
private hasColumnStyle(): boolean {
if (this.zoomFactor <= 1 || this.first_image == null || this.second_image == null){
return true
}
let newLeftWidth = this.max_height/this.first_image.text_field.height*this.zoomFactor*this.first_image.text_field.width;
let newRightWidth = this.max_height/this.second_image.text_field.height*this.zoomFactor*this.second_image.text_field.width;
return newLeftWidth + newRightWidth < screen.availWidth;
}
}

Event Timeline

c4science · Help