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

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

@ -9,6 +9,7 @@ import {
handleCalculateZoomPositions, handleCalculateZoomPositions,
} from "./lib/zoom.utils"; } from "./lib/zoom.utils";
import { Panning } from "./lib/panning.utils"; import { Panning } from "./lib/panning.utils";
import { Debug } from "../debug";
interface TransformState { interface TransformState {
/** /**
@ -410,7 +411,9 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
if (newScale === scale) return; if (newScale === scale) return;
// const { x, y } = handleCalculateZoomPositions( // this returns diff of pixels due to css zoom being used
//
// let { x, y } = handleCalculateZoomPositions(
// this, // this,
// midPoint.x, // midPoint.x,
// midPoint.y, // midPoint.y,
@ -420,29 +423,32 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
this.touch.pinchMidpoint = midPoint; this.touch.pinchMidpoint = midPoint;
this.touch.lastDistance = currentDistance; this.touch.lastDistance = currentDistance;
this.debug(midPoint.x, midPoint.y, "midpoint"); 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,
});
}
// TODO: this might be css zoom specific, I have no way to test this // TODO: this might be css zoom specific, I have no way to test this
this.transform.x = midPoint.x / newScale - midPoint.x / scale; if (Debug.flags.enabled("PANZOOM_PINCH_TRANSFORM_1")) {
this.transform.y = midPoint.y / newScale - midPoint.x / scale; 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.transform.scale = newScale;
this.update(); this.update();
} }
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);
}
registerMouseEvents() { registerMouseEvents() {
console.debug("[PanZoom] Registering mouse events to $wrapper & document"); console.debug("[PanZoom] Registering mouse events to $wrapper & document");