Fix options localStorage

Readme.md

@@ -8,12 +8,13 @@ Uses `npm` for `eslint`.
 Screenshots
 -----------
 
-![Simulation of a small body orbiting a pair of larger ones](./gravity-simulator-2.png "Gravity Simulator Screenshot 2")
+![A small body orbiting a pair of larger ones](./gravity-simulator-2.png "Gravity Simulator Screenshot 2")
+![A body orbiting a pair, all three of similar size](./gravity-simulator-3.png "Gravity Simulator Screenshot 3")
 
 TODO
 ----
 
-- [ ] Parameter Slider
+- [ ] Parameter Slider (Invisible, mouse/touch drag)
 - [ ] Selection Box
 - [ ] Object List
 - [ ] Object Detail
@@ -30,10 +31,10 @@ TODO
   - [ ] Undo "Clear Traces" Action
   - [ ] Undo "Reset
 - [ ] Time Control: Reverse Time
-- [ ] Save to LocalStorage
+- [x] Save to LocalStorage
 - [ ] Lossy Rescaling To Widen Zoom (Handling overflow/underflow)
 - [ ] Track farthest reaches, min/max in each dimension (x, y)
-  - [ ] Enabling Zoom to Fit Traces
 - [x] Compute Net Angular Momentum
 - [ ] Display Net Angular Momentum
-
+- [ ] Calculate Work as FxD as measure of energy flux
+  - [ ] Option to automatically slow time when energy flux is greater

config.js

@@ -1,11 +1,3 @@
-// DISPLAY
-export const DISPLAY_OBJECTS_INFO = false;
-export const DISPLAY_CURSOR_INFO = true;
-export const DISPLAY_CANVAS_SIZE = false;
-export const DISPLAY_CURRENT_SCALE = false;
-export const DISPLAY_CURRENT_MODE = false;
-export const DISPLAY_PANNING_INFO = true;
-
 // VELOCITY
 export const VELOCITY_VECTOR_SCALE = 8E0;
 export const VELOCITY_VECTOR_COLOR = 'rgba(150, 150, 150, 0.8)'; // optionally set to 'object color'
@@ -26,6 +18,7 @@ export const PATH_TRACES_DASHED_OPACITY = 1.0;
 
 // SIZES
 export const POINTER_HISTORY_SIZE = 20;
+export const FRAMERATE_SAMPLE_DURATION = 2.0; // Seconds
 export const POINTER_DOWN_HISTORY_SIZE = 5;
 export const ARROWHEAD_LENGTH = 7;
 export const ARROWHEAD_WIDTH = 5;
@@ -44,6 +37,7 @@ export const TOOL_INFO_CLASSNAME = 'lhg-tool-info';
 export const TOOLBAR_CLASSNAME = 'lhg-toolbar';
 export const TOOLBAR_HEADER_CLASSNAME = 'lhg-toolbar-header';
 export const WIDE_CLASSNAME = 'lhg-wide';
+export const TALL_CLASSNAME = 'lhg-tall';
 export const OVERLAY_INFO_BOX_CLASSNAME = 'lhg-overlay-info-box';
 
 // EVENT NAMES
@@ -56,3 +50,6 @@ export const EVENT_OPTION_SET = 'lhg-option-set';
 export const MODE_MASS_GENERATION = 'mass-gen';
 export const MODE_PAN_VIEW = 'pan-view';
 export const MODE_OBJECT_SELECT = 'select';
+
+// LOCAL STORAGE PREFIXES/SUFFIXES
+export const TOOLBAR_EXPANDED_SUFFIX = 'lhg-toolbar-expanded';

display.js

