more methods return this

bundle.js

@@ -390,6 +390,7 @@ class Doodler {
     mouseX = 0;
     mouseY = 0;
     registerDraggable(point, radius, style) {
+        if (this.draggables.find((d)=>d.point === point)) return;
         const id = this.addUIElement('circle', point, radius, {
             fillColor: '#5533ff50',
             strokeColor: '#5533ff50'
@@ -409,19 +410,25 @@ class Doodler {
         }
         this.draggables = this.draggables.filter((d)=>d.point !== point);
     }
+    addDragEvents({ onDragEnd , onDragStart , point  }) {
+        const d = this.draggables.find((d)=>d.point === point);
+        if (d) {
+            d.onDragEnd = onDragEnd;
+            d.onDragStart = onDragStart;
+        }
+    }
     onClick(e) {
-        const rect = this._canvas.getBoundingClientRect();
-        e.clientX - rect.left;
-        e.clientY - rect.top;
         for (const d of this.draggables){
             if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
                 d.beingDragged = true;
+                d.onDragStart?.call(null);
             } else d.beingDragged = false;
         }
     }
     offClick(e) {
         for (const d of this.draggables){
             d.beingDragged = false;
+            d.onDragEnd?.call(null);
         }
     }
     uiElements = new Map();

canvas.ts

@@ -37,6 +37,7 @@ export class Doodler {
   }
 
   private draggables: Draggable[] = [];
+  private clickables: Clickable[] = [];
 
   constructor({
     width,
@@ -209,6 +210,7 @@ export class Doodler {
 
 
   registerDraggable(point: Vector, radius: number, style?: IStyle & { shape: 'square' | 'circle' }) {
+    if (this.draggables.find(d => d.point === point)) return;
     const id = this.addUIElement('circle', point, radius, { fillColor: '#5533ff50', strokeColor: '#5533ff50' })
     this.draggables.push({ point, radius, style, id });
   }
@@ -221,21 +223,50 @@ export class Doodler {
     this.draggables = this.draggables.filter(d => d.point !== point);
   }
 
-  onClick(e: MouseEvent) {
+  registerClickable(p1: Vector, p2: Vector, cb: () => void) {
-    const rect = this._canvas.getBoundingClientRect();
+    const top = Math.min(p1.y, p2.y);
-    const mouseX = e.clientX - rect.left;
+    const left = Math.min(p1.x, p2.x);
-    const mouseY = e.clientY - rect.top;
+    const bottom = Math.max(p1.y, p2.y);
+    const right = Math.max(p1.x, p2.x);
 
-    for (const d of this.draggables) {
+    this.clickables.push({
-      if (d.point.dist(new Vector(this.mouseX, this.mouseY)) <= d.radius) {
+      onClick: cb,
-        d.beingDragged = true;
+      checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
-      } else d.beingDragged = false;
+    })
+  }
+
+  addDragEvents({
+    onDragEnd,
+    onDragStart,
+    point
+  }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) {
+    const d = this.draggables.find(d => d.point === point);
+    if (d) {
+      d.onDragEnd = onDragEnd;
+      d.onDragStart = onDragStart;
     }
   }
 
-  offClick(e:MouseEvent){
+  onClick(e: MouseEvent) {
+    const mouse = new Vector(this.mouseX, this.mouseY)
+    for (const d of this.draggables) {
+      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) {
     for (const d of this.draggables) {
       d.beingDragged = false;
+      d.onDragEnd?.call(null);
     }
   }
 
@@ -299,6 +330,13 @@ type Draggable = {
   style?: IStyle & { shape: 'square' | 'circle' };
   beingDragged?: boolean;
   id: string;
+  onDragStart?: () => void;
+  onDragEnd?: () => 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, z: number): Vector;
-  add(x: number, y: number): void;
+  add(x: number, y: number): Vector;
-  add(v: Vector): void;
+  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, z: number): Vector;
-  sub(x: number, y: number): void;
+  sub(x: number, y: number): Vector;
-  sub(v: Vector): void;
+  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));