toolbar header clickable

config.js

@@ -48,6 +48,7 @@ export const GRAVITATIONAL_CONSTANT = 1E5;
 export const TOOL_CLASSNAME = 'lhg-tool';
 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';
 
 // EVENT NAMES

pointer.js

@@ -4,6 +4,7 @@ import {
   MODE_OBJECT_SELECT,
   MODE_PAN_VIEW,
   POINTER_HISTORY_SIZE,
+  TOOL_CLASSNAME,
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
 } from './config.js';
@@ -32,7 +33,10 @@ export class Pointer {
 
     el.addEventListener('pointerdown', e => {
       let target = e.target;
-      if (target.nodeName.toLowerCase() === 'button') {
+      while (target && !target.classList?.contains(TOOL_CLASSNAME)) {
+        target = target.parentNode;
+      }
+      if (target) {
         return;
       }
 
@@ -55,12 +59,13 @@ export class Pointer {
     });
   }
 
-  getPointerVelocity() {
+  getPointerVelocity(points) {
     // Average over pointer history
     if (this.pointerHistory.length < 2) {
       return {x: 0, y: 0, dt: 1};
     }
-    const start = this.pointerHistory[0];
+    points = points || 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;
     return {
@@ -70,21 +75,6 @@ export class Pointer {
     };
   }
 
-  getPointerAcceleration() {
-    // Average over pointer history
-    if (this.pointerHistory.length < 2) {
-      return {x: 0, y: 0, dt: 1};
-    }
-    const start = this.pointerHistory[0];
-    const end = this.pointerHistory[this.pointerHistory.length - 1];
-    const dt = (end.t - start.t) / 1000;
-    return {
-      x: (end.v.x - start.v.x) / dt,
-      y: (end.v.y - start.v.y) / dt,
-      dt
-    };
-  }
-
   clearPointerHistory(keep = 0) {
     this.pointerHistory.splice(0, this.pointerHistory.length - keep)
   }
@@ -95,7 +85,6 @@ export class Pointer {
       this.pointerHistory.shift();
     }
     const v = this.getPointerVelocity();
-    // const a = this.getPointerAcceleration();
     this.pointerHistory.push({t, x, y, v});
   }
 
@@ -133,7 +122,7 @@ export class Pointer {
         if (!dt) {
           this.panning = undefined;
         } else {
-          const { v } = this.pointerHistory[this.pointerHistory.length - 1];
+          const v = this.getPointerVelocity(10);
           // Convert pointer velocity to simulation scale
           v.x /= this.sim.display.scale;
           v.y /= this.sim.display.scale;

style.css

@@ -62,8 +62,6 @@ div.lhg-tool button {
   padding-left: 0EM;
   padding-right: 0EM;
   text-align: center;
-  /* margin-top: 0.125EM;
-  margin-bottom: 0.125EM; */
   margin-left: 0;
   margin-right: 0;
 }
@@ -76,6 +74,13 @@ div.lhg-tool button:active {
   background-color: #252;
 }
 
+div.lhg-toolbar-header:hover button {
+  background-color: #444;
+}
+div.lhg-toolbar-header:active button {
+  background-color: #252;
+}
+
 div.lhg-tool button.lhg-tool-info {
   background-color: #111;
   border-color: #282;

tool/header.js

@@ -1,3 +1,4 @@
+import {TOOLBAR_HEADER_CLASSNAME} from '../config.js';
 import { Tool } from '../tool.js';
 
 export class Header extends Tool {
@@ -11,7 +12,7 @@ export class Header extends Tool {
 
     this.toggleButton = document.createElement('button');
     this.updateButton();
-    this.toggleButton.addEventListener('click', () => this.toggle());
+    this.div.addEventListener('click', () => this.toggle());
 
     this.div.appendChild(this.title);
     this.div.appendChild(this.toggleButton);
@@ -20,6 +21,8 @@ export class Header extends Tool {
     this.toggleButton.style.width = '3EM';
     this.div.style.display = 'flex';
     this.div.style.justifyContent = 'space-around';
+
+    this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
   }
 
   updateButton() {