aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2020-04-27 22:20:47 +0200
committerpacien2020-04-27 22:20:47 +0200
commit058d6b945c06b6daa2824ac837fc6ec003bc9fa6 (patch)
treeaa5debda8ca0f690408b1ff83939feff51a060c1
parent29d432e64e0482935ef91dbfed37d4d4cf26c42f (diff)
downloadldgallery-058d6b945c06b6daa2824ac837fc6ec003bc9fa6.tar.gz
viewer/LdZoom: properly scale with pinch-to-zoom
Previous scaling was too aggressive with large pictures.
-rw-r--r--viewer/src/services/ldzoom.ts19
1 files changed, 9 insertions, 10 deletions
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
index 27debb5..a494211 100644
--- a/viewer/src/services/ldzoom.ts
+++ b/viewer/src/services/ldzoom.ts
@@ -53,8 +53,8 @@ export default class LdZoom {
53 53
54 this.containerElement.addEventListener('wheel', wheelEvent => { 54 this.containerElement.addEventListener('wheel', wheelEvent => {
55 wheelEvent.preventDefault(); 55 wheelEvent.preventDefault();
56 const zoomDelta = -Math.sign(wheelEvent.deltaY) * this.scrollZoomSpeed; 56 const scaleFactor = this.scaleFactor - Math.sign(wheelEvent.deltaY) * this.scrollZoomSpeed;
57 this.zoom(wheelEvent.offsetX, wheelEvent.offsetY, zoomDelta); 57 this.zoom(wheelEvent.offsetX, wheelEvent.offsetY, scaleFactor);
58 }); 58 });
59 59
60 const pinchListener = new Hammer(this.containerElement); 60 const pinchListener = new Hammer(this.containerElement);
@@ -63,19 +63,18 @@ export default class LdZoom {
63 } 63 }
64 64
65 private installPinchHandler(pinchListener: HammerManager) { 65 private installPinchHandler(pinchListener: HammerManager) {
66 let lastScaleFactor = 0.0; 66 let startScaleFactor = 0.0;
67 67
68 pinchListener.on('pinchstart', (pinchEvent: HammerInput) => { 68 pinchListener.on('pinchstart', (pinchEvent: HammerInput) => {
69 lastScaleFactor = pinchEvent.scale; 69 startScaleFactor = this.scaleFactor;
70 }); 70 });
71 71
72 pinchListener.on('pinchmove', (pinchEvent: HammerInput) => { 72 pinchListener.on('pinchmove', (pinchEvent: HammerInput) => {
73 // FIXME: pinchEvent.center isn't always well-centered 73 // FIXME: v-dragscroll interferes with our focus point scroll adjustment
74 const focusX = pinchEvent.center.x + this.containerElement.scrollLeft; 74 const focusX = pinchEvent.center.x + this.containerElement.scrollLeft;
75 const focusY = pinchEvent.center.y + this.containerElement.scrollTop; 75 const focusY = pinchEvent.center.y + this.containerElement.scrollTop;
76 const zoomDelta = pinchEvent.scale - lastScaleFactor; 76 const scaleFactor = pinchEvent.scale * startScaleFactor;
77 lastScaleFactor = pinchEvent.scale; 77 this.zoom(focusX, focusY, scaleFactor);
78 this.zoom(focusX, focusY, zoomDelta);
79 }); 78 });
80 } 79 }
81 80
@@ -90,10 +89,10 @@ export default class LdZoom {
90 this.imageElement.style.marginTop = `${marginTop}px`; 89 this.imageElement.style.marginTop = `${marginTop}px`;
91 } 90 }
92 91
93 private zoom(focusX: number, focusY: number, zoomDelta: number) { 92 private zoom(focusX: number, focusY: number, scaleFactor: number) {
94 const ratioX = focusX / this.imageElement.clientWidth; 93 const ratioX = focusX / this.imageElement.clientWidth;
95 const ratioY = focusY / this.imageElement.clientHeight; 94 const ratioY = focusY / this.imageElement.clientHeight;
96 this.setImageScale(Math.min(this.scaleFactor + zoomDelta, this.maxScaleFactor)); 95 this.setImageScale(Math.min(scaleFactor, this.maxScaleFactor));
97 this.containerElement.scrollLeft -= focusX - ratioX * this.imageElement.clientWidth; 96 this.containerElement.scrollLeft -= focusX - ratioX * this.imageElement.clientWidth;
98 this.containerElement.scrollTop -= focusY - ratioY * this.imageElement.clientHeight; 97 this.containerElement.scrollTop -= focusY - ratioY * this.imageElement.clientHeight;
99 } 98 }