align canvas to text

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css

@@ -27,18 +27,6 @@
     color : #fff;
 }
 
-:host .page {
-    margin: 10px auto !important;
-    overflow: visible;
-    border: 9px solid transparent;
-    background-clip: content-box;
-    background-color: white;
-}
-
-:host .canvasWrapper {
-    box-shadow: 0px 0px 8px 2px #000;
-}
-
 .left {
     float: left;
 }

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html

@@ -1,6 +1,6 @@
 <!-- Start Pdf Canvas -->
-<div id="viewer-pdf-container" class="center-element viewer-pdf-container" (keypress)=eventHandler() (window:resize)="onResize($event)">
-    <div id="viewer-viewerPdf" class="center-element" >
+<div id="viewer-pdf-container" class="viewer-pdf-container" (keypress)=eventHandler() (window:resize)="onResize($event)">
+    <div id="viewer-viewerPdf" class="pdfViewer" >
         <div id="loader-container" class="loader-container">
             <div class="loader-item">
                 <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
@@ -32,7 +32,7 @@
 
 <!-- Command toolbar start -->
 <div id="viewer-toolbar-command" class="viewer-toolbar-command mdl-cell--hide-tablet mdl-cell--hide-phone">
-    <div id="viewer-scale-page-button" class="button-page left" (click)="scalePage('page-fit')">
+    <div id="viewer-scale-page-button" class="button-page left" (click)="pageFit()">
         <i class="icon material-icons">zoom_out_map</i>
     </div>
 </div>

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts

@@ -51,11 +51,10 @@ describe('PdfViewer', () => {
 
                     fixture.detectChanges();
 
-                    expect(element.querySelector('#viewer-loader')).not.toBeNull();
+                    expect(element.querySelector('#loader-container')).not.toBeNull();
                 });
         }));
 
