FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes weird zooming on iOS (#3)

This commit is contained in:
Grant 2024-04-25 19:23:01 -06:00
parent 0ed579c0d7
commit f81c98abe5
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/lib/src/renderer/PanZoom.ts
View File

@ -9,6 +9,7 @@ import {
handleCalculateZoomPositions,
} from "./lib/zoom.utils";
import { Panning } from "./lib/panning.utils";
import { Debug } from "../debug";
interface TransformState {
/**
@ -410,7 +411,9 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
if (newScale === scale) return;
// const { x, y } = handleCalculateZoomPositions(
// this returns diff of pixels due to css zoom being used
//
// let { x, y } = handleCalculateZoomPositions(
// this,
// midPoint.x,
// midPoint.y,
@ -420,27 +423,30 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
this.touch.pinchMidpoint = midPoint;
this.touch.lastDistance = currentDistance;
this.debug(midPoint.x, midPoint.y, "midpoint");
// TODO: this might be css zoom specific, I have no way to test this
this.transform.x = midPoint.x / newScale - midPoint.x / scale;
this.transform.y = midPoint.y / newScale - midPoint.x / scale;
this.transform.scale = newScale;
this.update();
if (Debug.flags.enabled("PANZOOM_PINCH_DEBUG_MESSAGES")) {
Debug.debug("point", midPoint.x, midPoint.y, "midpoint");
Debug.debug("text", {
scale: [scale, newScale],
x: midPoint.x,
y: midPoint.y,
tx: this.transform.x,
ty: this.transform.y,
xx: midPoint.x * newScale - midPoint.x * scale,
yy: midPoint.y * newScale - midPoint.y * scale,
});
}
debug(x: number, y: number, id?: string) {
// if (document.getElementById("debug-" + id)) {
// document.getElementById("debug-" + id)!.style.top = y + "px";
// document.getElementById("debug-" + id)!.style.left = x + "px";
// return;
// }
// let el = document.createElement("div");
// if (id) el.id = "debug-" + id;
// el.classList.add("debug-point");
// el.style.setProperty("top", y + "px");
// el.style.setProperty("left", x + "px");
// document.body.appendChild(el);
// TODO: this might be css zoom specific, I have no way to test this
if (Debug.flags.enabled("PANZOOM_PINCH_TRANSFORM_1")) {
this.transform.x = midPoint.x / newScale - midPoint.x / scale;
this.transform.y = midPoint.y / newScale - midPoint.y / scale;
}
if (Debug.flags.enabled("PANZOOM_PINCH_TRANSFORM_2")) {
this.transform.x = (midPoint.x - this.transform.x) / (newScale - scale);
this.transform.y = (midPoint.y - this.transform.y) / (newScale - scale);
}
this.transform.scale = newScale;
this.update();
}
registerMouseEvents() {