nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,801 @@
+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';
+import { CustomToastrService } from '../../custom-toastr/services/custom-toastr.service';
+
+/**
+ * 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
+  @Input() allowDownloadSecretFile = true; // allow or prevent download screct files
+  @Input() allowPrintSecretFile = true; // allow or prevent print screct files
+  @Input() negelectAddingWaterMark = false; // don't add watermark here whatever eas the conditions (we may add it from outside or not add it at all)
+
+  @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,
+    private toaster: CustomToastrService,
+    @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 madeleteSavedSignaturetch 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() {
+    if (this.allowDownloadSecretFile || (!this.allowDownloadSecretFile && this.correspondance.properties[this.secrecyProperty] && this.correspondance.properties[this.secrecyProperty] === 'Normal')) {
+      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() {
+    if (this.allowPrintSecretFile || (!this.allowPrintSecretFile && this.correspondance.properties[this.secrecyProperty] && this.correspondance.properties[this.secrecyProperty] === 'Normal')) {
+      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');
+          },
+        });
+      });
+    } else {
+      this.webViewerInstance.disableElements([
+        'printModal',
+      ]);
+    }
+  }
+
+  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 not negelcting adding water mark then check conditions for adding it
+    if(!this.negelectAddingWaterMark){
+      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;
+  }
+}