implement

.editorconfig

@@ -1,4 +1,4 @@
-# Editor configuration, see https://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]

.eslintignore

@@ -0,0 +1,15 @@
+# Valid
+/**/*.spec.ts
+/**/*.stories.ts
+/**/*.json
+/**/*.po.ts
+
+# GQL auto generated files
+/**/*types.ts
+
+# Config file in JS
+/**/*index.js
+/**/*index.ts
+wallaby.js
+decorate-angular-cli.js
+

.eslintrc.json

@@ -0,0 +1,28 @@
+{
+ "parser": "@typescript-eslint/parser",
+ "extends": [
+ "@wemaintain/eslint-config",
+ "eslint:recommended",
+ "plugin:@angular-eslint/recommended",
+ "plugin:prettier/recommended",
+ "prettier/@typescript-eslint",
+ "prettier"
+ ],
+ "parserOptions": {
+ "ecmaVersion": 2020,
+ "sourceType": "module",
+ "project": "./tsconfig.base.json"
+ },
+ "rules": {
+ "max-len": ["off"]
+ },
+ "overrides": [
+ {
+ "files": ["**/*.ts", "**/*.spec.ts"],
+ "plugins": ["@angular-eslint/template"],
+ "rules": {
+ "@typescript-eslint/no-explicit-any": ["off"]
+ }
+ }
+ ]
+}

.prettierignore

@@ -0,0 +1,14 @@
+# Artifacts
+coverage
+dist
+build 
+
+# GQL auto generated files
+/**/*types.ts
+
+# Config file in JS
+/**/*index.js
+/**/*index.ts
+wallaby.js
+decorate-angular-cli.js
+

.prettierrc

@@ -1,3 +1,5 @@
 {
+ "tabWidth": 2,
+ "semi": false,
  "singleQuote": true
 }

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+ "recommendations": [
+ "nrwl.angular-console",
+ "angular.ng-template",
+ "ms-vscode.vscode-typescript-tslint-plugin",
+ "esbenp.prettier-vscode"
+ ]
+}

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:4200",
+ "webRoot": "${workspaceFolder}",
+ "runtimeExecutable": "/usr/bin/google-chrome-stable"
+ }
+ ]
+}

.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+ "editor.tabSize": 2,
+ "[javascript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
+ },
+ "[typescript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
+ },
+ "[json]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
+ },
+ "[html]": {
+ "editor.defaultFormatter": "vscode.html-language-features"
+ },
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
+}

package.json

@@ -1,6 +1,6 @@
 {
- "name": "ng2-pdf-viewer",
- "version": "6.3.2",
+ "name": "pdf-viewer",
+ "version": "1.0.0",
  "description": "Angular 5+ component for rendering PDF",
  "license": "MIT",
  "scripts": {
@@ -72,7 +72,7 @@
  "rxjs": "~6.5.3",
  "ts-node": "~8.6.2",
  "tslint": "~5.20.0",
- "typescript": "~3.6.5",
+ "typescript": "^3.7.5",
  "webpack-bundle-analyzer": "^3.7.0",
  "zone.js": "~0.10.2"
  },

src/app/app.component.html

@@ -183,8 +183,8 @@
 
 
  <mat-drawer-content>
- <pdf-viewer [src]="pdfSrc" [(page)]="page" [rotation]="rotation" [original-size]="originalSize" [show-all]="showAll"
- [fit-to-page]="fitToPage" (after-load-complete)="afterLoadComplete($event)" [zoom]="zoom" [zoom-scale]="zoomScale" 
+ <pdf-viewer [src]="pdfSrc" [rotation]="rotation" [original-size]="originalSize" [show-all]="showAll"
+ [fit-to-page]="fitToPage" (after-load-complete)="afterLoadComplete($event)" [zoom]="zoom" [zoom-scale]="zoomScale"
  [stick-to-page]="stickToPage" [render-text]="renderText" [external-link-target]="'blank'"
  [autoresize]="autoresize" (error)="onError($event)" (on-progress)="onProgress($event)"
  (page-rendered)="pageRendered($event)"></pdf-viewer>

src/app/app.module.ts

@@ -1,11 +1,10 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { DemoMaterialModule } from './material.module';
-import { PdfViewerModule } from './pdf-viewer/pdf-viewer.module';
-import { AppComponent } from './app.component';
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { AppComponent } from './app.component'
+import { DemoMaterialModule } from './material.module'
+import { PdfViewerModule } from './pdf-viewer/pdf-viewer.module'
 
 @NgModule({
  declarations: [AppComponent],
@@ -14,10 +13,9 @@ import { AppComponent } from './app.component';
  FormsModule,
  NoopAnimationsModule,
  DemoMaterialModule,
-
- PdfViewerModule
+ PdfViewerModule,
  ],
  providers: [],
- bootstrap: [AppComponent]
+ bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/pdf-viewer/pager/pager.component.html

@@ -0,0 +1,20 @@
+<div class="pager">
+ <div class="page">Page {{ page }} / {{ numPages }}</div>
+ <div class="operators">
+ <span (click)="this.nextPage()" class="operator">
+ <mat-icon>add</mat-icon>
+ </span>
+ <span (click)="this.previousPage()" class="operator">
+ <mat-icon>remove</mat-icon>
+ </span>
+ </div>
+ <div class="operators">
+ <span (click)="this.zoomIn()" class="operator">
+ <mat-icon>zoom_in</mat-icon>
+ </span>
+ <span class="zoom-value">{{ zoom | percent }}</span>
+ <span (click)="this.zoomOut()" class="operator">
+ <mat-icon>zoom_out</mat-icon>
+ </span>
+ </div>
+</div>

src/app/pdf-viewer/pager/pager.component.scss

@@ -0,0 +1,51 @@
+.pager {
+ position: absolute;
+ bottom: 60px;
+ left: 50%;
+ color: white;
+ display: flex;
+ font-size: 12px;
+ height: 36px;
+
+ .page {
+ display: flex;
+ align-items: center;
+ background: rgba(0, 0, 0, 0.7);
+
+ border-right: 1px solid white;
+ padding: 8px;
+ }
+
+ .operators {
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid white;
+
+ .operator {
+ cursor: pointer;
+ display: block;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ width: 36px;
+ height: 36px;
+ justify-content: center;
+ font-size: 18px;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.6);
+ }
+ }
+
+ .zoom-value {
+ font-size: 12px;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ width: 36px;
+ height: 36px;
+ justify-content: center;
+ }
+ }
+}

