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) { function implementPinchZoom(targetSelector) {
let pinching = false; let pinching = false;
let initialDistance = 0; let lastElement = void 0;
let currentZoom = 1; let initialDistance, currentZoom, initialZoom, currentX, currentY, initialX, initialY, initialTouchX, initialTouchY;
let initialZoom = 1; function reset() {
let currentX = 0; initialDistance = 0;
let currentY = 0; currentZoom = 1;
let initialX = 0; initialZoom = 1;
let initialY = 0; currentX = 0;
let initialTouchX = 0; currentY = 0;
let initialTouchY = 0; initialX = 0;
initialY = 0;
initialTouchX = 0;
initialTouchY = 0;
}
reset();
const MIN = 0.25; const MIN = 0.25;
const MAX = 5; const MAX = 5;
const element = () => canvas.querySelector(targetSelector); const element = () => canvas.querySelector(targetSelector);
@@ -1160,7 +1165,6 @@
function apply(factor, offset) { function apply(factor, offset) {
if (factor < MIN) return apply(MIN, offset); if (factor < MIN) return apply(MIN, offset);
if (factor > MAX) return apply(5, offset); if (factor > MAX) return apply(5, offset);
if (!element) return;
const [x, y] = offset; const [x, y] = offset;
element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`; element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`;
currentX = x; currentX = x;
@@ -1170,6 +1174,8 @@
const canvas = document.body; const canvas = document.body;
canvas.addEventListener("touchstart", (event) => { canvas.addEventListener("touchstart", (event) => {
document.activeElement.blur(); document.activeElement.blur();
if (lastElement != void 0 && lastElement != element()) reset();
lastElement = element();
initialZoom = currentZoom; initialZoom = currentZoom;
initialX = currentX; initialX = currentX;
initialY = currentY; initialY = currentY;
src/Model/Utility/utility.ts
+23 -10
View File
@@ -281,18 +281,29 @@ export function localeCompare(a: string, b: string): number {
// ui // ui
export function implementPinchZoom(targetSelector: string) { export function implementPinchZoom(targetSelector: string) {
let pinching = false; let pinching = false;
let lastElement: HTMLElement|undefined = undefined;
let initialDistance = 0; let initialDistance,
currentZoom, initialZoom,
currentX, currentY,
initialX, initialY,
initialTouchX, initialTouchY;
let currentZoom = 1; function reset() {
let initialZoom = 1; initialDistance = 0;
let currentX = 0; currentZoom = 1;
let currentY = 0; initialZoom = 1;
let initialX = 0;
let initialY = 0; currentX = 0;
let initialTouchX = 0; currentY = 0;
let initialTouchY = 0; initialX = 0;
initialY = 0;
initialTouchX = 0;
initialTouchY = 0;
}
reset();
const MIN = 0.25; const MIN = 0.25;
const MAX = 5; const MAX = 5;
@@ -312,7 +323,6 @@ export function implementPinchZoom(targetSelector: string) {
function apply(factor: number, offset: [number, number]) { function apply(factor: number, offset: [number, number]) {
if (factor < MIN) return apply(MIN, offset); if (factor < MIN) return apply(MIN, offset);
if (factor > MAX) return apply(5, offset); if (factor > MAX) return apply(5, offset);
if (!element) return;
const [x, y] = offset; const [x, y] = offset;
element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`; 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) => { canvas.addEventListener("touchstart", (event: TouchEvent) => {
(document.activeElement as HTMLElement).blur(); (document.activeElement as HTMLElement).blur();
if (lastElement != undefined && lastElement != element()) reset();
lastElement = element();
initialZoom = currentZoom; initialZoom = currentZoom;
initialX = currentX; initialX = currentX;
initialY = currentY; initialY = currentY;