added drag start and end events

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

@@ -209,6 +209,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,14 +222,23 @@ export class Doodler {
     this.draggables = this.draggables.filter(d => d.point !== point);
   }
 
-  onClick(e: MouseEvent) {
-    const rect = this._canvas.getBoundingClientRect();
-    const mouseX = e.clientX - rect.left;
-    const mouseY = e.clientY - rect.top;
+  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;
+    }
+  }
 
+  onClick(e: MouseEvent) {
     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;
     }
   }
@@ -236,6 +246,7 @@ export class Doodler {
   offClick(e:MouseEvent){
     for (const d of this.draggables) {
       d.beingDragged = false;
+      d.onDragEnd?.call(null);
     }
   }
 
@@ -299,6 +310,8 @@ type Draggable = {
   style?: IStyle & { shape: 'square' | 'circle' };
   beingDragged?: boolean;
   id: string;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
 }
 
 type uiDrawing = {