@@ -1,7 +1,6 @@
 import {
   ARROWHEAD_LENGTH,
   ARROWHEAD_WIDTH,
-  DISPLAY_CANVAS_SIZE,
 } from './config.js';
 
 export class Display {
@@ -60,9 +59,6 @@ export class Display {
   fullscreen() {
     this.canvas.width = document.documentElement.clientWidth;
     this.canvas.height = document.documentElement.clientHeight;
-    if (DISPLAY_CANVAS_SIZE) {
-      this.sim.info['Canvas'] = `${this.canvas.width} x ${this.canvas.height}`;
-    }
   }
 
   fillCanvas() { 
@@ -161,8 +157,9 @@ export class Display {
     } else if (this.sim.panning && !this.sim.panning.paused) {
       // Apply update to viewOrigin based on panning
       const { velocity } = this.sim.panning;
-      this.viewOrigin.x -= velocity.x * elapsedTime;
-      this.viewOrigin.y -= velocity.y * elapsedTime;
+      // TODO: something with time scale? Panning is too fast.
+      this.viewOrigin.x -= velocity.x * elapsedTime / 1000; // millisecond conversion?
+      this.viewOrigin.y -= velocity.y * elapsedTime / 1000;
     }
   }
 

objects.js

@@ -1,8 +1,5 @@
 import { MassObject } from './object.js';
-import { 
-  DISPLAY_OBJECTS_INFO,
-  ZOOM_TO_FIT_PADDING,
-} from './config.js';
+import { ZOOM_TO_FIT_PADDING } from './config.js';
 
 export class Objects {
   objects = [];
@@ -203,13 +200,20 @@ export class Objects {
     });
   }
 
+  // elapsedTime is given in milliseconds
   computeFrame(elapsedTime) {
+    // convert elapsed time to seconds
+    elapsedTime /= 1000;
     // If we're creating an object, increment its mass
     // with the mass creation rate accelerating over time
-    const massCreationRate = this.sim.getOption('param.massCreationRate');
+
+    // Scaling this parameter because of millisecond conversion
+    const massCreationRate = this.sim.getOption('param.massCreationRate') / 1000;
+
     if (this.creatingObject !== undefined) {
       const obj = this.objects[this.creatingObject];
       const rate = massCreationRate * obj.age;
+      console.log('obj.age', obj.age, 'mass creation rate', rate, 'elapsedTime', elapsedTime);
       // TODO: After objects merge during creation, mass creation rate can accelerate
       obj.mass += rate * elapsedTime;
     }
@@ -218,6 +222,8 @@ export class Objects {
     this.computeForces();
 
     if (this.sim.playing) {
+      // TODO: If creating/selected object, clamp its position to the cursor
+
       // Predict positions (Velocity verlet method)
       this.forEachObject(obj => {
         obj.currentAcceleration = {...obj.acceleration};
@@ -299,7 +305,7 @@ export class Objects {
     }
 
     // Display objects info
-    if (DISPLAY_OBJECTS_INFO) {
+    if (this.sim.getOption('debug.objectsInfo')) {
       this.forEachObject((obj, i) => {
         const speed = Math.pow(obj.velocity.x ** 2 + obj.velocity.y ** 2, 1/2);
         // Invert y so that the angle is counterclockwise from x-axis
@@ -309,8 +315,9 @@ export class Objects {
           `${obj.position.y.toPrecision(6)}, `, 
           `${obj.mass.toPrecision(6)} kg, `,
           `${speed.toPrecision(2)} m/s, ${direction.toPrecision(2)}°`, 
+          `Alive: ${obj.alive}`, 
         ];
-      });
+      }, { alive: null });
     }
   }
 
@@ -330,17 +337,25 @@ export class Objects {
         count: 0,
       });
 
-    if (!count) return;
-
-    const centerOfMass = {
+    const centerOfMass = count ? {
       x: totalMassLocation.x / totalMass,
       y: totalMassLocation.y / totalMass,
-    };
+    } : {x: 0, y: 0};
 
-    return { totalMass, count, totalMassLocation, centerOfMass };
+    // Determine average momentum
+    const netMomentum = this.sim.objects.reduce((acc, obj) => ({
+        x: acc.x + obj.mass * obj.velocity.x,
+        y: acc.y + obj.mass * obj.velocity.y,
+      }), { x: 0, y: 0 });
+
+    return { totalMass, count, totalMassLocation, centerOfMass, netMomentum };
   }
 
   computeSystemAngularMomentum(centerOfMass) {
+    if (!centerOfMass) {
+      const sys = this.computeSystemCenter();
+      centerOfMass = sys.centerOfMass;
+    }
     return this.reduce((acc, obj) => {
       // Angular momentum for each object is m * s / d
       // where d is the distance of the object from the global center of mass

options.js

@@ -2,47 +2,51 @@ import {
   EVENT_OPTION_SET,
 } from './config.js';
 
-export const optionsLayout = {
-  pauseDuring: {
-    creation: ['Pause While Creating', 'boolean', true],
-    selection: ['Pause While Selecting', 'boolean', true],
-  }, 
-  display: {
-    velocity: ['Velocity Vectors', 'boolean', true],
-    acceleration: ['Accel. Vectors', 'boolean', true],
-    traces: ['Path Traces', 'boolean', true],
-    dashedTraces: ['Dashed Traces', 'boolean', false],
-  },
-  collision: {
-    merge: ['Merge Masses<br>on Collision', 'boolean', true, {wide: true}],
-  },
-  param: {
-    gravity: ['Gravity', 'number', 4E4],
-    timeScale: ['Time Scale', 'number', 0.2],
-    massCreationRate: ['Mass Creation Rate', 'number', 10],
-  }
-};
-
 export class Options {
   sim = undefined;
+  options = undefined;
   values = {};
 
-  constructor(sim) {
+  getStorageKey(path) {
+    return `${path}:options`;
+  }
+
+  constructor(sim, options) {
     this.sim = sim;
+    this.options = options;
 
     // Global methods to get/set current option values
     this.sim.getOption = (path) => this.getOption(path);
     this.sim.setOption = (path, value) => this.setOption(path, value);
     this.sim.onOptionSet = (path, cb) => this.onOptionSet(path, cb);
+    
+    // Initialize values from localStorage
+    for (const groupName of Object.keys(options)) {
+      for (const [name, [, , defaultValue]] of Object.entries(this.options[groupName])) {
+        const path = [groupName, name].join('.');
+        let value = this.getOption(path)
+        if (value === undefined) {
+          value = defaultValue;
+          this.setOption(path, value);
+        }
+      }
+    }
   }
 
   getOption(path) {
-    const val = this.values[path];
-    return val;
+    let value = this.values[path];
+    if (value === undefined) {
+      value = localStorage.getItem(this.getStorageKey(path));
+      if (value === 'false') value = false;
+      else if (value === 'true') value = true;
+      this.values[path] = value;
+    }
+    return value;
   }
 
   setOption(path, value) {
     this.values[path] = value;
+    window.localStorage.setItem(this.getStorageKey(path), value);
     const e = new CustomEvent(EVENT_OPTION_SET, {detail: {path, value}});
     this.sim.div.dispatchEvent(e);
   }
@@ -56,8 +60,8 @@ export class Options {
     });
   }
 
-  static getSection(layout, sectionName) {
-    const section = layout[sectionName];
+  getSection(sectionName) {
+    const section = this.options[sectionName];
     const group = {
       type: 'group', 
       name: sectionName, 

pointer.js

@@ -1,5 +1,4 @@
 import {
-  DISPLAY_CURSOR_INFO,
   MODE_MASS_GENERATION,
   MODE_OBJECT_SELECT,
   MODE_PAN_VIEW,
@@ -25,7 +24,7 @@ export class Pointer {
     const el = window;
 
     el.addEventListener('pointermove', e => {
-      if (DISPLAY_CURSOR_INFO) {
+      if (this.sim.getOption('debug.cursorInfo')) {
         this.sim.info['pointermove'] = [`${e.clientX.toPrecision(6)}, `, `${e.clientY.toPrecision(6)}`];
       }
       this.handlePointerMove({x: e.clientX, y: e.clientY});
@@ -67,7 +66,7 @@ export class Pointer {
     points = Math.min(points, POINTER_HISTORY_SIZE, this.pointerHistory.length);
     const start = this.pointerHistory[this.pointerHistory.length - points];
     const end = this.pointerHistory[this.pointerHistory.length - 1];
-    const dt = (end.t - start.t) / 1000;
+    const dt = (end.t - start.t);
     return {
       x: (end.x - start.x) / dt,
       y: (end.y - start.y) / dt,
@@ -146,14 +145,13 @@ 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.latestPointerVelocity;
-    // Convert pointer velocity to simulation scale
-    v.x /= this.sim.display.scale;
-    v.y /= this.sim.display.scale;
 
     if (this.sim.isCurrentMode(MODE_MASS_GENERATION)) {
+      // Convert pointer velocity to simulation scale
+      const vx = this.latestPointerVelocity.x / this.sim.display.scale;
+      const vy = this.latestPointerVelocity.y / this.sim.display.scale;
       const {x, y} = this.sim.screenToSim(clientX, clientY);
-      this.sim.objects.handlePointerMove({x, y, vx: v.x, vy: v.y});
+      this.sim.objects.handlePointerMove({x, y, vx, vy});
 
     } else if (this.sim.isCurrentMode(MODE_PAN_VIEW)) {
       if (this.panTouchStart) {
@@ -161,7 +159,7 @@ export class Pointer {
         this.panTouchLatest = {
           x: clientX,
           y: clientY,
-          t: document.timeline.currentTime,
+          t: this.sim.rawTime,
         };
       }
     }

simulator.js

@@ -1,8 +1,6 @@
 import {
-  DISPLAY_CURRENT_MODE,
-  DISPLAY_CURRENT_SCALE,
-  DISPLAY_PANNING_INFO,
   EVENT_ZOOM,
+  FRAMERATE_SAMPLE_DURATION,
   SCALE_POWER_MAX,
   SCALE_POWER_MIN,
 } from './config.js';
@@ -15,15 +13,46 @@ import { ModeSwitch } from './tool/modes.js';
 import { OptionsTool } from './tool/options.js';
 import { PlayPause } from './tool/play-pause.js';
 import { Zoom } from './tool/zoom.js';
+import { UtilityTool } from './tool/utility.js';
 import { Toolbar } from './toolbar.js';
 import { ToolbarGroup } from './toolbar-group.js';
 
+const simOptions = {
+  pauseDuring: {
+    creation: ['Pause While Creating', 'boolean', true],
+    selection: ['Pause While Selecting', 'boolean', true],
+  }, 
+  display: {
+    velocity: ['Velocity Vectors', 'boolean', true],
+    acceleration: ['Accel. Vectors', 'boolean', true],
+    traces: ['Path Traces', 'boolean', true],
+    dashedTraces: ['Dashed Traces', 'boolean', false],
+  },
+  collision: {
+    merge: ['Merge Masses<br>on Collision', 'boolean', true, {wide: true}],
+  },
+  param: {
+    gravity: ['Gravity', 'number', 4E4],
+    timeScale: ['Time Scale', 'number', 0.2],
+    massCreationRate: ['Mass Creation Rate', 'number', 10],
+  },
+  debug: {
+    objectsInfo: ['Objects Info', 'boolean', false],
+    cursorInfo: ['Cursor Info', 'boolean', false],
+    frameRate: ['Frame Rate', 'boolean', false, {wide: true}],
+    currentMode: ['Current Mode', 'boolean', false],
+    panningInfo: ['Panning Info', 'boolean', false],
+  },
+};
+
 export class Sim {
   info = {};
   rawTime = undefined;
   time = undefined;
   nextZoom = undefined;
   playing = true;
+  recentFrames = [];
+  frameRate = 0;
 
   objects = undefined;
   display = undefined;
@@ -40,47 +69,78 @@ export class Sim {
   onModeEnter = () => undefined;
   onModeLeave = () => undefined;
 
+  markFrame(t) {
+    const { recentFrames: rfs } = this;
+    rfs.push(t);
+    if (rfs.length < 2) return;
+    const oldest = rfs[0];
+    const newest = rfs[rfs.length - 1];
+    const count = rfs.length;
+    const duration = (newest - oldest) / 1000; // ms to s
+    this.frameRate = count / duration;
+    if (duration >= FRAMERATE_SAMPLE_DURATION) {
+      rfs.shift();
+    }
+  }
+
   constructor(divId) {
     this.divId = divId;
     const div = document.getElementById(this.divId);
     this.div = div;
 
-    this.options = new Options(this);
+    this.options = new Options(this, simOptions);
     this.display = new Display(this);
     this.objects = new Objects(this);
-    this.toolbarGroups = {
-      left: new ToolbarGroup(this),
-      right: new ToolbarGroup(this).topRight(),
-    };
     this.toolbars = {
-      tools: new Toolbar(this, 'Tools', this.toolbarGroups.left),
-      modes: new Toolbar(this, 'Modes', this.toolbarGroups.left),
-      options: new Toolbar(this, 'Options', this.toolbarGroups.right),
-      params: new Toolbar(this, 'Parameters', this.toolbarGroups.right),
-    }
+      tools: new Toolbar(this, 'Tools'),
+      modes: new Toolbar(this, 'Modes'),
+      utils: new Toolbar(this, 'Utility', { expanded: false }),
+      options: new Toolbar(this, 'Options'),
+      params: new Toolbar(this, 'Parameters'),
+      debug: new Toolbar(this, 'Debug', { expanded: false }),
+    };
+    const { tools, modes, options, params, debug, utils } = this.toolbars;
+    this.toolbarGroups = {
+      left: new ToolbarGroup(this)
+        .addToolbar(tools)
+        .addToolbar(modes)
+        .addToolbar(utils),
+      right: new ToolbarGroup(this).topRight()
+        .addToolbar(options)
+        .addToolbar(params)
+        .addToolbar(debug),
+    };
     this.overlay = new Overlay(this);
     this.pointer = new Pointer(this);
 
-    {
-      // 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'
-      ]));
+    // Configure toolbars
+
+    // Primary
+    tools.addTool(new Zoom(tools));
+    tools.addTool(new PlayPause(tools));
+
+    // Secondary
+    modes.addTool(new ModeSwitch(modes));
+
+    // Utility
+    utils.addTool(new UtilityTool(utils));
+
+    // Options
+    options.addTool(new OptionsTool(options, ['pauseDuring', 'display', 'collision']));
+
+    // Parameters
+    params.addTool(new OptionsTool(params, ['param']));
+
+    // Debug
+    debug.addTool(new OptionsTool(debug, ['debug']));
+
+    for (const id in this.toolbars) {
+      const toolbar = this.toolbars[id];
+      toolbar.applyExpanded();
     }
 
     // Initiate main loop
-    this.rawTime = document.timeline.currentTime / 1000;
+    this.rawTime = document.timeline.currentTime;
     this.time = 0;
     requestAnimationFrame(t => this.loop(t));
   }
@@ -148,41 +208,47 @@ export class Sim {
 
   // Main loop
   loop(currentTime) {
-    currentTime /= 1000;
+    this.markFrame(currentTime);
     const timeScale = this.getOption('param.timeScale');
-    const elapsedTime = (currentTime - this.rawTime) * timeScale;
+
+    // elapsedTime in milliseconds
+    // rawTime in milliseconds
+    const elapsedTime = (currentTime - this.rawTime) / timeScale;
     this.rawTime = currentTime;
+
     if (this.playing) {
       this.time += elapsedTime;
     }
 
-    if (DISPLAY_CURRENT_MODE) {
+    if (this.getOption('debug.currentMode')) {
       this.info['Mode'] = this.getCurrentMode();
     }
 
+    if (this.getOption('debug.frameRate')) {
+      this.info['Frame Rate'] = this.frameRate?.toPrecision(3);
+    }
+
     if (this.nextZoom) {
       this.zoom(this.nextZoom);
       this.nextZoom = undefined;
     }
 
-    if (DISPLAY_CURRENT_SCALE) {
-      this.info['Scale'] = this.getScaleDisplay();
-    }
-
-    if (DISPLAY_PANNING_INFO) {
+    if (this.getOption('debug.panningInfo')) {
       const {x, y} = this.panning?.velocity ?? {};
-      this.info['Panning'] = [`${x?.toPrecision(6)}, `, y?.toPrecision(6)];
+      this.info['Panning Velocity'] = [`${x?.toPrecision(6)}, `, y?.toPrecision(6)];
+      const { centerOfMass } = this.objects.computeSystemCenter();
+      this.info['Center of Mass'] = [`${centerOfMass.x.toPrecision(6)}, `, centerOfMass.y.toPrecision(6)];
+      this.info['Net Angular Momentum'] = this.objects.computeSystemAngularMomentum().toPrecision(6);
     }
 
-    this.display.computePanning(elapsedTime);
     this.objects.computeFrame(elapsedTime);
     this.overlay.renderInfo();
+    // this.display.computePanning(elapsedTime);
     this.display.fillCanvas();
     this.display.drawObjects();
     for (const group in this.toolbarGroups) {
       this.toolbarGroups[group].frame();
     }
-
     requestAnimationFrame(t => this.loop(t));
   }
 }

style.css

@@ -33,8 +33,8 @@ div.lhg-toolbar {
   width: fit-content;
   margin: 0.5em;
   border-radius: 0.5em;
-  border-width: 1px;
-  border-color: #282;
+  border-width: 2px;
+  border-color: #151;
   border-style: solid;
 }
 
@@ -44,7 +44,7 @@ div.lhg-tool {
   left: 0;
   width: 12em;
   /* padding: 0.5em; */
-  margin: 0.5em;
+  /* margin: 0.5em; */
   text-align: middle;
 }
 
@@ -107,6 +107,11 @@ div.lhg-tool .lhg-wide {
   width: 12em;
 }
 
+div.lhg-tool .lhg-tall {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
 div.lhg-overlay-info-box {
   position: absolute;
   top: 0px;

tool.js

@@ -1,18 +1,18 @@
 // Idea here is, tool can declare its parameters;
-// can call back to toolbar for whatever...
-// through toolbar can access sim
+// can call back to container for whatever...
+// through container can access sim
 
 import {
   TOOL_CLASSNAME,
 } from './config.js';
 
 export class Tool {
-  toolbar = undefined;
+  container = undefined;
   sim = undefined;
 
-  constructor(toolbar) {
-    this.toolbar = toolbar;
-    this.sim = this.toolbar.sim;
+  constructor(container) {
+    this.container = container;
+    this.sim = this.container.sim;
     const div = document.createElement('div');
     this.div = div;
     div.classList.add(TOOL_CLASSNAME)

tool/header.js

@@ -2,10 +2,9 @@ import {TOOLBAR_HEADER_CLASSNAME} from '../config.js';
 import { Tool } from '../tool.js';
 
 export class Header extends Tool {
-  expanded = true;
 
-  constructor(toolbar, title = 'Tools') {
-    super(toolbar);
+  constructor(container, title = 'Tools') {
+    super(container);
     this.title = document.createElement('h1');
     this.title.innerHTML = title;
 
@@ -24,27 +23,12 @@ export class Header extends Tool {
   }
 
   updateButton() {
-    this.toggleButton.innerHTML = this.expanded ? '˄' : '˅';
+    this.toggleButton.innerHTML = this.container.expanded ? '˅' : '˄';
   }
 
   toggle() {
-    this.expanded = !this.expanded;
+    this.container.expanded = !this.container.expanded;
+    this.container.applyExpanded();
     this.updateButton();
-    this.apply();
-  }
-
-  apply() {
-    for (const tool of this.toolbar.tools) {
-      if (tool === this) continue;
-      if (this.expanded) {
-        if (!this.toolbar.div.contains(tool.div)) {
-          this.toolbar.div.appendChild(tool.div);
-        }
-      } else {
-        if (this.toolbar.div.contains(tool.div)) {
-          this.toolbar.div.removeChild(tool.div);
-        }
-      }
-    }
   }
 }

tool/modes.js

@@ -18,8 +18,8 @@ export class ModeSwitch extends Tool {
   ];
   buttons = [];
 
-  constructor(toolbar) {
-    super(toolbar);
+  constructor(container) {
+    super(container);
 
     const modesDiv = document.createElement('div');
     const heading = document.createElement('h2');

tool/options.js

@@ -4,7 +4,6 @@ import {
   WIDE_CLASSNAME,
 } from '../config.js';
 import { Tool } from '../tool.js';
-import { Options, optionsLayout } from '../options.js';
 
 export class OptionsTool extends Tool {
   visitItem(item, path) {
@@ -29,14 +28,20 @@ export class OptionsTool extends Tool {
         if (item.wide === true) {
           button.classList.add(WIDE_CLASSNAME);
         }
-        this.sim.setOption(path, item.default);
-        button.style.opacity = this.sim.getOption(path) ? '100%' : '50%';
-        button.addEventListener('click', () => {
-          this.sim.setOption(path, !this.sim.getOption(path));
-          button.style.opacity = this.sim.getOption(path) ? '100%' : '50%';
-        });
+        const value = this.sim.getOption(path);
+        if (value === undefined) {
+          this.sim.setOption(path, item.default);
+        }
+        button.style.opacity = value ? '100%' : '50%';
         this.sim.onOptionSet(path, value => {
+          console.log('option set cb', path, value);
           button.style.opacity = value ? '100%' : '50%';
+          console.log('button opacity', button.style.opacity);
+        });
+        button.addEventListener('click', () => {
+          const value = this.sim.options.getOption(path, true);
+          console.log('click, option value', value);
+          this.sim.setOption(path, !value);
         });
         return button;
       }
@@ -77,12 +82,12 @@ export class OptionsTool extends Tool {
     }
   }
 
-  constructor(toolbar, sections) {
-    super(toolbar);
+  constructor(container, sections) {
+    super(container);
 
     for (const sectionName of sections) {
-      const item = Options.getSection(optionsLayout, sectionName);
-      const child = this.visitItem(item);
+      const option = this.sim.options.getSection(sectionName);
+      const child = this.visitItem(option);
       this.div.appendChild(child);
     }
   }

tool/play-pause.js

@@ -1,75 +1,36 @@
-import {TOOL_INFO_CLASSNAME, WIDE_CLASSNAME} from '../config.js';
+import {
+  TALL_CLASSNAME
+} from '../config.js';
 import {Tool} from '../tool.js';
 
 export class PlayPause extends Tool {
   playHTML = 'Play';
   pauseHTML = 'Pause';
-  clearTracesText = 'Clear Traces';
-  currentTimeEl = undefined;
   pauseButton = undefined;
   playButton = undefined;
-  clearTracesEl = undefined;
-
-  get timeText() {
-    let time = this.sim.time;
-    // Time in seconds
-    const s = time % 60;
-    time = (time - s) / 60;
-    const m = time % 60;
-    time = (time - m) / 60;
-    const h = time % 24;
-    time = (time - h) / 24;
-    const d = time;
-    time -= m * 60;
-
-    const ms = (s - Math.floor(s)) * 1000;
-    return [
-      d || undefined,
-      h.toString().padStart(2, '0'),
-      m.toString().padStart(2, '0'),
-      [
-        s.toFixed(0).padStart(2, '0'),
-        ms.toFixed(0).padStart(3, '0'),
-      ].join('.')
-    ].filter(x => x !== undefined).join(':');
-  }
-
-  frame() {
-    if (this.currentTimeEl) {
-      this.currentTimeEl.innerHTML = this.timeText;
-    }
-  }
 
   updateButtons() {
     this.pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
     this.playButton.style.opacity = this.sim.playing ? '50%' : '100%';
   }
 
-  constructor(toolbar) {
-    super(toolbar);
+  constructor(container) {
+    super(container);
 
-    const currentTime = document.createElement('button');
     const pauseButton = document.createElement('button');
     const playButton = document.createElement('button');
-    const clearTraces = document.createElement('button');
+
     this.pauseButton = pauseButton;
     this.playButton = playButton;
-    this.clearTracesEl = clearTraces;
-    this.currentTimeEl = currentTime;
 
-    this.div.appendChild(currentTime);
     this.div.appendChild(pauseButton);
     this.div.appendChild(playButton);
-    this.div.appendChild(clearTraces);
-
-    currentTime.classList.add(TOOL_INFO_CLASSNAME);
-    currentTime.classList.add(WIDE_CLASSNAME);
-    clearTraces.classList.add(WIDE_CLASSNAME);
 
     pauseButton.innerHTML = this.pauseHTML;
     playButton.innerHTML = this.playHTML;
-    currentTime.innerHTML = this.timeText;
-    clearTraces.innerHTML = this.clearTracesText;
+
+    playButton.classList.add(TALL_CLASSNAME);
+    pauseButton.classList.add(TALL_CLASSNAME);
 
     this.updateButtons();
 
@@ -87,12 +48,5 @@ export class PlayPause extends Tool {
         this.updateButtons();
       }
     });
-
-    clearTraces.addEventListener('click', () => {
-      // Obliterate object histories
-      this.sim.objects.forEachObject(obj => {
-        obj.history = [];
-      }, {alive: null});
-    });
   }
 }

tool/utility.js

@@ -0,0 +1,141 @@
+import {Tool} from '../tool.js';
+import { 
+  TOOL_INFO_CLASSNAME,
+  WIDE_CLASSNAME,
+} from '../config.js';
+
+export class UtilityTool extends Tool {
+  currentTimeEl = undefined;
+
+  get displayScaleText() {
+    return `Scale: ${this.sim.getScaleDisplay()}`;
+  }
+
+  get timeText() {
+    let time = this.sim.time;
+    // Time in milliseconds
+    const ms = Math.floor(time % 1000);
+    time = (time - ms) / 1000;
+    const s = Math.floor(time % 60);
+    time = (time - s) / 60;
+    const m = Math.floor(time % 60);
+    time = (time - m) / 60;
+    const h = Math.floor(time % 24);
+    time = (time - h) / 24;
+    const d = Math.floor(time);
+    return [
+      d || undefined,
+      h.toString().padStart(2, '0'),
+      m.toString().padStart(2, '0'),
+      [
+        s.toString().padStart(2, '0'),
+        ms.toString().padStart(3, '0'),
+      ].join('.')
+    ].filter(x => x !== undefined).join(':');
+  }
+
+  frame() {
+    if (this.currentTimeEl) {
+      this.currentTimeEl.innerHTML = this.timeText;
+    }
+  }
+
+  constructor(container) {
+    super(container);
+
+    const zeroVelocity = document.createElement('button');
+    const clearTraces = document.createElement('button');
+    const zoomAll = document.createElement('button');
+    const currentScale = document.createElement('button')
+    const currentTime = document.createElement('button');
+    const clearDebug = document.createElement('button');
+
+    this.currentTimeEl = currentTime;
+
+    this.div.appendChild(currentTime);
+    this.div.appendChild(currentScale);
+    this.div.appendChild(zoomAll);
+    this.div.appendChild(zeroVelocity);
+    this.div.appendChild(clearTraces);
+    this.div.appendChild(clearDebug);
+
+    zeroVelocity.classList.add(WIDE_CLASSNAME);
+    clearTraces.classList.add(WIDE_CLASSNAME);
+    zoomAll.classList.add(WIDE_CLASSNAME);
+    currentScale.classList.add(WIDE_CLASSNAME);
+    currentScale.classList.add(TOOL_INFO_CLASSNAME);
+    currentTime.classList.add(TOOL_INFO_CLASSNAME);
+    currentTime.classList.add(WIDE_CLASSNAME);
+    clearDebug.classList.add(WIDE_CLASSNAME);
+
+    zeroVelocity.innerHTML = 'Zero Momentum';
+    clearTraces.innerHTML = 'Clear Traces';
+    zoomAll.innerHTML = 'Zoom to Fit';
+    currentScale.innerHTML = this.displayScaleText;
+    currentTime.innerHTML = this.timeText;
+    clearDebug.innerHTML = 'Clear Debug';
+
+    this.sim.onZoom(() => {
+      currentScale.innerHTML = this.displayScaleText;
+    });
+
+    zeroVelocity.addEventListener('click', () => {
+      // Determine center of mass and average momentum
+      const { totalMass, netMomentum } = this.sim.objects.computeSystemCenter();
+      const netVelocity = {
+        x: netMomentum.x / totalMass,
+        y: netMomentum.y / totalMass,
+      };
+
+      // Apply offset to all object velocities
+      this.sim.objects.forEachObject(obj => {
+        obj.velocity.x -= netVelocity.x;
+        obj.velocity.y -= netVelocity.y;
+      });
+
+      // Cancel panning
+      this.sim.panning = undefined;
+    });
+
+    clearTraces.addEventListener('click', () => {
+      // Obliterate object histories
+      this.sim.objects.forEachObject(obj => {
+        obj.history = [];
+      }, {alive: null});
+    });
+
+    zoomAll.addEventListener('click', () => {
+      // Determine bounding box
+      const box = this.sim.objects.boundingBox;
+      const x = (box.start.x + box.end.x) / 2;
+      const y = (box.start.y + box.end.y) / 2;
+      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 factor = Math.floor(base2factor);
+      // Determine average momentum and set panning velocity to match
+      const netMomentum = {x: 0, y: 0};
+      let totalMass = 0;
+      let count = 0;
+      this.sim.objects.forEachObject(obj => {
+        count++;
+        netMomentum.x += obj.mass * obj.velocity.x;
+        netMomentum.y += obj.mass * obj.velocity.y;
+        totalMass += obj.mass;
+      });
+      if (!count) {
+        return;
+      }
+      const netVelocity = {
+        x: netMomentum.x / totalMass,
+        y: netMomentum.y / totalMass,
+      };
+      this.sim.scheduleZoom({x, y}, factor, netVelocity)
+    });
+
+    clearDebug.addEventListener('click', () => {
+      this.sim.info = {};
+    });
+  }
+}

tool/zoom.js

@@ -1,49 +1,21 @@
 import { Tool } from '../tool.js';
 import { 
-  TOOL_INFO_CLASSNAME,
-  WIDE_CLASSNAME,
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
 } from '../config.js';
 
 export class Zoom extends Tool {
-  get displayScale() {
-    return this.sim.getScaleDisplay();
-  }
+  constructor(container) {
+    super(container);
 
-  get displayScaleText() {
-    return `Scale: ${this.displayScale}`;
-  }
-
-  constructor(toolbar) {
-    super(toolbar);
-
-    const currentScale = document.createElement('button')
     const zoomOut = document.createElement('button');
     const zoomIn = document.createElement('button');
-    const zoomAll = document.createElement('button');
-    const zeroVelocity = document.createElement('button');
 
-    this.div.appendChild(currentScale);
     this.div.appendChild(zoomOut);
     this.div.appendChild(zoomIn);
-    this.div.appendChild(zoomAll);
-    this.div.appendChild(zeroVelocity);
-
-    zoomAll.classList.add(WIDE_CLASSNAME);
-    zeroVelocity.classList.add(WIDE_CLASSNAME);
-    currentScale.classList.add(WIDE_CLASSNAME);
-    currentScale.classList.add(TOOL_INFO_CLASSNAME);
 
     zoomOut.innerHTML = 'Zoom<br>Out';
     zoomIn.innerHTML = 'Zoom<br>In';
-    zoomAll.innerHTML = 'Zoom to Fit';
-    zeroVelocity.innerHTML = 'Zero Momentum';
-    currentScale.innerHTML = this.displayScaleText;
-
-    this.sim.onZoom(() => {
-      currentScale.innerHTML = this.displayScaleText;
-    });
 
     zoomOut.addEventListener('click', () => {
       // Aim at center of view
@@ -58,71 +30,5 @@ export class Zoom extends Tool {
       const y = this.sim.display.height * this.sim.display.scale / 2;
       this.sim.scheduleZoom(this.sim.screenToSim(x, y), ZOOM_IN_FACTOR);
     });
-
-    zoomAll.addEventListener('click', () => {
-      // Determine bounding box
-      const box = this.sim.objects.boundingBox;
-      const x = (box.start.x + box.end.x) / 2;
-      const y = (box.start.y + box.end.y) / 2;
-      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 factor = Math.floor(base2factor);
-      // Determine average momentum and set panning velocity to match
-      const netMomentum = {x: 0, y: 0};
-      let totalMass = 0;
-      let count = 0;
-      this.sim.objects.forEachObject(obj => {
-        count++;
-        netMomentum.x += obj.mass * obj.velocity.x;
-        netMomentum.y += obj.mass * obj.velocity.y;
-        totalMass += obj.mass;
-      });
-      if (!count) {
-        return;
-      }
-      const netVelocity = {
-        x: netMomentum.x / totalMass,
-        y: netMomentum.y / totalMass,
-      };
-      this.sim.scheduleZoom({x, y}, factor, netVelocity)
-    });
-
-    zeroVelocity.addEventListener('click', () => {
-      // TODO: Zero net angular momentum
-      // Determine center of mass
-      const { totalMass, centerOfMass } = 
-        this.sim.objects.computeSystemCenter();
-
-      // Determine total angular momentum
-      const netAngularMomentum = this.sim.objects
-        .computeSystemAngularMomentum(centerOfMass);
-      console.log('net angular momentum', netAngularMomentum);
-      const netAngularVelocity = netAngularMomentum / totalMass;
-      console.log('net angular velocity', netAngularVelocity);
-
-      // TODO: Camera rotation
-
-      // Determine average momentum
-      const netMomentum = this.sim.objects.reduce((acc, obj) => ({
-          x: acc.x + obj.mass * obj.velocity.x,
-          y: acc.y + obj.mass * obj.velocity.y,
-        }), { x: 0, y: 0 });
-
-      const netVelocity = {
-        x: netMomentum.x / totalMass,
-        y: netMomentum.y / totalMass,
-      };
-
-      // Apply offset to all object velocities
-      this.sim.objects.forEachObject(obj => {
-        obj.velocity.x -= netVelocity.x;
-        obj.velocity.y -= netVelocity.y;
-      });
-
-      // Cancel panning
-      this.sim.panning = undefined;
-    });
   }
 }

toolbar.js

@@ -1,28 +1,38 @@
 import {
   TOOLBAR_CLASSNAME,
+  TOOLBAR_EXPANDED_SUFFIX,
 } from './config.js';
 import {Header} from './tool/header.js';
 
 export class Toolbar {
   sim = undefined;
   tools = [];
+  expanded = undefined;
+  header = undefined;
+  title = undefined;
 
-  constructor(sim, title, group) {
+  // TODO: Index on something more durable than title
+  getExpandedKey() {
+    return [this.title, TOOLBAR_EXPANDED_SUFFIX].join(':');
+  }
+
+  constructor(sim, title) {
     this.sim = sim;
+    this.title = title;
+    this.expanded = window.localStorage.getItem(this.getExpandedKey()) === 'true';
 
     // Create ourselves a div, as child of sim's div
     const div = document.createElement('div');
     this.div = div;
-    if (group) {
-      group.addToolbar(this);
-    } else {
-      this.sim.div.appendChild(div);
-    }
     div.classList.add(TOOLBAR_CLASSNAME);
 
     // Create a collapse/expand tool
     const header = new Header(this, title);
+    this.header = header;
     this.addTool(header);
+
+    header.updateButton();
+    this.applyExpanded();
   }
 
   // tool: instance of Tool
@@ -37,4 +47,21 @@ export class Toolbar {
       tool.frame();
     }
   }
+
+  applyExpanded() {
+    window.localStorage.setItem(this.getExpandedKey(), this.expanded);
+    for (const tool of this.tools) {
+      if (tool === this.header) continue;
+
+      if (this.expanded) {
+        if (!this.div.contains(tool.div)) {
+          this.div.appendChild(tool.div);
+        }
+      } else {
+        if (this.div.contains(tool.div)) {
+          this.div.removeChild(tool.div);
+        }
+      }
+    }
+  }
 }