fixup draggable

config.js

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

pointer.js

@@ -3,6 +3,7 @@ import {
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
   DISPLAY_CURSOR_INFO,
+  DRAGGABLE_ELEMENT_CLASSNAME,
 } from './config.js';
 
 function dispatchEvent(target, eventType, data) {
@@ -23,7 +24,7 @@ export class Pointer {
     const el = window;
 
     el.addEventListener('pointermove', e => {
-      // const velocity = this.sim.pointer.getPointerVelocity();
+      this.sim.info['pointermove'] = [`${e.clientX}, `, `${e.clientY}`];
       if (this.draggingElement) {
         // e.preventDefault();
         this.draggingElement.dragging.pointerEnd = {
@@ -39,10 +40,10 @@ export class Pointer {
     el.addEventListener('pointerdown', e => {
       // e.preventDefault();
       let target = e.target;
-      while (target && !target.classList.contains('draggable')) {
+      while (target && !target.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
         target = target.parentElement;
       }
-      if (target?.classList.contains('draggable')) {
+      if (target?.classList.contains(DRAGGABLE_ELEMENT_CLASSNAME)) {
         // e.preventDefault();
         this.draggingElement = target;
         this.draggingElement.dragging = {
@@ -120,32 +121,24 @@ export class Pointer {
     this.clearPointerHistory();
     this.updatePointer({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);
-    }
+    this.sim.objects.handlePointerDown({x, y});
   }
 
   handlePointerUp({x, y}) {
-    this.sim.objects.doneCreatingObject();
-    this.sim.objects.deselect();
+    // TODO: Conditional?
+    this.sim.objects.handlePointerUp({x, y});
   }
 
   // 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});
-    // TODO: If e.touches.length > 1, user may be engaging pinch to zoom
+    const {x: vx, y: vy} = this.getPointerVelocity();
 
     // 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,7 +67,6 @@ export class Sim {
 
   // Main loop
   loop(currentTime) {
-    this.overlay.updateDraggable();
     const elapsedTime = currentTime - this.time;
     this.time = currentTime;
     if (this.nextZoom) {
@@ -78,6 +77,7 @@ 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,6 +2,8 @@
 // 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;
@@ -17,7 +19,7 @@ export class Tool {
     div.style.border = '1px #0fb solid';
     div.style.margin = '5px';
     div.style.padding = '5px';
-    div.classList.add('draggable');
+    div.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
   }
 
   frame() {}