adding select mode

config.js

@@ -52,6 +52,7 @@ export const EVENT_MODE_ENTER = 'lhg-mode-enter';
 // MODES
 export const MODE_MASS_GENERATION = 'mass-gen';
 export const MODE_PAN_VIEW = 'pan-view';
+export const MODE_OBJECT_SELECT = 'select';
 
 // OPTIONS
 export const PAUSE_DURING_CREATION = true;

display.js

@@ -106,18 +106,7 @@ export class Display {
       let dash = false;
       const skip = 1;
       let skipped = 0;
-      {
+      for (let i = obj.history.length - 1; i >= 0; i--) {
-        const [{position}] = obj.history;
-        const x = position.x;
-        const y = position.y;
-
-        if (Math.abs(x - cx) <= W / 2 &&
-            Math.abs(y - cy) <= H / 2) {
-          ctx.moveTo(x, y);
-          dash = true;
-        }
-      }
-      for (let i = 1; i < obj.history.length; i++) {
         if (++skipped < skip) continue;
         skipped = 0;
         const {position} = obj.history[i];

tool/modes.js

@@ -3,6 +3,7 @@ import { Tool } from '../tool.js';
 import {
   MODE_MASS_GENERATION,
   MODE_PAN_VIEW,
+  MODE_OBJECT_SELECT,
   EVENT_MODE_LEAVE,
   EVENT_MODE_ENTER,
 } from '../config.js';
@@ -12,6 +13,7 @@ export class ModeSwitch extends Tool {
   modes = [
     [MODE_MASS_GENERATION, 'Generate Mass'],
     [MODE_PAN_VIEW, 'Pan View'],
+    [MODE_OBJECT_SELECT, 'Select'],
   ];
   buttons = [];
 
@@ -19,16 +21,9 @@ export class ModeSwitch extends Tool {
     super(toolbar);
 
     const modesDiv = document.createElement('div');
-    const titleDiv = document.createElement('div');
 
-    this.div.appendChild(titleDiv);
     this.div.appendChild(modesDiv);
 
-    titleDiv.innerHTML = `<h2>Modes</h2>`;
-
-    // Since we have a heading, we need to reduce top padding
-    this.div.style.paddingTop = '0px';
-
     modesDiv.style.display = 'flex';
     modesDiv.style.flexDirection = 'column';
 

tool/options.js

@@ -19,11 +19,11 @@ export class Options extends Tool {
     items: [
       { type: 'boolean', name: 'velocity', title: 'Velocity', default: DISPLAY_VELOCITY_VECTORS },
       { type: 'boolean', name: 'acceleration', title: 'Acceleration', default: DISPLAY_ACCELERATION_VECTORS },
-      { type: 'boolean', name: 'traces', title: 'Trace Path', default: DISPLAY_ACCELERATION_VECTORS },
+      { type: 'boolean', name: 'traces', title: 'Path Traces', default: DISPLAY_ACCELERATION_VECTORS , wide: true},
   ]}, {
-    type: 'group', name: 'collision', title: 'Collisions',
+    type: 'group', name: 'collision', title: 'Collision',
     items: [
-      { type: 'boolean', name: 'merge', title: 'Merge', default: MERGE_ON_COLLIDE },
+      { type: 'boolean', name: 'merge', title: 'Merge Masses', default: MERGE_ON_COLLIDE, wide: true},
     ]},
   ];
 
@@ -46,6 +46,9 @@ export class Options extends Tool {
       case 'boolean': {
         const button = document.createElement('button');
         button.innerHTML = `<h4>${item.title}</h4>`;
+        if (item.wide === true) {
+          button.classList.add('wide');
+        }
         this.setOption(path, item.default);
         button.style.opacity = this.values[path] ? '100%' : '50%';
         button.addEventListener('click', () => {

tool/zoom.js

@@ -46,7 +46,7 @@ export class Zoom extends Tool {
       const widthRatio = Math.abs(box.start.x - box.end.x) / this.sim.display.width;
       const heightRatio = Math.abs(box.start.y - box.end.y) / this.sim.display.height;
       const biggerRatio = Math.max(widthRatio, heightRatio);
-      const base2factor = Math.log(1/biggerRatio) / Math.log(2) - 0.5;
+      const base2factor = Math.log(1/biggerRatio) / Math.log(2) - 1;
       const factor = Math.floor(base2factor);
       // Determine average momentum and set panning velocity to match
       const netMomentum = {x: 0, y: 0};