refactor, move panning to display.js

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

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;

options.js

@@ -17,8 +17,8 @@ export const optionsLayout = {
     merge: ['Merge Masses<br>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],
   }
 };

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

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

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

tool/zoom.js

@@ -155,7 +155,7 @@ export class Zoom extends Tool {
       });
 
       // Cancel panning
-      this.sim.pointer.panning = undefined;
+      this.sim.panning = undefined;
     });
   }
 }