config.js

@@ -44,8 +44,6 @@ export const GRAVITATIONAL_CONSTANT = 1E5;
 
 // CSS CLASS NAMES
 export const DRAGGABLE_ELEMENT_CLASSNAME = 'lhg-draggable-element';
-export const TOOL_CLASSNAME = 'lhg-tool';
-export const TOOLBAR_CLASSNAME = 'lhg-toolbar';
 
 // EVENT NAMES
 export const EVENT_MODE_LEAVE = 'lhg-mode-leave';
@@ -54,7 +52,6 @@ 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,7 +106,18 @@ 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];

index.html

@@ -15,7 +15,7 @@ body {
 }
 
 div[id=simulator] {
-  position: absolute;
+  position: float;
   top: 0;
   left: 0;
   width: 100%;
@@ -23,39 +23,16 @@ div[id=simulator] {
 
 button {
   width: 8em;
-  border-radius: 0.5EM;
-  border-color: #000;
-  border-width: 2px;
-  /* margin-left: 0.5em; */
-  /* margin-right: 0.5em; */
-  /* padding-top: 0; */
-  /* padding-bottom: 0; */
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 button.wide {
   width: 16em;
 }
 
-div.lhg-tool {
-  position: relative;
-  top: 0;
-  left: 0;
-  width: 14EM;
-
-  /* border: 1px #0fb solid; */
-  /* margin: 1EM; */
-  padding: 1EM;
-}
-
-div.lhg-toolbar {
-  position: fixed;
-  z-index: 2;
-  width: fit-content;
-  /* border: 2px #00f dashed; */
-  /* margin: '1EM'; */ 
-  /* padding: '1EM'; */
-}
-
 </style>
   <script type="module">
     import { Sim } from './simulator.js';

simulator.js

@@ -26,8 +26,6 @@ export class Sim {
   overlay = undefined;
   pointer = undefined;
   objects = undefined;
-  toolbar = undefined;
-  toolbar2 = undefined;
 
   isCurrentMode = () => false;
   getOption = () => undefined;
@@ -46,10 +44,7 @@ export class Sim {
     this.toolbar.addTool(new Zoom(this.toolbar));
     this.toolbar.addTool(new PlayPause(this.toolbar));
     this.toolbar.addTool(new ModeSwitch(this.toolbar));
-
-    // Set up second toolbar
-    this.toolbar2 = new Toolbar(this).topRight();
-    this.toolbar2.addTool(new Options(this.toolbar));
+    this.toolbar.addTool(new Options(this.toolbar));
 
     this.pointer = new Pointer(this);
 

tool.js

@@ -2,10 +2,7 @@
 // can call back to toolbar for whatever...
 // through toolbar can access sim
 
-import {
-  DRAGGABLE_ELEMENT_CLASSNAME,
-  TOOL_CLASSNAME,
-} from './config.js';
+import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';
 
 export class Tool {
   toolbar = undefined;
@@ -16,7 +13,12 @@ export class Tool {
     this.sim = this.toolbar.sim;
     const div = document.createElement('div');
     this.div = div;
-    div.classList.add(TOOL_CLASSNAME)
+    div.style.position = 'relative';
+    div.style.top = 0;
+    div.style.left = 0;
+    div.style.border = '1px #0fb solid';
+    div.style.margin = '25px';
+    div.style.padding = '25px';
     div.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
   }
 

tool/modes.js

@@ -3,7 +3,6 @@ import { Tool } from '../tool.js';
 import {
   MODE_MASS_GENERATION,
   MODE_PAN_VIEW,
-  MODE_OBJECT_SELECT,
   EVENT_MODE_LEAVE,
   EVENT_MODE_ENTER,
 } from '../config.js';
@@ -13,7 +12,6 @@ export class ModeSwitch extends Tool {
   modes = [
     [MODE_MASS_GENERATION, 'Generate Mass'],
     [MODE_PAN_VIEW, 'Pan View'],
-    [MODE_OBJECT_SELECT, 'Select'],
   ];
   buttons = [];
 
@@ -21,9 +19,16 @@ 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

@@ -10,7 +10,7 @@ import {
 
 export class Options extends Tool {
   options = [{
-    type: 'group', name: 'pauseDuring', title: 'Pause During Mass',
+    type: 'group', name: 'pauseDuring', title: 'Pause During',
     items: [
       { type: 'boolean', name: 'creation', title: 'Creation', default: PAUSE_DURING_CREATION },
       { type: 'boolean', name: 'selection', title: 'Selection', default: PAUSE_DURING_SELECTION },
@@ -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: 'Path Traces', default: DISPLAY_ACCELERATION_VECTORS , wide: true},
+      { type: 'boolean', name: 'traces', title: 'Trace Path', default: DISPLAY_ACCELERATION_VECTORS },
   ]}, {
-    type: 'group', name: 'collision', title: 'Collision',
+    type: 'group', name: 'collision', title: 'Collisions',
     items: [
-      { type: 'boolean', name: 'merge', title: 'Merge Masses', default: MERGE_ON_COLLIDE, wide: true},
+      { type: 'boolean', name: 'merge', title: 'Merge', default: MERGE_ON_COLLIDE },
     ]},
   ];
 
@@ -46,9 +46,6 @@ 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', () => {
@@ -67,6 +64,7 @@ export class Options extends Tool {
     const heading = document.createElement('h2');
     heading.innerHTML = 'Options';
     this.div.appendChild(heading);
+    this.div.style.paddingTop = '0px';
     for (const item of this.options) {
       const child = this.visitItem(item);
       this.div.appendChild(child);

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) - 1;
+      const base2factor = Math.log(1/biggerRatio) / Math.log(2) - 0.5;
       const factor = Math.floor(base2factor);
       // Determine average momentum and set panning velocity to match
       const netMomentum = {x: 0, y: 0};

toolbar.js

@@ -1,7 +1,3 @@
-import {
-  TOOLBAR_CLASSNAME,
-} from './config.js';
-
 export class Toolbar {
   sim = undefined;
   tools = [];
@@ -13,13 +9,11 @@ export class Toolbar {
     const div = document.createElement('div');
     this.div = div;
     this.sim.div.appendChild(div);
-    div.classList.add(TOOLBAR_CLASSNAME);
-  }
-
-  topRight() {
-    this.div.style.top = '0px';
-    this.div.style.right = '0px';
-    return this;
+    div.style.position = 'relative';
+    div.style.width = '20EM';
+    div.style.top = 0;
+    div.style.left = 0;
+    div.style.zIndex = 2;
   }
 
   // tool: instance of Tool