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, 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,27 +423,30 @@ 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");
// TODO: this might be css zoom specific, I have no way to test this Debug.debug("text", {
this.transform.x = midPoint.x / newScale - midPoint.x / scale; scale: [scale, newScale],
this.transform.y = midPoint.y / newScale - midPoint.x / scale; x: midPoint.x,
this.transform.scale = newScale; y: midPoint.y,
this.update(); 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) { // TODO: this might be css zoom specific, I have no way to test this
// if (document.getElementById("debug-" + id)) { if (Debug.flags.enabled("PANZOOM_PINCH_TRANSFORM_1")) {
// document.getElementById("debug-" + id)!.style.top = y + "px"; this.transform.x = midPoint.x / newScale - midPoint.x / scale;
// document.getElementById("debug-" + id)!.style.left = x + "px"; this.transform.y = midPoint.y / newScale - midPoint.y / scale;
// return; }
// } if (Debug.flags.enabled("PANZOOM_PINCH_TRANSFORM_2")) {
// let el = document.createElement("div"); this.transform.x = (midPoint.x - this.transform.x) / (newScale - scale);
// if (id) el.id = "debug-" + id; this.transform.y = (midPoint.y - this.transform.y) / (newScale - scale);
// el.classList.add("debug-point"); }
// el.style.setProperty("top", y + "px"); this.transform.scale = newScale;
// el.style.setProperty("left", x + "px"); this.update();
// document.body.appendChild(el);
} }
registerMouseEvents() { registerMouseEvents() {