From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 26 Jul 2022 08:44:34 +0200 Subject: viewer: migrate to vue 3, general refactoring and cleanup Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112 --- viewer/src/services/ldzoom.ts | 135 ------------------------------------------ 1 file changed, 135 deletions(-) delete mode 100644 viewer/src/services/ldzoom.ts (limited to 'viewer/src/services/ldzoom.ts') diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts deleted file mode 100644 index 33a64c8..0000000 --- a/viewer/src/services/ldzoom.ts +++ /dev/null @@ -1,135 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2020 Pacien TRAN-GIRARD --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import { PictureProperties, Resolution } from "@/@types/gallery"; -import "hammerjs"; - -/** - * Mousewheel and pinch zoom handler. - */ -export default class LdZoom { - readonly containerElement: HTMLDivElement; - readonly imageElement: HTMLImageElement; - readonly pictureProperties: PictureProperties; - readonly maxScaleFactor: number; - readonly scrollZoomSpeed: number; - scaleFactor: number = 0.0; - - constructor( - containerElement: HTMLDivElement, - imageElement: HTMLImageElement, - pictureProperties: PictureProperties, - maxScaleFactor: number, - scrollZoomSpeed: number - ) { - this.containerElement = containerElement; - this.imageElement = imageElement; - this.pictureProperties = pictureProperties; - this.maxScaleFactor = maxScaleFactor; - this.scrollZoomSpeed = scrollZoomSpeed; - } - - /** - * Register event listeners. - */ - public install() { - this.updateImageScale(this.scaleFactor); - - new ResizeObserver(() => { - this.updateImageScale(this.scaleFactor); - }).observe(this.containerElement); - - this.containerElement.addEventListener("wheel", wheelEvent => { - wheelEvent.preventDefault(); - const scaleFactor = this.scaleFactor - Math.sign(wheelEvent.deltaY) * this.scrollZoomSpeed; - this.zoom(wheelEvent.offsetX, wheelEvent.offsetY, scaleFactor); - }); - - const pinchListener = new Hammer(this.containerElement); - pinchListener.get("pinch").set({ enable: true }); - this.installPinchHandler(pinchListener); - } - - private installPinchHandler(pinchListener: HammerManager) { - let startScaleFactor = 0.0; - - pinchListener.on("pinchstart", (pinchEvent: HammerInput) => { - startScaleFactor = this.scaleFactor; - }); - - pinchListener.on("pinchmove", (pinchEvent: HammerInput) => { - const focusX = pinchEvent.center.x + this.containerElement.scrollLeft; - const focusY = pinchEvent.center.y + this.containerElement.scrollTop; - const scaleFactor = pinchEvent.scale * startScaleFactor; - this.zoom(focusX, focusY, scaleFactor); - }); - } - - /** - * Returns the picture resolution as it should be displayed. - */ - private getDisplayResolution(): Resolution { - return { - width: this.pictureProperties.resolution.width * this.scaleFactor, - height: this.pictureProperties.resolution.height * this.scaleFactor, - }; - } - - /** - * Applies scaling to the DOM image element. - * To call after internal intermediate computations because DOM properties aren't stable. - */ - private resizeImageElement() { - const imageDim = this.getDisplayResolution(); - this.imageElement.width = imageDim.width; - this.imageElement.height = imageDim.height; - } - - /** - * Centers the image element inside its container if it fits, or stick to the top and left borders otherwise. - * It's depressingly hard to do in pure CSS… - */ - private recenterImageElement() { - const imageDim = this.getDisplayResolution(); - const marginLeft = Math.max((this.containerElement.clientWidth - imageDim.width) / 2, 0); - const marginTop = Math.max((this.containerElement.clientHeight - imageDim.height) / 2, 0); - this.imageElement.style.marginLeft = `${marginLeft}px`; - this.imageElement.style.marginTop = `${marginTop}px`; - } - - private zoom(focusX: number, focusY: number, scaleFactor: number) { - const imageDim = this.getDisplayResolution(); - const ratioX = focusX / imageDim.width; - const ratioY = focusY / imageDim.height; - this.updateImageScale(Math.min(scaleFactor, this.maxScaleFactor)); - - const newImageDim = this.getDisplayResolution(); - this.containerElement.scrollLeft -= focusX - ratioX * newImageDim.width; - this.containerElement.scrollTop -= focusY - ratioY * newImageDim.height; - } - - private updateImageScale(newScaleFactor: number) { - const horizontalFillRatio = this.containerElement.clientWidth / this.pictureProperties.resolution.width; - const verticalFillRatio = this.containerElement.clientHeight / this.pictureProperties.resolution.height; - const minScaleFactor = Math.min(horizontalFillRatio, verticalFillRatio, 1.0); - this.scaleFactor = Math.max(newScaleFactor, minScaleFactor); - this.resizeImageElement(); - this.recenterImageElement(); - } -} -- cgit v1.2.3