moved options to second toolbar

config.js

@@ -44,6 +44,8 @@ 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';

index.html

@@ -15,7 +15,7 @@ body {
 }
 
 div[id=simulator] {
-  position: float;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -23,16 +23,37 @@ div[id=simulator] {
 
 button {
   width: 8em;
-  padding-left: 0.5em;
+  border-radius: 0.5EM;
-  padding-right: 0.5em;
+  /* margin-left: 0.5em; */
-  padding-top: 0;
+  /* margin-right: 0.5em; */
-  padding-bottom: 0;
+  /* 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,6 +26,8 @@ export class Sim {
   overlay = undefined;
   pointer = undefined;
   objects = undefined;
+  toolbar = undefined;
+  toolbar2 = undefined;
 
   isCurrentMode = () => false;
   getOption = () => undefined;
@@ -44,7 +46,10 @@ export class Sim {
     this.toolbar.addTool(new Zoom(this.toolbar));
     this.toolbar.addTool(new PlayPause(this.toolbar));
     this.toolbar.addTool(new ModeSwitch(this.toolbar));
-    this.toolbar.addTool(new Options(this.toolbar));
+
+    // Set up second toolbar
+    this.toolbar2 = new Toolbar(this).topRight();
+    this.toolbar2.addTool(new Options(this.toolbar));
 
     this.pointer = new Pointer(this);
 

tool.js

@@ -2,7 +2,10 @@
 // can call back to toolbar for whatever...
 // through toolbar can access sim
 
-import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';
+import {
+  DRAGGABLE_ELEMENT_CLASSNAME,
+  TOOL_CLASSNAME,
+} from './config.js';
 
 export class Tool {
   toolbar = undefined;
@@ -13,12 +16,7 @@ export class Tool {
     this.sim = this.toolbar.sim;
     const div = document.createElement('div');
     this.div = div;
-    div.style.position = 'relative';
+    div.classList.add(TOOL_CLASSNAME)
-    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/options.js

@@ -10,7 +10,7 @@ import {
 
 export class Options extends Tool {
   options = [{
-    type: 'group', name: 'pauseDuring', title: 'Pause During',
+    type: 'group', name: 'pauseDuring', title: 'Pause During Mass',
     items: [
       { type: 'boolean', name: 'creation', title: 'Creation', default: PAUSE_DURING_CREATION },
       { type: 'boolean', name: 'selection', title: 'Selection', default: PAUSE_DURING_SELECTION },
@@ -67,7 +67,6 @@ 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);

toolbar.js

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