From c418e428f4da93c3b72f0d141e4cd508c3822889 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 11 Sep 2017 15:48:53 +0100 Subject: [PATCH] fix memory leaks for pdf viewers (#2316) --- .../src/components/pdfViewer.component.ts | 20 +++++++--- .../pdf-view/pdf-view.component.ts | 39 ++++++++++--------- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts index 7e60c90a5d..f225a35b3e 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, HostListener, Input, OnChanges, ViewEncapsulation } from '@angular/core'; +import { Component, HostListener, Input, OnChanges, OnDestroy, ViewEncapsulation } from '@angular/core'; import { LogService } from 'ng2-alfresco-core'; import { RenderingQueueServices } from '../services/rendering-queue.services'; @@ -32,7 +32,7 @@ declare let PDFJS: any; host: { 'class': 'adf-pdf-viewer' }, encapsulation: ViewEncapsulation.None }) -export class PdfViewerComponent implements OnChanges { +export class PdfViewerComponent implements OnChanges, OnDestroy { @Input() urlFile: string; @@ -62,6 +62,8 @@ export class PdfViewerComponent implements OnChanges { constructor(private renderingQueueServices: RenderingQueueServices, private logService: LogService) { + // needed to preserve "this" context when setting as a global document event listener + this.onDocumentScroll = this.onDocumentScroll.bind(this); } ngOnChanges(changes) { @@ -127,9 +129,7 @@ export class PdfViewerComponent implements OnChanges { let documentContainer = document.getElementById('viewer-pdf-container'); let viewer: any = document.getElementById('viewer-viewerPdf'); - window.document.addEventListener('scroll', (event) => { - this.watchScroll(event.target); - }, true); + window.document.addEventListener('scroll', this.onDocumentScroll, true); this.pdfViewer = new PDFJS.PDFViewer({ container: documentContainer, @@ -142,6 +142,10 @@ export class PdfViewerComponent implements OnChanges { this.pdfViewer.setDocument(pdfDocument); } + ngOnDestroy() { + window.document.removeEventListener('scroll', this.onDocumentScroll, true); + } + /** * Method to scale the page current support implementation * @@ -397,4 +401,10 @@ export class PdfViewerComponent implements OnChanges { } } + onDocumentScroll(event: Event) { + if (event && event.target) { + this.watchScroll(event.target); + } + } + } diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts index 2ea4c62618..8a7c2fa3d8 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, HostListener, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { LogService } from 'ng2-alfresco-core'; import { RenderingQueueServices } from '../../../services/rendering-queue.services'; @@ -29,7 +29,7 @@ declare let PDFJS: any; host: { 'class': 'adf-pdf-view' }, encapsulation: ViewEncapsulation.None }) -export class PdfViewComponent implements OnInit { +export class PdfViewComponent implements OnInit, OnDestroy { @Input() fileUrl: string; @@ -53,6 +53,8 @@ export class PdfViewComponent implements OnInit { constructor(private renderingQueueServices: RenderingQueueServices, private logService: LogService) { + // needed to preserve "this" context when setting as a global document event listener + this.onDocumentScroll = this.onDocumentScroll.bind(this); } ngOnInit() { @@ -61,6 +63,10 @@ export class PdfViewComponent implements OnInit { } } + ngOnDestroy() { + window.document.removeEventListener('scroll', this.onDocumentScroll, true); + } + private render(src) { return new Promise((resolve, reject) => { this.isLoading = true; @@ -113,9 +119,7 @@ export class PdfViewComponent implements OnInit { let documentContainer = document.getElementById('viewer-pdf-container'); let viewer: any = document.getElementById('viewer-viewerPdf'); - window.document.addEventListener('scroll', (event) => { - this.watchScroll(event.target); - }, true); + window.document.addEventListener('scroll', this.onDocumentScroll, true); this.pdfViewer = new PDFJS.PDFViewer({ container: documentContainer, @@ -128,6 +132,17 @@ export class PdfViewComponent implements OnInit { this.pdfViewer.setDocument(pdfDocument); } + private onDocumentScroll(event: Event) { + if (event && event.target) { + const outputPage = this.getVisibleElement(event.target); + + if (outputPage) { + this.page = outputPage.id; + this.displayPage = this.page; + } + } + } + /** * Method to scale the page current support implementation * @@ -324,20 +339,6 @@ export class PdfViewComponent implements OnInit { } } - /** - * Litener Scroll Event - * - * @param {any} target - */ - watchScroll(target) { - let outputPage = this.getVisibleElement(target); - - if (outputPage) { - this.page = outputPage.id; - this.displayPage = this.page; - } - } - /** * find out what elements are visible within a scroll pane *