src/app/pdf-viewer/pager/pager.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagerComponent } from './pager.component';
+
+describe('PagerComponent', () => {
+ let component: PagerComponent;
+ let fixture: ComponentFixture<PagerComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PagerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PagerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/pdf-viewer/pager/pager.component.ts

@@ -0,0 +1,52 @@
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+} from '@angular/core'
+
+@Component({
+ selector: 'app-pager',
+ templateUrl: './pager.component.html',
+ styleUrls: ['./pager.component.scss'],
+})
+export class PagerComponent implements OnInit {
+ /** Current page */
+ @Input() page: number
+
+ /** Current zoom level */
+ @Input() zoom: number
+
+ /** Total pages */
+ @Input() numPages: number
+
+ /** Emits when the current page has changed */
+ @Output() pageChange: EventEmitter<number> = new EventEmitter()
+
+ /** Emits when the zoom has changed */
+ @Output() zoomChange: EventEmitter<number> = new EventEmitter()
+
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ public nextPage(): void {
+ this.pageChange.emit(this.page + 1)
+ }
+
+ public previousPage(): void {
+ this.pageChange.emit(this.page - 1)
+ }
+
+ public zoomIn(): void {
+ this.zoom = Math.round((this.zoom + 0.1) * 100) / 100
+ this.zoomChange.emit(this.zoom)
+ }
+
+ public zoomOut(): void {
+ this.zoom = Math.round((this.zoom - 0.1) * 100) / 100
+ this.zoomChange.emit(this.zoom)
+ }
+}

src/app/pdf-viewer/pdf-viewer.component.html

@@ -0,0 +1,18 @@
+<div #pdfViewerContainer class="pdf-viewer-container">
+ <div class="pdfViewer"></div>
+
+ <div class="annotations">
+ <div class="annotation-card" *ngIf="activeAnnotation"
+ [ngStyle]="{ top: annotationCardCoordinates.positionY * zoom + 'px', left: annotationCardCoordinates.positionX * zoom + 'px' }">
+ <ng-content select=".annotation-card-content"></ng-content>
+ </div>
+
+ <div *ngFor="let annotation of annotations" [ngStyle]="{
+ top: annotation.positionY * zoom + 'px',
+ left: annotation.positionX * zoom + 'px'
+ }" class="annotation" [id]="annotation.id">{{ annotation.index }}</div>
+ </div>
+
+</div>
+<app-pager [page]="page" (pageChange)="pageChanged($event)" [numPages]="numPages" [zoom]="zoom"
+ (zoomChange)="zoomChanged($event)"></app-pager>