VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix glitches with zooming

Browse Source
This commit is contained in:
marlon-erler
2026-08-30 22:43:56 +02:00
parent f159d45c75
commit 7ee9457be1
2 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+16 -10
View File
@@ -1138,15 +1138,20 @@
}
function implementPinchZoom(targetSelector) {
let pinching = false;
let initialDistance = 0;
let currentZoom = 1;
let initialZoom = 1;
let currentX = 0;
let currentY = 0;
let initialX = 0;
let initialY = 0;
let initialTouchX = 0;
let initialTouchY = 0;
let lastElement = void 0;
let initialDistance, currentZoom, initialZoom, currentX, currentY, initialX, initialY, initialTouchX, initialTouchY;
function reset() {
initialDistance = 0;
currentZoom = 1;
initialZoom = 1;
currentX = 0;
currentY = 0;
initialX = 0;
initialY = 0;
initialTouchX = 0;
initialTouchY = 0;
}
reset();
const MIN = 0.25;
const MAX = 5;
const element = () => canvas.querySelector(targetSelector);
@@ -1160,7 +1165,6 @@
function apply(factor, offset) {
if (factor < MIN) return apply(MIN, offset);
if (factor > MAX) return apply(5, offset);
if (!element) return;
const [x, y] = offset;
element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`;
currentX = x;
@@ -1170,6 +1174,8 @@
const canvas = document.body;
canvas.addEventListener("touchstart", (event) => {
document.activeElement.blur();
if (lastElement != void 0 && lastElement != element()) reset();
lastElement = element();
initialZoom = currentZoom;
initialX = currentX;
initialY = currentY;
src/Model/Utility/utility.ts
+23 -10
View File
@@ -281,18 +281,29 @@ export function localeCompare(a: string, b: string): number {
// ui
export function implementPinchZoom(targetSelector: string) {
let pinching = false;
let lastElement: HTMLElement|undefined = undefined;
let initialDistance = 0;
let initialDistance,
currentZoom, initialZoom,
currentX, currentY,
initialX, initialY,
initialTouchX, initialTouchY;
let currentZoom = 1;
let initialZoom = 1;
function reset() {
initialDistance = 0;
let currentX = 0;
let currentY = 0;
let initialX = 0;
let initialY = 0;
let initialTouchX = 0;
let initialTouchY = 0;
currentZoom = 1;
initialZoom = 1;
currentX = 0;
currentY = 0;
initialX = 0;
initialY = 0;
initialTouchX = 0;
initialTouchY = 0;
}
reset();
const MIN = 0.25;
const MAX = 5;
@@ -312,7 +323,6 @@ export function implementPinchZoom(targetSelector: string) {
function apply(factor: number, offset: [number, number]) {
if (factor < MIN) return apply(MIN, offset);
if (factor > MAX) return apply(5, offset);
if (!element) return;
const [x, y] = offset;
element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`;
@@ -325,6 +335,9 @@ export function implementPinchZoom(targetSelector: string) {
canvas.addEventListener("touchstart", (event: TouchEvent) => {
(document.activeElement as HTMLElement).blur();
if (lastElement != undefined && lastElement != element()) reset();
lastElement = element();
initialZoom = currentZoom;
initialX = currentX;
initialY = currentY;