diff --git a/nietzsche-beta-app/package.json b/nietzsche-beta-app/package.json index 2dd127f..023a8fd 100644 --- a/nietzsche-beta-app/package.json +++ b/nietzsche-beta-app/package.json @@ -1,56 +1,56 @@ { "name": "nietzsche-app-beta", - "version": "0.5.1.1", + "version": "0.5.1.2", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "compodoc": "./node_modules/.bin/compodoc -p tsconfig.app.json", "sparqljs": "./node_modules/sparqljs/sparql.js" }, "private": true, "dependencies": { "@angular/animations": "~8.2.14", "@angular/cdk": "~8.2.3", "@angular/common": "~8.2.14", "@angular/compiler": "~8.2.14", "@angular/core": "~8.2.14", "@angular/forms": "~8.2.14", "@angular/material": "^8.2.3", "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "@types/rdf-js": "^2.0.11", "lodash": "^4.17.20", "ngx-mat-standoff-markup": "^0.7.3", "rdfjs": "^0.0.1", "rxjs": "~6.4.0", "sparqljs": "^3.0.1", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.803.25", "@angular/cli": "~8.3.24", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } } diff --git a/nietzsche-beta-app/src/app/tln-edition/constants.ts b/nietzsche-beta-app/src/app/tln-edition/constants.ts index 00c002b..c68387d 100644 --- a/nietzsche-beta-app/src/app/tln-edition/constants.ts +++ b/nietzsche-beta-app/src/app/tln-edition/constants.ts @@ -1,74 +1,78 @@ export {HIGHTLIGHT_CASES} from '../page-view/highlight_status'; export enum VIEW_OPTIONS { TRANSKRIPTION = 'Transkription', FAKSIMILE = 'Faksimile', SYNOPSIS = 'Transkription/Faksimile', SYNOPSIS_B = 'Faksimile/Transkription' } export const DEFAULT_VIEW_OPTION: string = VIEW_OPTIONS.SYNOPSIS_B; export const ONTOLOTY_PREFIX: string = 'http://www.nie.org/ontology/nietzsche#' /** * Route for TlnCrossrefComponent **/ export const TLN_CROSSREF_ROUTE: string = 'tln-crossref'; /** * Route for TlnFulltextComponent **/ export const TLN_SEARCH_ROUTE: string = 'tln-search'; /** * Route for TlnManuscriptViewComponent **/ export const TLN_MANUSCRIPT_ROUTE: string = 'tln-manuscript'; /** * Route for TlnViewerComponent **/ export const TLN_VIEWER_ROUTE: string = 'tln-viewer'; /** * Param that refers to the context that should be shown, i.e. 'page' or 'manuscript'. **/ export const TLN_CONTEXT_VIEW_PARAM: string = 'contextView'; /** * Param that toggles fullscreen, value type: boolean. **/ export const TLN_FULLSCREEN_PARAM: string = 'fullscreen'; /** * Param for find text in page. **/ export const TLN_FIND_PARAM: string = 'find'; /** * Param for manuscript iri. **/ export const TLN_MANUSCRIPT_PARAM: string = 'manuscript'; /** * Param for navigation bar open state. **/ export const TLN_NAV_BAR_OPEN_STATE_PARAM: string = 'navBarOpenState'; /** * Param for page iri. **/ export const TLN_PAGE_PARAM: string = 'page'; /** * Param for result index, type: number. **/ export const TLN_RESULT_INDEX_PARAM: string = 'resutlIndex'; /** * Param for selected lines. **/ export const TLN_SELECTED_LINES_PARAM: string = 'selectedLines'; /** * Param for selected lines. **/ export const TLN_SELECTED_WORDS_PARAM: string = 'selectedWords'; /** * Param for iri of a genetic order of text versions. **/ export const TLN_TEXT_GENETIC_ORDER_PARAM: string = 'geneticOrder'; /** * Param for selected view option, e.g. 'Transkription', 'Faksimile', etc. **/ export const TLN_VIEW_OPTION_PARAM: string = 'viewMode'; /** - * Param for zoom. + * Param for multi instance zoom (i.e. tln-crossref and tln-fulltext). + **/ +export const TLN_MULTI_INSTANCE_ZOOM_PARAM: string = 'multiInstanceZoom'; +/** + * Param for zoom in tln-viewer. **/ export const TLN_ZOOM_PARAM: string = 'zoom'; diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html index 0c5ee65..ff339f3 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html +++ b/nietzsche-beta-app/src/app/tln-edition/tln-crossref/navigation/navigation.component.html @@ -1,18 +1,18 @@
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/navigation/navigation.component.html b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/navigation/navigation.component.html index 39bc77c..5d66aa5 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/navigation/navigation.component.html +++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/navigation/navigation.component.html @@ -1,4 +1,4 @@ diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-navigation-elements/zoom.component.ts b/nietzsche-beta-app/src/app/tln-edition/tln-navigation-elements/zoom.component.ts index f980cc0..660d655 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-navigation-elements/zoom.component.ts +++ b/nietzsche-beta-app/src/app/tln-edition/tln-navigation-elements/zoom.component.ts @@ -1,35 +1,42 @@ import { Component, OnInit, Input } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; -import { TLN_ZOOM_PARAM } from '../constants'; +import { TLN_MULTI_INSTANCE_ZOOM_PARAM, TLN_ZOOM_PARAM } from '../constants'; import { Mapping } from '../route-reader'; import { RouteUpdater } from '../route-updater'; @Component({ selector: 'zoom', templateUrl: './zoom.component.html', styleUrls: ['./zoom.component.css'] }) export class ZoomComponent extends RouteUpdater { @Input() resetButtonOn: boolean = true; + @Input() useViewerZoom: boolean = true; @Input() sliderOn: boolean = true; @Input() step: number = 0.25; zoomFactor: number = 1; protected mapping: Mapping = { zoomFactor: { param: TLN_ZOOM_PARAM, type: "number" }} constructor(protected router: Router, protected activatedRoute: ActivatedRoute ) { super(router, activatedRoute); } + ngOnInit(){ + if (!this.useViewerZoom){ + this.mapping['zoomFactor']['param'] = TLN_MULTI_INSTANCE_ZOOM_PARAM; + } + super.ngOnInit(); + } private formatLabel(value: number): string { return Math.round(value * 100) + '%'; } private setZoomFactor(newZoomFactor: number){ console.log(newZoomFactor); if (newZoomFactor > 0){ this.zoomFactor = Math.round(newZoomFactor*100)/100; } else { this.zoomFactor = this.zoomFactor/2 } this.updateParams(); } } diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-page-view.component.ts b/nietzsche-beta-app/src/app/tln-edition/tln-page-view.component.ts index 4d5e940..d75ff0c 100644 --- a/nietzsche-beta-app/src/app/tln-edition/tln-page-view.component.ts +++ b/nietzsche-beta-app/src/app/tln-edition/tln-page-view.component.ts @@ -1,242 +1,243 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; import { TlnQueryServiceInterface } from './models'; import { TlnQueryService } from './tln-query.service'; import { TlnPage} from './datatypes/page'; import { FaksimileImage } from './datatypes/faksimile_image'; import { SVGImage, SVGImageClip } from './datatypes/svg_image'; import { TlnImage } from './datatypes/image'; import { TlnLine, FaksimileLine } from './datatypes/line'; import { TlnWord, FaksimileWord } from './datatypes/word'; import { TlnTextByForeignHand, FaksimileTextByForeignHand } from './datatypes/foreign_text'; import { externalAssignClass, externalAssignStyle, Configuration, Identifier, Image, Line, Word } from './models'; import { ConfigurableComponent } from './services'; import { ComplexKeyIriMapping, DataHandler } from './data_handler'; -import { DEFAULT_VIEW_OPTION, VIEW_OPTIONS, TLN_FULLSCREEN_PARAM, TLN_FIND_PARAM, TLN_PAGE_PARAM, TLN_SELECTED_LINES_PARAM, TLN_SELECTED_WORDS_PARAM, TLN_VIEW_OPTION_PARAM, TLN_ZOOM_PARAM } from './constants'; +import { DEFAULT_VIEW_OPTION, VIEW_OPTIONS, TLN_FULLSCREEN_PARAM, TLN_FIND_PARAM, TLN_PAGE_PARAM, TLN_SELECTED_LINES_PARAM, TLN_SELECTED_WORDS_PARAM, TLN_VIEW_OPTION_PARAM, TLN_MULTI_INSTANCE_ZOOM_PARAM, TLN_ZOOM_PARAM } from './constants'; import { Mapping, RouteReader } from './route-reader'; /** * Given a page IRI, this component will request all relevant information and * display the data with {@link /components/PageViewComponent.html|PageViewComponent}. **/ @Component({ selector: 'tln-page-view', templateUrl: './tln-page-view.component.html', styleUrls: ['./tln-page-view.component.css'] }) export class TlnPageViewComponent extends RouteReader implements OnInit, OnChanges { @Input() configuration: Configuration = { '*': { 'useExtendedTooltip': true }}; /** * IRI of the current page, the component will ignore page iri's from params if set. **/ @Input('page') current_iri: string; /** * the search text of words that should be highlighted as {@link /miscellaneous/enumerations.html#HIGHTLIGHT_CASES|HIGHTLIGHT_CASES.SEARCHED_WORD}. **/ @Input() findText: string; /** * whether or not to ignore the params **/ private ignoreParams: boolean = false; /** * OPTIONAL pass a queryService with method * {@link /interfaces/TlnQueryServiceInterface.html#getData|getData} * to TlnPageViewComponent. **/ @Input() queryService: TlnQueryServiceInterface; /** * 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[] = []; /** * the (initial) maximum height of the image. **/ @Input() max_height: number = -1; /** * the (initial) maximum width of the image, if both height and width are specified prefer width. **/ @Input() max_width: number = -1; dontShowReference: boolean = false; @Input() startLine: Identifier; @Input() endLine: Identifier; /** * should primary Url be used for image. Use secondary Url if false. **/ @Input() preferPrimaryUrl: boolean = true; /** * selected view option, i.e. one of the following * {@link /miscellaneous/enumerations.html#VIEW_OPTIONS|VIEW_OPTIONS}. * */ @Input() selectedViewOption: string = DEFAULT_VIEW_OPTION; /** * 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; /** * the data handler of this component that retrieves * data and instantiates it according to their proper * datatypes. **/ dataHandler: DataHandler = new DataHandler(this); /** * whether or not to show page view in fullscreen mode. **/ fullscreen: boolean = false; /** * texts written by foreign hand **/ foreignTexts: TlnTextByForeignHand[] = []; /** * the (first) image to be displayed by * {@link /components/PageViewComponent.html|PageViewComponent}. **/ image: Image; /** * the Array of lines of the first image that will be displayed by {@link /components/MarginFieldComponent.html|MarginFieldComponent}. **/ lines: Line[] = []; /** * texts written by foreign hand **/ second_foreignTexts: FaksimileTextByForeignHand[] = []; /** * the second image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}. **/ second_image: Image; /** * the Array of lines of the second image that will be displayed by {@link /components/MarginFieldComponent.html|MarginFieldComponent}. **/ second_lines: Line[] = []; /** * the Array of words of the second image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}. **/ second_words: Word[] = []; /** * the Array of words of the first image that will be displayed by {@link /components/TextFieldComponent.html|TextFieldComponent}. **/ words: Word[] = []; @Input() multiInstanceMode: boolean = false; protected mapping: Mapping = { findText: { param: TLN_FIND_PARAM, type: "string" }, fullscreen: { param: TLN_FULLSCREEN_PARAM, type: "boolean" }, selectedViewOption: { param: TLN_VIEW_OPTION_PARAM, type: "string" }, selectedLines: { param: TLN_SELECTED_LINES_PARAM, type: "string" }, selectedWords: { param: TLN_SELECTED_WORDS_PARAM, type: "string" }, current_iri: { param: TLN_PAGE_PARAM, type: "string" }, zoomFactor: { param: TLN_ZOOM_PARAM, type: "number" } } /** * @param localQueryService internal query service that will be used if no external queryService is passed * to input. **/ constructor(private localQueryService: TlnQueryService, protected router: Router, protected activatedRoute: ActivatedRoute){ super(router, activatedRoute); } ngOnInit() { if (this.multiInstanceMode){ this.mapping['current_iri']['ignore'] = (this.current_iri != null); this.mapping['selectedViewOption']['ignore'] = true; + this.mapping['zoomFactor']['param'] = TLN_MULTI_INSTANCE_ZOOM_PARAM; this.dontShowReference = true; //this.configuration['*']['useExtendedTooltip'] = false; } super.ngOnInit(); let tlnQueryService = (this.queryService != null) ? this.queryService : this.localQueryService; let queryConfiguration: Configuration = { '*': { 'tlnQueryService': tlnQueryService }} this.configuration = ConfigurableComponent.updateConfiguration(this.configuration, queryConfiguration) this.dataHandler.addHandler('image', { 'handler': SVGImage }); this.dataHandler.addHandler('words', { 'handler': TlnWord }); this.dataHandler.addHandler('foreignTexts', { 'handler': TlnTextByForeignHand}); this.dataHandler.addHandler('lines', { 'handler': TlnLine }); this.dataHandler.addHandler('second_image',{ 'handler': FaksimileImage }); this.dataHandler.addHandler('second_words',{ 'handler': FaksimileWord }); this.dataHandler.addHandler('second_lines',{ 'handler': FaksimileLine }); this.dataHandler.addHandler('second_foreignTexts', { 'handler': FaksimileTextByForeignHand}); this.dataHandler.addHandler('page_content',[ 'image', 'lines', 'words', 'foreignTexts' ]); this.dataHandler.addHandler('second_page_content', [ 'second_image', 'second_lines', 'second_words', 'second_foreignTexts' ] ); this.dataHandler.setQueryService(tlnQueryService); this.updatePageData(); } ngOnChanges(change: SimpleChanges) { if (this.dataHandler.ready && (change.current_iri != undefined && change.current_iri != null && !change.current_iri.firstChange) || (change.selectedViewOption != undefined && change.selectedViewOption != null && !change.selectedViewOption.firstChange)) { this.updatePageData(); } } protected readParams(params: Params){ let old_page_iri = this.current_iri; let old_selectedViewOption = this.selectedViewOption; let old_fullscreen = this.fullscreen super.readParams(params); if (this.dataHandler.ready && (old_page_iri != this.current_iri || old_selectedViewOption != this.selectedViewOption)){ this.updatePageData(); } if (old_fullscreen != this.fullscreen && !this.multiInstanceMode){ //this.dontShowReference = !this.fullscreen; //this.configuration['*']['useExtendedTooltip'] = this.fullscreen; } } /** * This function updates the page data by setting the handlers for the current * {@link #selectedViewOption|selectedViewOption} and by retrieving the data. **/ private updatePageData(){ this.dataHandler['image']['handler'] = (this.selectedViewOption != VIEW_OPTIONS.FAKSIMILE && this.selectedViewOption != VIEW_OPTIONS.SYNOPSIS_B) ? SVGImage : FaksimileImage ; this.dataHandler['words']['handler'] = (this.selectedViewOption != VIEW_OPTIONS.FAKSIMILE && this.selectedViewOption != VIEW_OPTIONS.SYNOPSIS_B) ? TlnWord : FaksimileWord ; this.dataHandler['lines']['handler'] = (this.selectedViewOption != VIEW_OPTIONS.FAKSIMILE && this.selectedViewOption != VIEW_OPTIONS.SYNOPSIS_B) ? TlnLine : FaksimileLine ; this.dataHandler['foreignTexts']['handler'] = (this.selectedViewOption != VIEW_OPTIONS.FAKSIMILE && this.selectedViewOption != VIEW_OPTIONS.SYNOPSIS_B) ? TlnTextByForeignHand : FaksimileTextByForeignHand ; if (this.dataHandler['page_content'][this.dataHandler['page_content'].length-1] == 'second_page_content'){ this.dataHandler['page_content'].pop(); this.second_image = null; this.second_foreignTexts = []; this.second_words = []; this.second_lines = []; } if (this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS || this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS_B){ this.dataHandler['second_image']['handler'] = (this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS_B) ? SVGImage : FaksimileImage ; this.dataHandler['second_words']['handler'] = (this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS_B) ? TlnWord : FaksimileWord ; this.dataHandler['second_lines']['handler'] = (this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS_B) ? TlnLine : FaksimileLine ; this.dataHandler['second_foreignTexts']['handler'] = (this.selectedViewOption == VIEW_OPTIONS.SYNOPSIS_B) ? TlnTextByForeignHand : FaksimileTextByForeignHand ; this.dataHandler['page_content'].push('second_page_content'); } if (this.current_iri != null){ this.dataHandler.resetData('page_content'); if (this.startLine != null && this.startLine != undefined){ this.dataHandler['image']['handler'] = SVGImageClip ; let endLine = (this.endLine != null && this.endLine != undefined) ? this.endLine : this.startLine; let complex: ComplexKeyIriMapping = { idIndex: 0, mapping: [ { key: 'page', iri: this.current_iri}, { key: 'startLine', iri: