From b0cbbc61f886d8fc186af9abe30d88d666262b08 Mon Sep 17 00:00:00 2001 From: Lentil Hoffman Date: Mon, 29 Dec 2025 14:52:57 -0600 Subject: [PATCH] refactor, move panning to display.js --- display.js | 24 ++++++++++++++++++++++++ objects.js | 18 +++++++++--------- options.js | 4 ++-- pointer.js | 27 +++++++-------------------- simulator.js | 7 ++++--- tool/play-pause.js | 2 +- tool/zoom.js | 2 +- 7 files changed, 48 insertions(+), 36 deletions(-) diff --git a/display.js b/display.js index 73d7596..2e162e5 100644 --- a/display.js +++ b/display.js @@ -142,4 +142,28 @@ export class Display { } ctx.resetTransform(); } + + computePanning(elapsedTime) { + // Add another entry for the current pointer position + const { + pointerHistory, + panTouchStart: start, + panTouchLatest: latest, + } = this.sim.pointer ?? {}; + if (pointerHistory?.length) { + const currentPointer = pointerHistory[pointerHistory.length - 1]; + this.sim.pointer.updatePointer(currentPointer); + } + if (start && latest) { + // Direct translate + this.viewOrigin.x = start.viewOrigin.x - (latest.x - start.x) / this.scale; + this.viewOrigin.y = start.viewOrigin.y - (latest.y - start.y) / this.scale; + } else if (this.panning && !this.panning.paused) { + // Apply update to viewOrigin based on panning + const { velocity } = this.panning; + this.viewOrigin.x -= velocity.x * elapsedTime; + this.viewOrigin.y -= velocity.y * elapsedTime; + } + } + } diff --git a/objects.js b/objects.js index 2522b4c..99065cf 100644 --- a/objects.js +++ b/objects.js @@ -19,8 +19,8 @@ export class Objects { if (this.sim.playing) { this.sim.playing = false; this.paused = true; - if (this.sim.pointer.panning?.velocity) { - this.sim.pointer.panning.paused = true; + if (this.sim.panning?.velocity) { + this.sim.panning.paused = true; } } } @@ -29,8 +29,8 @@ export class Objects { if (this.paused) { this.sim.playing = true; this.paused = false; - if (this.sim.pointer.panning?.paused) { - this.sim.pointer.panning.paused = false; + if (this.sim.panning?.paused) { + this.sim.panning.paused = false; } } } @@ -46,8 +46,8 @@ export class Objects { this.pause(); } - if (this.sim.pointer.panning?.velocity) { - obj.velocity = {...this.sim.pointer.panning.velocity}; + if (this.sim.panning?.velocity) { + obj.velocity = {...this.sim.panning.velocity}; } } @@ -144,9 +144,9 @@ export class Objects { // update the position using the pointer motion but the velocity using the pointer velocity const obj = this.getSelectedOrCreating(); if (obj === undefined) return; - if (this.sim.pointer.panning?.velocity) { - vx += this.sim.pointer.panning.velocity.x; - vy += this.sim.pointer.panning.velocity.y; + if (this.sim.panning?.velocity) { + vx += this.sim.panning.velocity.x; + vy += this.sim.panning.velocity.y; } obj.position.x = x; obj.position.y = y; diff --git a/options.js b/options.js index 6dab240..9de7d78 100644 --- a/options.js +++ b/options.js @@ -17,8 +17,8 @@ export const optionsLayout = { merge: ['Merge Masses
on Collision', 'boolean', true, {wide: true}], }, param: { - gravity: ['Gravity', 'number', 5E4], - timeScale: ['Time Scale', 'number', 0.3], + gravity: ['Gravity', 'number', 4E4], + timeScale: ['Time Scale', 'number', 0.2], massCreationRate: ['Mass Creation Rate', 'number', 10], } }; diff --git a/pointer.js b/pointer.js index 9c5a4d6..8230a02 100644 --- a/pointer.js +++ b/pointer.js @@ -89,6 +89,11 @@ export class Pointer { this.pointerHistory.push({t, x, y, v}); } + get latestPointerVelocity() { + const latestPointer = this.pointerHistory[this.pointerHistory.length - 1]; + return latestPointer?.v; + } + handlePointerDown({x: clientX, y: clientY}) { this.clearPointerHistory(POINTER_DOWN_HISTORY_SIZE); this.updatePointer({x: clientX, y: clientY}); @@ -123,7 +128,7 @@ export class Pointer { if (!dt) { this.panning = undefined; } else { - const v = this.getPointerVelocity(); + const v = {...this.latestPointerVelocity}; // Convert pointer velocity to simulation scale v.x /= this.sim.display.scale; v.y /= this.sim.display.scale; @@ -167,23 +172,5 @@ export class Pointer { } } - computeFrame(elapsedTime) { - // Add another entry for the current pointer position - if (this.pointerHistory?.length) { - const currentPointer = this.pointerHistory[this.pointerHistory.length - 1]; - this.updatePointer(currentPointer); - } - if (this.panTouchStart && this.panTouchLatest) { - // Direct translate - const start = this.panTouchStart; - const latest = this.panTouchLatest; - this.sim.display.viewOrigin.x = start.viewOrigin.x - (latest.x - start.x) / this.sim.display.scale; - this.sim.display.viewOrigin.y = start.viewOrigin.y - (latest.y - start.y) / this.sim.display.scale; - } else if (this.panning && !this.panning.paused) { - // Apply update to viewOrigin based on panning - const { velocity } = this.panning; - this.sim.display.viewOrigin.x -= velocity.x * elapsedTime; - this.sim.display.viewOrigin.y -= velocity.y * elapsedTime; - } - } + } diff --git a/simulator.js b/simulator.js index da112a3..11d42b4 100644 --- a/simulator.js +++ b/simulator.js @@ -24,10 +24,11 @@ export class Sim { nextZoom = undefined; playing = true; + objects = undefined; display = undefined; overlay = undefined; pointer = undefined; - objects = undefined; + panning = undefined; toolbars = {}; toolbarGroups = {}; @@ -104,7 +105,7 @@ export class Sim { this.pointer.clearPointerHistory(); if (this.playing && velocity) { - this.pointer.panning = { + this.panning = { velocity: { x: -velocity.x, y: -velocity.y, @@ -162,7 +163,7 @@ export class Sim { this.info['Scale'] = this.getScaleDisplay(); } - this.pointer.computeFrame(elapsedTime); + this.display.computePanning(elapsedTime); this.objects.computeFrame(elapsedTime); this.overlay.renderInfo(); this.display.fillCanvas(); diff --git a/tool/play-pause.js b/tool/play-pause.js index 85572a6..e34193c 100644 --- a/tool/play-pause.js +++ b/tool/play-pause.js @@ -74,7 +74,7 @@ export class PlayPause extends Tool { this.updateButtons(); pauseButton.addEventListener('click', () => { - this.sim.pointer.panning = undefined; + this.sim.panning = undefined; if (this.sim.playing) { this.sim.playing = false; this.updateButtons(); diff --git a/tool/zoom.js b/tool/zoom.js index b06b59c..5177384 100644 --- a/tool/zoom.js +++ b/tool/zoom.js @@ -155,7 +155,7 @@ export class Zoom extends Tool { }); // Cancel panning - this.sim.pointer.panning = undefined; + this.sim.panning = undefined; }); } }