Clickables

canvas.ts

@@ -37,6 +37,7 @@ export class Doodler {
   }
 
   private draggables: Draggable[] = [];
+  private clickables: Clickable[] = [];
 
   constructor({
     width,
@@ -222,11 +223,23 @@ 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
+    })
+  }
+
   addDragEvents({
     onDragEnd,
     onDragStart,
     point
-  }: {point: Vector, onDragEnd: () => void, onDragStart: () => void}) {
+  }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) {
     const d = this.draggables.find(d => d.point === point);
     if (d) {
       d.onDragEnd = onDragEnd;
@@ -235,12 +248,19 @@ export class Doodler {
   }
 
   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) {
@@ -314,6 +334,11 @@ type Draggable = {
   onDragEnd?: () => void;
 }
 
+type Clickable = {
+  onClick: () => void;
+  checkBound: (p: Vector) => boolean;
+}
+
 type uiDrawing = {
   circle: () => void;
   square: () => void;