-
         it('Next an Previous Buttons should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(PdfViewerComponent)

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts

@@ -24,7 +24,7 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'pdf-viewer',
     templateUrl: './pdfViewer.component.html',
-    styleUrls: ['./pdfViewer.component.css']
+    styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css' ]
 })
 export class PdfViewerComponent {
 
@@ -84,6 +84,7 @@ export class PdfViewerComponent {
 
     initPDFViewer(pdfDocument: any) {
         PDFJS.verbosity = 5;
+        PDFJS.disableWorker = true;
 
         this.documentContainer = document.getElementById('viewer-pdf-container');
         let viewer: any = document.getElementById('viewer-viewerPdf');
@@ -106,10 +107,8 @@ export class PdfViewerComponent {
 
         let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber];
 
-        let pageWidthScale = (this.documentContainer.clientWidth) /
-            currentPage.width * currentPage.scale;
-        let pageHeightScale = (this.documentContainer.clientHeight ) /
-            currentPage.width * currentPage.scale;
+        let pageWidthScale = (this.documentContainer.clientWidth) / currentPage.width * currentPage.scale;
+        let pageHeightScale = (this.documentContainer.clientHeight ) /  currentPage.width * currentPage.scale;
 
         let scale;
 
@@ -154,7 +153,10 @@ export class PdfViewerComponent {
 
             this.pdfViewer._pages.forEach(function (currentPage) {
                 currentPage.update(newScale);
+                console.log(currentPage.viewport);
             });
+
+            this.pdfViewer.update();
         }
     }
 
@@ -183,6 +185,13 @@ export class PdfViewerComponent {
      * Method triggered when the page is resized
      */
     onResize() {
+        this.scalePage(this.currentScaleMode);
+    }
+
+    /**
+     * Method triggered when the page is resized
+     */
+    pageFit() {
         this.scalePage('page-fit');
     }
 

ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css

@@ -0,0 +1,202 @@
+:host .textLayer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    opacity: 0.2;
+    line-height: 1.0;
+}
+
+:host .textLayer > div {
+    color: transparent;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    -webkit-transform-origin: 0% 0%;
+    -moz-transform-origin: 0% 0%;
+    -o-transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    transform-origin: 0% 0%;
+}
+
+:host .textLayer .highlight {
+    margin: -1px;
+    padding: 1px;
+
+    background-color: rgb(180, 0, 170);
+    border-radius: 4px;
+}
+
+:host .textLayer .highlight.begin {
+    border-radius: 4px 0px 0px 4px;
+}
+
+:host .textLayer .highlight.end {
+    border-radius: 0px 4px 4px 0px;
+}
+
+:host .textLayer .highlight.middle {
+    border-radius: 0px;
+}
+
+:host .textLayer .highlight.selected {
+    background-color: rgb(0, 100, 0);
+}
+
+:host .textLayer ::selection { background: rgb(0,0,255); }
+:host .textLayer ::-moz-selection { background: rgb(0,0,255); }
+
+:host .textLayer .endOfContent {
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 100%;
+    right: 0px;
+    bottom: 0px;
+    z-index: -1;
+    cursor: default;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+}
+
+:host .textLayer .endOfContent.active {
+    top: 0px;
+}
+
+
+:host .annotationLayer section {
+    position: absolute;
+}
+
+:host .annotationLayer .linkAnnotation > a {
+    position: absolute;
+    font-size: 1em;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+:host .annotationLayer .linkAnnotation > a /* -ms-a */  {
+    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
+}
+
+:host .annotationLayer .linkAnnotation > a:hover {
+    opacity: 0.2;
+    background: #ff0;
+    box-shadow: 0px 2px 10px #ff0;
+}
+
+:host .annotationLayer .textAnnotation img {
+    position: absolute;
+    cursor: pointer;
+}
+
+:host .annotationLayer .popupWrapper {
+    position: absolute;
+    width: 20em;
+}
+
+:host .annotationLayer .popup {
+    position: absolute;
+    z-index: 200;
+    max-width: 20em;
+    background-color: #FFFF99;
+    box-shadow: 0px 2px 5px #333;
+    border-radius: 2px;
+    padding: 0.6em;
+    margin-left: 5px;
+    cursor: pointer;
+    word-wrap: break-word;
+}
+
+:host .annotationLayer .popup h1 {
+    font-size: 1em;
+    border-bottom: 1px solid #000000;
+    padding-bottom: 0.2em;
+}
+
+:host .annotationLayer .popup p {
+    padding-top: 0.2em;
+}
+
+:host .annotationLayer .highlightAnnotation,
+.annotationLayer .underlineAnnotation,
+.annotationLayer .squigglyAnnotation,
+.annotationLayer .strikeoutAnnotation,
+.annotationLayer .fileAttachmentAnnotation {
+    cursor: pointer;
+}
+
+:host .pdfViewer .canvasWrapper {
+    overflow: hidden;
+}
+
+:host .pdfViewer .page {
+    direction: ltr;
+    width: 816px;
+    height: 1056px;
+    margin: 1px auto -8px auto;
+    position: relative;
+    overflow: visible;
+    border: 9px solid transparent;
+    background-clip: content-box;
+    background-color: white;
+}
+
+:host .pdfViewer.removePageBorders .page {
+    margin: 0px auto 10px auto;
+    border: none;
+}
+
+:host .pdfViewer .page canvas {
+    margin: 0;
+    display: block;
+}
+
+:host .pdfViewer .page .loadingIcon {
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: url('images/loading-icon.gif') center no-repeat;
+}
+
+:host * {
+    padding: 0;
+    margin: 0;
+}
+
+:host html {
+    height: 100%;
+    width: 100%;
+    /* Font size is needed to make the activity bar the correct size. */
+    font-size: 10px;
+}
+
+:host body {
+    height: 100%;
+    width: 100%;
+    background-color: #404040;
+    background-image: url(images/texture.png);
+}
+
+:host body,
+input,
+button,
+select {
+    font: message-box;
+    outline: none;
+}
+
+:host .hidden {
+    display: none !important;
+}
+:host [hidden] {
+    display: none !important;
+}

ng2-components/ng2-alfresco-viewer/src/viewer.component.css

@@ -11,7 +11,11 @@
     flex-direction: row;
     flex-wrap: wrap;
     flex: 1;
-    margin: 20px;
+}
+
+.mdl-grid {
+    width: 100vw;
+    padding: 0px !important;
 }
 
 .viewer-name-file {

ng2-components/ng2-alfresco-viewer/src/viewer.component.html

@@ -43,7 +43,7 @@
                         <!--</button>-->
                     <!--</div>-->
 
-                    <div class="center-element mdl-cell mdl-cell--8-col" >
+                    <div class="center-element mdl-cell mdl-cell--12-col" >
 
                         <div id="viewer-content-container" class="viewer-content-container mdl-cell" >
                         <!-- Start View Switch-->