Skip to content

Fix linear pan and zoom #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
greaka wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix linear pan and zoom #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
260f2b2
Fix linear pan and zoom
greaka Apr 20, 2025
51f7150
Specifically handle the case of zoomDelta = 0
greaka Apr 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions packages/tyria/src/Tyria.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,12 +411,20 @@ export class Tyria extends TyriaEventTarget {
this.preload(this.resolveView({ contain: combinedArea }));

// calculate delta
const panSpeedStart = 2 ** -start.zoom;
const panSpeedTarget = 2 ** -target.zoom;
const panSpeedDelta = panSpeedTarget - panSpeedStart;
const deltaZoom = target.zoom - start.zoom;
const deltaCenter = subtract(target.center, start.center);

// functions to calculate the zoom
const s = (x: number) => ((1 / (2 ** deltaZoom)) - 1) * x + 1;
const z = (x: number) => Math.log2(1 / s(x));
const dz = (t: number) => 2 ** -t;
const pan = (t: number) => (dz(t) - panSpeedStart) / panSpeedDelta;
const zoom = (t: number) => t * deltaZoom + start.zoom;
const panAndZoom =
deltaZoom === 0
? (t: number) => [start.zoom, t]
: (t: number) => { const z = zoom(t); return [z, pan(z)] };

// frame function gets passed a progress (0,1] and
// calculates the new center/zoom at that progress between start and target
Expand All @@ -425,15 +433,10 @@ export class Tyria extends TyriaEventTarget {
const easedProgress = easing(progress);

// calculate zoom
const zoom = z(easedProgress) + start.zoom;

// when animating both the zoom and the center it appears to get faster when zooming in (and slower when zooming out)
// to compensate this we need need to calculate a speedup factor based on the deltaZoom
// TODO: find correct equation (needs to be always 1 at 100%, before that it needs to be >1 when zooming in (faster at start (because we are zoomed out further and translation appears slower)) and <1 when zooming out)
const speedup = 1;
const [zoom, pan] = panAndZoom(easedProgress);

// calculate center
const center = add(start.center, multiply(deltaCenter, easedProgress * speedup));
const center = add(start.center, multiply(deltaCenter, pan));

// set view to the calculated center and zoom
this.view = { center, zoom };
Expand Down