aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/services/ldzoom.ts
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/services/ldzoom.ts')
-rw-r--r--viewer/src/services/ldzoom.ts136
1 files changed, 0 insertions, 136 deletions
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
deleted file mode 100644
index 22d4699..0000000
--- a/viewer/src/services/ldzoom.ts
+++ /dev/null
@@ -1,136 +0,0 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20// polyfill still required for IE and Safari, see https://caniuse.com/#feat=resizeobserver
21import ResizeObserver from "resize-observer-polyfill";
22import "hammerjs";
23
24/**
25 * Mousewheel and pinch zoom handler.
26 */
27export default class LdZoom {
28 readonly containerElement: HTMLDivElement;
29 readonly imageElement: HTMLImageElement;
30 readonly pictureProperties: Gallery.PictureProperties;
31 readonly maxScaleFactor: number;
32 readonly scrollZoomSpeed: number;
33 scaleFactor: number = 0.0;
34
35 constructor(
36 containerElement: HTMLDivElement,
37 imageElement: HTMLImageElement,
38 pictureProperties: Gallery.PictureProperties,
39 maxScaleFactor: number,
40 scrollZoomSpeed: number
41 ) {
42 this.containerElement = containerElement;
43 this.imageElement = imageElement;
44 this.pictureProperties = pictureProperties;
45 this.maxScaleFactor = maxScaleFactor;
46 this.scrollZoomSpeed = scrollZoomSpeed;
47 }
48
49 /**
50 * Register event listeners.
51 */
52 public install() {
53 this.updateImageScale(this.scaleFactor);
54
55 new ResizeObserver(() => {
56 this.updateImageScale(this.scaleFactor);
57 }).observe(this.containerElement);
58
59 this.containerElement.addEventListener("wheel", wheelEvent => {
60 wheelEvent.preventDefault();
61 const scaleFactor = this.scaleFactor - Math.sign(wheelEvent.deltaY) * this.scrollZoomSpeed;
62 this.zoom(wheelEvent.offsetX, wheelEvent.offsetY, scaleFactor);
63 });
64
65 const pinchListener = new Hammer(this.containerElement);
66 pinchListener.get("pinch").set({ enable: true });
67 this.installPinchHandler(pinchListener);
68 }
69
70 private installPinchHandler(pinchListener: HammerManager) {
71 let startScaleFactor = 0.0;
72
73 pinchListener.on("pinchstart", (pinchEvent: HammerInput) => {
74 startScaleFactor = this.scaleFactor;
75 });
76
77 pinchListener.on("pinchmove", (pinchEvent: HammerInput) => {
78 const focusX = pinchEvent.center.x + this.containerElement.scrollLeft;
79 const focusY = pinchEvent.center.y + this.containerElement.scrollTop;
80 const scaleFactor = pinchEvent.scale * startScaleFactor;
81 this.zoom(focusX, focusY, scaleFactor);
82 });
83 }
84
85 /**
86 * Returns the picture resolution as it should be displayed.
87 */
88 private getDisplayResolution(): Gallery.Resolution {
89 return {
90 width: this.pictureProperties.resolution.width * this.scaleFactor,
91 height: this.pictureProperties.resolution.height * this.scaleFactor,
92 };
93 }
94
95 /**
96 * Applies scaling to the DOM image element.
97 * To call after internal intermediate computations because DOM properties aren't stable.
98 */
99 private resizeImageElement() {
100 const imageDim = this.getDisplayResolution();
101 this.imageElement.width = imageDim.width;
102 this.imageElement.height = imageDim.height;
103 }
104
105 /**
106 * Centers the image element inside its container if it fits, or stick to the top and left borders otherwise.
107 * It's depressingly hard to do in pure CSS…
108 */
109 private recenterImageElement() {
110 const imageDim = this.getDisplayResolution();
111 const marginLeft = Math.max((this.containerElement.clientWidth - imageDim.width) / 2, 0);
112 const marginTop = Math.max((this.containerElement.clientHeight - imageDim.height) / 2, 0);
113 this.imageElement.style.marginLeft = `${marginLeft}px`;
114 this.imageElement.style.marginTop = `${marginTop}px`;
115 }
116
117 private zoom(focusX: number, focusY: number, scaleFactor: number) {
118 const imageDim = this.getDisplayResolution();
119 const ratioX = focusX / imageDim.width;
120 const ratioY = focusY / imageDim.height;
121 this.updateImageScale(Math.min(scaleFactor, this.maxScaleFactor));
122
123 const newImageDim = this.getDisplayResolution();
124 this.containerElement.scrollLeft -= focusX - ratioX * newImageDim.width;
125 this.containerElement.scrollTop -= focusY - ratioY * newImageDim.height;
126 }
127
128 private updateImageScale(newScaleFactor: number) {
129 const horizontalFillRatio = this.containerElement.clientWidth / this.pictureProperties.resolution.width;
130 const verticalFillRatio = this.containerElement.clientHeight / this.pictureProperties.resolution.height;
131 const minScaleFactor = Math.min(horizontalFillRatio, verticalFillRatio, 1.0);
132 this.scaleFactor = Math.max(newScaleFactor, minScaleFactor);
133 this.resizeImageElement();
134 this.recenterImageElement();
135 }
136}