draggability and fine-tuning arrows

config.js

@@ -1,16 +1,19 @@
 export const MASS_CREATION_RATE = 0.001;
 export const DISPLAY_OBJECTS_INFO = false;
+export const DISPLAY_CURSOR_INFO = true;
 export const DISPLAY_VELOCITY_VECTORS = true;
 export const POINTER_HISTORY_SIZE = 20;
 export const VELOCITY_VECTOR_SCALE = 0.2;
 export const VELOCITY_VECTOR_COLOR = 'rgb(150, 150, 150)'; // optionally set to 'object color'
 export const VELOCITY_VECTOR_WIDTH = 1.5;
 export const VELOCITY_VECTOR_ARROWHEAD = true;
-export const ARROWHEAD_LENGTH = 10;
+export const ARROWHEAD_LENGTH = 7;
-export const ARROWHEAD_WIDTH = 7;
+export const ARROWHEAD_WIDTH = 5;
 export const MOTION_TIME_SCALE = 0.001;
-export const OFFSCREEN_OBJECT_LINE_SCALE = 5;
+export const OFFSCREEN_OBJECT_LINE_SCALE = 7;
-export const OFFSCREEN_OBJECT_LINE_WIDTH = 1.5;
+export const OFFSCREEN_OBJECT_LINE_WIDTH = 2;
 export const OFFSCREEN_OBJECT_ARROWHEAD_LENGTH = 15;
 export const ZOOM_IN_FACTOR = 2;
 export const ZOOM_OUT_FACTOR = 0.5;
+export const SCALE_MAX = 256;
+export const SCALE_MIN = 1/256;

display.js

@@ -110,14 +110,16 @@ export class Display {
 
       const arrowDirection = Math.atan2(py - cy, px - cx);
       // Length of arrow based on distance (logarithmic scale)
-      const distance = Math.sqrt((x - px)**2, (y - py)**2);
+      const distance = Math.sqrt((x - px)**2, (y - py)**2) * this.scale;
       const arrowLength = Math.log(distance) * OFFSCREEN_OBJECT_LINE_SCALE / this.scale;
       const startAx = px - arrowLength * Math.cos(arrowDirection);
       const startAy = py - arrowLength * Math.sin(arrowDirection);
       this.drawArrow(startAx, startAy, px, py, {
         style: `rgb(${r}, ${g}, ${b})`,
         width: OFFSCREEN_OBJECT_LINE_WIDTH,
-        arrowheadLength: OFFSCREEN_OBJECT_ARROWHEAD_LENGTH
+        arrowheadLength: OFFSCREEN_OBJECT_ARROWHEAD_LENGTH,
+        fill: false,
+        ifShort: 'head',
       });
       
       return;
@@ -136,7 +138,9 @@ export class Display {
     this.drawArrow(x, y, endVx, endVy, {
       style, 
       width: VELOCITY_VECTOR_WIDTH,
-      arrowhead: VELOCITY_VECTOR_ARROWHEAD
+      arrowhead: VELOCITY_VECTOR_ARROWHEAD,
+      fill: false,
+      ifShort: 'head'
     });
 
     // TODO: Draw arrow for acceleration
@@ -148,31 +152,55 @@ export class Display {
     }
   }
 
-  drawArrow(startX, startY, endX, endY, {style, width, arrowhead, arrowheadLength}) {
+  drawArrow(startX, startY, endX, endY, {style, width, arrowhead, arrowheadLength, fill, ifShort}) {
-    arrowhead = arrowhead ?? true;
-    arrowheadLength = arrowheadLength ?? ARROWHEAD_LENGTH;
     const ctx = this.ctx;
     ctx.strokeStyle = style;
     // Keep arrows at normal scale
     ctx.lineWidth = width / this.scale;
+    arrowhead = arrowhead ?? true;
+    arrowheadLength = arrowheadLength ?? ARROWHEAD_LENGTH;
     const scaledArrowheadLength = arrowheadLength / this.scale;
+    ifShort = ifShort ?? 'tail';
     const arrowDirection = Math.atan2(endY - startY, endX - startX);
-    const endAx = arrowhead ? endX - (scaledArrowheadLength - 1) * Math.cos(arrowDirection) : endX;
+    const length =  Math.sqrt((endX - startX)**2 + (endY - startY)**2);
-    const endAy = arrowhead ? endY - (scaledArrowheadLength - 1) * Math.sin(arrowDirection) : endY;
+    let tail = true;
-    ctx.beginPath();
+    if (!length) {
-    ctx.moveTo(startX, startY);
+      return;
-    ctx.lineTo(endAx, endAy);
+    }
-    ctx.stroke();
+    if (length <= scaledArrowheadLength) {
+      switch (ifShort) {
+        case 'head':  {
+          arrowhead = true;
+          tail = false;
+          break;
+        }
+        case 'tail': {
+          arrowhead = false;
+          tail = true;
+          break;
+        }
+      }
+    }
+
+    if (tail) {
+      const endAx = arrowhead ? endX - (scaledArrowheadLength) * Math.cos(arrowDirection) : endX;
+      const endAy = arrowhead ? endY - (scaledArrowheadLength) * Math.sin(arrowDirection) : endY;
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endAx, endAy);
+      ctx.stroke();
+    }
     if (arrowhead) {
-      this.drawArrowHead(endX, endY, arrowDirection, {style, length: arrowheadLength});
+      this.drawArrowHead(endX, endY, arrowDirection, {style, length: arrowheadLength, fill});
     }
   }
 
-  drawArrowHead(x, y, direction, {style, length}) {
+  drawArrowHead(x, y, direction, {style, length, fill}) {
     const arrowheadLength = length ?? ARROWHEAD_LENGTH;
     const arrowheadWidth = arrowheadLength / ARROWHEAD_LENGTH * ARROWHEAD_WIDTH;
     const ctx = this.ctx;
     ctx.fillStyle = style;
+    ctx.strokeStyle = style;
     // To make this simple, draw the arrowhead and then rotate and translate it as needed.
     // Keep arrows at normal scale
     const scaledArrowheadLength = arrowheadLength / this.scale;
@@ -184,7 +212,11 @@ export class Display {
     ctx.lineTo(-scaledArrowheadLength, -scaledArrowheadWidth / 2);
     ctx.lineTo(-scaledArrowheadLength, scaledArrowheadWidth / 2);
     ctx.closePath();
-    ctx.fill();
+    if (fill !== false) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
     ctx.resetTransform();
   }
 }

find

@@ -0,0 +1,2 @@
+#!/bin/env bash
+find . -not -path ".git" -name "*.html" -or -name "*.js" -print0 | xargs -0 grep -n --color "$@"

objects.js

@@ -69,11 +69,13 @@ export class Objects {
       obj.mass += rate * elapsedTime;
     }
 
-    // Update positions. Simple Euler method for now.
+    if (this.sim.playing) {
-    for (let i = 0; i < this.objects.length; i++) {
+      // Update positions. Simple Euler method for now.
-      const obj = this.objects[i];
+      for (let i = 0; i < this.objects.length; i++) {
-      obj.position.x += obj.velocity.x * MOTION_TIME_SCALE;
+        const obj = this.objects[i];
-      obj.position.y += obj.velocity.y * MOTION_TIME_SCALE;
+        obj.position.x += obj.velocity.x * MOTION_TIME_SCALE;
+        obj.position.y += obj.velocity.y * MOTION_TIME_SCALE;
+      }
     }
 
     // Display objects info

overlay.js

@@ -7,12 +7,12 @@ export class Overlay {
     const infoBox = document.createElement('div');
     this.sim.div.appendChild(infoBox);
     this.infoBox = infoBox;
-    infoBox.style.position = 'absolute';
+    infoBox.style.position = 'relative';
     infoBox.style.top = 0;
     infoBox.style.left = 0;
     infoBox.width = 'fit-content';
     infoBox.style.zIndex = 1;
-
+    infoBox.classList.add('draggable');
   }
 
   renderInfo() {
@@ -34,4 +34,22 @@ export class Overlay {
     this.infoBox.appendChild(table);
   }
 
+  // Update positions of draggable items
+  updateDraggable() {
+    const elements = document.querySelectorAll('.draggable');
+    for (let el of elements) {
+      if (!el.dragging) continue; 
+      const {
+        elementStart: {x: x0, y: y0},
+        pointerStart: {x: x1, y: y1}, 
+        pointerEnd: {x: x2, y: y2}
+      } = el.dragging;
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const left = x0 + dx;
+      const top = y0 + dy;
+      el.style.left = `${left}px`;
+      el.style.top = `${top}px`;
+    }
+  }
 }

pointer.js

@@ -2,38 +2,77 @@ import {
   POINTER_HISTORY_SIZE,
   ZOOM_IN_FACTOR,
   ZOOM_OUT_FACTOR,
+  DISPLAY_CURSOR_INFO,
 } from './config.js';
 
+function dispatchEvent(target, eventType, data) {
+  const ev = new CustomEvent(eventType, {detail: data});
+  target.dispatchEvent(ev);
+}
+
 export class Pointer {
   sim = undefined;
 
   pointerHistory = [];
+  draggingElement = undefined;
 
   constructor(sim) {
     this.sim = sim;
 
     // Monitor mouse movements
     const el = window;
-    el.addEventListener('mousemove', e => {
-      // e.preventDefault();
-      this.handlePointerMove(this.sim.screenToSim(e.clientX, e.clientY));
-    });
 
-    // Monitor touch events
+    el.addEventListener('pointermove', e => {
-    el.addEventListener('touchmove', e => {
+      // const velocity = this.sim.pointer.getPointerVelocity();
-      // e.preventDefault();
+      if (this.draggingElement) {
-      const {pageX, pageY} = e.touches[0];
+        // e.preventDefault();
-      this.handlePointerMove(this.sim.screenToSim(pageX, pageY));
+        this.draggingElement.dragging.pointerEnd = {
+          x: e.clientX,
+          y: e.clientY,
+        };
+      } else {
+        const {x, y} = this.sim.screenToSim(e.clientX, e.clientY);
+        this.handlePointerMove({x, y});
+      }
     });
     
     el.addEventListener('pointerdown', e => {
       // e.preventDefault();
-      this.handlePointerDown(this.sim.screenToSim(e.clientX, e.clientY));
+      let target = e.target;
+      while (target && !target.classList.contains('draggable')) {
+        target = target.parentElement;
+      }
+      if (target?.classList.contains('draggable')) {
+        // e.preventDefault();
+        this.draggingElement = target;
+        this.draggingElement.dragging = {
+          elementStart: {
+            x: parseInt(this.draggingElement.style.left),
+            y: parseInt(this.draggingElement.style.top),
+          },
+          pointerStart: {
+            x: e.clientX, 
+            y: e.clientY,
+          },
+          pointerEnd: {
+            x: e.clientX, 
+            y: e.clientY,
+          },
+        };
+      } else {
+        this.handlePointerDown(this.sim.screenToSim(e.clientX, e.clientY));
+      }
     });
 
     el.addEventListener('pointerup', e => {
       // e.preventDefault();
-      this.handlePointerUp(this.sim.screenToSim(e.clientX, e.clientY));
+      if (this.draggingElement) {
+        this.draggingElement.dragging = undefined;
+        this.draggingElement = undefined;
+        this.lastPosition = {x: undefined, y: undefined};
+      } else {
+        this.handlePointerUp(this.sim.screenToSim(e.clientX, e.clientY));
+      }
     });
 
     el.addEventListener('click', e => {
@@ -53,7 +92,7 @@ export class Pointer {
   getPointerVelocity() {
     // Average over pointer history
     if (this.pointerHistory.length < 2) {
-      return {x: 0, y: 0};
+      return {x: 0, y: 0, dt: 1};
     }
     const start = this.pointerHistory[0];
     const end = this.pointerHistory[this.pointerHistory.length - 1];
@@ -61,6 +100,7 @@ export class Pointer {
     return {
       x: (end.x - start.x) / dt,
       y: (end.y - start.y) / dt,
+      dt
     };
   }
 
@@ -98,13 +138,13 @@ export class Pointer {
 
   // Handle cursor (mouse or touch) movement
   handlePointerMove({x, y}) {
+    this.updatePointer({x, y});
     // 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) {
-      this.updatePointer({x, y});
       const {x: vx, y: vy} = this.getPointerVelocity();
       obj.position.x = x;
       obj.position.y = y;

simulator.js

@@ -4,10 +4,10 @@ import { Pointer } from './pointer.js';
 import { Objects } from './objects.js';
 import { Toolbar } from './toolbar.js';
 import { PlayPause } from './tools/play-pause.js';
+import { SCALE_MAX, SCALE_MIN} from './config.js';
 
 export class Sim {
   info = {};
-  frameCount = 0;
   time = undefined;
   nextZoom = undefined;
   playing = true;
@@ -45,6 +45,8 @@ export class Sim {
     // the new view origin should be x, y minus half the new view width and height
     // compute new scale
     this.display.scale = this.display.scale * factor;
+    if (this.display.scale > SCALE_MAX) this.display.scale = SCALE_MAX;
+    if (this.display.scale < SCALE_MIN) this.display.scale = SCALE_MIN;
     // compute coordinates of new view frame
     this.display.viewOrigin.x = x - this.display.width / 2;
     this.display.viewOrigin.y = y - this.display.height / 2;
@@ -65,23 +67,18 @@ export class Sim {
 
   // Main loop
   loop(currentTime) {
-    if (this.playing) {
+    this.overlay.updateDraggable();
-      this.frameCount += 1;
+    const elapsedTime = currentTime - this.time;
-      const elapsedTime = currentTime - this.time;
+    this.time = currentTime;
-      this.time = currentTime;
+    if (this.nextZoom) {
-      if (this.nextZoom) {
+      this.zoom(this.nextZoom);
-        this.zoom(this.nextZoom);
+      this.nextZoom = undefined;
-        this.nextZoom = undefined;
-      }
-      this.display.fillCanvas();
-      this.objects.computeFrame(elapsedTime);
-
-      this.info['scale'] = this.display.scale;
-
-      this.display.drawObjects();
-      this.overlay.renderInfo();
     }
+    this.info['scale'] = this.display.scale;
+    this.objects.computeFrame(elapsedTime);
+    this.display.fillCanvas();
+    this.display.drawObjects();
+    this.overlay.renderInfo();
     requestAnimationFrame(t => this.loop(t));
   }
-
 }

tool.js

@@ -11,9 +11,13 @@ export class Tool {
     this.sim = this.toolbar.sim;
     const div = document.createElement('div');
     this.div = div;
-    div.style.position = 'inline-block';
+    div.style.position = 'relative';
+    div.style.top = 0;
+    div.style.left = 0;
     div.style.border = '1px #0fb solid';
-    div.style.margin = 10;
+    div.style.margin = '5px';
+    div.style.padding = '5px';
+    div.classList.add('draggable');
   }
 
   frame() {}

toolbar.js

@@ -9,7 +9,8 @@ export class Toolbar {
     const div = document.createElement('div');
     this.div = div;
     this.sim.div.appendChild(div);
-    div.style.position = 'absolute';
+    div.style.position = 'relative';
+    div.style.width = 'fit-content';
     div.style.top = 0;
     div.style.left = 0;
     div.style.zIndex = 2;

tools/play-pause.js

@@ -1,32 +1,33 @@
 import { Tool } from '../tool.js';
 
 export class PlayPause extends Tool {
+  playHTML = 'Play';
+  pauseHTML = 'Pause';
+
   constructor(toolbar) {
     super(toolbar);
 
-    const playHTML = 'Play';
-    const pauseHTML = 'Pause';
-
     // For now, use a regular button
     const button = document.createElement('button');
+    button.style.width = '50px';
+    button.style.height = '50px';
     this.div.appendChild(button);
     if (this.playing) {
-      button.innerHTML = pauseHTML;
+      button.innerHTML = this.pauseHTML;
     } else {
-      button.innerHTML = playHTML;
+      button.innerHTML = this.playHTML;
     }
+
     button.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.playing) {
-        button.innerHTML = playHTML;
+        button.innerHTML = this.playHTML;
         this.playing = false;
       } else {
-        button.innerHTML = pauseHTML;
+        button.innerHTML = this.pauseHTML;
         this.playing = true;
       }
     });
-
-    console.log('PlayPause tool constructed ~!~');
   }
 
   get playing() {