diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 15b6c8a..42e6976 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,137 +1,131 @@ import { AppComponent } from './app.component'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CdkTableModule } from '@angular/cdk/table'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { FormsModule, ReactiveFormsModule} from '@angular/forms'; import { NgModule } from '@angular/core'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCardModule} from '@angular/material/card'; import { MatDialogModule, MatToolbarModule, MatButtonModule} from '@angular/material'; import { MatExpansionModule } from '@angular/material/expansion'; import {MatIconModule} from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatListModule } from '@angular/material/list'; import {MatMenuModule} from '@angular/material/menu'; import { MatPaginatorModule, MatSortModule, MatSidenavModule, MatCheckboxModule, MatRadioModule } from '@angular/material'; import { MatSelectModule } from '@angular/material/select'; import { MatTableModule } from '@angular/material/table'; import {MatTabsModule} from '@angular/material/tabs'; import {MatTooltipModule} from '@angular/material'; import { DataListViewComponent } from './data-list-view/data-list-view.component'; import { DataListViewTableComponent, HighlightPipe } from './data-list-view/data-list-view-table/data-list-view-table.component'; import { DialogComponent } from './dialog-component/dialog.component'; import { InfoBoxComponent } from './info-box-component/info-box.component'; import { TextFieldComponent} from './textfield-component/textfield.component'; import { WordPositionDirective } from './textfield-component/word-position.directive'; import { TextfieldOptionsComponentComponent } from './textfield-options-component/textfield-options-component.component'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { RdfDataBrowserComponentComponent } from './rdf-data-component/rdf-data-browser-component/rdf-data-browser-component.component'; import { QueryService } from './services/query.service'; import {AnnotationService, TextStyleService} from './services/annotation.service'; import { DisplayedCollumnsService } from './data-list-view/data-list-view-services/table-data.service'; import {DataListViewSettings} from './data-list-view/data-list-view-settings/data-list-view-settings.service'; import { MarkupTextComponentComponent } from './markup-text-component/markup-text-component.component'; import { BergwerkeComponent } from './bergwerke/bergwerke.component'; import { SubmenuComponentComponent } from './markup-text-component/submenu-component/submenu-component.component'; import { MarkupTextButtonsComponentComponent } from './markup-text-component/markup-text-buttons-component/markup-text-buttons-component.component'; import { GenericControlsComponent } from './generic-control-elements-component/generic-control-elements-component.component'; import { MarkupHyperlinkComponentComponent } from './markup-text-component/markup-hyperlink-component/markup-hyperlink-component.component'; import { MarkupTextIconComponent } from './markup-text-component/markup-text-icon-component/markup-text-icon.component'; import { CustomizableSearchComponentComponent } from './rdf-data-component/customizable-search-component/customizable-search-component.component'; import { SelectComponentComponent } from './generic-control-elements-component/select-component/select-component.component'; import { RadioComponentComponent } from './generic-control-elements-component/radio-component/radio-component.component'; import { CheckboxComponentComponent } from './generic-control-elements-component/checkbox-component/checkbox-component.component'; import {GenericControlElementsService} from './generic-control-elements-component/generic-control-elements-service.service'; import {routing} from './app.routing'; import {HomeComponent} from './home.component'; import { ManuscriptViewComponentComponent } from './manuscript-view-component/manuscript-view-component.component'; import { ContentViewTabComponentComponent } from './content-view-tab-component/content-view-tab-component.component'; import { RhizomeViewComponentComponent } from './rhizome-view-component/rhizome-view-component.component'; import { MainMenuComponentComponent } from './main-menu-component/main-menu-component.component'; import { PageViewComponentComponent } from './page-view-component/page-view-component.component'; -import { SynopsisComponentComponent } from './page-view-component/synopsis-component/synopsis-component.component'; -import { FaksimileComponentComponent } from './page-view-component/faksimile-component/faksimile-component.component'; -import { TranscriptionComponentComponent } from './page-view-component/transcription-component/transcription-component.component'; import { RdfDataComponentComponent } from './rdf-data-component/rdf-data-component.component'; import { PageMarginComponentComponent } from './page-view-component/page-margin-component/page-margin-component.component'; import { RdfEditorComponentComponent } from './rdf-data-component/rdf-editor-component/rdf-editor-component.component'; import { EndpointsComponentComponent } from './rdf-data-component/endpoints-component/endpoints-component.component'; import { NavigationListComponentComponent } from './navigation-list-component/navigation-list-component.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, TextFieldComponent, WordPositionDirective, InfoBoxComponent, TextfieldOptionsComponentComponent, DataListViewComponent, DataListViewTableComponent, DialogComponent, HighlightPipe, RdfDataBrowserComponentComponent, MarkupTextComponentComponent, BergwerkeComponent, SubmenuComponentComponent, MarkupTextButtonsComponentComponent, GenericControlsComponent, MarkupHyperlinkComponentComponent, MarkupTextIconComponent, CustomizableSearchComponentComponent, SelectComponentComponent, RadioComponentComponent, CheckboxComponentComponent, ManuscriptViewComponentComponent, ContentViewTabComponentComponent, RhizomeViewComponentComponent, MainMenuComponentComponent, PageViewComponentComponent, - SynopsisComponentComponent, - FaksimileComponentComponent, - TranscriptionComponentComponent, RdfDataComponentComponent, PageMarginComponentComponent, RdfEditorComponentComponent, EndpointsComponentComponent, NavigationListComponentComponent ], imports: [ routing, BrowserModule, BrowserAnimationsModule, CdkTableModule, CommonModule, DragDropModule, HttpClientModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, FormsModule, ReactiveFormsModule ], providers: [ QueryService, DisplayedCollumnsService, DataListViewSettings, TextStyleService, AnnotationService, GenericControlElementsService ], bootstrap: [AppComponent], entryComponents: [DialogComponent] }) export class AppModule { } diff --git a/src/app/content-view-tab-component/content-view-routes.ts b/src/app/content-view-tab-component/content-view-routes.ts index c817abe..017d3a4 100644 --- a/src/app/content-view-tab-component/content-view-routes.ts +++ b/src/app/content-view-tab-component/content-view-routes.ts @@ -1,12 +1,11 @@ import { Routes } from '@angular/router'; -import {PAGEVIEW_ROUTES} from "../page-view-component/page-view-routes"; import {ManuscriptViewComponentComponent} from "../manuscript-view-component/manuscript-view-component.component"; import {RhizomeViewComponentComponent} from "../rhizome-view-component/rhizome-view-component.component"; import {PageViewComponentComponent} from "../page-view-component/page-view-component.component"; export const CONTENT_ROUTES: Routes = [ { path: 'manuscript', component: ManuscriptViewComponentComponent }, - { path: 'page', component: PageViewComponentComponent, children: PAGEVIEW_ROUTES }, + { path: 'page', component: PageViewComponentComponent }, { path: 'rhizome', component: RhizomeViewComponentComponent }, { path: '', redirectTo: 'manuscript', pathMatch: 'prefix' } ]; diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.html b/src/app/content-view-tab-component/content-view-tab-component.component.html index 95fcc41..1c08770 100644 --- a/src/app/content-view-tab-component/content-view-tab-component.component.html +++ b/src/app/content-view-tab-component/content-view-tab-component.component.html @@ -1,60 +1,32 @@
- diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.ts b/src/app/content-view-tab-component/content-view-tab-component.component.ts index 21dff30..2270988 100644 --- a/src/app/content-view-tab-component/content-view-tab-component.component.ts +++ b/src/app/content-view-tab-component/content-view-tab-component.component.ts @@ -1,109 +1,79 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {ActivatedRoute, Params, Router} from '@angular/router'; import {Subscription} from "rxjs/index"; import {TlnManuscript, TlnPage, TlnWord, TlnEntity, TlnQueryParams} from '../models/models'; import {NavigationServiceService} from "../services/navigation-service.service"; @Component({ selector: 'app-content-view-tab-component', templateUrl: './content-view-tab-component.component.html', styleUrls: ['./content-view-tab-component.component.scss'] }) export class ContentViewTabComponentComponent implements OnInit, OnDestroy { // navigation tabs for the content view (manuscript view, page view, rhizome view) navTabLinks: any[]; // navbar on th left for navigating navBarOpenState: boolean; navBarOpenMode = 'push'; // side || over || push - // for passing into components - selectedManuscript: TlnManuscript; - selectedPage: TlnPage; - selectedWord: TlnWord; - lastSelectedEntity: TlnEntity; // one of the above - // listening to whats going on - selectedManuscriptSub: Subscription; - selectedPageSub: Subscription; - selectedWordSub: Subscription; queryParams: TlnQueryParams; queryParamSubscription: Subscription; - // only for accessing params in the template TODO: maybe not needed. - manQueryParam: string; - pageQueryParam: string; - wordQueryParam: string; constructor(private router: Router, private activatedRoute: ActivatedRoute, private naviService: NavigationServiceService) { // The links/tabs for routing the correct view-component this.navTabLinks = [ { label: 'Manuskriptansicht', link: 'manuscript', index: 0 }, { label: 'Seitenansicht', link: 'page', index: 1 }, { label: 'Rhizome-Ansicht', link: 'rhizome', index: 2 }, ]; } ngOnInit(): void { - -// TODO: Reduce all inputs & outputs!. Only basic routing here. everything else like data to display is done by services - // TODO: trigger here changes into service like selectManuscript(man) - // If url pasted or refreshed --> resetting the chosen things according to the query params of the url; + // If url pasted or page refreshed --> resetting the chosen things according to the query params of the url; this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => { this.queryParams = new TlnQueryParams(queryparams.man, queryparams.page, queryparams.row, queryparams.word, + queryparams.viewMode, queryparams.navBarOpenState, queryparams.navTreeIndex ); - // The following not needed really - this.manQueryParam = queryparams['man']; - this.pageQueryParam = queryparams['page']; - this.wordQueryParam = queryparams['word']; } ); // Create Navigation trees for the navBar from queryParams if (this.activatedRoute.snapshot.queryParamMap.get('man')) { this.naviService.createNavTreesFromUrlParams(this.activatedRoute.snapshot.queryParams); } else { this.naviService.createNavTreesOnInit(); } // Set the NavBarOpenstate to true if it is true in the url query param onInit. if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'true') { this.navBarOpenState = true; } - - // Listening to changes and set the selected things accordingly. - this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => { - this.selectedManuscript = m; - this.lastSelectedEntity = m.entity; }); - this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => { - this.selectedPage = p; - this.lastSelectedEntity = p.entity; }); - this.selectedWordSub = this.naviService.selectedWordChange.subscribe(w => { - this.selectedWord = w; - this.lastSelectedEntity = w.entity; }); } toggleNavDrawer() { // set it locally this.navBarOpenState = !this.navBarOpenState; // set the route as well const openStateString = this.navBarOpenState === null ? 'false' : (this.navBarOpenState ? 'true' : 'false'); this.naviService.setQueryParam('navBarOpenState', openStateString); this.naviService.updateRoute(); } ngOnDestroy() { // unsubscribe if component destroyed so there is no memory leak this.queryParamSubscription.unsubscribe(); } } diff --git a/src/app/models/models.ts b/src/app/models/models.ts index f517aea..3ef47a8 100644 --- a/src/app/models/models.ts +++ b/src/app/models/models.ts @@ -1,153 +1,166 @@ // class for Everything: extended by NavigationEntity, Manuscript, Page, Word with all common properties import {SafeUrl, ɵDomSanitizerImpl} from '@angular/platform-browser'; export class TlnEntity { id: string; // Short id, iri in most cases iri: string; // iri type: string; // rdfs:type navIndex: number; label?: string; constructor(id: string, iri: string, type: string, navIndex: number, label?: string) { this.id = id; this.iri = iri; this.type = type; this.navIndex = navIndex; this.label = label; } } export class TlnQueryParams { man: string; page: string; row: string; word: string; + viewMode: string; navBarOpenState: boolean; navTreeIndex: number; - constructor(man: string, page: string, row: string, word: string, navBarOpenState: boolean, navTreeIndex: number ) { + constructor(man: string, page: string, row: string, word: string, viewMode: string, navBarOpenState: boolean, navTreeIndex: number ) { this.man = man; this.page = page; + this.row = row; this.word = word; + this.viewMode = viewMode; this.navBarOpenState = navBarOpenState; this.navTreeIndex = navTreeIndex; } } // The navigation entries in each tree for each viewtab (TlnManuscript, TlnPage, PositionalEntity) used by navigation // TODO: add several idxes? Or choosing another order will reload all, hence there is only one idx // export class NavigationEntity { idx: number; tlnEntity: TlnEntity; thumb?: SafeUrl; // url of image (Thumbnail) img?: SafeUrl; // full image url svg?: SafeUrl; // svg url constructor(idx: number, tlnEntity: TlnEntity, thumb?: string, img?, svg?: SafeUrl ) { this.idx = idx; this.tlnEntity = tlnEntity; this.thumb = thumb; this.img = img; this.svg = svg; } } // subclass for TlnManuscript, TlnPage, Word with all common properties export class TlnPhysicalEntity { entity: TlnEntity; description?: string; image?: SafeUrl; // url of image (Thumbnail); svg?: SafeUrl; constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl) { this.entity = entity; this.description = description; this.image = image; this.svg = svg; } } // the manuscript class export class TlnManuscript extends TlnPhysicalEntity { manuscriptSpec?: string; constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, manuscriptSpec?: string ) { super( entity, description, image, svg); this.manuscriptSpec = manuscriptSpec; } } // the TlnPage class export class TlnPage extends TlnPhysicalEntity { pageSpec?: string; constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl, pageSpec?: string ) { super( entity, description, image, svg); this.pageSpec = pageSpec; } } export class TlnRow extends TlnPhysicalEntity { rowSpec?: PositionalEntity; constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, rowSpec?: PositionalEntity ) { super( entity, description, image, svg); this.rowSpec = rowSpec; } } // the TlnWord class export class TlnWord extends TlnPhysicalEntity { wordSpec?: PositionalEntity; constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: SafeUrl, wordSpec?: PositionalEntity ) { super( entity, description, image, svg); this.wordSpec = wordSpec; } } export class Annotation { id: string; text: string; styles: Array; } export class Svg { id: string; svgUrl: string; svg?: SafeUrl; constructor(id, svgUrl, svg?) { this.id = id; this.svgUrl = svgUrl; this.svg = svg; } } // Only relevant if we create an svg ourselves? export interface PositionalEntity { // used for word rectangles as well as for line numbering id: string; text: string; left: number; top: number; width: number; height: number; row?: number; iri?: string; // TODO, change this. will be the id later when change data source to rdf ... } export class NavTree { idx: number; isActive: boolean; label: string; treeClass: string; constructor( idx: number, isActive: boolean, label: string, treeClass: string ) { this.idx = idx; this.isActive = isActive; this.label = label; this.treeClass = treeClass; } } +export class RVPageView { // Object for "double page" view + recto: SafeUrl; + verso: SafeUrl; + + constructor(recto: SafeUrl, verso: SafeUrl) { + this.recto = recto; + this.verso = verso; + } +} + diff --git a/src/app/page-view-component/faksimile-component/faksimile-component.component.html b/src/app/page-view-component/faksimile-component/faksimile-component.component.html deleted file mode 100644 index ca0f052..0000000 --- a/src/app/page-view-component/faksimile-component/faksimile-component.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/src/app/page-view-component/faksimile-component/faksimile-component.component.scss b/src/app/page-view-component/faksimile-component/faksimile-component.component.scss deleted file mode 100644 index ad7e582..0000000 --- a/src/app/page-view-component/faksimile-component/faksimile-component.component.scss +++ /dev/null @@ -1,9 +0,0 @@ - -.text-container { - height:100%; - vertical-align: top; - align-content: left; - align-items: left; - display: table-cell; - padding: 10px; -} diff --git a/src/app/page-view-component/faksimile-component/faksimile-component.component.spec.ts b/src/app/page-view-component/faksimile-component/faksimile-component.component.spec.ts deleted file mode 100644 index 7bc0870..0000000 --- a/src/app/page-view-component/faksimile-component/faksimile-component.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FaksimileComponentComponent } from './faksimile-component.component'; - -describe('FaksimileComponentComponent', () => { - let component: FaksimileComponentComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ FaksimileComponentComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(FaksimileComponentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/page-view-component/faksimile-component/faksimile-component.component.ts b/src/app/page-view-component/faksimile-component/faksimile-component.component.ts deleted file mode 100644 index 7b650ac..0000000 --- a/src/app/page-view-component/faksimile-component/faksimile-component.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-faksimile-component', - templateUrl: './faksimile-component.component.html', - styleUrls: ['./faksimile-component.component.scss'] -}) -export class FaksimileComponentComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/src/app/page-view-component/page-view-component.component.html b/src/app/page-view-component/page-view-component.component.html index 3d53440..70b9573 100644 --- a/src/app/page-view-component/page-view-component.component.html +++ b/src/app/page-view-component/page-view-component.component.html @@ -1,95 +1,97 @@ - - + # ## vertical_split horizontal_split
- + +
+ +
+ +
+
+
+
+ +
+
diff --git a/src/app/page-view-component/page-view-component.component.ts b/src/app/page-view-component/page-view-component.component.ts index 5828eb7..8fb8e73 100644 --- a/src/app/page-view-component/page-view-component.component.ts +++ b/src/app/page-view-component/page-view-component.component.ts @@ -1,110 +1,117 @@ import {Component, OnInit} from '@angular/core'; -import {PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord} from "../models/models"; +import {PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord, RVPageView, TlnQueryParams} from '../models/models'; import {SvgService} from "../services/svg.service"; import {PageViewService} from "../services/field-interaction.service"; import {Subscription} from "rxjs/index"; import {ActivatedRoute, Params, Router} from "@angular/router"; import {NavigationServiceService} from "../services/navigation-service.service"; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; @Component({ selector: 'app-page-view-component', templateUrl: './page-view-component.component.html', styleUrls: ['./page-view-component.component.scss'] }) export class PageViewComponentComponent implements OnInit { activePage: TlnPage; activePageChange: Subscription; // images selectedImage: SafeUrl; // the image selected in gallery, menue or so // svg selectedSvg: SafeUrl; // the svg to show + selectedSvgRV: RVPageView; // "double page" view for recto and verso // settings for user to choose paging: string; alignment: string; fixSidebar: boolean; highlight: boolean; - manQueryParam: string; - pageQueryParam: string; - rowQueryParam: string; + queryParamSubscription: Subscription; + queryParams: TlnQueryParams; + wordSubscription: Subscription; wordQueryParam: string; // NavBar/Infobox selectedWord: TlnWord; openState: boolean; defaultOpenState = false; constructor(private svgService: SvgService, private pageViewService: PageViewService, private router: Router, private activatedRoute: ActivatedRoute, private naviService: NavigationServiceService, private sanitizer: DomSanitizer ) { } ngOnInit() { + // If url pasted or page refreshed --> resetting the chosen things according to the query params of the url; + this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => { + this.queryParams = new TlnQueryParams(queryparams.man, + queryparams.page, + queryparams.row, + queryparams.word, + queryparams.viewMode, + queryparams.navBarOpenState, + queryparams.navTreeIndex ); + } + ); this.activePageChange = this.naviService.selectedPageChange.subscribe( page => { this.activePage = page; - console.log(page); this.selectedSvg = this.sanitizer.bypassSecurityTrustResourceUrl(page.svg); } ); - // TODO: make the selected scg dynamic - // this.selectedSvg = {id: '131', - // svgUrl: 'https://drive.switch.ch/remote.php/webdav/Der_spaete_Nietzsche/DATA/svg/W_II_1_page131_web.svg'}; - // this.getSvgFromService(); - // infobox + this.openState = this.defaultOpenState; // default settings oninit this.paging = 'double'; this.alignment = 'horizontal'; this.fixSidebar = false; this.highlight = true; - this.svgService.onClickedSvg.subscribe( // subscribe to changes if another svg is selected - (changedSVG: Svg ) => this.selectedSvg = changedSVG - ); - this.wordSubscription = this.pageViewService.wordChange$.subscribe( word => { if (this.selectedWord) { if (this.selectedWord.wordSpec === word) { this.toggleDetailsDrawer(); } else { this.selectedWord.wordSpec = word; this.selectedWord.entity = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.text); const wordNav = new NavigationEntity(0, this.selectedWord.entity); this.naviService.onSelectedItem(wordNav); this.naviService.setResourceOfInterest(word.id); if (!this.openState) { this.toggleDetailsDrawer(); } } } else { const e = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.id); this.selectedWord = new TlnWord(e, word.text, this.selectedImage, this.selectedSvg, word); } }); } private turnPage(direction: number) { this.naviService.turnPage(direction); // change chosen page } toggleDetailsDrawer() { this.openState = !this.openState; } toggleHighlight() { this.highlight = !this.highlight; } toggleSidebarFixation() { this.fixSidebar = !this.fixSidebar; } + setViewMode(view) { + this.naviService.setQueryParam('viewMode', view); + this.naviService.updateRoute(); + } } diff --git a/src/app/page-view-component/page-view-routes.ts b/src/app/page-view-component/page-view-routes.ts deleted file mode 100644 index f614a00..0000000 --- a/src/app/page-view-component/page-view-routes.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Routes } from '@angular/router'; -import {FaksimileComponentComponent} from "./faksimile-component/faksimile-component.component"; -import {SynopsisComponentComponent} from "./synopsis-component/synopsis-component.component"; -import {TranscriptionComponentComponent} from "./transcription-component/transcription-component.component"; - -export const PAGEVIEW_ROUTES: Routes = [ - { path: '', redirectTo: 'synopsis', pathMatch: 'prefix' }, - { path: 'synopsis', component: SynopsisComponentComponent }, - { path: 'faksimile', component: FaksimileComponentComponent }, - { path: 'transcription', component: TranscriptionComponentComponent }, - { path: '', redirectTo: 'synopsis', pathMatch: 'prefix' } // default -]; diff --git a/src/app/page-view-component/synopsis-component/synopsis-component.component.html b/src/app/page-view-component/synopsis-component/synopsis-component.component.html deleted file mode 100644 index 40b57d1..0000000 --- a/src/app/page-view-component/synopsis-component/synopsis-component.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
- -
-
- -
- diff --git a/src/app/page-view-component/synopsis-component/synopsis-component.component.scss b/src/app/page-view-component/synopsis-component/synopsis-component.component.scss deleted file mode 100644 index ad7e582..0000000 --- a/src/app/page-view-component/synopsis-component/synopsis-component.component.scss +++ /dev/null @@ -1,9 +0,0 @@ - -.text-container { - height:100%; - vertical-align: top; - align-content: left; - align-items: left; - display: table-cell; - padding: 10px; -} diff --git a/src/app/page-view-component/synopsis-component/synopsis-component.component.spec.ts b/src/app/page-view-component/synopsis-component/synopsis-component.component.spec.ts deleted file mode 100644 index 4e92f1e..0000000 --- a/src/app/page-view-component/synopsis-component/synopsis-component.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SynopsisComponentComponent } from './synopsis-component.component'; - -describe('SynopsisComponentComponent', () => { - let component: SynopsisComponentComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ SynopsisComponentComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(SynopsisComponentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/page-view-component/synopsis-component/synopsis-component.component.ts b/src/app/page-view-component/synopsis-component/synopsis-component.component.ts deleted file mode 100644 index c59fae7..0000000 --- a/src/app/page-view-component/synopsis-component/synopsis-component.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-synopsis-component', - templateUrl: './synopsis-component.component.html', - styleUrls: ['./synopsis-component.component.scss'] -}) - -export class SynopsisComponentComponent implements OnInit { - - image = { height: 973.91998, width: 2038.5601, file_name: "../assets/W-II-1,131et132.jpg" }; - text_field = { left: 358.805, top: 78.051, width: 662.761, height: 831.879 }; - manuscript = { title: 'W II 1', - pages: [ - { number: '131', - metadata: [ - { head: { description: 'Stellenkommentar'}, content: [ { reference: '2', quote: 'Leben Thomas Carlyle’s', text: 'vgl. Froude, Das Leben Thomas Carlyles'} ]}, - { head: { description: 'Druckorte' }, content: [ { reference: '24-34', text: 'KGW VIII 9[11]'}, { reference: '34-40', text:'KGW VIII 9[12]'} ]} - ] - } - ] - }; - - constructor( ) { - } - - ngOnInit() { - } - -} diff --git a/src/app/page-view-component/transcription-component/transcription-component.component.html b/src/app/page-view-component/transcription-component/transcription-component.component.html deleted file mode 100644 index 9e6fc4e..0000000 --- a/src/app/page-view-component/transcription-component/transcription-component.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -
- -
diff --git a/src/app/page-view-component/transcription-component/transcription-component.component.scss b/src/app/page-view-component/transcription-component/transcription-component.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/page-view-component/transcription-component/transcription-component.component.spec.ts b/src/app/page-view-component/transcription-component/transcription-component.component.spec.ts deleted file mode 100644 index a7abe8a..0000000 --- a/src/app/page-view-component/transcription-component/transcription-component.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TranscriptionComponentComponent } from './transcription-component.component'; - -describe('TranscriptionComponentComponent', () => { - let component: TranscriptionComponentComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ TranscriptionComponentComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TranscriptionComponentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/page-view-component/transcription-component/transcription-component.component.ts b/src/app/page-view-component/transcription-component/transcription-component.component.ts deleted file mode 100644 index 8fbf817..0000000 --- a/src/app/page-view-component/transcription-component/transcription-component.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import {Component, OnChanges, OnInit} from '@angular/core'; -import {NavigationServiceService} from "../../services/navigation-service.service"; -import {ExistDbSvgService} from "../../services/svg.service"; -import {Subscription} from "rxjs/index"; -import {TlnPage} from "../../models/models"; - -@Component({ - selector: 'app-transcription-component', - templateUrl: './transcription-component.component.html', - styleUrls: ['./transcription-component.component.scss'] -}) -export class TranscriptionComponentComponent implements OnInit { - - selectedPageSubscription: Subscription; - pageId: string; - activePage: TlnPage; - - constructor( private naviService: NavigationServiceService, private svgService: ExistDbSvgService) { } - - ngOnInit() { - this.selectedPageSubscription = this.naviService.selectedPageChange.subscribe(page => { - this.pageId = page.id; - this.activePage = page; - console.log('new page in transcriptionView', page); - // this.svgService.getSvg(page.iri); - }); - } -} diff --git a/src/app/services/navigation-service.service.ts b/src/app/services/navigation-service.service.ts index 1be0dd7..7d3ec27 100644 --- a/src/app/services/navigation-service.service.ts +++ b/src/app/services/navigation-service.service.ts @@ -1,418 +1,416 @@ import {EventEmitter, Injectable, OnDestroy} from '@angular/core'; -import { - TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnWord, TlnQueryParams, - NavTree, Svg, TlnRow -} from '../models/models'; +import { TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnQueryParams, NavTree } from '../models/models'; import {NietzscheSourceSeviceService} from "./nietzsche-source-sevice.service"; import {Subscription} from "rxjs/index"; -import {ActivatedRoute, Params, Router, NavigationEnd, ChildActivationEnd} from '@angular/router'; +import {ActivatedRoute, Params, Router, ChildActivationEnd} from '@angular/router'; import {QueryService} from "./query.service"; import {DomSanitizer} from '@angular/platform-browser'; @Injectable({ providedIn: 'root' }) export class NavigationServiceService implements OnDestroy { selectedManuscript: TlnManuscript; selectedPage: TlnPage; queryParams: TlnQueryParams; // Listening to the queries entered actively (so also if page is refreshed or a url loaded) queryParamSubscription: Subscription; viewTabSubscription: Subscription; activeViewTab = ''; constructor(private nietzscheSourceService: NietzscheSourceSeviceService, private router: Router, private sanitizer: DomSanitizer, private activatedRoute: ActivatedRoute, private queryService: QueryService ) { - this.queryParams = new TlnQueryParams('', '', '', '', false, 0); + this.queryParams = new TlnQueryParams('', '', '', '', '', false, 0); // Listening to the queries entered actively (so also if page is refreshed or a url loaded) this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => { // set new query params this.queryParams = new TlnQueryParams(queryparams.man, queryparams.page, queryparams.row, queryparams.word, + queryparams.viewMode, queryparams.navBarOpenState, queryparams.navTreeIndex ); } ); // also listening to changes in viewtab and impose navTreeChange this.viewTabSubscription = this.router.events.subscribe(event => { if (event instanceof ChildActivationEnd) { const regex = new RegExp('\\W'); // for splitting at every non alphanumeric char const newTab = this.router.url.split(regex)[2]; if (this.activeViewTab !== newTab) { this.changeNavTreeOnViewChange(newTab); } } }); this.navTreeIndex = [ { idx: 0, isActive: true, label: 'Manuskripte', treeClass: 'Tln:Manuscript' }, { idx: 1, isActive: false, label: 'Seiten', treeClass: 'TlnPage' }/*, { idx: 2, isActive: false, label: 'Worte', treeClass: 'TlnWord' }*/ ]; } resourceOfInterest: string; // simple iri for Databrowser and rdf stuff to come resourceOfInterestChange = new EventEmitter(); selectedManuscriptChange = new EventEmitter(); selectedPageChange = new EventEmitter(); activeTreeData: Array; activeTreeDataChange = new EventEmitter>(); // if the active tree data changes navTreeIndex: Array; navTreeIndexChange = new EventEmitter>(); // Weather only the index changes manuscriptNavTree: Array = []; manuscriptNavTreeChange = new EventEmitter>(); // internally used pageNavTree: Array = []; pageNavTreeChange = new EventEmitter>(); // internally used /** * setActiveTreeData * Set the active tree data and emits it back to navigation list component, * param: idx:number : the index of the tree data to be displayed. */ setActiveTreeData(idx: number) { switch (idx) { case 0: // Manuscript this.activeTreeData = this.manuscriptNavTree; break; case 1: // Page this.activeTreeData = this.pageNavTree; break; } this.activeTreeDataChange.emit(this.activeTreeData); } /** * updateRoute - * Gets the active url without query parameters and routes to the updated query params of this class. + * routes to the active url with the updated query params of this class. */ updateRoute() { const activeUrl = this.router.url.split('?')[0]; // seems workaroundish, but actually safe & secure; no other suitable solution at hand this.router.navigate([activeUrl], { queryParams: this.queryParams }); } /** * changeActiveTreeIndex * Simply changing the active tree index for the navBar in * param: idx:number : the index of the tree which should be displayed. */ changeActiveTreeIndex(idx: number) { // setting all to false first for (const tree of this.navTreeIndex ) { tree.isActive = false; } this.navTreeIndex[idx].isActive = true; this.navTreeIndexChange.emit(this.navTreeIndex); this.setQueryParam('navTreeIndex', idx.toString() ); // also routing according to the chosen thing this.updateRoute(); } /** * changeNavTreeOnViewChange: Changes the active Navigation tree * e.g. if a user changes to page view, the navigation bar should also switch to pages. If Manuscript view is clicked, the navigation bar * should show manuscript items * param: oldView: The view before view changes * param: chengedView: The newly active view * */ changeNavTreeOnViewChange(changedView) { let treeIndex; if ( changedView === 'manuscript' ) { treeIndex = 0; } else { treeIndex = 1; } this.changeActiveTreeIndex(treeIndex); this.setActiveTreeData(treeIndex); this.activeViewTab = changedView; } /** * createNavTreesOnInit creates the first trees if no query params are available in the url: * It ceates the manuscripNavTree and the pageNavTree of the first manuscript per default. * */ createNavTreesOnInit() { this.getManuscriptsToNavTree(); // create the pageNavTree with the first item of manuscriptNavTree AFTER the first TlnManuscript is in the manuscriptNavTree this.manuscriptNavTreeChange.subscribe(tree => { this.getPagesToNavTree(tree[0].tlnEntity.id); this.activeTreeData = tree; this.setActiveTreeData(0); this.changeActiveTreeIndex(0); }); if (!this.selectedManuscript) { // if no manuscript is selected the first entry will be set as selected manuscript; this.manuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity)); } } createManuscriptNavTreeFromRdf() { // TODO: implement this further for switch to RDF data only this.queryService.getQueryfromFilename('getConvolutes.rq').subscribe(qString => { this.queryService.getData(qString, 'SELECT').subscribe(data => { console.log('convolute data: ', data); }); }); } /** * getManuscriptsToNavTree * Gets the convolutes/manuscripts from nietzscheSource and pushes them as NavigationEntitiy objects to the manuscriptNavTree array */ getManuscriptsToNavTree() { this.nietzscheSourceService.getConvolutes().subscribe( res => { const manuscripts = res.result.children; manuscripts.forEach(( man, index ) => { const entity = new TlnEntity(man.id, man.api_retrieve_content, 'man', index, man.id); const manEntity = new NavigationEntity(index, entity, ''); this.manuscriptNavTree.push(manEntity); - if (index + 1 === manuscripts.length) { // if everything is pushed to the manuscriptNavTree we emit the new tree to the navigation-list-component + // if everything is pushed to the manuscriptNavTree we emit the new tree to the navigation-list-component + if (index + 1 === manuscripts.length) { this.manuscriptNavTreeChange.emit(this.manuscriptNavTree); } }); } ); } /** * createManuscriptNavTreeFromUrl * Gets the convolutes/manuscripts from nietzscheSource and pushes them as NavigationEntitiy objects to the manuscriptNavTree array * param: params: the query parameters */ createManuscriptNavTreeFromUrl(params) { this.getManuscriptsToNavTree(); this.manuscriptNavTreeChange.subscribe(tree => { tree.forEach(navEntity => { if (navEntity.tlnEntity.id === params.man) { this.setSelectedManuscript(navEntity.tlnEntity); // setting the active tree to the manuscriptNavTree if (params.navTreeIndex === '0') { this.setActiveTreeData(Number(params.navTreeIndex)); } } }); }); } /** * getPagesToNavTree * Gets the pages from a given manuscript to the pageNavTree. Sets the selectedPage to the passed pageId. If no pageId is passed, * the selectedPage will be set to the first page of the given manuscript. * param: manId: the manuscript id for ehich the pages are loaded * param: pageId: the page id which should be set as the selected page */ getPagesToNavTree(manId: string, pageId?: string) { this.pageNavTree = []; this.nietzscheSourceService.getPages(manId).subscribe( res => { const pages = res.result.children; let intIndex = 0; // internal index pages.forEach((p, index) => { // only if the last id part of the id can be converted to a number, it is a single page for which we have use. // (we only transcribe single pages for now if (isNaN( p.id.split(',').pop() ) === false) { const entity = new TlnEntity(p.id, p.api_retrieve_content, 'page', intIndex, p.id ); const pageEntity = new NavigationEntity(intIndex, entity, ''); this.pageNavTree.push(pageEntity); if (!pageId && intIndex === 0) { // if there is no page param passed set the first entry as selected page this.setSelectedPage(this.pageNavTree[0]); } intIndex += 1; if (pageId && p.id === pageId ) { // if the p.id matches the pageId we set that page as selectedPage this.setSelectedPage(pageEntity); } } // else {console.log('skipped double page', p.id); } // if last page has been loaded to pageNavTree we emit to navlist for display and add the additional data from other sources if (index + 1 === pages.length) { this.pageNavTreeChange.emit(this.pageNavTree); - console.log('pageNavTree', this.pageNavTree); this.addDataToPageTree(); } }); }); } /** * createNavTreesFromUrlParams * Loads the navigation view & trees accoring to the given query parameters. * param: params: the query parameters */ createNavTreesFromUrlParams(params) { // change active this.changeActiveTreeIndex(Number(params.navTreeIndex)); this.createManuscriptNavTreeFromUrl(params); this.createPageNavTreeFromUrl(params); } setSelectedManuscript(man: TlnEntity) { this.selectedManuscript = new TlnManuscript(man); this.selectedManuscriptChange.emit(this.selectedManuscript); } setSelectedPage(pageData: NavigationEntity ) { this.selectedPage = new TlnPage(pageData.tlnEntity, pageData.tlnEntity.label, pageData.img, pageData.svg); this.selectedPageChange.emit(this.selectedPage); } // sets the first page as selected if no selectedPage setSelectedPageIfNone() { if (!this.selectedPage) { this.pageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0])); this.pageNavTreeChange.unsubscribe(); } } turnPage(modifier: number) { const newPageIndex = this.selectedPage.entity.navIndex + modifier; this.setSelectedPage(this.pageNavTree[newPageIndex]); } /** * createPageNavTreeFromUrl: Loads all navigation navigation trees according to the given queryParams passed * param: params: the query parameters * */ createPageNavTreeFromUrl(params) { this.getPagesToNavTree(params.man, params.page); // if the active tree === '1' we have to set pageNavTree as active tree if (params.navTreeIndex === '1' ) { // update active tree data each time the pageNavTree changes this.pageNavTreeChange.subscribe(tree => this.setActiveTreeData(Number(params.navTreeIndex))); } } switchTreeIfPageView(activeTab: string) { if ( activeTab === 'page') { // console.log('switching tree hence acivetab ===', activeTab); this.setActiveTreeData(1); this.changeActiveTreeIndex(1); this.setSelectedPageIfNone(); } } onSelectedItem(item: NavigationEntity) { console.log('clicked item: ', item); const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path; switch (item.tlnEntity.type) { case 'man': { // set the new url with the chose man parameter this.getPagesToNavTree(item.tlnEntity.id); // If the active tab is the page view we switch automatically to page tree in navigation this.switchTreeIfPageView(activeTab); this.setSelectedManuscript(item.tlnEntity); this.setQueryParam('man', this.selectedManuscript.entity.id ); // also routing according to the chosen thing break; } case 'page': { this.setSelectedPage(item); this.selectedPageChange.emit(this.selectedPage); this.setQueryParam('page', this.selectedPage.entity.id ); // also routing according to the chosen thing break; } default: { console.log('unknown item.tlnEntity.type: ', item.tlnEntity.type); } } this.updateRoute(); } getSelectedPage() { return this.selectedPage; } setResourceOfInterest(res: string) { this.resourceOfInterest = res; this.resourceOfInterestChange.emit(res); } // adds all file data such as thumbnails as well as imageUrls or svgUrls to the pageNavTree addDataToPageTree() { for (let i = 0; i < this.pageNavTree.length; i++) { this.addFileDataToPageTree(this.pageNavTree[i].tlnEntity.iri, i); } } addFileDataToPageTree(pageIri, index) { this.nietzscheSourceService.getFileUrl(pageIri).subscribe(data => { this.getFileToEntity(data.result.metadata.download_version.thumb, index, 'thumb'); // get thumbnail this.pageNavTree[index].img = data.result.metadata.download_version.medium; // setting the image url // console.log(data.result.metadata); this.setSvgUrl(data.result.metadata.siglum, index); // setting the svg url }); } private setSvgUrl(pageName: string, index) { const baseUrl = 'http://130.60.24.65:8081/exist/rest/db/ProjectData/Nietzsche/svg/'; const pNamepre = pageName.split('-').join('_'); // exchanging '-' with underscore const pName = pNamepre.split(',')[0]; const pNumber = pNamepre.split(',')[1]; const pageZerofilled = ('000' + pNumber).slice(-3); this.pageNavTree[index].svg = baseUrl + pName + '_page' + pageZerofilled + '_web.svg'; } /** * getFileToEntity: Gets a file from a url and adds it to the desired property of a navigation entity * param: url: the query parameters * param: index: the index of the navTree entity to update * param: prop: The property which will be set, e.g. 'thumb' for navEntity.thumb */ getFileToEntity(url: string, index: number, prop: string) { this.nietzscheSourceService.getFileFromUrl(url).subscribe(file => { const reader = new FileReader(); reader.addEventListener('load', () => { if ( this.pageNavTree[index] ) { this.pageNavTree[index][prop] = reader.result; } }, false); if (file) { reader.readAsDataURL(file); } this.pageNavTreeChange.emit(this.pageNavTree); }); } getFullImage(pageIri: string) { this.nietzscheSourceService.getFileUrl(pageIri).subscribe(data => { this.nietzscheSourceService.getFileFromUrl(data.result.metadata.download_version.medium).subscribe(img => { const reader = new FileReader(); reader.addEventListener('load', () => { if ( this.selectedPage ) { this.selectedPage.image = reader.result; } }, false); if (img) { reader.readAsDataURL(img); } this.selectedPageChange.emit(this.selectedPage); }); }); } // sets queryParams: to the queryParam object setQueryParam(type: string, value: string) { this.queryParams[type] = value; // this.queryParamsChange.emit(this.queryParams); } ngOnDestroy() { // unsubscribe to subscriptions if component change so there is no memory leak this.queryParamSubscription.unsubscribe(); } } diff --git a/src/app/services/svg.service.ts b/src/app/services/svg.service.ts index 4872462..684ffcb 100644 --- a/src/app/services/svg.service.ts +++ b/src/app/services/svg.service.ts @@ -1,56 +1,11 @@ import {EventEmitter, Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {HttpClient} from '@angular/common/http'; import {Svg} from '../models/models'; @Injectable({ providedIn: 'root' }) -export class SvgService { - constructor( private http: HttpClient ) { } - onClickedSvg = new EventEmitter(); - - // TODO refactoring so all files use the same get: images, svg - public getSvg(svgUrl: string): Observable { - return this.http - .get(svgUrl, { responseType: 'blob', - withCredentials: true - - }); } - -} - -@Injectable({ - providedIn: 'root' -}) -export class ExistDbSvgService { - - baseApi = 'http://130.60.24.65:8081/exist/rest/db/ProjectData/Nietzsche/svg/'; - constructor( private http: HttpClient ) { } - // http://130.60.24.65:8081/exist/rest/db/ProjectData/Nietzsche/svg/W_II_1_page138_web.svg - - // http://130.60.24.65:8081/exist/rest/db/ProjectData/Nietzsche/svg/N_VIIpage_1_web.svg - // "DFGA/N-VII-1" - // W_II_1_pag - // e138_web.svg - - public getSvgFromUrl(url: string): Observable { - return this.http - .get(url, { responseType: 'blob', - withCredentials: true - }); - } - - public getSvgFromRdf(pageId: string): Observable { - const svgUrl = `${this.baseApi}, ${pageId}`; - return this.http - .get(svgUrl, { responseType: 'blob', - withCredentials: true - }); - } - -} - - +export class SvgService {} diff --git a/src/app/textfield-component/textfield.component.html b/src/app/textfield-component/textfield.component.html index 619c0b0..6cb5c01 100644 --- a/src/app/textfield-component/textfield.component.html +++ b/src/app/textfield-component/textfield.component.html @@ -1,50 +1,52 @@ + class = 'textfield'> - + + + + - + {{word.text}} - + {{word.text}} {{word.text}} diff --git a/src/app/textfield-component/textfield.component.ts b/src/app/textfield-component/textfield.component.ts index 9b41dd7..39dcb66 100644 --- a/src/app/textfield-component/textfield.component.ts +++ b/src/app/textfield-component/textfield.component.ts @@ -1,118 +1,114 @@ import { Component, Input, OnInit } from '@angular/core'; import {PositionalEntity, Svg, TlnPage} from '../models/models'; import wordData from '../../assets/W_II_1_page131.json'; import { PageViewService } from '../services/field-interaction.service'; import { OptionService } from '../services/options.service'; import {NavigationServiceService} from '../services/navigation-service.service'; import {Subscription} from 'rxjs'; @Component({ selector: 'text-field', templateUrl: './textfield.component.html', styleUrls: ['./textfield.component.css'] }) /** * Textfield component */ export class TextFieldComponent implements OnInit { - activePage: TlnPage; - activePageChange: Subscription; - selectedSvg: Svg; + + imageSpec = {height: 973.91998, width: 2038.5601 }; @Input() image; @Input() svg; @Input() text_field; svg_width: number = 600; svg_height: number = 800; svg_left: number = 0; svg_top: number = 0; viewBox: string = ''; words: PositionalEntity[]; clickedWord?: PositionalEntity; hoveredWord?: PositionalEntity; offHoveredWord?: PositionalEntity; // Options fadeOut = false; markupAll = false; constructor( private wordservice: PageViewService, private optionservice: OptionService, private naviService: NavigationServiceService) { this.words = wordData; } ngOnInit() { - this.activePageChange = this.naviService.selectedPageChange.subscribe( page => { - this.activePage = page; - this.selectedSvg = page.svg; } - ); + console.log('this.image', this.image); if (this.text_field != null) { this.svg_left = this.text_field.left; this.svg_top = this.text_field.top; this.svg_width = this.text_field.width; this.svg_height = this.text_field.height; - } else if (this.image != null) { - this.svg_width = this.image.width; - this.svg_height = this.image.height; + } else if (this.imageSpec != null) { + this.svg_width = this.imageSpec.width; + this.svg_height = this.imageSpec.height; } this.viewBox = this.svg_left + ' ' + this.svg_top + ' ' + this.svg_width + ' ' + this.svg_height; // console.log(this.viewBox) this.wordservice.onClickedWord.subscribe( (changedWord: PositionalEntity ) => this.clickedWord = changedWord ); this.wordservice.onHoveredWord.subscribe( (changedWord: PositionalEntity ) => this.hoveredWord = changedWord ); this.wordservice.offHoveredWord.subscribe( (changedWord: PositionalEntity ) => { this.offHoveredWord = changedWord; } ); this.optionservice.fadeOutchange.subscribe( fadeout => { this.fadeOut = fadeout; console.log('fadeout now: ' + this.fadeOut); } ); this.optionservice.markupAll.subscribe( markup => { this.markupAll = markup; console.log('marking up all words in transcription: ' + this.markupAll); } ); } /** * This method checks all Words which classes should applied to a word or not. If a class is applicable, the method returns true. * * @param mode The mode of styling: 0 === howered word itself; 1 === words with the same row as the howered word. * @param word The word * @returns true or false for each of the words. */ private assignClass(mode: number, word: PositionalEntity) { if (typeof this.hoveredWord !== 'undefined' && this.hoveredWord !== null && this.hoveredWord !== this.offHoveredWord ) { switch (mode) { case 0: if (word === this.hoveredWord && word !== this.offHoveredWord) { return true; } break; case 1: if (word.hasOwnProperty('row')) { if (word.row === this.hoveredWord.row && word.id !== this.hoveredWord.id) { // console.log(word.text + ' has also row == ' + word.row); return true; } } break; } } } private assignTextClass(word: PositionalEntity) { if (this.fadeOut) { if ( word === this.hoveredWord) { return false; } else { return true; } } } }