WIP 2 (close)

Author: Riron

src/image-viewer-gesture.ts

@@ -32,19 +32,30 @@ export class ImageViewerGesture extends PanGesture {
 		this.listen();
 	}
 
+	// As we handle both pinch and drag, we have to make sure we don't drag when we are trying to pinch
+	isPinching(ev) {
+		return ev.touches && ev.touches.length > 1;
+	}
+
 	onDragStart(ev: any): boolean {
+		if (this.isPinching(ev)) {
+			this.abort(ev);
+		}
+
 		let coord = pointerCoord(ev);
 		this.startY = coord.y;
 		return true;
 	}
 
 	canStart(ev: any): boolean {
-		const isPinching = ev.touches && ev.touches.length > 1;
-
-		return !this.component.isZoomed && !isPinching;
+		return !this.component.isZoomed && !this.isPinching(ev);
 	}
 
 	onDragMove(ev: any): boolean {
+		if (this.isPinching(ev)) {
+			this.abort(ev);
+		}
+
 		let coord = pointerCoord(ev);
 		this.translationY = coord.y - this.startY;
 		this.opacity = Math.max(1 - Math.abs(this.translationY) / (10 * DRAG_THRESHOLD), .5);

src/image-viewer.component.ts

@@ -10,6 +10,7 @@ import {
 	Config,
 	Platform
 } from 'ionic-angular';
+import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from 'ionic-angular/gestures/hammer';
 import { ElementRef, Renderer, Component, OnInit, OnDestroy, AfterViewInit, NgZone, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
@@ -43,7 +44,14 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte
 
 	@ViewChild('imageContainer') imageContainer;
 	private pinchGesture: Gesture;
+	private adjustScale = 1;
+	private adjustDeltaX = 0;
+	private adjustDeltaY = 0;
+
 	private currentScale: number = 1;
+	private currentDeltaX = null;
+	private currentDeltaY = null;
+
 	private dblClickInAction: boolean;
 	public isZoomed: boolean;
 
@@ -73,9 +81,11 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte
 	ngAfterViewInit() {
 		// imageContainer is set after the view has been initialized
 		this._zone.runOutsideAngular(() => {
-			this.pinchGesture = new Gesture(this.imageContainer.nativeElement);
+			this.pinchGesture = new Gesture(this.imageContainer.nativeElement, {direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL});
 			this.pinchGesture.listen();
 			this.pinchGesture.on('pinch', (e) => this.onPinch(e));
+			this.pinchGesture.on('pinchend', (e) => this.onPinchEnd(e));
+			this.pinchGesture.on('pan', (e) => this.onPan(e));
 		});
 	}
 
@@ -98,12 +108,53 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte
 		this.imageContainer.nativeElement.style.transform = '';
 
 		this.isZoomed = !this.isZoomed;
+
+		if (this.isZoomed) {
+			this.currentScale === 2;
+		}
+
 		this.renderer.setElementClass(this.imageContainer.nativeElement, 'zoom', this.isZoomed);
 	}
 
 	onPinch(event) {
-		console.log(event, this.currentScale)
-		this.currentScale = Math.max(MAX_SCALE, this.currentScale * event.scale);
-		this.imageContainer.nativeElement.style.transform = `scale(${this.currentScale})`;
+		this.dragGesture.abort(event);
+
+		this.currentScale = Math.max(1, Math.min(MAX_SCALE, this.adjustScale * event.scale));
+
+		if (this.currentScale === 1) {
+			this.currentDeltaX = 0;
+			this.currentDeltaY = 0;
+		} else {
+			this.currentDeltaX = this.adjustDeltaX + (event.deltaX / this.currentScale);
+			this.currentDeltaY = this.adjustDeltaY + (event.deltaY / this.currentScale);
+		}
+
+		this.setImageContainerTransform();
+	}
+
+	onPan(event) {
+		if (this.isZoomed) {
+			this.currentDeltaX = this.adjustDeltaX + event.deltaX;
+			this.currentDeltaY = this.adjustDeltaY + event.deltaY;
+
+			this.setImageContainerTransform();
+		}
+	}
+
+	onPinchEnd(event) {
+		this.isZoomed = (this.currentScale !== 1);
+
+		// Saving the final transforms for adjustment next time the user interacts.
+		this.adjustScale = this.currentScale;
+		this.adjustDeltaX = this.currentDeltaX;
+		this.adjustDeltaY = this.currentDeltaY;
+	}
+
+	setImageContainerTransform() {
+		const transforms = [];
+		transforms.push(`scale(${this.currentScale})`);
+		transforms.push(`translate(${this.currentDeltaX}px, ${this.currentDeltaY}px)`);
+
+		this.renderer.setElementStyle(this.imageContainer.nativeElement, 'transform', transforms.join(' '));
 	}
 }

src/image-viewer.directive.ts

@@ -15,8 +15,7 @@ export class ImageViewerDirective {
 		private _el: ElementRef
 	) { }
 
-	@HostListener('click', ['$event.target'])
-	onClick($event): void {
+	@HostListener('click') onClick(): void {
 		let position = this._el.nativeElement.getBoundingClientRect();
 
 		let imageViewer = ImageViewer.create({image: this.src || this._el.nativeElement.src, position: position});

src/image-viewer.scss

@@ -47,6 +47,10 @@ image-viewer.ion-page {
     .image {
         will-change: transform;
         transform-origin: 0 0;
+
+        &.zoom {
+            transform: scale(2);
+        }
     }
 
     img {
@@ -59,14 +63,4 @@ image-viewer.ion-page {
         transition: transform .2s ease-in-out;
         transform-origin: 0 0;
     }
-
-    &.zoom {
-        .image-wrapper {
-            overflow: auto;
-        }
-
-        img {
-            transform: scale(2);
-        }
-    }
 }