Skip to content

Instantly share code, notes, and snippets.

@philly-vanilly
Last active April 18, 2020 11:58
Show Gist options
  • Save philly-vanilly/4ba5367d883a655717f2bdbfe78f7f0f to your computer and use it in GitHub Desktop.
Save philly-vanilly/4ba5367d883a655717f2bdbfe78f7f0f to your computer and use it in GitHub Desktop.
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {PdfViewerComponent} from 'ng2-pdf-viewer';
@Component({
selector: 'app-root',
template: `
<h1 style="background-color: white">PDF.Js Zoom</h1>
<pdf-viewer
[src]="pdfSrc"
[zoom]="pdfZoom"
[render-text]="true"
[original-size]="false"
[show-all]="true"
style="display: block; height: 100%"
></pdf-viewer>
`,
styleUrls: ['app.component.scss']
})
export class AppComponent implements AfterViewInit {
@ViewChild(PdfViewerComponent, {static: false}) private pdfComponent: PdfViewerComponent;
pdfSrc = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';
public pdfZoom = 1;
private pinchZoomEnabled = false;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
ngAfterViewInit(): void {
if (!this.pinchZoomEnabled) {
this.pinchZoomEnabled = true;
this.enablePinchZoom(
this.pdfComponent.pdfViewer,
this.pdfComponent.pdfViewerContainer.nativeElement,
this.pdfComponent.pdfViewerContainer.nativeElement.children[0]
);
}
}
private enablePinchZoom(pdfViewer, container, viewer) {
let startX = 0, startY = 0;
let initialPinchDistance = 0;
let pinchScale = 1;
// const viewer = document.getElementById('viewer');
// const container = document.getElementById('viewerContainer');
const reset = () => { startX = startY = initialPinchDistance = 0; pinchScale = 1; };
// Prevent native iOS page zoom
// document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
document.addEventListener('touchstart', (e) => {
console.log('Touchstart');
if (e.touches.length > 1) {
startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
initialPinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
} else {
initialPinchDistance = 0;
}
});
document.addEventListener('touchmove', (e) => {
if (initialPinchDistance <= 0 || e.touches.length < 2) { return; }
// scale non-standard (missing where?) property exposing distance between two fingers/touches
if ((e as any).scale !== 1) { e.preventDefault(); }
const pinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
const originX = startX + container.scrollLeft;
const originY = startY + container.scrollTop;
pinchScale = pinchDistance / initialPinchDistance;
viewer.style.transform = `scale(${pinchScale})`;
viewer.style.transformOrigin = `${originX}px ${originY}px`;
}, { passive: false });
document.addEventListener('touchend', (e) => {
if (initialPinchDistance <= 0) { return; }
viewer.style.transform = `none`;
viewer.style.transformOrigin = `unset`;
this.pdfZoom *= pinchScale; // previously PDFViewerApplication.pdfViewer.currentScale
const rect = container.getBoundingClientRect();
const dx = startX - rect.left;
const dy = startY - rect.top;
container.scrollLeft += dx * (pinchScale - 1);
container.scrollTop += dy * (pinchScale - 1);
reset();
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment