On Drag event

bundle.js

@@ -59,6 +59,7 @@ class Vector {
             this.y += y ?? 0;
             this.z += z ?? 0;
         }
+        return this;
     }
     sub(v, y, z) {
         if (arguments.length === 1 && typeof v !== 'number') {
@@ -73,6 +74,7 @@ class Vector {
             this.y -= y ?? 0;
             this.z -= z ?? 0;
         }
+        return this;
     }
     mult(v) {
         if (typeof v === 'number') {
@@ -96,6 +98,7 @@ class Vector {
             this.y /= v.y;
             this.z /= v.z;
         }
+        return this;
     }
     rotate(angle) {
         const prev_x = this.x;
@@ -103,6 +106,7 @@ class Vector {
         const s = Math.sin(angle);
         this.x = c * this.x - s * this.y;
         this.y = s * prev_x + c * this.y;
+        return this;
     }
     dist(v) {
         const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
@@ -135,6 +139,7 @@ class Vector {
         this.x = lerp_val(this.x, x, amt);
         this.y = lerp_val(this.y, y, amt);
         this.z = lerp_val(this.z, z, amt);
+        return this;
     }
     normalize() {
         const m = this.mag();
@@ -148,6 +153,7 @@ class Vector {
             this.normalize();
             this.mult(high);
         }
+        return this;
     }
     heading() {
         return -Math.atan2(-this.y, this.x);
@@ -251,6 +257,7 @@ class Doodler {
         return this.ctx.canvas.height;
     }
     draggables = [];
+    clickables = [];
     constructor({ width , height , canvas , bg , framerate  }){
         if (!canvas) {
             canvas = document.createElement('canvas');
@@ -381,6 +388,12 @@ class Doodler {
         cb();
         this.ctx.restore();
     }
+    drawImage(img, at, w, h) {
+        w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
+    }
+    drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
+        this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
+    }
     setStyle(style) {
         const ctx = this.ctx;
         ctx.fillStyle = style?.color || style?.fillColor || 'black';
@@ -410,6 +423,19 @@ class Doodler {
         }
         this.draggables = this.draggables.filter((d)=>d.point !== point);
     }
+    registerClickable(p1, p2, cb) {
+        const top = Math.min(p1.y, p2.y);
+        const left = Math.min(p1.x, p2.x);
+        const bottom = Math.max(p1.y, p2.y);
+        const right = Math.max(p1.x, p2.x);
+        this.clickables.push({
+            onClick: cb,
+            checkBound: (p)=>p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
+        });
+    }
+    unregisterClickable(cb) {
+        this.clickables = this.clickables.filter((c)=>c.onClick !== cb);
+    }
     addDragEvents({ onDragEnd , onDragStart , point  }) {
         const d = this.draggables.find((d)=>d.point === point);
         if (d) {
@@ -418,12 +444,18 @@ class Doodler {
         }
     }
     onClick(e) {
+        const mouse = new Vector(this.mouseX, this.mouseY);
         for (const d of this.draggables){
-            if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
+            if (d.point.dist(mouse) <= d.radius) {
                 d.beingDragged = true;
                 d.onDragStart?.call(null);
             } else d.beingDragged = false;
         }
+        for (const c of this.clickables){
+            if (c.checkBound(mouse)) {
+                c.onClick();
+            }
+        }
     }
     offClick(e) {
         for (const d of this.draggables){
@@ -470,29 +502,31 @@ init({
     width: 400,
     height: 400
 });
-const movingVector = new Vector(100, 300);
-let angleMultiplier = 0;
+new Vector(100, 300);
 const v = new Vector(30, 30);
 doodler.registerDraggable(v, 20);
+const img = new Image();
+img.src = './EngineSprites.png';
+img.hidden;
+document.body.append(img);
+const p = new Vector(200, 200);
 doodler.createLayer(()=>{
-    doodler.line(new Vector(100, 100), new Vector(200, 200));
-    doodler.dot(new Vector(300, 300));
-    doodler.fillCircle(movingVector, 6, {
-        color: 'red'
+    doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
+        color: 'grey',
+        weight: 2
     });
-    doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-    doodler.fillRect(new Vector(200, 250), 30, 10);
-    doodler.drawCenteredSquare(new Vector(200, 200), 40, {
-        color: 'purple',
-        weight: 5
+    doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
+        color: 'grey',
+        weight: 2
     });
-    doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250));
-    let rotatedOrigin = new Vector(200, 200);
-    doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, ()=>{
-        doodler.drawCenteredSquare(rotatedOrigin, 30);
+    doodler.line(p, p.copy().add(0, 12), {
+        color: 'brown',
+        weight: 4
+    });
+    doodler.line(p, p.copy().add(0, -12), {
+        color: 'brown',
+        weight: 4
     });
-    movingVector.set((movingVector.x + 1) % 400, movingVector.y);
-    angleMultiplier += .001;
 });
 document.addEventListener('keyup', (e)=>{
     e.preventDefault();

canvas.ts

@@ -37,6 +37,7 @@ export class Doodler {
   }
 
   private draggables: Draggable[] = [];
+  private clickables: Clickable[] = [];
 
   constructor({
     width,
@@ -74,6 +75,7 @@ export class Doodler {
 
       for (const d of this.draggables.filter(d => d.beingDragged)) {
         d.point.add(e.movementX, e.movementY)
+        d.onDrag && d.onDrag({x: e.movementX, y: e.movementY});
       }
     })
     this.startDrawLoop();
@@ -194,6 +196,15 @@ export class Doodler {
     this.ctx.restore();
   }
 
+  drawImage(img: HTMLImageElement, at: Vector): void;
+  drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
+  drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) {
+    w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
+  }
+  drawSprite(img: HTMLImageElement, spritePos: Vector, sWidth: number, sHeight: number, at: Vector, width: number, height: number) {
+    this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
+  }
+
   setStyle(style?: IStyle) {
     const ctx = this.ctx;
     ctx.fillStyle = style?.color || style?.fillColor || 'black';
@@ -222,28 +233,53 @@ export class Doodler {
     this.draggables = this.draggables.filter(d => d.point !== point);
   }
 
+  registerClickable(p1: Vector, p2: Vector, cb: () => void) {
+    const top = Math.min(p1.y, p2.y);
+    const left = Math.min(p1.x, p2.x);
+    const bottom = Math.max(p1.y, p2.y);
+    const right = Math.max(p1.x, p2.x);
+
+    this.clickables.push({
+      onClick: cb,
+      checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
+    })
+  }
+
+  unregisterClickable(cb: () => void) {
+    this.clickables = this.clickables.filter(c => c.onClick !== cb);
+  }
+
   addDragEvents({
     onDragEnd,
     onDragStart,
+    onDrag,
     point
-  }: {point: Vector, onDragEnd: () => void, onDragStart: () => void}) {
-    const d = this.draggables.find(d =>d.point === point);
+  }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: () => void }) {
+    const d = this.draggables.find(d => d.point === point);
     if (d) {
       d.onDragEnd = onDragEnd;
       d.onDragStart = onDragStart;
+      d.onDrag = onDrag;
     }
   }
 
   onClick(e: MouseEvent) {
+    const mouse = new Vector(this.mouseX, this.mouseY)
     for (const d of this.draggables) {
-      if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
+      if (d.point.dist(mouse) <= d.radius) {
         d.beingDragged = true;
         d.onDragStart?.call(null);
       } else d.beingDragged = false;
     }
+
+    for (const c of this.clickables) {
+      if (c.checkBound(mouse)) {
+        c.onClick();
+      }
+    }
   }
 
-  offClick(e:MouseEvent){
+  offClick(e: MouseEvent) {
     for (const d of this.draggables) {
       d.beingDragged = false;
       d.onDragEnd?.call(null);
@@ -312,6 +348,12 @@ type Draggable = {
   id: string;
   onDragStart?: () => void;
   onDragEnd?: () => void;
+  onDrag?: (dragDistance?: {x: number, y: number}) => void;
+}
+
+type Clickable = {
+  onClick: () => void;
+  checkBound: (p: Vector) => boolean;
 }
 
 type uiDrawing = {

geometry/vector.ts

@@ -56,9 +56,9 @@ export class Vector {
       return v;
     }
   }
-  add(x: number, y: number, z: number): void;
-  add(x: number, y: number): void;
-  add(v: Vector): void;
+  add(x: number, y: number, z: number): Vector;
+  add(x: number, y: number): Vector;
+  add(v: Vector): Vector;
   add(v: Vector | number, y?: number, z?: number) {
     if (arguments.length === 1 && typeof v !== 'number') {
       this.x += v.x;
@@ -73,10 +73,11 @@ export class Vector {
       this.y += y ?? 0;
       this.z += z ?? 0;
     }
+    return this;
   }
-  sub(x: number, y: number, z: number): void;
-  sub(x: number, y: number): void;
-  sub(v: Vector): void;
+  sub(x: number, y: number, z: number): Vector;
+  sub(x: number, y: number): Vector;
+  sub(v: Vector): Vector;
   sub(v: Vector | number, y?: number, z?: number) {
     if (arguments.length === 1 && typeof v !== 'number') {
       this.x -= v.x;
@@ -91,6 +92,7 @@ export class Vector {
       this.y -= y ?? 0;
       this.z -= z ?? 0;
     }
+    return this;
   }
   mult(v: number | Vector) {
     if (typeof v === 'number') {
@@ -114,6 +116,7 @@ export class Vector {
       this.y /= v.y;
       this.z /= v.z;
     }
+    return this;
   }
   rotate(angle: number) {
     const prev_x = this.x;
@@ -121,6 +124,7 @@ export class Vector {
     const s = Math.sin(angle);
     this.x = c * this.x - s * this.y;
     this.y = s * prev_x + c * this.y;
+    return this;
   }
   dist(v: Vector) {
     const dx = this.x - v.x,
@@ -165,6 +169,7 @@ export class Vector {
     this.x = lerp_val(this.x, x, amt!);
     this.y = lerp_val(this.y, y, amt!);
     this.z = lerp_val(this.z, z!, amt!);
+    return this;
   }
   normalize() {
     const m = this.mag();
@@ -178,6 +183,7 @@ export class Vector {
       this.normalize();
       this.mult(high);
     }
+    return this;
   }
   heading() {
     return (-Math.atan2(-this.y, this.x));

main.ts

@@ -9,27 +9,42 @@ initializeDoodler({
 
 const movingVector = new Vector(100, 300);
 let angleMultiplier = 0;
-const v = new Vector(30,30);
+const v = new Vector(30, 30);
 doodler.registerDraggable(v, 20)
+const img = new Image();
+img.src = './EngineSprites.png'
+img.hidden
+document.body.append(img)
+
+const p = new Vector(200, 200);
+
 doodler.createLayer(() => {
 
-  doodler.line(new Vector(100, 100), new Vector(200, 200))
-  doodler.dot(new Vector(300, 300))
-  doodler.fillCircle(movingVector, 6, { color: 'red' });
-  doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-  doodler.fillRect(new Vector(200, 250), 30, 10)
+  // doodler.line(new Vector(100, 100), new Vector(200, 200))
+  // doodler.dot(new Vector(300, 300))
+  // doodler.fillCircle(movingVector, 6, { color: 'red' });
+  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+  // doodler.fillRect(new Vector(200, 250), 30, 10)
 
-  doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
-  doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
+  // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
+  // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
 
-  let rotatedOrigin = new Vector(200,200)
-  doodler.drawRotated(rotatedOrigin, Math.PI*angleMultiplier, () => {
-    doodler.drawCenteredSquare(rotatedOrigin, 30)
-  })
+  // let rotatedOrigin = new Vector(200, 200)
+  // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
+  //   doodler.drawCenteredSquare(rotatedOrigin, 30)
+  //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
+  // })
 
 
-  movingVector.set((movingVector.x + 1) % 400, movingVector.y);
-  angleMultiplier += .001;
+  // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+  // angleMultiplier += .001;
+
+  // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
+
+  doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
+  doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2})
+  doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4})
+  doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})
 });
 
 document.addEventListener('keyup', e => {