nuxeo-development-framework 3.1.6 → 3.1.8

package/src/lib/components/pdf-tron/pdftron/pdftron.component.ts

@@ -1,782 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import WebViewer, { CoreControls } from '@pdftron/webviewer';
-import { NuxeoService } from '../../../Core/services/nuxeo/nuxeo.service';
-import { PdftronService } from './pdftron.service';
-import { APP_BASE_HREF } from '@angular/common';
-import { SecurePipe } from '../../../pipes/secure.pipe';
-import { ThrowStmt } from '@angular/compiler';
-import { TranslationService } from '../../../Core/services/translation/translation.service';
-import { Subscription } from 'rxjs';
-
-/**
- * A reusable file viewer based on PDFTron Library
- * @title
- * PDFTron Viewer
- * @example
- * <app-pdftron
- *   [fileData]="fileData"
- *   [editMode]="false"
- *   [docId]="fileId"
- *   [fileTitle]="file.title"
- * >
- * </app-pdftron>
- */
-@Component({
-  selector: 'app-pdftron',
-  templateUrl: './pdftron.component.html',
-  styleUrls: ['./pdftron.component.scss'],
-  providers: [SecurePipe],
-})
-export class PdftronComponent
-  implements OnInit, AfterViewInit, OnDestroy, OnChanges {
-  @ViewChild('fileViewer') viewerRef: ElementRef;
-  webViewerInstance;
-  /** Disable/Enable Annotation */
-  @Input()
-  editMode: boolean;
-  @Input() actionClicked = false; // used to know if there is action clicked outside to start edit mode or not
-  isDocumentLoading: boolean;
-  isFetching: boolean;
-  /** Document title */
-  @Input()
-  fileTitle: string;
-  /** Document ID */
-  @Input()
-  docId: string;
-  @Input()
-  DOCUMENT_TYPE = 'application/pdf';
-  @Input()
-  fileData;
-  @Input()
-  fitMode: 'FitWidth' | 'FitPage' | 'Zoom' = 'FitWidth';
-  @Input()
-  authHeader: string;
-  @Input()
-  fileURL: string;
-  @Input()
-  correspondance;
-
-  @Input() secrecyProperty; // used to add watermark acording certain secrecy level
-  @Input() editingType;
-  @Input() userSignatures;
-  @Input() searchString = ''; // string to search for it in the document
-
-  @Input() trackSignature = false; // to enable tracking signature position and emit it after every change it signature
-  @Output() onSignatureTracking = new EventEmitter(); // event to emit signature changes
-
-  @Input() useOutsideAnotations = false; // flage to indicat if using out side anotations or not
-  @Input() importedAnotations ; // imported anotations from outside
-  @Output() onAddingAnotation = new EventEmitter(); // used to export all anotations to outside
-  @Output()
-  events = new EventEmitter();
-  @Output() SignatureEvent = new EventEmitter(); // used to export signature to outside
-  firstTimeLoad = true; //flage to control importing signatures in the first time load only
-  firstSignatureLoad = true; // flage to pass first load of imported signatures without emitting the event 
-  newSignCreation = false; // flage to indicate signature creation is created or choosed from stored ones
-  transelationSubscrition : Subscription;
-  isArabic;
-  constructor(
-    public cdr: ChangeDetectorRef,
-    private pdftronService: PdftronService,
-    private nuxeo: NuxeoService,
-    @Inject(APP_BASE_HREF) private baseHref: string,
-    private securePipe: SecurePipe,
-    private translationService : TranslationService,
-    @Inject('environment') private environment
-  ) { }
-
-  async ngOnInit(): Promise<void> {
-    this.transelationSubscrition = this.translationService.isArabic.subscribe(res => {
-      this.isArabic = res ;
-    })
-   }
-
-  async ngAfterViewInit(): Promise<void> {
-    this.recivedSearchStringsArray = this.searchString.trim() ? this.searchString.split(',') : [];
-
-    if (this.fileTitle.endsWith('.ppt')) {
-      this.DOCUMENT_TYPE = 'application/vnd.ms-powerpoint';
-    } else if (this.fileTitle.endsWith('.pptx')) {
-      this.DOCUMENT_TYPE =
-        'application/vnd.openxmlformats-officedocument.presentationml.presentation';
-    } else if (this.fileTitle.endsWith('.doc')) {
-      this.DOCUMENT_TYPE = 'application/msword';
-    } else if (this.fileTitle.endsWith('.docx')) {
-      this.DOCUMENT_TYPE =
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
-    }
-    WebViewer(
-      {
-        path: this.baseHref + '/assets/pdftrons',
-        forceClientSideInit: true,
-        streaming: true,
-        licenseKey: this.environment.pdftronLicenceKey,
-        css: this.isArabic ? (this.baseHref + '/assets/styles/ar-mypdftron.css') : (this.baseHref + '/assets/styles/en-mypdftron.css'),
-        annotationUser: this.nuxeo.nuxeoClient.user.properties.firstName + ' ' + this.nuxeo.nuxeoClient.user.properties.lastName,
-        disabledElements: ['downloadButton', 'printButton'],
-
-      },
-      this.viewerRef.nativeElement
-    ).then(async (instance) => {
-      this.isArabic ? instance.setLanguage('ar') : instance.setLanguage('en') ;
-      this.pdftronService.instance = this.webViewerInstance = instance;
-      if(this.correspondance.facets.indexOf('ctocr') > -1){
-        this.fileWithOcr = true;
-        this.pages = JSON.parse(this.correspondance.properties['ctocr:recognizedJson']);
-        // override search funtion to use our search in ocr not defult search
-        instance.overrideSearchExecution(this.searchFn);
-        }else{
-        // if no ocr then add search lisner to lisne to internal search and catch results
-            this.addSearchListner();
-        }
-      this.addPrintButton();
-      this.addDownloadButton();
-      this.importSignature();
-      this.exportingSignature();
-      this.deleteAnnotation();
-      this.exportingSavedSignature();
-      if(this.useOutsideAnotations){
-        this.importAnotationsFromOutside();
-        this.exportAnotationsToOutside();
-      }
-      this.webViewerInstance.docViewer.setSearchHighlightColors({
-        // setSearchHighlightColors accepts both Annotations.Color objects or 'rgba' strings
-        searchResult: new this.webViewerInstance.Annotations.Color(250,206,0,0.50196),
-        activeSearchResult: new this.webViewerInstance.Annotations.Color(250,206,0,0.50196),
-      });
-      if(this.recivedSearchStringsArray.length !== 0){
-        this.automaticSearch(this.recivedSearchStringsArray);
-    }
-      this.loadDocument();
-
-    });
-  }
-
-  importAnotationsFromOutside(){
-    const documentViewer = this.webViewerInstance.docViewer;
-
-    documentViewer.on('documentLoaded', () => {
-      this.webViewerInstance.annotManager.importAnnotations(this.importedAnotations)
-    })
-    // .then(annotations => {
-    //   annotations.forEach(annotation => {
-    //     this.webViewerInstance.annotManager.redrawAnnotation(annotation);
-    //   });
-    // });
-  }
-
-  // exctract all anotations on the file and send it out side to be saved and leave the file as it is without any anotations on it
-  exportAnotationsToOutside(){
-    this.webViewerInstance.annotManager.on('annotationChanged', (annotations, action, { imported }) => {
-      if (imported) return;
-      this.webViewerInstance.annotManager.exportAnnotations().then(exctractedAnotations => {
-        this.onAddingAnotation.emit(exctractedAnotations);
-      });
-      // if tracking signature location is enable then emit signature outside with every changes in it
-      if(this.trackSignature){
-        this.onSignatureTracking.emit({anotations : annotations , action : action})
-      }
-    });
-  }
-
-  importSignature() {
-    const documentViewer = this.webViewerInstance.docViewer;
-    const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
-
-    documentViewer.on('documentLoaded', () => {
-      if(this.firstTimeLoad){
-        signatureTool.importSignatures([...this.userSignatures]);
-        this.firstTimeLoad = false;
-      }
-    })
-  }
-  
-  exportingSavedSignature() {
-    const documentViewer = this.webViewerInstance.docViewer;
-    const SignatureCreateTool = documentViewer.getTool('AnnotationCreateSignature')
-    SignatureCreateTool.on('signatureSaved', (annotation) => {
-      if(!this.firstSignatureLoad){
-        console.log('signature saved trigered');
-        this.newSignCreation = true;
-      }
-      this.firstSignatureLoad = false;
-    });;
-  }
-  
-  exportingSignature() {
-    const documentViewer = this.webViewerInstance.docViewer;
-    const SignatureCreateTool = documentViewer.getTool('AnnotationCreateSignature')
-    SignatureCreateTool.on('annotationAdded', (annotation) => {
-      if (annotation && this.newSignCreation) {
-        this.newSignCreation = false;
-        this.extractAnotation(annotation , documentViewer);
-        console.log(annotation)
-      }
-    });;
-  }
-
-  extractAnotation(annotation , documentViewer){
-    if(annotation['image']){
-      // convert base64 signature into file and emit it to out side 
-      let base64Img = annotation['image']['currentSrc'];
-      var arr = base64Img.split(','),
-      mime = arr[0].match(/:(.*?);/)[1],
-      bstr = atob(arr[1]), 
-      n = bstr.length, 
-      u8arr = new Uint8Array(n);
-      while(n--){
-          u8arr[n] = bstr.charCodeAt(n);
-      }
-      let name = mime.replace('/' , '.')
-      let myFile = new File([u8arr], 'mySignature.png', {type:mime});
-      this.SignatureEvent.emit({ data: myFile, eventName: 'export' });
-
-    }else{
-      this.extractAnnotationSignature(annotation , documentViewer)
-    }
-  }
-
-  async extractAnnotationSignature(annotation, docViewer) {
-    // Create a new Canvas to draw the Annotation on
-    const canvas = document.createElement('canvas');
-    // Reference the annotation from the Document
-    const pageMatrix = docViewer.getDocument().getPageMatrix(annotation.PageNumber);
-    // Set the height & width of the canvas to match the annotation
-    canvas.height = annotation.Height;
-    canvas.width = annotation.Width;
-    const ctx = canvas.getContext('2d');
-    // Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
-    ctx.translate(-annotation.X, -annotation.Y);
-    // Draw the Annotation onto the Canvas
-    annotation.draw(ctx, pageMatrix);
-    // Convert the Canvas to a Blob Object for Upload
-    canvas.toBlob((blob) => {
-      // Call your Blob Storage Upload Function
-      let name = blob.type.replace('/' , '.')
-      let myFile = new File([blob], name);
-      this.SignatureEvent.emit({ data: myFile, eventName: 'export' });
-    });
-  }
-
-  deleteAnnotation() {
-    const documentViewer = this.webViewerInstance.docViewer;
-    const SignatureCreateTool = documentViewer.getTool('AnnotationCreateSignature');
-    SignatureCreateTool.on('signatureDeleted', (annotation, index) => {
-      console.log('there were annotations deleted');
-      this.userSignatures.splice(index , 1);
-      this.SignatureEvent.emit({ data: { signature: annotation, index: index }, eventName: 'delete' });
-    });
-  }
-
-  addDownloadButton() {
-    this.webViewerInstance.setHeaderItems((header) => {
-      header.push({
-        type: 'actionButton',
-        img: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16"> <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/> <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/></svg>',
-        title: this.isArabic ? 'تنزيل' : 'Download',
-        onClick: async () => {
-          const { DocumentViewer, AnnotationManager, SaveOptions } = this.webViewerInstance.CoreControls;
-          // const xfdfString = await AnnotationManager.exportAnnotations();
-          const saveOptions = SaveOptions;
-          const options = {
-            filename: this.correspondance.title ? this.correspondance.title : 'myDocument.pdf',
-            // xfdfString,
-            flags: saveOptions.LINEARIZED,
-            downloadType: 'pdf'
-          };
-
-          this.pdftronService.instance.downloadPdf(options);
-          this.events.next('download');
-          // let url = this.correspondance.properties.content.data;
-          // let fileName = this.correspondance.properties.content.name;
-          // if (url && fileName) {
-          //   let safeUrl = this.securePipe.transform(url);
-          //   safeUrl.subscribe((url: any) => {
-          //     const link = document.createElement('a');
-          //     link.style.display = 'none';
-          //     link.href = url.changingThisBreaksApplicationSecurity;
-          //     link.download = fileName;
-          //     document.body.appendChild(link);
-          //     link.click();
-          //     document.body.removeChild(link);
-          //     this.events.next('download');
-          //   });
-          // }
-        },
-      });
-    });
-  }
-
-  addPrintButton() {
-    this.webViewerInstance.setHeaderItems((header) => {
-      header.push({
-        type: 'actionButton',
-        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - print - line</title><path class="cls-1" d="M20,6H18V2H6V6H4A2,2,0,0,0,2,8v9a2,2,0,0,0,2,2H6v3H18V19h2a2,2,0,0,0,2-2V8A2,2,0,0,0,20,6ZM8,4h8V6H8Zm8,16H8V16h8Zm4-3H18V14H6v3H4V8H20Zm-4-7h2v2H16Zm-3,0h2v2H13Z"></path></svg>',
-        title: this.isArabic ? "طباعة" : 'Print',
-        onClick: () => {
-          this.pdftronService.instance.print();
-          this.events.next('print');
-        },
-      });
-    });
-  }
-
-  addWatermark() {
-    const userinfo = this.nuxeo.nuxeoClient.user.properties;
-    this.pdftronService.addWatermark(
-      `${userinfo.username}    `
-      // `${userinfo.firstName} ${
-      //   userinfo.lastName
-      // } `
-    );
-  }
-
-  loadDocument(): void {
-    if (!this.webViewerInstance || (!this.fileData && !this.fileURL)) {
-      return;
-    }
-    const { docViewer, annotManager, Annotations } = this.webViewerInstance;
-    docViewer.on('documentLoaded', () => {
-      let fitMode = this.webViewerInstance.FitMode.FitWidth;
-      if (this.fitMode === 'FitPage') {
-        fitMode = this.webViewerInstance.FitMode.FitPage;
-      } else if (this.fitMode === 'Zoom') {
-        fitMode = this.webViewerInstance.FitMode.Zoom;
-      }
-      this.webViewerInstance.setFitMode(fitMode);
-    });
-    if (!this.editMode) {
-      this.webViewerInstance.annotManager.setReadOnly(true);
-      // instance.enableTools([]);
-    }
-    if (this.fileURL && this.fileURL.length) {
-      this.webViewerInstance.loadDocument(this.fileURL, {
-        xodstreaming:true,
-        customHeaders: {
-          Authorization: this.authHeader,
-        },
-        // withCredentials: true,
-      });
-    } else {
-      this.webViewerInstance.loadDocument(
-        new Blob([new Uint8Array(this.fileData)], { type: this.DOCUMENT_TYPE }),
-        {
-          filename: this.fileTitle,
-        }
-      );
-    }
-
-    this.isFetching = false;
-    if (this.correspondance !== undefined) {
-      // if we need to check on secrecy level for adding water mark or not 
-      if (this.environment.enableViewerWaterMark && this.secrecyProperty) {
-        // check for secrecy level befor adding watermark
-        if (this.correspondance.properties[this.secrecyProperty] && this.correspondance.properties[this.secrecyProperty] !== 'Normal') {
-          this.addWatermark()
-        }
-      }
-      else if (this.environment.enableViewerWaterMark && !this.secrecyProperty) {
-        this.addWatermark();
-      }
-    }
-    this.cdr.detectChanges();
-  }
-
-  async exportAsBlob(): Promise<Blob> {
-    const doc = this.webViewerInstance.docViewer.getDocument();
-    const xfdfString =
-      await this.webViewerInstance.annotManager.exportAnnotations();
-    const data = await doc.getFileData({
-      // saves the document with annotations in it
-      xfdfString,
-    });
-    const arr = new Uint8Array(data);
-    const blob = new Blob([arr], { type: this.DOCUMENT_TYPE });
-    return Promise.resolve(blob);
-  }
-
-  toggleEdit(): void {
-    if (!this.actionClicked) {
-      // action clicked is not clicked then no update mode opened
-      this.webViewerInstance.disableElements([
-        'toolbarGroup-Shapes',
-        'toolbarGroup-Edit',
-        'toolbarGroup-Insert',
-        'toolbarGroup-Annotate',
-      ]);
-      this.webViewerInstance.annotManager.setReadOnly(true);
-    } else {
-      // edit mode opened and must be when action is clicked
-      if (this.editingType) {
-        this.webViewerInstance.disableElements([
-          'toolbarGroup-Shapes',
-          'toolbarGroup-Edit',
-          'toolbarGroup-Insert',
-          'toolbarGroup-Annotate',
-        ]);
-        let group ;
-        if(this.editingType === 'signDoc'){
-          this.webViewerInstance.enableElements([
-            'toolbarGroup-Insert'
-          ]);
-
-        }else if(this.editingType === 'annotate'){
-          this.webViewerInstance.enableElements([
-            'toolbarGroup-Shapes',
-            'toolbarGroup-Edit',
-            'toolbarGroup-Annotate',
-          ]);
-        }
-      } else {
-        this.webViewerInstance.enableElements([
-          'toolbarGroup-Shapes',
-          'toolbarGroup-Edit',
-          'toolbarGroup-Insert',
-          'toolbarGroup-Annotate',
-        ]);
-      }
-      this.webViewerInstance.annotManager.setReadOnly(false);
-      // this.webViewerInstance.setToolbarGroup('toolbarGroup-Annotate');
-    }
-  }
-
-  ngOnChanges(changes): void {
-    if (this.webViewerInstance) {
-      this.toggleEdit();
-      if (
-        changes.urlFileContent &&
-        changes.urlFileContent.previousValue &&
-        changes.urlFileContent.previousValue !==
-        changes.urlFileContent.currentValue
-      ) {
-        this.ngOnDestroy();
-        this.ngOnInit();
-        this.ngAfterViewInit();
-      }
-    }
-  }
-
-  private pdfTronEvent(event) {
-    if (this[event.action]) {
-      // method exists in the component
-      //  this[event.action](event.params); // call it
-    }
-  }
-
-  // ---------------------------- search results section ------------------------------------------
-  
-  pages:any;
-  standardHeight;
-  standardWidth;
-  pageHeight;
-  pageWidth;
-  savedAnotations = [];
-  fileWithOcr = false;
-  newAnnotations=[];
-  mySearchStringResults = [];
-  recivedSearchStringsArray = [];
-
-  // adding search lisner to lisen to internal search from ui and without ocr
-  addSearchListner() {
-    const { annotManager, docViewer, Annotations } = this.webViewerInstance;
-    const searchListener = (searchPattern, options, results) => {
-
-        this.mySearchStringResults = [];
-      if(this.savedAnotations.length > 0){
-        this.savedAnotations.map(annotation => {
-          annotation.Hidden = true;
-        // Always redraw annotation if rendering was updated
-        annotManager.redrawAnnotation(annotation);
-      });
-      }
-      // don't do any search until there is a search pattern
-      if(searchPattern.trim().length > 0){
-            // add redaction annotation for each search result
-            this.newAnnotations = results.map(result => {
-              const annotation = new Annotations.TextHighlightAnnotation();
-              annotation.Quads = result.quads.map(quad => quad.getPoints());
-              annotation.PageNumber = result.pageNum;
-              annotation.StrokeColor = new Annotations.Color(250,206,0,0.50196);  
-              annotation.Author = this.webViewerInstance.annotManager.getCurrentUser();      
-              return annotation;
-            });
-            this.savedAnotations.push(...this.newAnnotations);
-            annotManager.addAnnotations(this.newAnnotations);
-            annotManager.drawAnnotationsFromList(this.newAnnotations);
-      }else{
-        docViewer.clearSearchResults();
-      }
-    };
-
-    docViewer.on('documentLoaded', () => {
-      this.webViewerInstance.addSearchListener(searchListener);
-    });
-  }
-
-  // perform automatic search when intering the page 
-  automaticSearch(searchTextArray){
-    const { annotManager, docViewer, Annotations } = this.webViewerInstance;
-    let searchOptions;
-    this.webViewerInstance.openElements(['searchPanel']);
-    docViewer.on('documentLoaded', () => {
-      const mode = this.webViewerInstance.CoreControls.Search.Mode.PAGE_STOP | this.webViewerInstance.CoreControls.Search.Mode.HIGHLIGHT | this.webViewerInstance.CoreControls.Search.Mode.AMBIENT_STRING;
-      this.mySearchStringResults = []; // empty my search result when starting new search
-      if (this.fileWithOcr) {
-        
-        // add redaction annotation for each search result
-          const annotation = new Annotations.TextHighlightAnnotation();
-          searchTextArray.map(searchText => {
-            let mySearch = searchText.split(' ');
-            if(mySearch.length > 1){
-              // then i am searching with more than one word
-              this.pages.pages.forEach((page , index) => {
-                this.pageHeight = page.page_height;
-                this.pageWidth = page.page_width;
-                this.standardHeight = this.webViewerInstance.docViewer.getPageHeight((index+1));
-                this.standardWidth = this.webViewerInstance.docViewer.getPageWidth((index+1));
-                page.zones.forEach(zone => {
-                  zone.paragraphs.forEach(paragraph => {
-                    paragraph.lines.forEach(line => {
-                      if(line.text.includes(searchText)){
-                        this.SearchForWordInLine(mySearch,line,(index+1) , page)
-                      }
-                    })
-                  });
-                })
-              });
-            }else{
-              // then i am searching with only one word 
-              this.searchForWordInAllPages(searchText)
-            }
-          })
-          docViewer.clearSearchResults();
-          this.dispalaySearchResults(docViewer);
-      } else{
-        searchOptions = {
-          // If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
-          fullSearch: true,
-          // The callback function that is called when the search returns a result.
-          onResult: result => {
-            // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
-            if (result.resultCode === this.webViewerInstance.CoreControls.Search.ResultCode.FOUND) {
-                const annotation = new Annotations.TextHighlightAnnotation();
-                annotation.Quads = result.quads.map(quad => quad.getPoints());
-                console.log(annotation.Quads);
-                annotation.PageNumber = result.pageNum;
-                annotation.StrokeColor = new Annotations.Color(250,206,0,0.50196);   
-                annotation.Author = this.webViewerInstance.annotManager.getCurrentUser();  
-                this.savedAnotations.push(annotation)   ;
-                annotManager.addAnnotations([annotation]);
-                annotManager.drawAnnotationsFromList([annotation]);
-                docViewer.displayAdditionalSearchResults([result]);
-
-            }
-          }
-        };
-        searchTextArray.map(searchedText => {
-          docViewer.textSearchInit(searchedText, mode, searchOptions);
-        })
-      }
-    })
-  }
-
-  // search for single word in all pages 
-  searchForWordInAllPages(searchedWord){
-    this.pages.pages.forEach((page , index) => {
-      this.pageHeight = page.page_height;
-      this.pageWidth = page.page_width;
-      this.standardHeight = this.webViewerInstance.docViewer.getPageHeight((index+1));
-      this.standardWidth = this.webViewerInstance.docViewer.getPageWidth((index+1));
-      const x = (this.pageWidth / this.standardWidth); // width ratio
-      const y = (this.pageHeight / this.standardHeight); // height ratio
-      page.zones.forEach(zone => {
-        zone.paragraphs.forEach(paragraph => {
-          paragraph.lines.forEach(line => {
-            line.words.forEach(word => {
-              if (word.text.includes(searchedWord)) {
-                // annotation.PageNumber = index+1;
-                let quads = [{
-                    x1: (word.coordinates.upper_left.x / x),
-                    x2: (word.coordinates.bottom_right.x / x),
-                    x3: (word.coordinates.bottom_right.x / x),
-                    x4: (word.coordinates.upper_left.x / x),
-                    y1: (word.coordinates.upper_left.y / y),
-                    y2: (word.coordinates.upper_left.y / y),
-                    y3: (word.coordinates.bottom_right.y / y),
-                    y4: (word.coordinates.bottom_right.y / y),
-                  }]
-                this.higlightText(
-                  quads, 
-                  index+1
-                );
-                this.constructSearchResult(searchedWord , index+1 , quads , line.text );
-              }
-            });
-          });
-        });
-      })
-    });
-  }
-
-  // search for word in single line 
-  SearchForWordInLine(listOfSearchedWords, line, pagenumber, page) {
-    this.pageHeight = page.page_height;
-    this.pageWidth = page.page_width;
-    this.standardHeight = this.webViewerInstance.docViewer.getPageHeight((pagenumber));
-    this.standardWidth = this.webViewerInstance.docViewer.getPageWidth((pagenumber));
-    const x = (this.pageWidth / this.standardWidth); // width ratio
-    const y = (this.pageHeight / this.standardHeight); // height ratio
-    // find only words related to my search form the line
-    let myFoundedResults = [];
-    let correctResults = [];
-    line.words.forEach((word, wordIndex) => {
-      if (listOfSearchedWords.indexOf(word.text) > -1) {
-        myFoundedResults.push({ word: word, wordIndex: wordIndex })
-      }
-    });
-
-    // find only words exist in my search sentence and not single and repeated word
-    myFoundedResults.map((result, index) => {
-      if ((myFoundedResults[index]['wordIndex'] - 1 === (myFoundedResults[index - 1] && myFoundedResults[index - 1]['wordIndex'])) ||
-        (myFoundedResults[index + 1] && (myFoundedResults[index + 1]['wordIndex'] - 1 === myFoundedResults[index]['wordIndex']))) {
-        correctResults.push(result)
-      }
-    })
-
-    // highliht these words after eleminating all repeated and related words
-    // must be for loop sp i can control the step in each loop
-    let quads = [];
-    for (let i = 0; i < correctResults.length; (i = i + listOfSearchedWords.length)) {
-      quads.push(
-        {
-          x1: (correctResults[((i + listOfSearchedWords.length) - 1)].word.coordinates.upper_left.x / x),
-          x2: (correctResults[i].word.coordinates.bottom_right.x / x),
-          x3: (correctResults[i].word.coordinates.bottom_right.x / x),
-          x4: (correctResults[((i + listOfSearchedWords.length) - 1)].word.coordinates.upper_left.x / x),
-          y1: (correctResults[i].word.coordinates.upper_left.y / y),
-          y2: (correctResults[((i + listOfSearchedWords.length) - 1)].word.coordinates.upper_left.y / y),
-          y3: (correctResults[((i + listOfSearchedWords.length) - 1)].word.coordinates.bottom_right.y / y),
-          y4: (correctResults[i].word.coordinates.bottom_right.y / y),
-        });
-      this.higlightText(
-        quads,
-        pagenumber
-      );
-      this.constructSearchResult(listOfSearchedWords.join(" ") , pagenumber , quads , line.text)
-    }
-  }
-
-  constructSearchResult(searchedText , pageNum , quads , line){
-   let mySearchStartTextIndex = line.indexOf(searchedText);
-   let mySeearchedTextEndIndex = mySearchStartTextIndex + searchedText.length;
-    let searchResultObject = {
-        ambientStr: line,
-        resultStr: searchedText,
-        resultStrStart:mySearchStartTextIndex,
-        resultStrEnd: mySeearchedTextEndIndex,
-        pageNum: pageNum,
-        resultCode: 2,
-        quads: [{
-            ea: quads[0]['y3'],
-            fa: quads[0]['y4'],
-            ha: quads[0]['x1'],
-            ia: quads[0]['x2'],
-            pB: quads[0]['x3'],
-            qB: quads[0]['x4'],
-            rB: quads[0]['y1'],
-            sB: quads[0]['y2']
-        }]
-    }
-    this.mySearchStringResults.push(searchResultObject);
-    console.log(this.mySearchStringResults);
-  }
-
-  dispalaySearchResults(docViewer){
-    setTimeout(() => {
-        docViewer.displayAdditionalSearchResults(this.mySearchStringResults);
-    }, 500);
-  }
-
-  // draw hiligthing around certain charatacters
-  higlightText(quads, pageNumber) {
-    const highlightingAnnot = new this.webViewerInstance.Annotations.TextHighlightAnnotation();
-    highlightingAnnot.StrokeColor = new this.webViewerInstance.Annotations.Color(250,206,0,0.50196);
-    highlightingAnnot.Quads = quads;
-    highlightingAnnot.PageNumber = pageNumber;
-    highlightingAnnot.Author = this.webViewerInstance.annotManager.getCurrentUser();
-    this.savedAnotations.push(highlightingAnnot);
-    this.webViewerInstance.annotManager.addAnnotation(highlightingAnnot);
-
-    // need to draw the annotation otherwise it won't show up until the page is refreshed
-    this.webViewerInstance.annotManager.redrawAnnotation(highlightingAnnot);
-  }
-
-  searchFn = (searchValue, options) => {
-    this.mySearchStringResults = [];
-   if(this.savedAnotations.length > 0){
-     this.savedAnotations.map(annotation => {
-       annotation.Hidden = true;
-     // Always redraw annotation if rendering was updated
-     this.webViewerInstance.annotManager.redrawAnnotation(annotation);
-   });
-   }
-   // don't do any search until there is a search pattern
-   if(searchValue.trim().length > 0){
-       if (this.fileWithOcr) {
-         // add redaction annotation for each search result
-           // const annotation = new Annotations.TextHighlightAnnotation();
-           let mySearch = searchValue.split(' ');
-           if(mySearch.length > 1){
-             // then i am searching with more than one word
-             this.pages.pages.forEach((page , index) => {
-               this.pageHeight = page.page_height;
-               this.pageWidth = page.page_width;
-               this.standardHeight = this.webViewerInstance.docViewer.getPageHeight((index+1));
-               this.standardWidth = this.webViewerInstance.docViewer.getPageWidth((index+1));
-               page.zones.forEach(zone => {
-                 zone.paragraphs.forEach(paragraph => {
-                   paragraph.lines.forEach(line => {
-                     if(line.text.includes(searchValue)){
-                       this.SearchForWordInLine(mySearch,line,(index+1) , page)
-                     }
-                   })
-                 });
-               })
-             });
-           }else{
-             // then i am searching with only one word 
-             this.searchForWordInAllPages(searchValue)
-           }
-           this.webViewerInstance.docViewer.clearSearchResults();
-             this.dispalaySearchResults(this.webViewerInstance.docViewer);
-       }
- }else{
-   this.webViewerInstance.docViewer.clearSearchResults();
- }
-}
-
-  // ------------------------------------------------------------------------ ------------------------------------------
-
-  ngOnDestroy(): void {
-    if (this.webViewerInstance) {
-      this.webViewerInstance.closeDocument().then(() => {
-        console.log('document closed!');
-      });
-      this.pdftronService.instance = this.webViewerInstance = null;
-    }
-    this.transelationSubscrition ? this.transelationSubscrition.unsubscribe() : null;
-  }
-}