fixup panning

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;
     }

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) {

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});

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;