fixup pan touch

This commit is contained in:
Ladd 2025-12-28 16:00:10 -06:00
parent a6eda0226b
commit 8f0c0737fd

View File

@ -43,6 +43,10 @@ export class Pointer {
this.handlePointerUp({x: e.clientX, y: e.clientY}); this.handlePointerUp({x: e.clientX, y: e.clientY});
}); });
el.addEventListener('pointerleave', e => {
this.handlePointerUp({x: e.clientX, y: e.clientY});
});
// Monitor wheel events // Monitor wheel events
el.addEventListener('wheel', e => { el.addEventListener('wheel', e => {
const factor = e.deltaY < 0 ? ZOOM_IN_FACTOR : ZOOM_OUT_FACTOR; const factor = e.deltaY < 0 ? ZOOM_IN_FACTOR : ZOOM_OUT_FACTOR;
@ -126,16 +130,19 @@ export class Pointer {
// Set panning velocity // Set panning velocity
if (this.panTouchStart && this.panTouchLatest) { if (this.panTouchStart && this.panTouchLatest) {
const dt = (this.panTouchLatest.t - this.panTouchStart.t) / 1000; const dt = (this.panTouchLatest.t - this.panTouchStart.t) / 1000;
const latest = this.panTouchLatest; if (!dt) {
const start = this.panTouchStart; this.panning = undefined;
// const speed = Math.sqrt((latest.x - start.x)**2 + (latest.y - start.y)**2) / dt; } else {
const { scale } = this.sim.display; const { v } = this.pointerHistory[this.pointerHistory.length - 1];
this.panning = { // Convert pointer velocity to simulation scale
velocity: { v.x /= this.sim.display.scale;
x: 2 * (latest.x - start.x) / scale / dt, v.y /= this.sim.display.scale;
y: 2 * (latest.y - start.y) / scale / dt,
} this.panning = {
}; velocity: v
};
}
this.panTouchStart = undefined; this.panTouchStart = undefined;
} }
} }
@ -159,12 +166,14 @@ export class Pointer {
this.sim.objects.handlePointerMove({x, y, vx: v.x, vy: v.y}); this.sim.objects.handlePointerMove({x, y, vx: v.x, vy: v.y});
} else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) { } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
// Event loop should be able to read if (this.panTouchStart) {
this.panTouchLatest = { // Event loop should be able to read
x: clientX, this.panTouchLatest = {
y: clientY, x: clientX,
t: document.timeline.currentTime, y: clientY,
}; t: document.timeline.currentTime,
};
}
} }
} }