config.js

@@ -17,4 +17,3 @@ export const ZOOM_IN_FACTOR = 2;
 export const ZOOM_OUT_FACTOR = 0.5;
 export const SCALE_MAX = 256;
 export const SCALE_MIN = 1/256;
-export const DRAGGABLE_ELEMENT_CLASSNAME = 'lhg-draggable-element';

objects.js

@@ -60,24 +60,6 @@ export class Objects {
     }
   }
 
-
-  handlePointerDown({x, y}) {
-    // If pointer is touching an object, select the object
-    const touchingObject = this.objectAtLocation(x, y);
-   
-    if (touchingObject !== undefined) {
-      this.selectObject(touchingObject);
-    } else {
-      // Otherwise, create a new object
-      this.createObject(x, y);
-    }
-  }
-
-  handlePointerUp({x, y}) {
-    this.doneCreatingObject();
-    this.deselect();
-  }
-
   computeFrame(elapsedTime) {
     // If we're creating an object, increment its mass
     // with the mass creation rate accelerating over time

overlay.js

@@ -1,5 +1,3 @@
-import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';
-
 export class Overlay {
   sim = undefined;
   constructor(sim) {
@@ -14,7 +12,7 @@ export class Overlay {
     infoBox.style.left = 0;
     infoBox.width = 'fit-content';
     infoBox.style.zIndex = 1;
-    infoBox.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
+    infoBox.classList.add('draggable');
   }
 
   renderInfo() {
@@ -38,7 +36,7 @@ export class Overlay {
 
   // Update positions of draggable items
   updateDraggable() {
-    const elements = document.querySelectorAll(`.${DRAGGABLE_ELEMENT_CLASSNAME}`);
+    const elements = document.querySelectorAll('.draggable');
     for (let el of elements) {
       if (!el.dragging) continue; 
       const {

pointer.js

@@ -1,9 +1,8 @@
-import {
+import { 
   POINTER_HISTORY_SIZE,
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
   DISPLAY_CURSOR_INFO,
-  DRAGGABLE_ELEMENT_CLASSNAME,
 } from './config.js';
 
 function dispatchEvent(target, eventType, data) {
@@ -24,7 +23,7 @@ export class Pointer {
     const el = window;
 
     el.addEventListener('pointermove', e => {
-      this.sim.info['pointermove'] = [`${e.clientX}, `, `${e.clientY}`];
+      // const velocity = this.sim.pointer.getPointerVelocity();
       if (this.draggingElement) {
         // e.preventDefault();
         this.draggingElement.dragging.pointerEnd = {
@@ -36,14 +35,14 @@ export class Pointer {
         this.handlePointerMove({x, y});
       }
     });
-   
+    
     el.addEventListener('pointerdown', e => {
       // e.preventDefault();
       let target = e.target;
-      while (target && !target.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
+      while (target && !target.classList.contains('draggable')) {
         target = target.parentElement;
       }
-      if (target?.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
+      if (target?.classList.contains('draggable')) {
         // e.preventDefault();
         this.draggingElement = target;
         this.draggingElement.dragging = {
@@ -52,11 +51,11 @@ export class Pointer {
             y: parseInt(this.draggingElement.style.top),
           },
           pointerStart: {
-            x: e.clientX,
+            x: e.clientX, 
             y: e.clientY,
           },
           pointerEnd: {
-            x: e.clientX,
+            x: e.clientX, 
             y: e.clientY,
           },
         };
@@ -121,24 +120,32 @@ export class Pointer {
     this.clearPointerHistory();
     this.updatePointer({x, y});
 
-    this.sim.objects.handlePointerDown({x, y});
+    // If pointer is touching an object, select the object
+    const touchingObject = this.sim.objects.objectAtLocation(x, y);
+    
+    if (touchingObject !== undefined) {
+      this.sim.objects.selectObject(touchingObject);
+    } else {
+      // Otherwise, create a new object
+      this.sim.objects.createObject(x, y);
+    }
   }
 
   handlePointerUp({x, y}) {
-    // TODO: Conditional?
-    this.sim.objects.handlePointerUp({x, y});
+    this.sim.objects.doneCreatingObject();
+    this.sim.objects.deselect();
   }
 
   // Handle cursor (mouse or touch) movement
-  // TODO: If e.touches.length > 1, user may be engaging pinch to zoom
   handlePointerMove({x, y}) {
     this.updatePointer({x, y});
-    const {x: vx, y: vy} = this.getPointerVelocity();
+    // TODO: If e.touches.length > 1, user may be engaging pinch to zoom
 
     // If the cursor moves while creating an object, or while an object is selected,
     // update the position and velocity of the object
     const obj = this.sim.objects.getSelectedOrCreating();
     if (obj !== undefined) {
+      const {x: vx, y: vy} = this.getPointerVelocity();
       obj.position.x = x;
       obj.position.y = y;
       obj.velocity.x = vx;

simulator.js

@@ -67,6 +67,7 @@ export class Sim {
 
   // Main loop
   loop(currentTime) {
+    this.overlay.updateDraggable();
     const elapsedTime = currentTime - this.time;
     this.time = currentTime;
     if (this.nextZoom) {
@@ -77,7 +78,6 @@ export class Sim {
     this.objects.computeFrame(elapsedTime);
     this.display.fillCanvas();
     this.display.drawObjects();
-    this.overlay.updateDraggable();
     this.overlay.renderInfo();
     requestAnimationFrame(t => this.loop(t));
   }

tool.js

@@ -2,8 +2,6 @@
 // can call back to toolbar for whatever...
 // through toolbar can access sim
 
-import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';
-
 export class Tool {
   toolbar = undefined;
   sim = undefined;
@@ -19,7 +17,7 @@ export class Tool {
     div.style.border = '1px #0fb solid';
     div.style.margin = '5px';
     div.style.padding = '5px';
-    div.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
+    div.classList.add('draggable');
   }
 
   frame() {}