Merge pull request #236 from evt-project/feature/Highlight2

Feature/highlight2

angular.json

@@ -35,6 +35,7 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/@popperjs/core/dist/umd/popper.min.js",
               "node_modules/openseadragon/build/openseadragon/openseadragon.js",
+              "node_modules/openseadragoncanvasoverlay/openseadragon-canvas-overlay.js",
               "node_modules/prismjs/prism.js"
             ],
             "vendorChunk": true,

package.json

@@ -44,7 +44,8 @@
     "ng-dynamic-component": "~10.1.0",
     "ng2-handy-syntax-highlighter": "^1.0.12",
     "ngx-spinner": "^13.1.1",
-    "openseadragon": "^3.0.0",
+    "openseadragon": "^4.1.0",
+    "openseadragoncanvasoverlay": "^0.0.1",
     "prismjs": "^1.27.0",
     "rxjs": "^7.5.5",
     "tslib": "^2.3.1",

src/app/app-routing.module.ts

@@ -2,13 +2,17 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CollationComponent } from './view-modes/collation/collation.component';
 import { ImageTextComponent } from './view-modes/image-text/image-text.component';
+import { ImageOnlyComponent } from './view-modes/image-only/image-only.component';
 import { ReadingTextComponent } from './view-modes/reading-text/reading-text.component';
 import { TextSourcesComponent } from './view-modes/text-sources/text-sources.component';
 import { TextTextComponent } from './view-modes/text-text/text-text.component';
 import { TextVersionsComponent } from './view-modes/text-versions/text-versions.component';
+import { ImageImageComponent } from './view-modes/image-image/image-image.component';
 
 const appRoutes: Routes = [
   { path: 'imageText', component: ImageTextComponent },
+  { path: 'imageOnly', component: ImageOnlyComponent },
+  { path: 'imageImage', component: ImageImageComponent },
   { path: 'readingText', component: ReadingTextComponent },
   { path: 'textText', component: TextTextComponent },
   { path: 'collation', component: CollationComponent },

src/app/app-routing.module.ts.bak

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CollationComponent } from './view-modes/collation/collation.component';
+import { ImageTextComponent } from './view-modes/image-text/image-text.component';
+import { ReadingTextComponent } from './view-modes/reading-text/reading-text.component';
+import { TextSourcesComponent } from './view-modes/text-sources/text-sources.component';
+import { TextTextComponent } from './view-modes/text-text/text-text.component';
+import { TextVersionsComponent } from './view-modes/text-versions/text-versions.component';
+
+const appRoutes: Routes = [
+  { path: 'imageText', component: ImageTextComponent },
+  { path: 'readingText', component: ReadingTextComponent },
+  { path: 'textText', component: TextTextComponent },
+  { path: 'collation', component: CollationComponent },
+  { path: 'textSources', component: TextSourcesComponent },
+  { path: 'textVersions', component: TextVersionsComponent },
+];
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' })],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -6,6 +6,6 @@
   <span class="navbar-toggler" [ngClass]="{opened: navbarOpened$ | async}" (click)="toggleToolbar()" [title]="'toggleToolbar' | translate">
     <evt-icon [iconInfo]="navbarTogglerIcon$ | async"></evt-icon>
   </span>
-  <evt-nav-bar [ngClass]="{opened: navbarOpened$ | async}"></evt-nav-bar>
+  <evt-nav-bar [ngClass]="{opened: navbarOpened$ | async}" *ngIf="hasNavBar"></evt-nav-bar>
 </ng-container>
 <ngx-spinner #mainSpinner type="ball-spin-clockwise" bdColor="rgba(51,51,51,0.8)"></ngx-spinner>

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { AppConfig } from './app.config';
 import { ThemesService } from './services/themes.service';
 import { ShortcutsService } from './shortcuts/shortcuts.service';
 import { EvtIconInfo } from './ui-components/icon/icon.component';
