From dcc630a2e663a1220670acfa49df161aba919f6d Mon Sep 17 00:00:00 2001 From: Lentil Hoffman Date: Mon, 29 Dec 2025 15:18:37 -0600 Subject: [PATCH] fixup panning --- display.js | 4 ++-- objects.js | 1 - pointer.js | 13 ++++--------- simulator.js | 33 ++++++++++++++++++--------------- 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/display.js b/display.js index 2e162e5..eff687f 100644 --- a/display.js +++ b/display.js @@ -158,9 +158,9 @@ export class Display { // 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) { + } else if (this.sim.panning && !this.sim.panning.paused) { // Apply update to viewOrigin based on panning - const { velocity } = this.panning; + const { velocity } = this.sim.panning; this.viewOrigin.x -= velocity.x * elapsedTime; this.viewOrigin.y -= velocity.y * elapsedTime; } diff --git a/objects.js b/objects.js index 99065cf..8ad08cd 100644 --- a/objects.js +++ b/objects.js @@ -169,7 +169,6 @@ export class Objects { // cb: (acc, obj, idx) => {} reduce(cb, initial, opts) { let acc = initial; - console.log('reduce, initial', acc); this.forEachObject((obj, idx) => { const ret = cb(acc, obj, idx); if (ret !== undefined) { diff --git a/pointer.js b/pointer.js index 8230a02..48a1652 100644 --- a/pointer.js +++ b/pointer.js @@ -14,7 +14,6 @@ export class Pointer { sim = undefined; pointerHistory = []; - panning = undefined; // { velocity: {x and y in sim coordinates}, paused: boolean } panTouchStart = undefined; // {x: undefined, y: undefined, t: undefined}; panTouchLatest = undefined; // {x: undefined, y: undefined, t: undefined}; suppressClick = false; @@ -63,7 +62,7 @@ export class Pointer { getPointerVelocity(points = POINTER_HISTORY_SIZE) { // Average over pointer history if (this.pointerHistory.length < 2) { - return {x: 0, y: 0, dt: 1}; + return this.latestPointerVelocity ?? {x: 0, y: 0, dt: 1}; } points = Math.min(points, POINTER_HISTORY_SIZE, this.pointerHistory.length); const start = this.pointerHistory[this.pointerHistory.length - points]; @@ -126,14 +125,14 @@ export class Pointer { if (this.panTouchStart && this.panTouchLatest) { const dt = (this.panTouchLatest.t - this.panTouchStart.t) / 1000; if (!dt) { - this.panning = undefined; + this.sim.panning = undefined; } else { const v = {...this.latestPointerVelocity}; // Convert pointer velocity to simulation scale v.x /= this.sim.display.scale; v.y /= this.sim.display.scale; - this.panning = { + this.sim.panning = { velocity: v }; } @@ -147,15 +146,11 @@ export class Pointer { // TODO: If e.touches.length > 1, user may be engaging pinch to zoom handlePointerMove({x: clientX, y: clientY}) { this.updatePointer({x: clientX, y: clientY}); - const {v} = this.pointerHistory[this.pointerHistory.length - 1]; + const v = this.latestPointerVelocity; // Convert pointer velocity to simulation scale v.x /= this.sim.display.scale; v.y /= this.sim.display.scale; - // const a = this.getPointerAcceleration(); - // v.x = v.x + a.x * v.dt / this.sim.display.scale / 2; - // v.y = v.y + a.y * v.dt / this.sim.display.scale / 2; - if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) { const {x, y} = this.sim.screenToSim(clientX, clientY); this.sim.objects.handlePointerMove({x, y, vx: v.x, vy: v.y}); diff --git a/simulator.js b/simulator.js index 11d42b4..9ad54ea 100644 --- a/simulator.js +++ b/simulator.js @@ -29,8 +29,8 @@ export class Sim { overlay = undefined; pointer = undefined; panning = undefined; - toolbars = {}; toolbarGroups = {}; + toolbars = {}; isCurrentMode = () => undefined; getCurrentMode = () => undefined; @@ -60,20 +60,23 @@ export class Sim { this.overlay = new Overlay(this); this.pointer = new Pointer(this); - // Primary Toolbar - this.toolbars.tools.addTool(new Zoom(this.toolbars.tools)); - this.toolbars.tools.addTool(new PlayPause(this.toolbars.tools)); - - // Secondary Toolbar; Mode Switches - this.toolbars.modes.addTool(new ModeSwitch(this.toolbars.modes)); - - // Options Toolbar - this.toolbars.options.addTool(new OptionsTool(this.toolbars.options, - ['pauseDuring', 'display', 'collision'])); - - // Parameters Toolbar - this.toolbars.params.addTool(new OptionsTool(this.toolbars.options, - ['param'])); + { + // Configure toolbars + const { tools, modes, options, params } = this.toolbars; + // Primary Toolbar + tools.addTool(new Zoom(tools)); + tools.addTool(new PlayPause(tools)); + // Secondary Toolbar: Mode Switches + modes.addTool(new ModeSwitch(modes)); + // Options Toolbar + options.addTool(new OptionsTool(options, [ + 'pauseDuring', 'display', 'collision' + ])); + // Parameters Toolbar + params.addTool(new OptionsTool(params, [ + 'param' + ])); + } // Initiate main loop this.rawTime = document.timeline.currentTime / 1000;