+import { EVTStatusService } from './services/evt-status.service';
 
 @Component({
   selector: 'evt-root',
@@ -20,6 +21,7 @@ export class AppComponent implements OnDestroy {
   public hasNavBar = AppConfig.evtSettings.ui.enableNavBar;
   public navbarOpened$ = new BehaviorSubject(this.hasNavBar && AppConfig.evtSettings.ui.initNavBarOpened);
 
+
   public navbarTogglerIcon$: Observable<EvtIconInfo> = this.navbarOpened$.pipe(
     map((opened: boolean) => opened ? { icon: 'caret-down', iconSet: 'fas' } : { icon: 'caret-up', iconSet: 'fas' }),
   );
@@ -30,7 +32,19 @@ export class AppComponent implements OnDestroy {
     private shortcutsService: ShortcutsService,
     private themes: ThemesService,
     private titleService: Title,
+    private evtStatusService: EVTStatusService,
+
   ) {
+
+    this.evtStatusService.currentViewMode$.pipe().subscribe((view) => {
+      if (view!==undefined && (view.id === 'imageImage' ||view.id === 'imageOnly') ) {
+        this.navbarOpened$.next(false);
+        this.hasNavBar = false;
+      } else {
+        this.navbarOpened$.next(true);
+        this.hasNavBar = true;
+      }
+    });
     this.router.events.subscribe((event) => {
       switch (true) {
         case event instanceof NavigationStart:

src/app/app.component.ts.bak

@@ -0,0 +1,66 @@
+import { Component, ElementRef, HostBinding, HostListener, OnDestroy, ViewChild } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { AppConfig } from './app.config';
+import { ThemesService } from './services/themes.service';
+import { ShortcutsService } from './shortcuts/shortcuts.service';
+import { EvtIconInfo } from './ui-components/icon/icon.component';
+
+@Component({
+  selector: 'evt-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent implements OnDestroy {
+  @ViewChild('mainSpinner') mainSpinner: ElementRef;
+  private subscriptions: Subscription[] = [];
+  public hasNavBar = AppConfig.evtSettings.ui.enableNavBar;
+  public navbarOpened$ = new BehaviorSubject(this.hasNavBar && AppConfig.evtSettings.ui.initNavBarOpened);
+
+  public navbarTogglerIcon$: Observable<EvtIconInfo> = this.navbarOpened$.pipe(
+    map((opened: boolean) => opened ? { icon: 'caret-down', iconSet: 'fas' } : { icon: 'caret-up', iconSet: 'fas' }),
+  );
+
+  constructor(
+    private router: Router,
+    private spinner: NgxSpinnerService,
+    private shortcutsService: ShortcutsService,
+    private themes: ThemesService,
+    private titleService: Title,
+  ) {
+    this.router.events.subscribe((event) => {
+      switch (true) {
+        case event instanceof NavigationStart:
+          this.spinner.show();
+          break;
+        case event instanceof NavigationEnd:
+        case event instanceof NavigationCancel:
+        case event instanceof NavigationError:
+          this.spinner.hide();
+          break;
+        default:
+          break;
+      }
+    });
+    this.titleService.setTitle(AppConfig.evtSettings.edition.editionTitle || 'EVT');
+  }
+
+  @HostBinding('attr.data-theme') get dataTheme() { return this.themes.getCurrentTheme().value; }
+
+  toggleToolbar() {
+    this.navbarOpened$.next(!this.navbarOpened$.getValue());
+    window.dispatchEvent(new Event('resize')); // Needed to tell Gridster to resize
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  @HostListener('window:keyup', ['$event'])
+  keyEvent(e: KeyboardEvent) {
+    this.shortcutsService.handleKeyboardEvent(e);
+  }
+}

src/app/app.config.ts

@@ -93,6 +93,7 @@ export interface UiConfig {
     thumbnailsButton: boolean;
     viscollButton: boolean;
     theme: 'neutral' | 'modern' | 'classic';
+    syncZonesHighlightButton: boolean;
 }
 
 export interface EditionConfig {
@@ -141,7 +142,10 @@ export interface FileConfig {
         [T in EditionImagesSources]: EditionImagesConfig;
     };
     logoUrl?: string;
-    imagesFolderUrl?: string;
+    imagesFolderUrls?: {
+        single: string;
+        double: string;
+    };
     configurationUrls?: {
         edition: string;
         ui: string;

src/app/app.module.ts

@@ -63,6 +63,9 @@ import { HtmlAttributesDirective } from './directives/html-attributes.directive'
 import { HumanizePipe } from './pipes/humanize.pipe';
 import { IdbService } from './services/idb.service';
 import { IdentifierComponent } from './components/identifier/identifier.component';
+import { ImageImageComponent } from './view-modes/image-image/image-image.component';
+import { ImageGrpPanelComponent } from './panels/imagegrp-panel/imagegrp-panel.component';
+import { ImageOnlyComponent } from './view-modes/image-only/image-only.component';
 import { ImagePanelComponent } from './panels/image-panel/image-panel.component';
 import { ImageTextComponent } from './view-modes/image-text/image-text.component';
 import { LbComponent } from './components/lb/lb.component';
@@ -108,6 +111,7 @@ import { SamplingDeclComponent } from './components/sampling-decl/sampling-decl.
 import { SeriesStmtComponent } from './components/series-stmt/series-stmt.component';
 import { ShortcutsComponent } from './shortcuts/shortcuts.component';
 import { SicComponent } from './components/sic/sic.component';
+import { SpaceComponent } from './components/space/space.component';
 import { SourceDetailComponent } from './components/sources/source-detail/source-detail.component';
 import { SourceNoteComponent } from './components/sources/source-note/source-note.component';
 import { SourcesComponent } from './components/sources/sources.component';
@@ -125,9 +129,10 @@ import { ThemesService } from './services/themes.service';
 import { TitleStmtComponent } from './components/title-stmt/title-stmt.component';
 import { VerseComponent } from './components/verse/verse.component';
 import { VersesGroupComponent } from './components/verses-group/verses-group.component';
+import { WordComponent } from './components/word/word.component';
+import { NavBarImageComponent } from './nav-bar-image/nav-bar-image.component';
 import { VersionPanelComponent } from './panels/version-panel/version-panel.component';
 import { WitnessPanelComponent } from './panels/witness-panel/witness-panel.component';
-import { WordComponent } from './components/word/word.component';
 import { XmlBeautifyPipe } from './pipes/xml-beautify.pipe';
 import { XMLParsers } from './services/xml-parsers/xml-parsers';
 
@@ -185,6 +190,7 @@ const DynamicComponents = [
   SamplingDeclComponent,
   SeriesStmtComponent,
   SicComponent,
+  SpaceComponent,
   SuppliedComponent,
   SurplusComponent,
   TagsDeclComponent,
@@ -217,14 +223,18 @@ const DynamicComponents = [
     HtmlAttributesDirective,
     HumanizePipe,
     ImagePanelComponent,
+    ImageGrpPanelComponent,
     ImageTextComponent,
+    ImageOnlyComponent,
+    ImageImageComponent,
     MainHeaderComponent,
     MainMenuComponent,
     ManuscriptThumbnailsViewerComponent,
     MsDescSectionComponent,
     MsDescSelectorComponent,
     NamedEntityOccurrenceComponent,
     NavBarComponent,
+    NavBarImageComponent,
     OriginalEncodingViewerComponent,
     OsdComponent,
     PageComponent,